이 페이지는 화면의 호흡과 여백을 본다.
본문이 너무 넓거나 좁지 않은지, 카드 간격이 들쭉날쭉하지 않은지, 헤더/본문/푸터가 같은 폭 규칙을 쓰는지 확인한다.
보아야 할 변수 계층
--page-max-width--main-width--content-max-width--page-padding/--page-padding-mobile--gap/--gap-mobile--content-gap--header-height/--footer-height
간격 스케일 시각화
var(--space-2xs)
var(--space-xs)
var(--space-sm)
var(--space-md)
var(--space-lg)
var(--space-xl)
var(--space-2xl)
var(--space-3xl)
페이지 쉘에서 확인할 것
Header / Navigation
Main content
본문은 이 폭 안에서 읽혀야 한다.
Footer
표로 보는 레이아웃 체크
| 항목 | 예상 동작 | 확인 포인트 |
|---|---|---|
| 폭 | 본문이 한 줄만 길어지지 않음 | 가독성 유지 |
| 패딩 | 모바일에서 좁아짐 | 좌우 가장자리 숨 쉴 공간 |
| 간격 | 섹션마다 일정 | 카드와 문단 간격이 안정적 |
| 반경 | 카드와 CTA가 비슷한 축 | 같은 시스템처럼 보임 |
마무리
간격이 맞으면 콘텐츠가 알아서 정돈되어 보인다.
간격이 틀리면 다른 디자인이 아무리 좋아도 전체가 흔들린다.