시안을 받자마자 에디터를 여는 사람이 많다. 나도 예전엔 그랬다. 상단부터 그리기 시작해서 아래로 내려가는 방식. 빠른 것 같지만 결국 중간에 갈아엎는다. 지금은 코드를 치기 전에 시안을 먼저 읽는 시간을 반드시 갖는다. 순서는 네 단계다.

1. 영역 분해 — 박스부터 그린다

피그마 위에 프레임 단위로 큰 박스를 그린다. 헤더, 히어로, 콘텐츠 그리드, 푸터. 이 단계에서 중요한 건 디테일이 아니라 레이아웃의 뼈대다. 여기서 스크롤 방향, 고정 요소, 반응형에서 무너질 지점이 대략 보인다.

디자인을 해본 사람의 이점이 여기서 나온다. 디자이너가 왜 이 간격을 줬는지, 이 정렬이 의도인지 우연인지 구분이 된다. 우연이면 물어보고, 의도면 코드에 그 의도를 남긴다.

2. 재사용 단위 식별

박스를 그렸으면 같은 패턴이 몇 번 반복되는지 센다. 카드가 세 군데서 쓰이는데 미묘하게 다르다면, 그게 variant인지 별개 컴포넌트인지 여기서 결정한다. 내 기준은 단순하다.

• 구조(마크업)가 같고 스타일만 다르다 → variant (props로 분기)
• 구조 자체가 다르다 → 별개 컴포넌트

이 판단을 코딩 중에 하면 늦다. 이미 짜놓은 코드가 아까워서 억지로 props를 욱여넣게 된다.

3. 시맨틱 구조 설계

컴포넌트 단위가 정해지면 마크업을 머릿속으로 먼저 짠다. div를 치기 전에 자문한다. 이건 목록인가(ul), 독립 콘텐츠인가(article), 보조 영역인가(aside). 카드 하나를 예로 들면 이런 식이다.

<li className={css.card}>
  <figure className={css.card_thumb}>
    <Image src={thumb} alt={title} fill />
  </figure>
  <h3 className={css.card_title}>{title}</h3>
  <footer className={css.card_meta}>
    <time dateTime={createdAt}>{formatDate(createdAt)}</time>
  </footer>
</li>

퍼블리셔 시절 몸에 밴 습관인데, 시맨틱 구조를 먼저 잡으면 스타일링이 오히려 빨라진다. 선택자가 명확해지기 때문이다.

4. 스타일 토큰 매핑

마지막으로 시안의 색·간격·타이포를 프로젝트 토큰에 대응시킨다. 피그마의 #B5B5B5를 그대로 쓰지 않고 --color-muted에 매핑한다. 간격도 마찬가지다. 시안이 23px이면 디자이너에게 24px로 가도 되는지 확인한다. 대부분 "그게 원래 의도였다"는 답이 돌아온다.

:root {
  --color-bg: #0a0a0a;
  --color-fg: #ffffff;
  --color-muted: #b5b5b5;
  --color-accent: #f87171;
}

토큰 매핑을 건너뛰면 나중에 다크모드나 리브랜딩에서 지옥을 본다. 하드코딩된 헥사값을 전수조사하는 일은 한 번이면 충분하다.

정리

네 단계를 거치는 데 페이지당 30분쯤 걸린다. 이 30분이 코딩 중 갈아엎는 반나절을 아껴준다. 디자인을 아는 사람이 컴포넌트를 나누면 다른 점은 결국 하나다. 시안을 결과물이 아니라 의도의 기록으로 읽는다는 것.