Foundations

Layout (레이아웃·그리드)

화면을 나누는 규격 — 브레이크포인트·컨테이너·12컬럼 그리드·간격 적용 규칙과 정형 레이아웃 3종. 값의 정본은 --layout-* 토큰(2026-07-15 신설).

브레이크포인트 — 3단계 (홈페이지 실측, 2026-07-26 design.md 정렬)

구간	값	실측	무엇이 바뀌나
`bp-sm`	640px+	83회(주 분기점)	타이포 한 단계 상승, 섹션 여백 80→112px, 좌우 20→32px, 카드 여백 확대
`bp-md`	768px+	11회	푸터 12열 그리드 전개
`bp-lg`	1024px+	43회	헤더 메뉴·버튼 노출(햄버거 해제), 다단 그리드 완성

기본(모바일, <640px)은 1컬럼 스택 + 드로어 내비. 대부분의 반응형 처리는 bp-sm 하나로 끝낸다 — 구간을 늘리지 말 것.
xl·2xl급 분기는 쓰지 않는다 — 1200px 컨테이너에서 성장이 멈춘다.
@media에서는 CSS 변수를 쓸 수 없으므로 640·768·1024px 값 자체가 정본이다(--layout-bp-sm·--layout-bp-md·--layout-bp-lg 토큰과 항상 일치시킨다).

컨테이너·폭

용도	토큰	값
페이지 컨테이너 최대폭	`--layout-container-max`	1200px
본문(읽는 글) 최대폭	`--layout-content-max`	860px
사이드바 폭	`--layout-sidebar-width`	240px

읽는 글(문서·블로그)은 컨테이너가 넓어도 본문은 860px을 넘기지 않는다(한 줄이 길면 가독성이 급락).
컨테이너 좌우 패딩: 모바일 --space-5, 데스크톱 --space-8.

12컬럼 그리드

본문 영역 (8칸)

주 콘텐츠가 들어갑니다.

보조 영역 (4칸)

요약·링크 등.

카드 A

카드 B

카드 C

html

<div class="pi-container">
  <div class="pi-grid">
    <div class="pi-col-8"><article class="pi-card"><h3 class="pi-card__title">본문 영역 (8칸)</h3><p class="pi-card__body">주 콘텐츠가 들어갑니다.</p></article></div>
    <div class="pi-col-4"><article class="pi-card"><h3 class="pi-card__title">보조 영역 (4칸)</h3><p class="pi-card__body">요약·링크 등.</p></article></div>
    <div class="pi-col-4"><article class="pi-card"><h3 class="pi-card__title">카드 A</h3></article></div>
    <div class="pi-col-4"><article class="pi-card"><h3 class="pi-card__title">카드 B</h3></article></div>
    <div class="pi-col-4"><article class="pi-card"><h3 class="pi-card__title">카드 C</h3></article></div>
  </div>
</div>

css

.pi-container {
  max-width: var(--layout-container-max);
  margin-inline: auto;
  padding-inline: var(--space-5);
}
.pi-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-5);
}
.pi-col-3 { grid-column: span 3; }
.pi-col-4 { grid-column: span 4; }
.pi-col-6 { grid-column: span 6; }
.pi-col-8 { grid-column: span 8; }
.pi-col-12 { grid-column: span 12; }

/* Tablet(768~1199): 절반 이하 칸은 6칸으로 확대 */
@media (max-width: 1199px) {
  .pi-col-3, .pi-col-4 { grid-column: span 6; }
}
/* Mobile(<768): 전부 한 컬럼 */
@media (max-width: 767px) {
  .pi-container { padding-inline: var(--space-5); }
  [class*="pi-col-"] { grid-column: span 12; }
}
@media (min-width: 1200px) {
  .pi-container { padding-inline: var(--space-8); }
}

간격 적용 규칙 (스케일은 있는데 언제 뭘 쓰나)

자리	토큰	감각
섹션 사이(세로 리듬)	`--space-11` ~ `--space-13`	주제가 바뀐다
제목 ↔ 본문	`--space-3` ~ `--space-4`	붙어 있다
문단 사이	`--space-4`	숨 고르기
카드 그리드 gap	`--space-5`	한 무리
카드 내부 패딩	`--card-pad`	컴포넌트 토큰 우선

규칙: 같은 위계 = 같은 간격. 섹션마다 간격이 다르면 위계가 무너진다.
임의 px를 만들지 말고 스케일에서 고른다 — 스케일에 없는 간격이 필요하면 설계를 의심한다.

정형 레이아웃 3종 (자주 쓰는 화면의 기본형)

① 히어로 + 카드 그리드 (마케팅·소개)

css

.pi-layout-hero { padding-block: var(--space-13); text-align: center; }
.pi-layout-hero .pi-layout-hero__copy { max-width: var(--layout-content-max); margin-inline: auto; }
.pi-layout-hero + .pi-grid { margin-top: var(--space-10); }

히어로(핵심 카피 1개 + CTA 버튼 1개) 아래 3~4칸 카드 그리드. 히어로에 문장을 쌓지 않는다 — 한 화면 한 메시지.

② 문서형 (가이드·매뉴얼 — 이 문서 사이트가 이 형태)

css

.pi-layout-doc { display: grid; grid-template-columns: var(--layout-sidebar-width) minmax(0, 1fr); }
.pi-layout-doc__main { max-width: var(--layout-content-max); margin-inline: auto; padding: var(--space-8); }
@media (max-width: 767px) { .pi-layout-doc { grid-template-columns: 1fr; } }

좌 고정 사이드바(내비) + 본문 860px. 모바일에서 사이드바는 드로어로 전환.

③ 카탈로그형 (제품 목록 — 안전표지 카탈로그 등)

css

.pi-layout-catalog__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--layout-sidebar-width), 1fr));
  gap: var(--space-5);
}
.pi-layout-catalog__toolbar { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-6); }

상단 툴바(필터 Chip·검색) + auto-fill 카드 그리드 + 하단 Pagination(20개 초과 시). 카드 크기는 그리드가 계산 — 개별 카드에 폭을 주지 않는다.