디자인 세트

색상 팔레트

일곱 색 계열을 11단계로 나눈 원색과, 화면이 실제로 쓰는 의미 색입니다. 견본 아래 숫자는 흰 바탕·검은 바탕과의 대비입니다.

의미 색 — 지금 테마의 값

두 테마 대비표

• 화면에는 원색 단계가 아니라 의미 색(--color-*)을 씁니다. 원색 단계는 의미 색을 정할 때만 씁니다.
• 본문 글자는 두 테마 모두 4.5:1, 큰 글자·아이콘·차트는 3:1 이상이어야 합니다. 미달이면 토큰 생성이 실패합니다.
• 색만으로 상태를 알리지 않습니다. 아이콘이나 글자를 함께 둡니다.

라이트·다크·시스템 전환

세 가지 중 하나를 고르면 모든 페이지에 저장되고, 시스템은 기기 설정을 따릅니다.

• 설정 화면처럼 자리가 넉넉하면 세 칸 선택을, 헤더처럼 좁으면 눌러서 도는 버튼을 씁니다.
• 테마가 바뀌면 차트처럼 색을 직접 그리는 컴포넌트가 다시 그리도록 알림을 냅니다.

글자 크기·굵기·행간

본문은 14px, 행간 1.6을 기준으로 하고 제목일수록 행간을 좁힙니다.

• 한 화면의 글자 크기는 네 단계 안쪽으로 씁니다. 위계는 크기보다 굵기와 색(본문·흐림)으로 먼저 만듭니다.
• 숫자를 세로로 맞춰야 하는 표·지표는 고정폭 숫자나 고정폭 글꼴을 씁니다.
• 한글은 낱말 사이에서 줄을 바꾸고, 긴 영문·주소는 넘칠 때 줄을 나눕니다. 목록의 둘째 줄은 첫 글자에 맞춥니다.

간격 단위

모든 여백은 4px 단위 13단계에서 고릅니다. 관계가 가까울수록 좁게 둡니다.

• 라벨↔입력 4~8px, 입력↔입력 12~16px, 묶음↔묶음 24~32px, 영역↔영역 40px 이상을 씁니다.
• 값을 직접 적지 않고 --space-* 변수를 씁니다.

모서리·높이

모서리는 다섯 단계, 높이는 그림자 대신 바탕색 단계로 나타냅니다.

• 영역은 상자가 아니라 바탕색 띠·구분선·여백으로 나눕니다.
• 그림자는 모달·드롭다운·토스트처럼 화면 위에 뜨는 것에만 씁니다.
• 입력·버튼은 md(6px), 칩·배지는 full, 뜨는 패널은 lg(8px)를 씁니다.

아이콘

Lucide 한 벌만 씁니다. 크기는 네 단계, 색은 글자 색을 따릅니다.

• 아이콘만 있는 버튼은 숨김 글자나 aria-label 로 이름을 붙이고, 장식 아이콘은 읽지 않게 둡니다.
• 글자 옆 아이콘은 글자와 세로 중심을 맞추고 간격은 8px입니다.

그리드·중단점

다섯 구간마다 열 수와 바깥 여백이 바뀝니다. 본문은 항상 화면 폭을 다 쓰고, 넓어질수록 열을 늘립니다.

열 그리드 — 지금 화면의 열

자주 쓰는 나눔 — 900px 미만에서는 한 열로 쌓입니다

자동 채움 — 한 칸이 240px 이상이면 열이 하나씩 늘어납니다

• 본문 폭을 고정값으로 묶지 않습니다. 넓은 화면은 열을 늘리거나 자동 채움 그리드로 채우고, 긴 글 문단만 읽기 폭을 제한합니다.
• 목록·견본·썸네일처럼 같은 것이 반복되면 자동 채움(.l-auto)을, 본문과 보조처럼 비율이 정해지면 열 그리드(.l-cols)를 씁니다.
• 중단점은 토큰의 네 값(600·900·1200·1600)만 씁니다. 그 사이 값을 새로 만들지 않습니다.

앱 골격

헤더·사이드바·본문·푸터 네 영역을 상자 없이 구분선과 바탕색 띠로 나눕니다. 지금 보고 있는 이 페이지가 실제 예입니다.

• 영역은 바탕색 단계와 1px 구분선으로만 나눕니다. 영역마다 그림자 상자를 만들지 않습니다.
• 본문에 최대 폭을 주지 않습니다. 넓은 화면의 남는 폭은 열을 늘려 씁니다.
• 헤더 높이는 가장 큰 컨트롤 크기(56px)와 같게 두고, 목차로 이동할 때 그만큼 띄워 제목이 가려지지 않게 합니다.

종류

한 영역의 가장 중요한 동작은 주요, 나머지는 보조·외곽선·고스트로 무게를 낮춥니다. 되돌릴 수 없는 동작만 위험을 씁니다.

• 주요 버튼은 한 영역에 하나만 둡니다. 둘이 필요하면 하나를 보조로 낮춥니다.
• 버튼 글자는 동사로 끝나는 짧은 말(저장, 내보내기)로 쓰고 "확인"처럼 뜻이 넓은 말은 피합니다.
• 색만으로 위험을 알리지 않습니다. 삭제 버튼에는 휴지통 아이콘이나 "삭제" 글자를 함께 둡니다.

크기

다섯 크기는 입력·select 와 같은 높이 토큰을 써서 한 줄에 놓으면 높이가 맞습니다.

• 기본은 md(40px)입니다. 표 행·툴바 안은 sm, 표 안 아주 좁은 자리만 xs, 모바일 화면 아래 주요 동작은 lg·xl 을 씁니다.
• 한 줄에 놓인 버튼·입력·select 는 같은 크기를 고릅니다. 크기를 섞어 높이가 달라지지 않게 합니다.
• 모바일 폼의 마지막 버튼은 가득 채움으로 손가락이 닿기 쉽게 둡니다.

상태

기본·올림·포커스·누름·비활성·로딩을 종류마다 나란히 둡니다. 포커스는 키보드로 옮겼을 때만 링을 그립니다.

• 로딩 중에는 버튼 폭을 유지한 채 아이콘 자리에 회전 표시를 두고, 다시 누를 수 없게 막습니다(aria-busy·aria-disabled).
• 비활성은 왜 못 누르는지 가까이에 적을 수 있을 때만 씁니다. 이유를 보여 줄 수 없으면 눌렀을 때 안내합니다.
• 움직임 줄이기 설정을 켠 사용자에게는 회전 표시를 멈춥니다.

아이콘 버튼

글자 없이 아이콘만 둔 정사각형 버튼입니다. 화면 읽기 프로그램을 위해 이름(aria-label)을 꼭 붙입니다.

• 뜻이 널리 알려진 아이콘(닫기·더 보기·설정·삭제)만 글자 없이 씁니다. 헷갈리면 아이콘 + 글자 버튼을 씁니다.
• 폭은 높이와 같고, 아이콘은 크기 토큰에 맞춰 커집니다. 닫기·보내기처럼 홀로 떠 있는 버튼만 둥근 모양을 씁니다.

버튼 묶음

관련된 동작은 테두리를 하나로 겹쳐 한 덩어리로 붙이고, 폼 끝의 확인·취소처럼 성격이 다른 동작은 띄워서 둡니다.

• 붙인 묶음은 같은 종류·같은 크기만 모으고, 맞닿은 테두리는 한 줄로 겹치며 바깥 끝만 둥급니다.
• 키보드 포커스는 묶음 전체를 링으로 감싸고, 지금 칸은 안쪽 링으로 한 번 더 알려 줍니다.
• 폼 끝 동작은 오른쪽 끝에 주요 버튼을 두고 그 왼쪽으로 무게가 낮은 순서로 놓습니다. 모바일에서는 주요 버튼이 맨 위로 가는 세로 묶음이 됩니다.

분할 버튼

자주 쓰는 동작은 바로 누르고, 비슷한 다른 동작은 오른쪽 화살표로 여는 메뉴에서 고릅니다.

• 왼쪽은 늘 같은 기본 동작이고, 메뉴에서 고른 동작으로 바뀌지 않습니다. 메뉴는 기본 동작과 같은 성격의 2~5개만 담습니다.
• 화살표 버튼은 아래 방향키로도 메뉴를 열고, 메뉴 안에서는 위아래 방향키로 옮기며 Esc 로 닫으면 화살표 버튼으로 돌아갑니다.

토글 버튼

같은 이름을 유지한 채 선택을 켜고 끕니다. 색과 선택 표시를 함께 써서 상태를 전합니다.

크기 · xs / sm / md / lg / xl

상태 · 기본 / 올림 / 포커스 / 누름 / 비활성 / 로딩

• Tab 으로 버튼 사이를 옮기고 Enter·Space 로 선택합니다. 한 개 선택 묶음은 현재 선택을 다시 눌러도 선택을 유지합니다.
• 이름은 선택 전후 같게 유지하고 눌림 상태를 화면 읽기 프로그램에 전합니다. 즉시 켜고 끄는 설정은 스위치, 폼의 제출값은 체크박스·라디오를 씁니다.
• 비활성·로딩 중에는 선택을 바꾸지 않습니다. 오류는 버튼 색만 바꾸지 말고 동작 가까이에 원인을 적습니다.

모바일 플로팅 버튼

화면에서 가장 중요한 생성 동작 하나를 오른쪽 아래에 둡니다. 아래 예시는 배치 범위 안에서만 떠 있습니다.

크기 · 작게 40 / 기본 56 / 크게 80px

상태 · 기본 / 올림 / 포커스 / 누름 / 비활성 / 로딩

• 한 화면에 한 개만 배치하고 삭제·취소에는 쓰지 않습니다. 기본 56px 이상을 권장하며 40px 형은 포인터가 정밀한 화면에 씁니다.
• 화면 고정형은 안전 영역 안쪽으로 띄우고 본문 끝에 버튼 높이만큼 여백을 둡니다. 하단 내비게이션·키보드·본문 동작을 가리면 일반 버튼으로 옮깁니다.
• 이동은 링크, 실행은 버튼을 씁니다. 아이콘만 보이면 접근 가능한 이름을 주고 로딩 중에는 중복 실행을 막습니다.