디자인 간격과 글자 크기는 그때그때 정하는 게 아니라 미리 만든 표에서 고르는 것이다. 이 블로그는 글자 11단계(12~60px), 간격 12단계(4~128px, 전부 4의 배수)만 쓴다. 선택지를 고정하면 일관성은 자동으로 따라오고, AI에게 디자인을 시킬 때도 지시가 정확해진다.
지난 편에서 시안의 CSS를 테마로 그대로 옮겼다고 했는데, 그 시안의 숫자들이 어떻게 정해졌는지가 이번 이야기입니다. 결론은 단순합니다 — 저는 어떤 간격도 그 자리에서 정하지 않았습니다. 전부 미리 만들어둔 표 — 타입 스케일과 4px 그리드 — 에서 골랐습니다.
왜 눈대중은 실패할까?
혼자 만드는 사이트에서 간격을 감으로 정하면 이런 일이 벌어집니다. 오늘은 제목 아래에 18px을 주고, 내일은 비슷한 자리에 20px을 줍니다. 둘 다 “그럴듯해 보여서”죠. 한 달 뒤 CSS를 열면 14, 15, 18, 20, 22, 25px… 서로 아무 관계없는 값이 수십 개 굴러다닙니다.
문제는 지저분함이 아니라 판단 비용입니다. 컴포넌트 하나 만들 때마다 “여긴 몇 px?”을 새로 고민해야 하고, 고민의 답이 매번 달라서 화면 전체의 리듬이 무너집니다. 사람 눈은 정확한 값은 못 읽어도 리듬이 깨진 건 귀신같이 느낍니다 — “뭔가 엉성한데?”의 정체가 대부분 이겁니다.
처방 — 선택지를 미리 고정한다
해법은 값을 잘 정하는 게 아니라 정할 일 자체를 없애는 것입니다. 두 개의 표를 미리 만듭니다.
① 타입 스케일 — 글자 크기 11단계. 이 블로그가 실제로 쓰는 사다리입니다.
표로 다시 보면 이렇습니다.
| 단계 | 크기 | 주요 역할 |
|---|---|---|
| t-1 | 12px | 라벨, 캡션 |
| t-2 | 13px | 메타 정보 |
| t-3 | 14px | 보조 문장 |
| t-4 | 16px | 본문, 카드 제목 |
| t-5 | 18px | 리드 문단 |
| t-6 | 20px | 소제목 |
| t-7 | 24px | 섹션 제목 |
| t-8 | 30px | 글 제목(모바일 하한) |
| t-9 | 38px | 글 제목 |
| t-10 | 48px | 히어로 |
| t-11 | 60px | 예비 단계 |
단계 사이 간격이 위로 갈수록 벌어지는 게 핵심입니다. 본문 근처(14→16→18px)는 촘촘하게, 제목 쪽(30→38→48px)은 성큼성큼. 작은 글자는 2px 차이도 크게 보이지만 큰 글자는 그 정도로는 위계가 안 생기기 때문입니다.
② 4px 간격 그리드 — 4의 배수 12단계. 여백, 패딩, 요소 사이 거리는 전부 이 중에서 고릅니다.
CSS로는 커스텀 속성(변수) 두 줄이면 끝납니다. 실물 그대로 가져오면:
:root{
/* 타입 스케일 — 이 11개 외의 글자 크기는 없다 */
--t-1:.75rem; --t-2:.8125rem; --t-3:.875rem; --t-4:1rem;
--t-5:1.125rem; --t-6:1.25rem; --t-7:1.5rem; --t-8:1.875rem;
--t-9:2.375rem; --t-10:3rem; --t-11:3.75rem;
/* 4px 간격 그리드 — 여백은 이 12개에서 고른다 */
--s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem;
--s-5:1.5rem; --s-6:2rem; --s-7:2.5rem; --s-8:3rem;
--s-9:4rem; --s-10:5rem; --s-11:6rem; --s-12:8rem;
}
몇 단계면 충분할까?
정답은 없지만 기준은 있습니다 — 역할 수만큼. 이 블로그는 라벨·보조문장·본문·소제목·카드 제목·글 제목·히어로 정도의 역할이 있어서 11단계로 넉넉했고, 간격도 “글자 사이”부터 “섹션 사이”까지 12단계면 남았습니다. 단계가 남아도는 건 괜찮지만 모자라서 중간값을 임시로 만드는 순간 체계가 무너집니다.
같은 원리로 저는 다른 것도 다 선택지를 잘라뒀습니다. 모서리 반경 토큰은 6px, 10px, 999px(완전 원형) 셋뿐이고, 자간도 4단계뿐입니다. 값이 적을수록 화면이 정돈되는 게 아니라, 고민이 사라져서 작업이 빨라지는 게 진짜 이득입니다.
AI에게 시킬 때 진짜 힘이 나온다
이 체계의 최대 수혜자는 사실 사람이 아니라 AI입니다. 눈대중 세계에서는 “여기 간격 좀 넓혀줘”라고 하면 AI가 임의의 값을 새로 만들어냅니다. 토큰 세계에서는 지시가 이렇게 바뀝니다 — “거기 s-6을 s-8로 올려.” 결과를 예측할 수 있고, 어떤 세션에서 작업해도 표 밖의 값이 생기지 않죠.
지난 편에서 “시안 CSS를 테마로 통째로 이식했다”고 했는데, 그게 가능했던 것도 시안이 처음부터 토큰으로 쓰여 있었기 때문입니다. 눈대중 숫자 수십 개였다면 이식이 아니라 번역이 됐을 겁니다.
정리
- 간격·글자 크기는 정하지 말고 골라라 — 표를 먼저 만든다
- 타입 스케일은 위로 갈수록 성큼성큼 — 큰 글자는 큰 차이가 나야 위계가 보인다
- 간격은 4의 배수만 — 어떤 조합을 해도 리듬이 맞는다
- 단계 수는 역할 수만큼 — 모자라면 무너지고, 남는 건 괜찮다
- 반경·자간도 같은 원리로 선택지를 잘라라 — 고민이 사라지는 게 진짜 이득
- AI 협업에서 토큰은 공용어가 된다 — “s-6을 s-8로”는 애매할 수가 없다
다음 편은 이 시안이 실제 파일이 되어 인터넷에 올라가는 과정 — Simply Static 정적 내보내기입니다.
