Design

Layout

과하다 싶을 만큼의 흰 공간이 이 사이트의 결입니다.

Container

가로 리듬은 Container 가 소유합니다 — 레이아웃 담당 컴포넌트는 반응형을 내부에 가집니다.

  • · 읽기 폭 max-w-3xl (한글 약 50자) / 넓게 max-w-6xl
  • · 좌우 게이트 px-4 md:px-8

수직 리듬

섹션 사이는 일반 사이트의 1.5~2배로 둡니다.

  • · 섹션 py-24 md:py-32
  • · 블록 space-y-16 · 문단 space-y-6
  • · 부록 블록의 위 경계 omb-divided — border-t + pt-10 을 한 곳으로 모은 유틸(간격이 갈려 있던 것을 통일)

Breakpoints

Tailwind 기본값을 그대로 씁니다. 현재 쓰는 건 sm·md 뿐이고 전부 여백·배치 조정입니다.

  • · sm 640px · md 768px · lg 1024px
  • · 크기(font-size)는 컴포넌트가 정하지 않고 호출부가 정합니다 — 예외는 제목 스케일(Heading)뿐입니다

Elevation · 모서리

그림자를 쓰지 않습니다. 면의 구분은 경계선으로만 합니다.

rounded-md · 8px
rounded-lg · 10px