02 · Design Style / 레이아웃

레이아웃Layout

콘텐츠가 앉을 자리를 결정하는 기초. 주님의교회 PCL 디자인 시스템은 12컬럼 반응형 그리드와 5단계 브레이크포인트를 기본으로 합니다. 컨테이너 너비와 간격은 공통 토큰으로 관리되어 모든 페이지가 같은 리듬을 공유합니다.

12컬럼 그리드

데스크톱 기본 그리드는 12컬럼입니다. 12는 2·3·4·6으로 나눠지기 때문에 2단·3단·4단 레이아웃 모두 자연스럽게 구성됩니다. 모바일은 4컬럼, 태블릿은 8컬럼으로 축소됩니다.

12 cols · gap 12px · desktop

브레이크포인트

Tailwind CSS 기본 브레이크포인트를 그대로 사용합니다. 모든 컴포넌트는 모바일 퍼스트로 설계되며, 더 큰 화면을 위한 확장이 순차적으로 이어집니다.

토큰	범위	디바이스	컬럼	거터
base	0–639px	모바일	4	16px
sm	640–767px	대형 모바일	6	20px
md	768–1023px	태블릿	8	24px
lg	1024–1279px	작은 데스크톱	12	28px
xl	1280px+	데스크톱	12	32px

컨테이너 너비

페이지 바깥 여백은 컨테이너 너비로 제어합니다. 본문 중심 문서는 max-w-[1200px], 읽기 전용 긴 본문은 max-w-[72ch], 대시보드처럼 도구가 밀집된 화면은 max-w-[1440px]를 기본값으로 합니다.

실제 너비 비교

72ch (긴 본문)

960px (표준 문서)

1200px (기본 컨테이너)

1440px (대시보드)

간격 스케일

Tailwind 기본 4px 스케일을 따릅니다 (0.25rem = 4px). 반복적으로 쓰는 값은 아래 12개로 압축해 기억하세요 — 이 범위에서만 써도 거의 모든 상황이 처리됩니다.

space-0.5

2px

space-1

4px

space-2

8px

space-3

12px

space-4

16px

space-6

24px

space-8

32px

space-10

40px

space-12

48px

space-16

64px

space-20

80px

space-24

96px

레이아웃 원칙

1. 모바일부터 쌓는다 — 기본 스타일은 항상 모바일.sm:, md: 접두사는 “더 큰 화면에서 추가될 것”만 선언합니다.

2. 수직 리듬을 흐트러뜨리지 않기 — 섹션 간 간격은 64px(mt-16), 서브섹션은 40px(mt-10), 단락은 16px(mt-4)을 기본으로 삼으세요.

3. 그리드 선을 끊지 않기 — 카드가 그리드 위에 앉아 있을 때, 안쪽 요소들도 같은 그리드를 따릅니다. 그리드 밖으로 튀어나온 요소는 시각적으로 “에러”처럼 보입니다.