간격 · 레이아웃
모든 간격과 높이는 4px 의 배수입니다. 카드 사이는 20, 카드 안쪽은 24(작은 카드 16), 섹션 사이는 32 입니다.
두께는 바깥 그림자라 자리를 차지하지 않습니다. 그래서 카드 사이 간격과 컨테이너의 오른쪽 · 아래 여백이 두께를 흡수하고, 정렬은 두께가 아니라 면을 기준으로 합니다. 스크롤 영역 · 카드를 감싼 컨테이너는 오른쪽 · 아래에 최소 4px 를 남겨 두께가 잘리지 않게 합니다.
간격
모든 간격은 4px 의 배수입니다. 카드 사이 20, 카드 안쪽 24(작은 카드 16), 섹션 사이 32 입니다.
space-1 · 4px
space-2 · 8px
space-3 · 12px
space-4 · 16px
space-5 · 20px
space-6 · 24px
space-8 · 32px
space-10 · 40px
| 자리 | px | 토큰 |
|---|---|---|
| 컨트롤 안 아이콘 · 글자 | 8 | --uyoo-space-2 |
| 버튼 묶음 · 칩 사이 | 8 | --uyoo-space-2 |
| 라벨 → 입력 · 입력 → 도움말 | 6 · 6 | — |
| 폼 칸 사이 | 20 | --uyoo-space-5 |
| 카드 안쪽 여백(작은 카드) | 24 (16) | --uyoo-space-6 (--uyoo-space-4) |
| 카드 사이 · 그리드 간격 | 20 — 두께(2,3)를 흡수 | --uyoo-space-5 |
| 섹션 사이 | 32 | --uyoo-space-8 |
컨트롤 높이
버튼 · 입력의 높이입니다. 터치 기기에서는 누르는 자리를 44 이상으로 둡니다.
28px
--uyoo-h-sm
표 · 툴바(조밀)
36px
--uyoo-h-md
기본
44px
--uyoo-h-lg
터치 · 모바일
32px
--uyoo-h-nav
사이드바 항목
밀도
| 항목 | 기본 | 조밀 |
|---|---|---|
| 표 머리 · 행 | 36 · 44 | 30 · 34 |
| 컨트롤 | h-md 36 | h-sm 28 |
| 쓰는 곳 | 대부분의 화면 | 운영 · 감사 로그처럼 한 화면에 많이 보는 표 |
조밀은 화면 단위로 고릅니다. 한 화면 안에서 섞지 않습니다. 터치 기기에서는 조밀을 쓰지 않습니다(누르는 자리 44 이상).
셸 치수
앱 셸(N-Shell)의 사이드바 · 상단 바 · 본문 폭입니다. lg(1024) 미만에서는 사이드바가 자리를 차지하지 않고 드로어로 뜹니다.
| 토큰 | 값 | 무엇 |
|---|---|---|
| --uyoo-sidebar-w | 240px | 사이드바 |
| --uyoo-sidebar-w-collapsed | 56px | 접힌 사이드바(아이콘만) |
| --uyoo-topbar-h | 52px | 상단 바 · 사이드바 머리 |
| --uyoo-content-max | 1200px | 본문 최대 폭. 양옆 여백 24(모바일 16) |
| --uyoo-panel-w | 360px | 옆 패널(AI 비서 · 회의 참가자) 폭 |
| --uyoo-thread-w | 400px | 스레드 패널 폭 |
| --uyoo-filmstrip-w | 208px | 회의 화면공유 옆 필름스트립 폭 |
| --uyoo-callbar-h | 76px | 회의 컨트롤 막대 높이 |
본문 최대 폭 1200 · 양옆 여백 24(모바일 16). 제품 화면에는 h1 을 두지 않고 화면 이름은 브레드크럼의 마지막 항목이 말합니다. 이 사이트의 셸이 같은 치수입니다.
브레이크포인트
Tailwind v4 기본값과 같습니다. 문서(페이퍼)만 2열로 나뉘는 doc 를 하나 더 둡니다.
| 이름 | 폭 | 바뀌는 것 |
|---|---|---|
| 기준 모바일 | 390 | 사이드바는 시트로, 표는 카드 목록으로, 컨트롤은 h-lg |
| sm | 640 (40rem) | 표가 다시 표로(카드 모드 끝). 폼 · 시트가 모바일과 그 이상을 나누는 기준 |
| md | 768 (48rem) | 2단 카드 그리드 |
| lg | 1024 (64rem) | 사이드바 고정(240), 상세 화면의 옆 패널 |
| xl | 1280 (80rem) | 본문 최대 폭 1200 에 닿는다 |
| doc | 864 (54rem) | 페이퍼(문서)가 본문과 여백 2열로 나뉜다 |
// 레이아웃이 바뀌는 너비는 Tailwind 기본값을 쓴다. 컴포넌트 안의 배치는 미디어 쿼리 대신
// 컨테이너 쿼리를 쓴다(카드가 좁은 자리에 놓여도 맞게).
<div className="grid grid-cols-1 md:grid-cols-2" />
<div className="@container"><div className="grid @md:grid-cols-2" /></div>
/* 유틸리티를 쓸 수 없는 CSS(document.css · deck.css)는 같은 값을 리터럴로 적고 어느 이름인지 주석으로 밝힌다 */
@media (max-width: 53.9375rem) { /* doc 바로 아래 */ }같은 버튼도 언어마다 폭이 다릅니다. 버튼 · 탭 폭은 글자에 맞추고 고정하지 않습니다. 한 · 영 · 일 문구 길이로 화면을 확인합니다.