위클리픽 — 디자인에서 코드까지

문제

혼자 만드는 화면이 열 개를 넘어가면, 시안을 보면서 코드를 쓰는 방식은 무너진다. 3번 화면의 카드 여백과 9번 화면의 카드 여백이 4px 다르고, 그 차이를 나중에 발견해도 어디를 기준으로 맞출지 알 수 없다.

시안은 "이 화면이 이렇게 생겼다"는 결과만 담고 "왜 이 값인가"는 담지 않는다. 규격이 사람 머릿속에만 있으면 화면 수에 비례해 흔들린다.

해결

시안과 코드 사이에 문서를 하나 넣었다. 순서는 시안 → 규정 문서(md) → 코드다.

규정 문서에는 토큰·타이포·간격·컴포넌트 규격을 숫자로 적었다. 그다음부터 코드를 쓸 때는 시안을 다시 보지 않고 문서만 봤다.

weeklypick-rules.md
├ 1 뷰포트    430px 기준 · 1024 브레이크포인트 1개
├ 2 컬러      무채색 5토큰 + 배지 3 (그 외 색 금지)
├ 3 타이포    세리프 헤드라인 / 산세리프 본문 17-1.7 / 메타 12~13
├ 4 간격      8px 배수 · 섹션 64 · 카드 내부 16 · 라운드 8
└ 5 컴포넌트  버튼 48/40 · 터치 영역 최소 44

문서를 먼저 쓰니 결정을 미룰 수 없었다. "색은 전시 이미지가 낸다, UI는 무채색으로 물러난다"는 한 줄을 규정에 넣는 순간, 12개 화면에서 색을 쓰고 싶은 유혹이 전부 정리됐다.

범위를 자르는 것도 문서에 적었다. 실제 전시 데이터, 공식 이미지, PC 전용 레이아웃, 에디터 관리 화면을 뺐다. 뺀 항목마다 사유를 한 줄씩 붙였다 — 나중에 "왜 안 했지"를 다시 논의하지 않기 위해서다.

결과

12화면

구현한 모바일 웹 화면

3종

작성한 기준 문서 (기획 · 규정 · 화면상세)

5개

전체 컬러 토큰 (무채색 + 배지 3)

• 12개 화면 구현 — 이번 호 홈 · 전시 탐색 · 전시 상세 · 큐레이션 기사 · 저장 · 내 주말 · 후기 피드/상세/작성 · 지역별 · 아카이브
• 기준 문서 3종 — 기획(v2.0) · 추가 규정(v0.2) · 화면상세
• 컬러 토큰 5개로 12화면 전체 유지, 배지 3색 외 유채색 없음
• 확정하지 못한 항목은 [기획 가설]로 표시해 남김 — 추측을 확정처럼 적지 않기 위해

배운 것

문서를 쓰는 시간은 손해처럼 느껴지는데, 화면 수가 늘면 그 시간이 회수된다. 정확히는 12개 화면을 만드는 시간이 아니라, 12개 화면을 서로 맞추는 시간이 줄었다.

이 순서는 이 포트폴리오 사이트를 만들 때도 그대로 썼다. 규정 문서를 먼저 확정하고, 화면상세를 쓰고, 그다음 코드를 썼다.