FOUNDATIONS
디자인 토큰
간격·모서리·글자·반응형·모션의 공통 기준과 토큰을 선택하는 방법입니다.
간격
가까운 항목은 좁게, 서로 다른 정보 묶음은 넓게 배치합니다. 직접 구성하는 화면에는 먼저 용도에 맞는 역할 토큰을 고르세요. 역할 토큰은 아래 숫자 스케일을 가리킵니다.
| 역할 토큰 | 값 | 용도 |
|---|---|---|
space.inline.xs | 4px | 아이콘과 글자처럼 한 요소 안의 붙은 부분 |
space.inline.sm | 8px | 나란한 관련 요소 · 버튼과 버튼 |
space.stack.sm | 8px | 라벨과 입력칸처럼 위아래로 붙은 요소 |
space.stack.md | 16px | 같은 묶음의 반복 항목 사이 |
space.inset.md | 16px | 카드·패널 안쪽 여백 |
space.stack.lg | 24px | 서로 다른 정보 묶음 사이 |
space.section.sm | 32px | 화면의 큰 구획 사이 |
두 블록 사이의 색칠된 영역이 실제 간격입니다. 모든 견본은 Web의 CSS px 기준이며 Native에서는 같은 수치를 논리 단위로 씁니다.
- 4px
dimension.value4 - 8px
dimension.value8 - 12px
dimension.value12 - 16px
dimension.value16 - 20px
dimension.value20 - 24px
dimension.value24 - 32px
dimension.value32
미세 조정과 큰 영역에 쓰는 간격
2·3·6·10·14px는 작은 요소 사이를 미세하게 맞출 때만 씁니다. 28px와 40px 이상은 큰 영역을 구분할 때 씁니다.
- 2px
dimension.value2 - 3px
dimension.value3 - 6px
dimension.value6 - 10px
dimension.value10 - 14px
dimension.value14 - 28px
dimension.value28 - 40px
dimension.value40 - 48px
dimension.value48 - 56px
dimension.value56 - 64px
dimension.value64 - 80px
dimension.value80 - 96px
dimension.value96
모서리
모서리는 요소의 역할과 크기에 따라 정해집니다. 컨트롤은 크기가 커질수록 모서리도 커지고(shape.control), 카드처럼 큰 면은 더 둥글게(shape.container), 배지처럼 작은 요소는 원형(shape.pill)을 씁니다. KJUN 컴포넌트는 크기에 맞는 모서리를 스스로 적용합니다.
전체 모서리 스케일
직접 만드는 요소에는 위 역할과 같은 값을 쓰세요. radius9999는 짧은 변의 절반까지 둥글게 만들어 원형과 알약 형태를 모두 표현합니다.
- 0px
radius0 - 4px
radius4 - 6px
radius6 - 8px
radius8 - 10px
radius10 - 12px
radius12 - 14px
radius14 - 16px
radius16 - 20px
radius20 - 원형
radius9999
컴포넌트 치수
Button과 Input은 같은 크기 이름에서 같은 높이와 모서리를 씁니다. 같은 줄에 놓는 컨트롤은 같은 size를 선택하세요.
| 항목 | xs | sm | md | lg | xl |
|---|---|---|---|---|---|
| 높이 | 24 | 32 | 40 | 48 | 56 |
| 모서리 | 8 | 10 | 12 | 14 | 16 |
| Button 좌우 여백 | 8 | 12 | 16 | 20 | 24 |
| Button 아이콘 쪽 여백 | 6 | 8 | 12 | 16 | 20 |
| Button 최소 너비 | 40 | 56 | 64 | 80 | 96 |
| Button 아이콘·라벨 간격 | 4 | 4 | 4 | 6 | 6 |
| Input 좌우 여백 | — | 12 | 16 | 20 | — |
| Button 글자 | 12 | 14 | 14 | 16 | 16 |
| Input 글자 | — | 16 | 16 | 16 | — |
| 아이콘 | 14 | 16 | 16 | 18 | 20 |
단위: px · —는 Input이 제공하지 않는 크기입니다. Input 글자는 모바일 브라우저의 자동 확대를 막기 위해 모든 크기에서 16px입니다.
보이는 크기와 누를 수 있는 영역은 다릅니다.24px 컨트롤도 Native와 Web 터치 모드에서 최소 44px 터치 영역을 확보합니다.
타이포그래피
글자는 역할로 고릅니다. 한 역할은 크기·줄높이·굵기를 함께 정하므로 셋을 따로 바꾸지 마세요. 서체는 프로젝트가 연결합니다.
| 역할 | 견본 | 크기·굵기 |
|---|---|---|
| 큰 수치대시보드의 핵심 숫자 | 1,234 | 32/40 700 |
| 페이지 제목화면의 첫 제목 | 주문 내역 | 24/32 700 |
| 섹션 제목새 내용 묶음의 시작 | 배송 안내 | 20/28 700 |
| 카드 제목카드·모달 제목 | 결제 수단 | 16/24 600 |
| 입력값입력칸 글자 · iOS 확대 방지 16px | 홍길동 | 16/24 400 |
| 본문읽고 이해할 주요 내용 | 주문한 상품은 순서대로 배송됩니다. | 14/20 400 |
| 라벨필드 라벨·목록 항목 이름 | 받는 사람 | 14/20 500 |
| 컨트롤버튼·탭 글자 | 저장하기 | 14/20 600 |
| 보조 정보날짜·짧은 설명 | 업데이트: 오늘 오전 9시 | 12/16 400 |
| 메타개수·상태 같은 짧은 정보 | 3개 선택 | 12/16 500 |
크기/줄높이 단위: px. 숫자 표시용 역할(number·display)은 같은 크기의 제목 역할을 따르며 숫자 서체와 고정폭 숫자를 씁니다.
반응형 전환
기기 이름보다 콘텐츠가 차지하는 너비를 기준으로 배치를 바꿉니다. 컴포넌트는 아래 기준보다 좁아지면 쌓거나 카드로 바꿉니다.
| 기준 | 너비 | 이 기준으로 전환하는 컴포넌트 |
|---|---|---|
| 액션 내용 | 448 | 하단 액션 |
| 좁은 화면 | 640 | Modal · Drawer · Toast · Pagination · KPI 강조 |
| 중간 화면 | 768 | KPI 행 · 시장 목록 · 선택 그룹 · 폼 열 · Table 카드 전환 |
| 넓은 화면 | 1024 | Pagination 넓은 보기 |
단위: px. 컴포넌트는 창이 아니라 자신이 놓인 영역의 너비를 기준으로 전환합니다.
모션
작은 반응은 짧게, 큰 영역의 변화는 따라갈 수 있을 만큼 길게 씁니다. 동작 줄이기 설정에서는 이동 없이 결과만 보여 줍니다.
- 100ms툴팁·퇴장 페이드
motion.instant - 150ms팝업 퇴장·배경 퇴장
motion.quick - 200ms버튼·선택선·팝업·접기
motion.fast - 300ms모달·패널 등장
motion.normal
들어올 때는 표준 감속 motion.easeOut, 가장자리 패널은 강조 감속 motion.easeEmphasized, 나갈 때는 motion.easeIn과 일정 속도 페이드 motion.easeLinear를 씁니다. 창은 16px, 팝업은 4px만큼 이동합니다.
토큰 사용
직접 구성하는 화면에는 역할 토큰(space·shape)과 타이포그래피 역할을 사용합니다. 숫자 스케일(dimension·radius)은 역할로 표현되지 않는 미세 조정에만 씁니다. KJUN 컴포넌트의 크기와 모서리는 각 컴포넌트의 속성으로 선택하세요.
import { tokens } from "@kjun/tokens";
const gap = tokens.space.stack.md; // 16
const radius = tokens.shape.container; // 16
const body = tokens.typography.body;같은 의미의 요소에는 같은 토큰을 반복해 사용합니다. 색상과 서체는 프로젝트에서 연결하고, 상태·포커스·조작 규칙은 KJUN의 공통 동작을 따릅니다.