레이아웃은 페이지가 읽히는 속도를 결정한다.
폭, 여백, 간격, 반경, 그림자가 한 리듬으로 묶여야 글과 UI가 분리되지 않는다.
폭과 간격
| 토큰 | 역할 | 값의 체감 |
|---|---|---|
--page-max-width |
페이지 상한 | 한 줄이 너무 길어지지 않게 잡는다 |
--content-max-width |
본문 폭 | 글의 리듬을 유지하는 기준선 |
--page-padding |
좌우 여백 | 큰 화면에서 공간감을 만든다 |
--page-padding-mobile |
모바일 여백 | 작은 화면에서 숨 쉴 공간을 만든다 |
--gap / --gap-mobile |
섹션 간격 | 카드와 본문 블록 사이의 리듬 |
--content-gap |
콘텐츠 간격 | 표, 목록, figure 간 연결감 |
spacing scale
반경과 그림자
브레이크포인트 메모
--breakpoint-sm이하에서는 링크와 버튼의 터치 영역이 우선이다.--breakpoint-md부근에서는 표와 figure가 줄바꿈 방식으로 갈라질 수 있다.--breakpoint-lg이상에서는 카드 그리드와 본문 폭의 균형이 중요하다.
체감 점검
- 본문이 너무 넓어 한 줄이 길어지지 않는가
- 카드 간 간격이 페이지 여백보다 더 크지 않은가
- 그림자가 장식으로 남고 정보 계층을 방해하지 않는가
{cta(“related”, ref="../typography-language/", label=“타이포그래피와 언어 보기”)}