# Editorial — 에디토리얼 타이포그래피
> 2026 트렌드 "typography as primary architecture". 활자가 곧 레이아웃이다.
> 카드·그림자·둥근 모서리 대신 큰 세리프 헤딩, 헤어라인 룰, 비대칭 그리드, 각주형 메타데이터로 위계를 만든다.
> 적합: 브랜드 저널, 연차/지속가능경영 보고서, 리서치 리포트, 롱폼 아티클, 포트폴리오, 출판·문화 기관 사이트.
> 부적합: 촘촘한 대시보드, 폼이 많은 어드민 (→ carbon.md, ant-design.md).
> 함께 적용: `anti-slop.md`
---
## 1. 분위기 (Visual Theme & Atmosphere)
잘 만든 월간지의 펼침면을 웹으로 옮긴 느낌이다. 첫 화면에서 눈에 들어오는 것은 이미지나 버튼이 아니라 **활자 그 자체** — 화면 폭의 절반을 채우는 세리프 제목, 그 옆 좁은 단의 모노스페이스 라벨, 그리고 그 사이를 가르는 1px 잉크 선이다.
- **종이와 잉크**: 따뜻한 미색 종이(`#f6f2ea`) 위에 거의 검정에 가까운 잉크(`#16140f`). 회색은 모두 노란 갈색 기운을 가진 웜 그레이.
- **단 하나의 액센트**: 주홍빛 벽돌색(vermilion brick, `#b8321f`). 드롭캡, 섹션 번호, 현재 위치 표시, 핵심 수치 1곳에만 쓴다. 교정지의 빨간 펜처럼.
- **상자가 없다**: 정보 묶음은 카드가 아니라 위·아래 헤어라인과 여백으로 구분한다. `border-radius`는 0, `box-shadow`는 없음.
- **비대칭의 긴장**: 12단 그리드에서 본문은 일부러 중앙을 벗어난다(예: 3–9단). 좌측 2단은 번호·메타데이터용 여백 칼럼.
- **읽는 속도**: 넉넉한 행간과 단 폭(한글 기준 32–38자)으로 "스캔"이 아니라 "읽기"를 유도한다.
**Key Characteristics**
- 유동 디스플레이 세리프 (`clamp(3rem, 7vw, 7.5rem)`), 타이트한 행간 1.02–1.1
- 한글 헤딩 Noto Serif KR + 라틴 디스플레이 Instrument Serif / Newsreader
- 유틸리티 라벨은 JetBrains Mono 대문자 + 넓은 자간, 또는 small-caps
- 번호 매긴 섹션(`§ 01`, `No. 14`), 드롭캡, 풀쿼트, 각주형 메타데이터
- 헤어라인(1px) / 굵은 룰(3px) 두 가지 선만 사용
---
## 2. 컬러 팔레트 & 역할
```css
:root {
/* Paper & ink */
--paper: oklch(0.962 0.013 85); /* #f6f2ea 페이지 배경 (따뜻한 미색 종이) */
--paper-raised: oklch(0.982 0.007 85); /* #fbf9f4 인셋 영역, 표 헤더, 입력 필드 */
--paper-sunk: oklch(0.925 0.017 80); /* #ebe5d9 인용 블록 배경, 도표 바탕 */
--ink: oklch(0.185 0.008 85); /* #16140f 본문·헤딩·굵은 룰 */
--ink-soft: oklch(0.36 0.012 80); /* #403b33 리드 문단, 2차 헤딩 */
--muted: oklch(0.52 0.014 80); /* #6b665c 캡션, 메타데이터, 각주 (대비 5.1:1) */
--faint: oklch(0.70 0.014 80); /* #a39d90 비활성, 플레이스홀더 */
/* Rules */
--rule: oklch(0.86 0.018 82); /* #d9d2c4 헤어라인 구분선 */
--rule-strong: var(--ink); /* 마스트헤드·섹션 시작의 굵은 룰 */
/* Single accent */
--accent: oklch(0.53 0.165 33); /* #b8321f 주홍 벽돌 — 드롭캡, 섹션 번호, 현재 위치 */
--accent-soft: oklch(0.93 0.035 40); /* #f3dfd6 하이라이트 마커 배경 (드물게) */
/* Semantic (UI가 필요할 때만) */
--success: oklch(0.50 0.09 150); /* #3f6f4f */
--error: var(--accent);
--focus: oklch(0.45 0.12 255); /* #2f5596 포커스 링 — 유일한 차가운 색 */
}
```
| 역할 | 토큰 | 사용처 |
|---|---|---|
| 배경 | `--paper` | 페이지 전체. 순백(#fff) 대신 미색 |
| 표면 | `--paper-raised` | 표 헤더, 입력 필드, 사이드 인덱스 |
| 본문/헤딩 | `--ink` | 모든 텍스트의 기본값 |
| 보조 텍스트 | `--muted` | 바이라인, 날짜, 캡션, 각주 |
| 선 | `--rule` / `--ink` | 헤어라인은 rule, 섹션 시작은 ink 3px |
| 액센트 | `--accent` | **화면당 2–3곳 이하.** 드롭캡, `§` 번호, 핵심 수치 하나 |
| 주 버튼 | `--ink` 배경 + `--paper` 글자 | 액센트로 버튼을 칠하지 않는다 |
**변형 — 크리스프 화이트**: 기업 보고서처럼 차갑게 가려면 `--paper: #ffffff`, `--rule: #dcdcd8`, 액센트를 딥 잉크 블루 `oklch(0.38 0.11 258) /* #23407a */`로 교체. 액센트는 둘 중 하나만.
**다크 모드 (야간 판)**: `--paper: oklch(0.19 0.008 80) /* #1a1814 */`, `--ink: oklch(0.93 0.012 85) /* #ece7dc */`, `--rule: oklch(0.33 0.01 80) /* #3b3730 */`, `--accent: oklch(0.68 0.15 35) /* #e0694d */`.
---
## 3. 타이포그래피
### 폰트 조합
```html
```
```css
:root {
--font-display: "Instrument Serif", "Noto Serif KR", Georgia, serif; /* 라틴 글리프는 Instrument, 한글은 Noto Serif KR로 폴백 */
--font-serif: "Noto Serif KR", "Nanum Myeongjo", Georgia, serif; /* 한글 헤딩·풀쿼트·리드 */
--font-sans: "Pretendard Variable", Pretendard, -apple-system, sans-serif; /* 본문·UI */
--font-mono: "JetBrains Mono", ui-monospace, monospace; /* 라벨·번호·메타 */
}
```
- 한글 세리프 대안: `Gowun Batang`(부드럽고 문학적), `Nanum Myeongjo`(클래식 신문).
- 라틴 대안: `Fraunces`(옵티컬 사이즈, 장식적), `Newsreader`(본문용 세리프까지 필요할 때).
- 폰트 패밀리는 최대 3종(디스플레이 세리프 / 산세리프 / 모노). Inter 금지.
### 유동 타입 스케일
| 역할 | 폰트 | 크기 | 굵기 | 행간 | 자간 |
|---|---|---|---|---|---|
| Display | display | `clamp(3rem, 2rem + 5.5vw, 7.5rem)` | 400 | 1.02 | -0.02em |
| H1 (한글 기사 제목) | serif | `clamp(2.25rem, 1.6rem + 3vw, 4.25rem)` | 600 | 1.18 | -0.025em |
| H2 섹션 | serif | `clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem)` | 600 | 1.3 | -0.015em |
| H3 | sans | `1.125rem` | 650 | 1.45 | -0.01em |
| Lead | serif | `clamp(1.125rem, 1rem + 0.5vw, 1.375rem)` | 400 | 1.75 | 0 |
| Body | sans | `1.0625rem` (17px) | 400 | 1.8 | -0.003em |
| Caption | sans | `0.8125rem` | 400 | 1.6 | 0 |
| Label (kicker) | mono | `0.6875rem` | 500 | 1.4 | 0.14em, uppercase |
### 한글 조판 규칙
```css
:lang(ko) { word-break: keep-all; overflow-wrap: break-word; line-break: strict; }
h1, h2, .display { text-wrap: balance; }
p, .lead { text-wrap: pretty; hanging-punctuation: first; }
.body { max-width: 36em; } /* 한글 약 34–38자 */
.num { font-variant-numeric: tabular-nums lining-nums; }
```
- 한글 본문 행간은 1.75–1.85. 라틴보다 높게. 헤딩은 1.15–1.3(한글은 1.0 아래로 내리면 받침이 겹친다).
- 큰 한글 세리프 제목은 음수 자간(-0.02~-0.03em)으로 조인다. 모노 라벨은 양수 자간.
- 문장 중간 줄바꿈은 `keep-all`로 어절 단위로. 숫자+단위(`1,240억 원`)는 `white-space: nowrap`.
- 모노 라벨의 넓은 자간(0.14em)은 라틴·숫자에만. 한글이 섞인 라벨은 Pretendard 500, 자간 0.01em으로 바꾼다(한글에 넓은 자간을 주면 글자가 흩어져 보인다).
- 기울임(italic)은 라틴에만. 한글에 `font-style: italic`을 쓰면 가짜 기울기가 생긴다 — 한글 강조는 굵기나 액센트 밑줄로.
---
## 4. 컴포넌트
### 마스트헤드
```css
.masthead { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end;
padding: 20px 0 12px; border-bottom: 3px solid var(--ink); }
.masthead__title { font-family: var(--font-display); font-size: 2.75rem; line-height: 1; letter-spacing: -0.02em; }
.masthead__meta { font: 500 0.6875rem/1.4 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.masthead + .subnav { border-bottom: 1px solid var(--rule); }
```
### 키커 / 섹션 번호
```css
.kicker { font: 500 0.6875rem/1.4 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
display: flex; gap: 12px; align-items: baseline; }
.kicker .no { color: var(--accent); } /* § 03 */
.section-head { border-top: 3px solid var(--ink); padding-top: 14px; display: grid; grid-template-columns: 2fr 10fr; }
```
### 드롭캡
```css
.dropcap::first-letter {
float: left; font-family: var(--font-serif); font-weight: 700;
font-size: 4.6em; line-height: 0.82; margin: 0.08em 0.12em 0 0; color: var(--accent);
}
```
한글 드롭캡은 3행 높이가 적당. 첫 글자가 따옴표면 드롭캡을 쓰지 않는다.
### 풀쿼트
```css
.pullquote { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); padding: 24px 0;
font-family: var(--font-serif); font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem); line-height: 1.4; letter-spacing: -0.02em; }
.pullquote cite { display: block; margin-top: 16px; font: 500 0.6875rem var(--font-mono); letter-spacing: 0.14em;
text-transform: uppercase; color: var(--muted); font-style: normal; }
```
따옴표 장식 SVG나 큰 “ 기호 대신, 위아래 잉크 룰로 인용을 표시한다.
### 각주형 메타데이터 (사이드노트)
```css
.sidenote { font: 400 0.8125rem/1.6 var(--font-sans); color: var(--muted); border-top: 1px solid var(--rule); padding-top: 8px; }
.sidenote sup, a.fn { font: 500 0.7em var(--font-mono); color: var(--accent); }
```
### 링크 & 버튼
```css
a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em;
text-decoration-color: var(--rule); transition: text-decoration-color 150ms; }
a:hover { text-decoration-color: var(--accent); }
.btn { font: 500 0.875rem/1 var(--font-sans); padding: 12px 18px; border: 1px solid var(--ink); border-radius: 0;
background: transparent; color: var(--ink); }
.btn--primary { background: var(--ink); color: var(--paper); }
.btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
```
### 목차 인덱스 (리스트)
```css
.index li { display: grid; grid-template-columns: 2.5rem 1fr auto; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.index .n { font: 500 0.75rem var(--font-mono); color: var(--muted); }
.index li[aria-current] .n { color: var(--accent); }
```
### 데이터 도표
- 막대는 `--ink` 단색, 강조할 막대 1개만 `--accent`. 격자선은 `--rule` 점선, 축 라벨은 모노.
- 도표 위에 `Fig. 2` 모노 라벨 + 세리프 제목, 아래에 출처 캡션. 범례 박스 대신 직접 라벨.
### 표
```css
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
thead th { font: 500 0.6875rem var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
text-align: left; border-bottom: 1px solid var(--ink); padding: 8px 0; }
td { border-bottom: 1px solid var(--rule); padding: 10px 0; }
td.num { text-align: right; }
```
---
## 5. 레이아웃 원칙 — 비대칭 매거진 그리드
```css
.page { --gutter: clamp(16px, 2vw, 28px); --margin: clamp(20px, 5vw, 72px);
display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter);
padding-inline: var(--margin); max-width: 1440px; margin-inline: auto; }
```
| 영역 | 데스크톱 칼럼 | 비고 |
|---|---|---|
| 메타 레일 (번호·날짜·필자) | 1–2 | 본문 옆 여백을 정보로 사용 |
| 리드 제목 | 1–8 | 오른쪽으로 크게 넘쳐도 됨 |
| 본문 | 3–8 | **의도적 오프셋** — 중앙이 아니다 |
| 사이드노트 / 인덱스 | 10–12 | 9단은 비워 숨 쉴 틈 |
| 풀쿼트 | 2–7 또는 7–12 | 본문 열을 벗어나 흐름을 깬다 |
| 도표 | 3–11 | 본문보다 넓게 |
- **오프셋 규칙**: 한 화면 안에서 같은 시작 칼럼을 3번 이상 반복하지 않는다. 리드는 1단, 본문은 3단, 인용은 7단처럼 시작점을 바꿔 리듬을 만든다.
- **여백 = 위계**: 섹션 간 `clamp(72px, 10vw, 160px)`, 단락 간 1em. 상자 대신 공간으로 묶는다.
- **베이스라인 감각**: 모든 수직 간격은 `8px` 배수. 룰과 텍스트 사이 간격은 룰 위 24px / 아래 12px 고정.
- **번호 체계**: 섹션 `§ 01`, 그림 `Fig. 1`, 각주 `1)`. 번호는 모노, 위치는 메타 레일.
---
## 6. 깊이 & 엘리베이션
에디토리얼에는 Z축이 없다. 깊이는 **선의 굵기와 종이 톤**으로만 표현한다.
| 레벨 | 표현 | 용도 |
|---|---|---|
| 0 평면 | `--paper` | 페이지 |
| 1 구분 | `border-top: 1px solid var(--rule)` | 단락 묶음, 리스트 행 |
| 2 강조 구분 | `border-top: 1px solid var(--ink)` | 풀쿼트, 표 헤더 |
| 3 섹션 시작 | `border-top: 3px solid var(--ink)` | 마스트헤드, 대섹션 |
| 인셋 | `background: var(--paper-sunk)` | 도표 바탕, 박스 기사(사이드바 기사) |
| 오버레이 | `--paper` + `border: 1px solid var(--ink)` | 메뉴·모달 — 그림자 대신 잉크 테두리 |
`box-shadow`, `backdrop-filter`, 그라디언트, `border-radius`(0 외)는 사용하지 않는다. 이미지는 직각 크롭.
---
## 7. Do / Don't
| Do | Don't |
|---|---|
| 제목을 화면의 주인공으로 — 첫 화면의 40% 이상을 활자가 차지 | 히어로 이미지 + 중앙 정렬 제목 + 버튼 2개 |
| 헤어라인과 여백으로 그룹핑 | 카드, `rounded-xl`, `shadow-md` |
| 액센트는 드롭캡·섹션 번호·핵심 수치 1개 | 액센트 색 링크, 액센트 버튼, 액센트 배경 블록 |
| 본문 칼럼을 중앙에서 비켜 배치 | 모든 블록이 `max-w-3xl mx-auto` |
| 모노 라벨로 날짜·호수·분류 표기 (`VOL. 07 — 2026.10`) | 컬러 배지·필 태그 |
| 한글 세리프 헤딩 + Pretendard 본문 | 한글에 라틴 전용 세리프만 지정해 시스템 폰트로 깨짐 |
| 실제 같은 기사 제목·필자·숫자 | "혁신의 미래를 열다" 같은 빈 카피 |
| 도표는 단색 + 강조 1개, 직접 라벨 | 무지개 차트, 범례 박스, 3D 효과 |
| 이미지 없을 때 SVG 기하 도형·듀오톤 그림 | 이모지, 스톡 일러스트 |
---
## 8. 반응형
| 브레이크포인트 | 그리드 | 변화 |
|---|---|---|
| ≥1280px | 12단 | 메타 레일 + 본문 + 사이드노트 3열 |
| 960–1279px | 12단 | 사이드노트가 본문 아래 단락 사이로 이동 (`grid-column: 3 / 11`) |
| 640–959px | 6단 | 메타 레일이 키커 한 줄로 접힘. 풀쿼트 전폭 |
| <640px | 4단, 좌우 마진 20px | 모든 블록 전폭. 드롭캡 2행 높이. 마스트헤드 제목 `2rem` |
- 디스플레이 크기는 `clamp()`가 처리하므로 미디어쿼리로 폰트를 바꾸지 않는다.
- 모바일에서도 비대칭 감각은 유지: 키커·번호를 좌측 정렬로, 풀쿼트는 왼쪽 3px 액센트 룰 대신 상하 잉크 룰.
- 표는 `overflow-x: auto` 래퍼, 첫 열 `position: sticky`.
- 터치 타깃 최소 44px — 인덱스 행은 패딩으로 확보.
---
## 9. 에이전트 프롬프트 가이드
### 기본 프롬프트 (복사해서 사용)
```
에디토리얼 타이포그래피 스타일로 만들어줘. 활자가 레이아웃의 주인공이다.
- 배경 #f6f2ea(미색 종이), 텍스트 #16140f(잉크), 보조 #6b665c, 구분선 #d9d2c4
- 액센트는 #b8321f(주홍 벽돌) 하나만. 드롭캡·섹션 번호·핵심 수치 1개에만 사용
- 폰트: 한글 헤딩 Noto Serif KR, 라틴 디스플레이 Instrument Serif, 본문 Pretendard, 라벨 JetBrains Mono(대문자, 자간 0.14em)
- 제목은 clamp()로 유동 크기(최대 7.5rem), 행간 1.05–1.2, 음수 자간
- 12단 비대칭 그리드: 좌측 1–2단은 번호·날짜 메타 레일, 본문은 3–8단, 사이드노트 10–12단
- 카드·그림자·둥근 모서리 금지. 1px 헤어라인과 3px 잉크 룰, 여백으로만 구분
- 풀쿼트(상하 잉크 룰), 드롭캡, § 번호 섹션, 각주형 메타데이터 포함
- 한글은 word-break: keep-all, 본문 행간 1.8, 단 폭 36em 이하
```
### 상황별 프롬프트
**브랜드 저널 / 사보**
```
위 에디토리얼 스타일로 회사 브랜드 저널 기사 페이지를 만들어줘.
마스트헤드(저널명·VOL.·발행월), 비대칭 리드 기사(큰 세리프 제목 + 리드 문단 + 필자/사진가 바이라인),
오른쪽 '이번 호 목차' 번호 인덱스, 본문 중간 풀쿼트, Fig. 번호가 붙은 막대 도표 1개.
실제 같은 한국어 기사와 숫자를 써줘.
```
**연차 / 지속가능경영 보고서**
```
에디토리얼 스타일로 지속가능경영 보고서 웹 버전을 만들어줘.
챕터 표지는 거대한 § 번호와 세리프 제목, 핵심 지표는 카드 대신 큰 숫자 + 헤어라인 표,
각 수치 옆에 각주형 출처. 크리스프 화이트 변형(#ffffff, 액센트 #23407a)으로.
```
**리서치 리포트 / 롱폼**
```
에디토리얼 스타일로 리서치 리포트 랜딩을 만들어줘. 첫 화면은 이미지 없이 활자만:
화면 폭 70%를 차지하는 제목, 좌측 메타 레일(발행일·저자·읽는 시간), 요약 3문단.
스크롤하면 번호 매긴 섹션, 단색 도표, 사이드노트 각주가 이어진다.
```
### 수정 요청 프롬프트
```
지금 화면이 너무 '웹앱'처럼 보인다. 카드와 그림자를 모두 없애고 1px 구분선과 여백으로 바꿔줘.
본문 칼럼을 중앙에서 왼쪽으로 비켜 배치하고, 액센트 색이 3곳 넘게 쓰였으면 드롭캡과 섹션 번호만 남겨줘.
```
```
타이포 위계를 키워줘. 제목은 clamp(3rem, 2rem + 5.5vw, 7.5rem), 섹션 라벨은 모노 대문자 11px.
크기 단계는 6개 이하로 줄이고, 나머지 위계는 굵기와 색(ink / muted)으로만 만들어.
```
### 체크리스트 (anti-slop.md 추가 항목)
- [ ] 첫 화면에서 가장 큰 요소가 활자인가?
- [ ] `border-radius`와 `box-shadow`가 0개인가?
- [ ] 액센트가 화면당 3곳 이하인가?
- [ ] 본문 칼럼 시작점이 중앙 정렬이 아닌가?
- [ ] 한글 헤딩이 한글 세리프로 렌더링되는가 (시스템 폴백 아님)?
- [ ] 날짜·호수·필자·출처 같은 메타데이터가 모노 라벨로 있는가?