DIARY PAGE MAKER / PROJECT STORY

내가 나눈 공간이나만의 속지로

‘종이정원’은 최대 3×3 셀을 나누고 병합해 나만의 다이어리 속지를 만들고 PNG로 저장하는 브라우저 도구입니다.

01 / CONTEXT

이 프로젝트를 만든 이유

종이정원은 4:5 다이어리 속지를 브라우저에서 편집하고 PNG로 저장하는 도구입니다. 포트폴리오의 Diary Page Maker가 이 프로젝트입니다.

미리 정한 템플릿을 고르는 데서 더 나아가, 사용자가 실제 종이 위의 공간을 나누고 각 영역의 용도를 정하게 했습니다. 추천 무드에서 시작해 색과 선, 여백, 펀칭과 손그림 효과를 조정할 수 있습니다.

02 / EXPERIENCE

SCENE 01

가로·세로를 각각 1~3칸으로 나누고 영역마다 날짜, 도트와 체크리스트 등을 배치합니다. 경계를 직접 움직여 비율을 바꾸고 드래그한 셀을 병합할 수 있습니다.

SCENE 02

미리보기의 영역을 누르면 해당 영역의 요소를 바꿀 수 있습니다. 페이지 전체의 종이 표현과 각 영역의 선·색·여백을 구분해 설정합니다.

03 / IMPLEMENTATION

01
미리보기와 출력이 같은 렌더 함수 사용
buildPageSvg가 설정을 SVG로 변환합니다. 화면은 그 SVG를 표시하고 PNG 저장은 같은 SVG를 Canvas로 변환해, 서로 다른 렌더 경로에서 생기는 차이를 줄였습니다.
02
셀 집합으로 자유 형태 병합
드래그로 지나간 셀을 집합으로 저장하고 SVG clipPath로 합집합 영역을 그립니다. ㄱ자처럼 직사각형이 아닌 병합도 선택하지 않은 셀을 침범하지 않도록 구성했습니다.
03
손그림 형태와 설정을 재현
손그림 왜곡에 고정 시드를 사용해 미리보기와 출력의 선 형태를 일치시켰습니다. 프리셋은 localStorage에 보관하며 JSON 백업과 구버전 설정 변환, 선택 항목의 일괄 PNG 저장을 지원합니다.

04 / EVIDENCE

추천 무드로 시작해 영역별 요소를 바꾸고, 원하는 설정을 프리셋으로 보관할 수 있습니다. 위 이미지는 실제 편집 화면입니다.

미리보기와 PNG는 buildPageSvg를 공유하며 손그림 표현에는 고정 시드를 사용합니다. 출력 폭은 1200·1600·2000px 중에서 선택할 수 있고, 2000px 폭을 선택하면 4:5 비율에 맞춰 높이는 2500px이 됩니다.

WHAT I LEARNED

사용자가 보고 조작하는 영역과 저장되는 결과가 같은 규칙을 따르게 하는 것이 편집 도구의 핵심이었습니다.