기초
간격과 레이아웃
4px 간격 단계, 폭 구간별 그리드·내비게이션·상세 방식, 위젯 격자, 44px 조작 영역과 세로 리듬.
간격 단계
기본 단위는 4px이고 코드 번호 n은 n × 4px이다(--cb-space-4 = 16px). foundation 문서의 옛 번호(--cb-space-1 = 2px)는 쓰지 않는다. 밀도는 “편안함” 하나뿐이고 밀도 조절 옵션은 만들지 않는다.
--cb-space-half…--cb-space-1…--cb-space-2…--cb-space-3…--cb-space-4…--cb-space-5…--cb-space-6…--cb-space-8…--cb-space-10…--cb-space-12…--cb-space-16…--cb-space-20…값은 지금 페이지에 적용된 CSS에서 읽습니다.
폭 구간과 그리드
| 구간 | 폭 | 컬럼 | 여백 / 거터 | 내비게이션 | 상세 | 위젯 격자 |
|---|---|---|---|---|---|---|
| Phone | 320–599 | 4 | 16 (390 이상 20) / 12 | 하단 유리 탭 막대 (오늘·기록·나) | push | 2열 |
| Phone 가로 · 작은 태블릿 | 600–767 | 8 | 24 / 16 | 하단 탭 막대 | push | 4열 |
| iPad 세로 | 768–1023 | 8 | 24 / 16 | 하단 탭 막대 (가운데 캡슐, 최대 480) | push | 4열 |
| iPad 가로 · 작은 데스크톱 | 1024–1279 | 12 | 사이드바 오른쪽 24 / 16 | 떠 있는 유리 사이드바 280 | split (목록 360 + 상세) | 4열 |
| 데스크톱 | ≥1280 | 12 | 32 / 20, 내용 최대 1200 | 떠 있는 사이드바 300 | split (목록 400 + 상세 최대 720) | 4열, XL 허용 |
- 사이드바와 탭 막대는 같은 3개 목적지(오늘 / 기록 / 나)를 가진다. 사이드바에만 “최근 연 기록” 5개가 있다.
- split/push 경계는 1024다. 상세 상태의 원천은 ?item=<id> 하나다.
- 320px에서 가로 넘침은 0이다. 표처럼 넓은 것은 자기 영역 안에서만 가로로 스크롤한다.
위젯 격자
| 크기 | 격자 | Phone (390) | 데스크톱 단위 | 담을 수 있는 것 | 대화형 요소 상한 |
|---|---|---|---|---|---|
| S | 1×1 | 약 167×167 (320에서 약 138) | 170×170 | 큰 값 하나 + 라벨, 또는 문장 하나. 예외 라벨 1개 | 위젯 전체가 링크 1개 |
| M | 2×1 | 약 350×167 | 356×170 | 큰 값 + 행 2, 또는 행 3 | 제목 링크 + 행 링크 ≤3 + 버튼 ≤2 |
| L | 2×2 | 약 350×350 | 356×356 | 큰 값 + 행 4, 또는 행 5 | 행 링크 ≤5, 버튼 ≤2 |
| XL | 4×2 | — | 728×356 | 2열 구성, 행 8. ≥1024에서만 | 행 링크 ≤8, 버튼 ≤2 |
- 이렇게크기에 따라 정보를 줄일 뿐 다른 정보를 보여주지 않는다. 같은 위젯의 S와 L은 같은 사실을 말한다.
- 이렇게 하지 않기S 위젯 안에 버튼이나 링크를 중첩하지 않는다(링크 안 버튼은 무효 HTML). M/L은 카드 전체를 클릭 영역으로 만들지 않는다.
세로 리듬과 조작 영역
| 토큰 | 값 | 쓰는 곳 |
|---|---|---|
--cb-hit-min | … | 모든 조작 요소의 최소 조작 영역 |
--cb-control-sm / md / lg | … / … / … | 컨트롤 높이. sm은 보이는 36px + ::after로 44px 조작 영역 |
--cb-widget-gap / pad | … / … | 위젯 사이 간격과 안쪽 여백 |
--cb-border-width | … | 모든 선은 1px |
--cb-focus-width / offset | … / … | 초점 링 두께와 간격 |
--cb-measure-readable / wide | … / … | 본문 읽기 폭 |
- 모든 조작 영역은 44×44 이상. 보이는 크기가 작으면 ::after로 넓힌다. 넓힌 영역끼리 겹치지 않고, 보이는 요소 사이는 8 이상.
- 문장 안 인라인 링크는 예외(WCAG 2.5.8). 단독 텍스트 링크(“이메일로 계속”)는 44를 지킨다.
- 목록 행 최소 높이: 1줄 56, 2줄 72. 행 사이는 hairline으로 나누고 카드로 감싸지 않는다.
- 화면당 주요 행동은 하나. Phone에서는 엄지 영역(아래 40%) 안에.
- sticky 헤더·탭 막대가 있는 스크롤 영역에는 scroll-padding을 둬서 초점이 가려지지 않게 한다(WCAG 2.4.11).
- 체크박스·라디오·스위치는 라벨을 포함한 행 전체가 44 이상. 달력 날짜 칸은 320에서 7 × 44 = 308로 들어간다.
실제 컴포넌트: 보이는 36px, 조작 영역 44px
다시 시도