이 페이지는 레이아웃 토큰이 실제 문서에서 어떤 호흡을 만드는지 본다.

폭 관련 토큰

토큰 목적
--page-max-width 전체 페이지 기준 폭
--content-max-width 본문 읽기 폭
--nav-max-width 상단 내비게이션 폭
--main-width 메인 콘텐츠 기준 폭

시각 샘플

토큰 기준
--breakpoint-sm 작은 화면 시작점
--breakpoint-md 태블릿/중간 화면
--breakpoint-lg 일반 데스크톱
--breakpoint-xl 넓은 데스크톱

확인 포인트

  • 여백이 늘어날 때 문장 길이가 너무 늘어나지 않는가
  • 카드 간 간격이 페이지 전체에서 같은 리듬을 유지하는가
  • 모바일에서 padding이 갑자기 답답해지지 않는가