---
type: knowledge
domain: design
status: active
last-reviewed: 2026-07-06
---

# 에디토리얼 매거진 (Editorial / Magazine)

> 한 줄 정의
> 세리프 디스플레이, 드롭캡, 괘선과 칼럼, 바이라인 — 종이 잡지의 조판 문법을 화면으로 옮긴 스타일. "읽는 경험" 자체가 브랜드가 된다. NYT Snow Fall(2012)이 디지털 에디토리얼의 기준을 만들었다.

![[preview-editorial.jpg]]

## 언제 쓰나 / 피하나

| 적합 | 부적합 |
|------|--------|
| 미디어·블로그·롱폼 콘텐츠 | 앱 크롬·고빈도 인터랙션 UI (세리프 라벨은 피로) |
| 브랜드 스토리·어바웃·매니페스토 | 조판할 본문이 없는 짧은 유틸 화면 (형식만 남음) |
| 커머스 룩북·시즌 캠페인 | 실시간 데이터·대시보드 |

## 스타일 DNA

### 팔레트 — 잉크 + 종이 + 포인트 1색

| 토큰 | 값 | 역할 |
|------|-----|------|
| paper | `#FAF7F2` | 바탕 (신문지보다 살짝 따뜻하게) |
| ink | `#1A1714` | 본문·헤드라인 |
| accent | `#C0392B` | 카테고리·링크·넘버 (잡지 레드) |
| rule | `#D8D2C7` | 괘선·구분선 |

- 색은 사진이 낸다 — UI 색은 잉크+종이+포인트 1색으로 절제하고, 사진 큐레이션에 힘을 쓴다.

### 타이포 — 조판 디테일이 몸통

- 디스플레이: 대비 강한 세리프 (Playfair Display, Fraunces). 자간 `-0.01~-0.03em`.
- 본문: **본문용 세리프** (Newsreader, Noto Serif KR) 18px+ / 행간 1.7+. 한글 화면용 부리체는 마루 부리가 표준.
- 캡션·바이라인·내비: 산세리프 대문자 + 자간 `.12em` — 세리프와의 대비가 "시스템 있는 잡지"를 만든다.
- 바이라인 서식(`글. 아무개 | 사진. 아무개`)·섹션 넘버링(`No. 01`)이 이 스타일의 목소리.

### 구조 장치 (시그니처)

드롭캡 · 풀 쿼트(본문 중간 큰 인용) · 칼럼 그리드 + 괘선 · 히어로 이미지 캡션 · 목차형 인덱스.

## 핵심 레시피 (CSS)

```css
.article {
  max-width: 68ch; margin-inline: auto;
  font: 400 1.125rem/1.75 'Newsreader', 'Noto Serif KR', serif;
  color: #1A1714;
}
h1 {
  font-family: 'Playfair Display', 'Noto Serif KR', serif;
  font-size: clamp(40px, 6vw, 88px); line-height: 1.02; letter-spacing: -.02em;
}
/* 드롭캡 — initial-letter가 표준, float 핵은 라인 정렬이 어긋난다 */
.article > p:first-of-type::first-letter {
  -webkit-initial-letter: 3; initial-letter: 3;
  margin-right: .12em; font-family: 'Playfair Display', serif; font-weight: 700;
}
.pullquote {
  border-block: 1px solid #1A1714;
  padding: 28px 0; margin: 48px 0;
  font-size: 1.75rem; line-height: 1.3; font-style: italic;
}
.byline {
  font: 500 .75rem/1 'Inter', sans-serif;
  letter-spacing: .12em; text-transform: uppercase;
}
```

- 세리프 본문은 종이보다 화면에서 눈에 나쁘다 — 크기·행간을 종이 감각보다 한 단계 키우는 것이 철칙.
- 양끝정렬은 하이픈 없이는 강물(river)이 흐른다 — 왼끝 rag 유지 또는 `hyphens: auto` 확인 후에만.

## 흔한 실수

- 본문까지 디스플레이 세리프(Playfair 본문 조판) → 디도네는 헤드라인 전용. 본문은 본문용 세리프로.
- 12~14px 세리프 본문 → 잡지 흉내내다 가독성 즉사. 18px부터 시작.
- 이탤릭·스몰캡 장식 남발 → 조판 디테일은 규칙이 있어야 디테일이다.
- 사진 톤 제각각 → 잡지는 화보 톤이 통일돼 있다. 필터 하나로 묶어라.

## 실물 레퍼런스

**정석**
- NYT "Snow Fall: The Avalanche at Tunnel Creek"(2012) — 디지털 에디토리얼의 이정표(퓰리처 수상). 제작 과정 기록: [How We Made Snow Fall](https://source.opennews.org/articles/how-we-made-snow-fall/) — 조판·미디어 통합 의사결정이 그대로 담겨 있다.
- 데이터 저널리즘 쪽 교집합은 [[데이터 디자인]]의 The Pudding 참조.

**갤러리 — 감각 배양**
- [Typewolf](https://www.typewolf.com) — 사이트 오브 더 데이 + 서체 페어링 해설. 에디토리얼 타이포 감각은 여기서 길러진다.
- [Siteinspire](https://www.siteinspire.com) — 스타일 필터로 editorial 계열만 골라 관찰.

**기법**
- [CSS-Tricks — initial-letter](https://css-tricks.com/almanac/properties/i/initial-letter/) — 드롭캡의 표준 구현 문서.
- [Butterick's Practical Typography](https://practicaltypography.com) — 무료 웹북이자 조판 규칙의 실무 성경. 이 문서의 본문 철칙(크기·행길이·행간)이 체계로 정리돼 있다 — "Typography in ten minutes"부터 읽는다.

**폰트**
- [Playfair Display](https://fonts.google.com/specimen/Playfair+Display) · [Fraunces](https://fonts.google.com/specimen/Fraunces) (디스플레이) · [Newsreader](https://fonts.google.com/specimen/Newsreader) (본문). 한글: [마루 부리](https://noonnu.cc/font_page/487) (네이버 마루 프로젝트 — 화면용 부리체의 표준) · Noto Serif KR.

- 검색 키워드: `editorial web design`, `digital magazine layout`

- 로컬 데모(코드=이 문서 레시피): `스타일/_previews/스타일-데모.html`

## 관련 문서

- [[디자인 스타일 카탈로그]] · 인접 스타일: [[스위스 인터내셔널]] (조판 축 형제 — 세리프 표현 vs 산세리프 객관), [[다크 럭셔리]] (세리프 위계의 야간 버전), [[그레인 블러]] (분위기 페어링이 흔한 조합)