그랜드 세리프 스테이트먼트

# 그랜드 세리프 스테이트먼트 — web 디자인 팩

## 이 스타일의 정체성
오프화이트 캔버스를 한 화면에 거대한 디스플레이 세리프 단어 한둘이 풀블리드로 가득 채워 콘텐츠 자체가 되는 웹이다. 무엇을 보면 이 스타일임을 아는가 — 화면에 들어오자마자 보이는 것이 거의 전부 활자뿐이고, 그 활자가 화면 폭에 닿을 만큼 거대하며 음수 자간으로 글자가 서로 닿을 듯 압축돼 있다, 본문은 극도로 작은 산세리프로 화면 한 모서리에만 조용히 놓인다, 강조색이 전혀 없고 잉크 무채뿐이며, 스크롤하면 거대 세리프 단어가 다음 단어로 부드럽게 페이드 전환된다.

## 색
- 배경: `#f7f5f1` (오프화이트). 변화 없이 전 섹션 동일 — 무채 단색.
- 표면: 별도 카드 표면 색 없음 — 배경과 동일, 헤어라인으로만 구분.
- 텍스트: `#15130f` (잉크 블랙, 거대 세리프·본문). 메타·캡션은 `#8a8579`.
- 강조: 강조색 없음. 유일한 위계 장치는 활자 크기·굵기·헤어라인. 색으로 강조하지 않는다.
- 본문 대비: `#15130f` on `#f7f5f1` ≈ 16:1 (WCAG AAA).

## 타이포그래피
- 디스플레이(주인공): `Playfair Display`(Google Fonts) weight 500~700, 대체 `Georgia, serif`. 거대 워드 `clamp(4.5rem, 17vw, 16rem)`, weight 600, `letter-spacing: -0.04em` (글자가 닿을 듯 압축), line-height 0.92. 화면 폭을 거의 채운다.
- 세컨더리 디스플레이: `Fraunces`(Google Fonts) — 부제·중간 헤딩에 weight 400, optical-size 큰 값, `clamp(1.6rem, 3vw, 2.6rem)`, italic 허용.
- 본문/메타: `Inter`(Google Fonts) — 극도로 작게 `0.8125rem`, weight 400, line-height 1.6, 측정 50~62자. 화면 한 모서리(좌하단 또는 우상단)에만 좁은 컬럼으로.
- 라벨/번호: `Inter` `0.7rem`, weight 500, `letter-spacing: 0.14em`, 대문자, 색 `#8a8579`.

## 레이아웃 / 그리드
- 거대 세리프 섹션은 풀블리드 — 콘텐츠 폭 제한 없음, 활자가 좌우 패딩(`clamp(20px, 4vw, 64px)`)까지 닿는다.
- 본문 텍스트 컬럼만 최대 폭 `420px`, 화면 한 모서리에 배치.
- 브레이크포인트: 700px, 1100px. 모바일에서도 거대 세리프는 `clamp` 하한(4.5rem)으로 여전히 크게.
- 섹션 수직 리듬: 각 거대 워드 섹션은 `min-height: 100vh` 또는 `92vh` — 한 화면에 한 단어. 섹션 간 여백은 섹션 자체가 뷰포트를 채워 별도 마진 불필요(`balanced` — 각 화면이 꽉 차되 답답하지 않게 활자 주변 여백 확보).
- 활자는 화면 안에서 좌상·중앙·우하 등으로 옮겨 다니며 정적 단조로움을 깬다.

## 형태 / 질감
- 모서리: 카드·이미지 거의 없음. 있다면 radius `0` — 활자가 주인공, 도형 장식 배제.
- 보더: 헤어라인 `1px solid rgba(21,19,15,0.18)` — 섹션 구분·본문 컬럼 상단 룰에만.
- 그림자: 없음. 깊이는 활자 크기 대비로만.
- 이미지: 원칙적으로 이미지 없음. 필요 시 흑백 그레이스케일(`filter: grayscale(1) contrast(1.05)`) 풀블리드 1점만, 그 위에 거대 세리프를 겹침.
- 장식 요소 없음 — 활자, 헤어라인, 작은 본문이 전부.

## 모션
- 전환: `subtle` — `600ms cubic-bezier(0.4, 0, 0.2, 1)`.
- 스크롤 전환: 거대 세리프 단어가 다음 단어로 `opacity 0 → 1` 크로스페이드(600ms) + 미세한 `letter-spacing` 변화(`-0.06em → -0.04em`)로 글자가 풀리듯. 한 번에 한 단어.
- 스크롤 진입: 본문 컬럼 `opacity 0 → 1` 500ms.
- 호버: 거대 워드는 호버 반응 없음(정적). 본문 링크만 잉크 밑줄이 페이드로 나타남.
- 슬라이드·바운스·패럴랙스·회전 금지 — 오직 크로스페이드.
- `prefers-reduced-motion`: 크로스페이드 제거, 단어를 스크롤에 따라 정적으로 교체.

## 하지 말 것
- 강조색 일절 금지 — 잉크 무채만. 그라디언트·그라디언트 텍스트 절대 금지.
- 산세리프 빅타이포 금지 — 거대 활자는 반드시 디스플레이 세리프(Playfair/Fraunces). 이게 big-type-statement 팩과 갈리는 핵심.
- 거대 세리프를 작게(`clamp` 하한 4rem 미만) 쓰기 금지 — 화면을 채워야 한다.
- 양수 자간·헐거운 자간 금지 — 글자는 음수 자간으로 압축.
- 카드 그리드·3카드 반복·아이콘·일러스트·이모지·blob 금지.
- 박스 섀도·둥근 모서리 장식 금지.
- 본문을 크게·여러 컬럼으로 펼치기 금지 — 본문은 한 모서리의 작은 컬럼 하나.
- 화면당 거대 단어 3개 이상 금지 — 한 화면에 한둘.

## 적용 예
- **히어로:** `92vh` 풀블리드. 화면 중앙~좌측에 거대 Playfair 세리프 단어 하나(`16rem`급, 음수 자간 압축). 우상단 모서리에 `0.7rem` 대문자 키커, 좌하단 모서리에 `420px` 폭 작은 Inter 본문 두세 줄 + 상단 헤어라인.
- **콘텐츠 섹션:** 각 섹션 `100vh`, 거대 세리프 단어 하나가 화면 안 다른 위치(우하·중앙)로. 스크롤하면 이전 단어가 크로스페이드로 다음 단어로 교체. 본문 컬럼은 반대편 모서리.
- **푸터:** 마지막 `60vh` 섹션. 거대 세리프로 사이트명 하나, 그 아래 헤어라인, `0.8rem` Inter 메뉴를 한 줄로 좁게. 색 반전 없음 — 동일 오프화이트.