타이포·색·CSS 변수로 디자인 토큰 잡기

요약: 글자 크기·행간·색을 CSS 변수로 이름 붙여 두고, 컴포넌트는 그 이름만 참조하여 화면을 일관되게 만든다.

---

언제 토큰을 만드는가

페이지마다 font-size: 15px, #333, margin: 13px가 섞이면 다음 화면을 그릴 때마다 값이 흔들린다. 반복되는 값에 이름을 붙인 것이 디자인 토큰이다.

CSS 변수(커스텀 프로퍼티)로 토큰을 두면 테마 전환과 간격 통일이 한곳 수정으로 끝난다. 컴포넌트 파일에 raw hex를 직접 쓰지 않는다.

---

본문이 읽히는 타이포

본문은 16px 전후(1rem)에서 시작한다. 행간은 1.5 전후이다. 줄이 너무 길면 눈이 줄을 잃는다. 한 줄은 대략 45–75자가 읽기 쉽다.

:root {
  --font-sans: "Pretendard", system-ui, sans-serif;
  --text-body: 1rem;
  --text-sm: 0.875rem;
  --text-lg: 1.25rem;
  --leading: 1.6;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading);
}

.lead {
  font-size: var(--text-lg);
  max-width: 40rem;
}

제목 단계를 너무 많이 두지 않는다. h1–h3 정도로 시작하고, 같은 역할이면 같은 크기를 쓴다. 본문보다 작은 글자는 캡션·보조 설명에만 쓴다.

시스템 폰트 스택을 뒤에 두면 웹폰트 로드 전에도 글자가 보인다. "Pretendard"만 단독으로 두지 않는다.

---

색은 대비가 역할이다

배경과 본문 글자의 밝기 차이가 커야 읽힌다. WCAG(웹 콘텐츠 접근성 지침) AA를 목표로 하면 본문은 대비율 4.5:1 전후가 필요하다. 브라우저 확장이나 개발자 도구로 한 번 잰다.

브랜드 초록을 본문 색으로 쓰지 않는다. 브랜드 색은 링크·버튼 같은 강조에 둔다. 본문은 거의 검정에 가까운 중립색이다.

성공·오류를 색만으로 알리지 않는다. 아이콘이나 “저장됨”, “필수 항목” 텍스트를 같이 둔다. 색각 차이와 흑백 인쇄에서도 의미가 남아야 한다.

:root {
  --color-bg: #f7f7f5;
  --color-text: #1a1a1a;
  --color-muted: #5c5c5c;
  --color-accent: #0b6e4f;
  --color-danger: #b42318;
}

.button-primary {
  background: var(--color-accent);
  color: #fff;
}

.error {
  color: var(--color-danger);
}

.error 옆에는 반드시 문구가 있다. 빨간 테두리만으로 끝내지 않는다.

---

변수로 테마를 바꾼다

:root에 토큰을 모은다. 다크 모드는 같은 이름에 값만 바꾼다. 컴포넌트는 var(--color-bg)만 보면 된다.

:root {
  --color-bg: #f7f7f5;
  --color-text: #1a1a1a;
  --color-accent: #0b6e4f;
  --space-2: 0.5rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --radius: 8px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #121212;
    --color-text: #f2f2f2;
  }
}

body {
  background: var(--color-bg);
  color: var(--color-text);
}

.card {
  padding: var(--space-4);
  border-radius: var(--radius);
}

컴포넌트에 #121212를 다시 적으면 다크 모드가 빠지기 쉽다. 색이 필요하면 토큰을 추가하고 이름만 참조한다.

인라인 스타일이나 유틸 클래스에 hex를 흩뿌리는 것도 같은 문제이다. 토큰 이름과 유틸 이름을 대응시킨다.

---

간격도 스케일로 제한한다

4 / 8 / 12 / 16 / 24 / 32(px)처럼 쓸 수 있는 칸을 정해 둔다. --space-2, --space-4가 그 칸이다.

임의 13px, 17px가 늘수록 카드마다 숨이 달라 보인다. 새 간격이 필요하면 스케일에 단계를 추가할지 먼저 정한다.

---

흔한 실수

• 본문 색을 브랜드 색으로 둔다. 본문은 중립, 강조만 브랜드이다.
• 버튼마다 #0b6e4f를 직접 쓴다. --color-accent로 올린다.
• 제목 크기를 페이지마다 다르게 잡는다. --text-lg 같은 단계를 재사용한다.
• 다크 모드에서 배경만 바꾸고 테두리·muted 텍스트를 그대로 둔다. 같이 쓰는 토큰도 덮는다.
• 오류를 빨간 테두리만으로 표시한다. 텍스트를 입력 근처에 둔다.

---

정리

한 페이지를 예쁘게 만드는 값보다, 다음 페이지가 같은 이름을 쓰게 하는 값이 유지비용을 낮춘다. 글자·색·간격에 이름을 붙이고 컴포넌트는 그 이름만 참조하면 된다.

---

연습

1. :root에 본문 색·배경·강조색·행간을 변수로 옮기고, body와 버튼에서 hex를 제거한다.
2. prefers-color-scheme: dark에서 배경과 본문 색만 바꿔 카드가 따라오는지 확인한다.
3. 카드 padding을 13px 대신 --space-4로 바꾸고, 다른 카드도 같은 변수를 쓰게 한다.