canvas-builder

배경

Firstage는 쌓인 기록을 포토북과 인쇄물로 만드는 것을 사업의 중심에 둡니다. 같은 문서를 웹 매거진으로도 보여 줘야 해서, 요구가 정반대인 인쇄와 웹을 한 문서 모델로 다룰 편집 엔진이 필요했습니다. 디자인을 배우지 않은 사람이 편집해도 지면이 무너지지 않아야 한다는 조건도 있었습니다. 처음에는 서비스 앱 안의 기능이었고, 2026년 5월에 제가 엔진을 별도 패키지로 분리했습니다.

결정과 구현

• 포토북 인쇄와 웹 매거진은 같은 문서 모델을 읽고, 렌더러만 매체에 맞게 나눴습니다. 인쇄 출력은 편집 화면과 같은 Konva 캔버스로 만들고, 매거진은 스크롤해 읽는 웹 화면으로 그립니다.
• 패키지는 Zod 스키마로 정의한 문서 모델, React 없이 상태와 명령, 플러그인을 다루는 코어, React와 Konva로 만든 편집 UI의 세 층입니다. 서버의 렌더링 서비스도 React 없이 같은 모델과 코어를 씁니다.
• 인쇄용 PDF는 서버의 헤드리스 브라우저에서 만듭니다. 외부 이미지는 CORS 문제가 생기지 않도록 미리 데이터로 바꿔 넣고, 색은 편집기와 웹에서 sRGB로 두었다가 인쇄 출력에서만 CMYK로 바꿉니다.
• 템플릿이 배치를 잡아 주어, 디자인을 배우지 않은 사람이 편집해도 지면 구성이 유지되게 했습니다.
• AI는 계획과 편집 의도를 구조화해 돌려주고, 좌표, 사진 배치, 도련, DPI 판정은 결정론 엔진이 맡습니다. 제품 규칙 검사는 모든 변경이 지나는 공통 커밋 경로에 두어, AI가 제안한 편집 연산도 직접 편집과 같은 검사를 거치고 통과하지 못하면 거절 코드와 함께 돌아옵니다.

현재 상태

Firstage의 Journey 앱 포토북 편집기와 서버의 인쇄용 PDF 렌더링이 이 엔진을 씁니다. 영상 비율의 시간축 제품을 올려 본 Lapse 실험도 이 엔진 위에서 했습니다. 실제 사진을 실기기에서 다룰 때의 성능 측정과 인쇄소와 함께하는 실물 출력 검수가 남아 있어, 인쇄 주문은 아직 열지 않았습니다.