플러스프로젝트 배경
1) 예상 리스크 및 대응 계획 - Canvas 레이어 분리와 % 좌표 직렬화로 다양한 해상도에서 텍스트 박스 위치 정확성 유지 구조 설계 필요 - Debounce + 낙관적 업데이트로 실시간 자동 저장과 동시 편집 충돌 방지 로직 설계 필요 - DeepL API 단락별 요청 큐잉 및 네트워크 오류 시 지수 백오프 재시도 처리 구조 설계 필요 - Canvas 텍스트 렌더링 시 언어별 폰트 페밀리와 글자
프로젝트 성과
이미지·텍스트 완전 분리 아키텍처 구현
Fabric.js Canvas 레이어 그룹으로 이미지·번역 텍스트를 독립 관리, % 좌표 직렬화로 해상도 무관 정확 렌더링 구조 설계
DeepL API 프록시 + 캐싱 파이프라인 설계
단락별 번역 큐잉, 지수 백오프 재시도, Redis 캐싱으로 중복 API 호출 최소화 번역 자동화 파이프라인 구현
Debounce 기반 실시간 자동 저장 구현
500ms Debounce + 낙관적 업데이트 패턴으로 편집 중 저장 요청 최소화, 버전 타임스탬프 기반 충돌 감지 로직 설계
언어 전환 경량 뷰어 구조 설계
이미지·텍스트를 별도 엔드포인트로 분리 서빙, 언어 전환 시 이미지 재로드 없이 텍스트 JSON만 교체하는 렌더링 파이프라인 구현
핵심 기능
작가 대시보드
작가가 등록한 웹툰·소설 작품을 한눈에 관리하는 메인 대시보드를 구현합니다. 번역 진행률, 언어별 상태, 최근 편집 이력을 카드 형태로 시각화하여 작업 우선순위를 빠르게 파악할 수 있도록 설계합니다
진행 단계
데이터 모델 및 API 서버 구축
2026.04
작품·페이지·번역 텍스트 분리 스키마 설계, Prisma ORM 마이그레이션, Express REST API 구현
프로젝트 상세
1) 포트폴리오 소개 Canvas 기반 웹툰 이미지 위에 번역 텍스트 레이어를 오버레이하는 듀얼 에디터와 소설 단락 번역 에디터를 구현합니다. DeepL API 자동 번역 연동, 실시간 Debounce 저장, 이미지·텍스트 완전 분리 아키텍처를 설계하여 글로벌 웹툰·소설 번역 워크플로우를 자동화합니다. 2) 작업 범위 - 작가 대시보드: 작가가 등록한 웹툰·소설 작품을 한눈에 관리하는 메인 대시보드를
