English

디자인 가이드

이 사이트가 실제로 지키는 규칙입니다. 값은 전부 assets/style.css의 토큰과 같고, 아래 예시는 그 토큰을 그대로 쓴 실물입니다.

원칙

01

고르는 곳은 카드, 읽는 곳은 괘선

선택지를 고르는 영역(분류·깊게 보기)은 카드로 만들어 누를 수 있어 보이게 합니다. 연속해서 읽는 영역(용어 본문)은 카드를 쓰지 않고 괘선과 여백으로만 구획합니다. 211개 용어를 전부 박스에 담으면 읽는 흐름이 계속 끊깁니다.

02

면보다 선

그림자로 층을 만들지 않고 1px 괘선으로 구조를 잡습니다. 그림자는 실제로 떠 있는 것(모달·드롭다운·토스트)에만 씁니다.

03

위계는 크기 대비로

중요한 것은 확실히 크게, 나머지는 과감히 작게. 전부 비슷한 크기로 두면 무엇을 먼저 봐야 할지 알 수 없습니다.

04

색은 아껴서

지면과 잉크, 그리고 포인트 한 색. 나머지 색(경고·오류·성공)은 내용이 그 의미를 가질 때만 씁니다. 장식으로 쓰지 않습니다.

05

스케일 밖의 값은 쓰지 않는다

글자 크기 8단계, 여백 8단계, 모서리 5단계. 13px이 필요해 보이면 12px이나 13.5px 중에 고릅니다.

타입 스케일

8단계. 이 밖의 크기는 쓰지 않습니다.

다람쥐 헌 쳇바퀴에 타고파 Ag
--fs-display30 → 52px홈 히어로 제목
다람쥐 헌 쳇바퀴에 타고파 Ag
--fs-h125 → 32px페이지 제목
다람쥐 헌 쳇바퀴에 타고파 Ag
--fs-h222px용어명 · 단계 제목
다람쥐 헌 쳇바퀴에 타고파 Ag
--fs-lead17px정의문 · 리드문 · 카드 제목
다람쥐 헌 쳇바퀴에 타고파 Ag
--fs-body15px본문
다람쥐 헌 쳇바퀴에 타고파 Ag
--fs-sm13.5px보조 설명
다람쥐 헌 쳇바퀴에 타고파 Ag
--fs-xs12px라벨 · 캡션
다람쥐 헌 쳇바퀴에 타고파 Ag
--fs-2xs10.5px배지 · 미세 라벨

행간

토큰값쓰는 곳
--lh-tight1.25제목
--lh-snug1.5짧은 문장 · 라벨
--lh-body1.8본문
--lh-loose1.9리드문

여백

8pt 기반. 4는 미세 조정용입니다.

--sp-14px
--sp-28px
--sp-312px
--sp-416px
--sp-524px
--sp-632px
--sp-748px
--sp-864px

색

테마를 바꾸면 아래 견본도 함께 바뀝니다 — 상단 스위치로 확인해보세요.

지면

--bg페이지 바탕
--bg-elev카드 · 떠 있는 면
--bg-sunken데모 무대처럼 가라앉은 면
--border기본 괘선
--border-strong입력칸 · 강조 테두리

잉크

--text제목 · 본문 강조
--text-sub본문
--text-dim보조 · 캡션 (대비 4.5:1 확보)

포인트

--accent주요 버튼 · 활성 상태
--accent-text링크 · 액센트 글자
--accent-soft연한 강조 배경

의미색

--success성공 · 요청 문구 블록
--warn주의 · 헷갈리는 지점
--danger오류 · 되돌릴 수 없는 행동

모서리

--r-sm3px배지 · 칩 · 작은 라벨
--radius-sm4px버튼 · 입력칸
--r-md6px카드 · 박스
--r-lg10px큰 카드 · 바텀시트
--r-full999px완전히 둥근 것

컴포넌트

이 사이트에서 쓰는 요소들. 전부 위 토큰으로만 만들어졌습니다.

버튼

한 화면에 프라이머리는 하나. 위험한 행동은 빨강으로 구분합니다.

배지 · 칩 · 태그

12 태그

배지는 보여주기만, 칩은 누를 수 있음, 태그는 분류 표시.

상태 6종

기본
호버
포커스
눌림
선택됨
비활성

컴포넌트를 만들 때마다 이 여섯 가지를 정의합니다.

알림

✓성공 — 저장되었습니다
⚠주의 — 곧 만료됩니다
✕오류 — 저장하지 못했습니다

색만으로 구분하지 않고 아이콘과 글자를 함께 씁니다.

입력

헬퍼 텍스트 — 규칙을 미리 알려줍니다
이메일 형식이 올바르지 않습니다

이럴 땐 이렇게

카드로 만들까, 괘선으로 나눌까?

고르는 곳이면 카드(분류 목록, 깊게 보기 목록). 읽는 곳이면 괘선(용어 본문). 화면 예시면 박스(데모 — 경계 자체가 "여기부터 예시"라는 의미를 가짐).

그림자를 써도 될까?

실제로 떠 있는 것에만 — 모달·드롭다운·토스트·팝오버. 카드나 섹션에는 쓰지 않고 괘선으로 대신합니다.

버튼은 몇 개까지?

한 화면에 채운 버튼(프라이머리)은 하나. 나머지는 테두리(세컨더리)나 글자만(고스트). 위험한 행동은 빨강.

배지는 언제?

개수나 상태를 보여주기만 할 때. 누를 수 있으면 배지가 아니라 칩입니다.

모서리를 얼마나 둥글게?

작을수록 덜 둥글게 — 배지 3px, 버튼 4px, 카드 6px, 큰 카드 10px. 박스 안에 박스가 있으면 안쪽을 한 단계 작게.

아이콘은 어떻게?

이모지를 쓰지 않습니다. 기기·OS마다 모양이 달라지고 브랜드 톤과 어긋납니다. data/icons.js의 선 아이콘 세트를 쓰고, 없으면 같은 규격(24×24 그리드, 선 굵기 1.75, currentColor)으로 새로 그립니다. 실제 이미지·일러스트가 필요하면 별도로 제작해 넣습니다.

상태는 어디까지 정의?

기본 · 호버 · 포커스 · 눌림 · 선택됨 · 비활성. 포커스 링은 지우지 않습니다(:focus-visible로 키보드일 때만 표시).

반응형

구간폭규칙
모바일~ 767px카드 1열 · 헤더 메뉴 축약 · 좌우 여백 15px
태블릿768 ~ 1023px카드 2열
데스크톱1024px ~카드 2~3열 · 본문 최대 940px

접근성 기준