editorial-design

name	editorial-design
version	1
description	에디토리얼·editorial-design — 매거진, 롱폼, 인터뷰, 에세이, 브랜드 백서를 대형 serif, 헤어라인, 드롭캡, 풀쿼트, 바이라인, 캡션으로 짜는 HTML 디자인·시각화 시스템. 트리거: 에디토리얼, 매거진, 잡지처럼, 롱폼, 인터뷰페이지, 브랜드백서, serif, Monocle, 매거진인포그래픽. NOT: 대시보드, apple-canvas, prism-design, box-cut-design, teenage-design, 산문 작성.
license	Proprietary. Brand references are used only as observed visual inspiration.

Editorial Design

매거진 품질의 HTML을 짭니다 — 세리프 리듬, 헤어라인, 캡션, 바이라인, 정성 들인 여백, 그리고 에디토리얼 무게를 지는 이미지 한 점입니다. 데이터가 들어오면 일반 차트로 후퇴하지 않고 매거진 인포그래픽으로 번안해, 정중한 읽기 리듬을 깨지 않으면서 8대 시각문법을 본문 흐름 안에 앉힙니다.

범위 — 디자인·시각화 전용 (문체·내용 불가침)

이 스킬은 시각 디자인만 책임진다. 사용자가 준 텍스트는 텍스트층(작성자·UP·shaper-skill)의 영토이며 침범하지 않는다.

• 본문·제목의 어휘·어미·문장구조·문단·문체를 한 글자도 바꾸지 않는다. 받은 텍스트 그대로(verbatim) 시각만 입힌다.
• UP 입니다체(또는 작성자 문체)를 유지한다. 에디토리얼의 정중한 문어체·각조 있는 장문 무드 때문에 본문 어미를 ~다체로 바꾸거나 문장을 다시 쓰는 것은 절대 금지다.
• 형용사 삭제·자랑/과장 제거·카피/헤드라인 생성·톤 변환은 이 스킬의 일이 아니다 → 텍스트는 미리 받는다(없으면 작성자·shaper-skill·copywriting-skill).
• 마스트헤드·바이라인·캡션·각주 같은 디자인 가구는 본문 둘레에 얹는 시각 메타이며, 본문 카피의 재작성이 아니다.

상세: references/text-handling.md.

Use When — 이럴 때 발동합니다

다음 중 하나면 이 스킬을 켭니다.

• 매거진·잡지 페이지, 인터뷰 페이지, 에세이·thinking piece, 에디토리얼 백서·white paper, 브랜드 아티클, 다듬은 롱폼 랜딩을 만들 때.
• "에디토리얼로·매거진처럼·Monocle·Pentagram·세리프로·잡지처럼·롱폼·아티클로 만들어줘"라고 할 때.
• 데이터·지표·연표·비교가 든 매거진형 아티클을 만들 때 — 이때는 매거진 인포그래픽으로 번안합니다.
• 페이지가 조용하고 정중하며, 읽기 위해 설계된 느낌이어야 할 때.

NOT — 이럴 때는 다른 스킬로

• 대시보드·관리자 UI·앱 화면·운영 도구 → ui-designer.
• Apple식 스펙터클·비비드 빅타이포 → apple-canvas.
• SaaS 풀랜딩 9 MECE → prism-design.
• 박스컷 단편·따옴표 라벨·헬베티카 블랙 → box-cut-design.
• lowercase deadpan 카탈로그 → teenage-design.
• 본문 산문 생성 → shaper-skill(글은 미리 받습니다).
• 카피·헤드라인 생성 → copywriting-skill.
• 사업계획서·피치덱 → bp-guide.

경계 한 줄 — 운영용 대시보드는 ui-designer, 읽히는 매거진 안에 앉는 도표는 editorial입니다.

미감 디렉티브 — 디폴트를 매거진 인포그래픽으로

에디토리얼의 데이터 시각화는 차트가 아니라 매거진 인포그래픽입니다. Monocle·Pentagram·FT Weekend가 본문 옆에 도표를 앉히는 방식 — 정중한 읽기 리듬을 깨지 않고, 헤어라인과 serif 수치로 데이터를 본문의 일부처럼 만드는 것이 디폴트입니다. 일반 대시보드 카드 나열은 디폴트에서 추방합니다.

불가침 시그니처를 8패밀리 모든 컴포넌트에 일관 적용합니다.

1. 팔레트는 무채색 잉크 3단(--ed-ink --ed-ink-2 --ed-ink-3) + warm paper + 액센트 단 1색(vermillion --ed-accent). 차트 채움도 이 5색 안에서만, 컬러풀한 카테고리 팔레트는 금지입니다. 강조 1계열만 vermillion, 나머지는 잉크 톤·헤어라인입니다.
2. 모든 경계선은 hairline(0.5px) 또는 thin(1px)입니다. 굵은 보더·박스 섀도·큰 radius는 금지입니다. 차트 축·그리드·테이블 룰은 전부 0.5px #C9C5BD입니다.
3. 모든 수치는 serif 디스플레이로 크게 씁니다. KPI 숫자·도넛 중앙·게이지 값은 4896px serif, 단위·증감·캡션만 Inter sans 1113px uppercase입니다.
4. 모든 도표에 캡션과 출처 한 줄을 디폴트로 답니다 — Monocle식 "Source: ___, 2026". 데이터에도 byline·dateline 문법을 그대로 적용합니다.
5. 채움은 평면 단색입니다. 전역 그라데이션·네온·글로우·glassmorphism은 금지입니다(MEMORY design-vivid-fill-no-decor와 정합). 도넛은 컬러 파이가 아니라 흑백·vermillion 스트로크 링으로, 막대는 채움 막대가 아니라 헤어라인 baseline 위 단색 막대로 번안합니다.
6. 여백 리듬을 유지합니다. 차트 한 점은 본문 컬럼(max-width 640px) 흐름 안에 들이거나 풀폭 1점 강조 슬롯으로 둡니다. 차트 3연속 그리드는 읽기 리듬을 깨므로 금지입니다.
7. 모션은 hairline-draw·fade-in 정도로 절제하고, prefers-reduced-motion 폴백을 반드시 둡니다.

콘텐츠 → 매거진 인포그래픽 매핑 게이트 (스타일 입히기 "전" 강제 통과)

에디토리얼은 본문이 주인공입니다. 그래서 매핑은 "어디까지가 산문이고 어디부터가 도표인가"를 먼저 가릅니다. 산문 문단은 건드리지 않고, 데이터·단계·비교·관계·시간·분포·항목만 도표로 끌어냅니다.

• STEP1 인벤토리 — 페이지를 섹션 단위로 나열하고, 각 섹션이 담은 정보를 식별합니다. 산문 문단(읽는 글)과 구조 정보(데이터·목록·관계)를 표시로 구분합니다.
• STEP2 논리 판별 — 구조 정보가 든 섹션마다 8패밀리 중 어떤 논리인지 판별합니다: 흐름·계층·비교·수치·관계·시간·분포·표.
• STEP3 문법 선택(결정트리) — 그 논리에 가장 직관적인 시각문법 1개를 고릅니다.
  • 순서·단계가 있나 → FLOW(process-rail / branch-flow / sequence-numbered)
  • 상하·구성·포함이 있나 → HIERARCHY(pyramid-tiers / layer-stack / org-tree)
  • 둘 이상을 항목별로 맞대나 → COMPARE(compare-matrix / quadrant-2x2 / spec-keyvalue / before-after)
  • 양·증감·비율을 보이나 → METRIC(kpi-stat-row / bar-hairline / line-spark / donut-ring / gauge-arc / funnel-rule)
  • 무엇이 무엇과 이어지나 → RELATION(network-hairline / venn-stroke / ecosystem-orbit)
  • 시점·기간이 핵심인가 → TIME(timeline-vertical / roadmap-now-next-later / changelog-dated / gantt-hairline)
  • 위치·정도·신호인가 → DISTRIBUTION(positioning-map / heat-grid / rag-scorecard)
  • 정렬·조회용 행열인가 → TABLE(ruled-table / definition-list)
• STEP4 리듬 — 인접 섹션이 같은 문법으로 연속되지 않게 배치합니다. 차트 3연속·카드 그리드 3연속은 금지입니다. 한 페이지에 여러 패밀리가 고루 분포되게, 산문 문단이 도표 사이를 흐르게 합니다.
• STEP5 스타일 — 선택된 문법을 editorial 미감으로 렌더합니다(헤어라인·serif 수치·캡션·무채색+vermillion 1색).

빌드 전에 섹션 매핑표를 명세로 남깁니다.

#	섹션	정보유형(산문/데이터)	논리(패밀리)	시각문법	컴포넌트
1	리드	산문	—	본문	drop-cap + lede
2	성장 지표	데이터	수치	METRIC	kpi-stat-row
3	경쟁 비교	데이터	비교	COMPARE	compare-matrix
…	…	…	…	…	…

문체 불가침 vs 정보 재구성 분리

references/text-handling.md의 "verbatim·표로 쪼개지 마라"가 데이터·항목 정보까지 산문처럼 묶어두는 과잉을 낳았습니다. 이를 두 영토로 정확히 가릅니다.

• 불가침(문장은 한 글자도 바꾸지 않음) — 본문 산문의 어휘·어미·문장구조·문단·문체(UP 입니다체 또는 작성자 문체)는 그대로 둡니다. 읽는 글은 시각만 입히고 verbatim 보존합니다. 매거진의 정중한 톤 때문에 어미를 ~다체로 바꾸거나 문장을 다시 쓰는 것은 금지입니다.
• 재구성 권장(구조는 시각문법으로 드러냄) — 절차·비교·관계·수치·시간·분포·항목 정보가 산문 문단 안에 눌려 있으면 그 구조를 도표로 끌어냅니다. 이때도 문장 자체는 다시 쓰지 않고, 항목의 단어·수치·라벨을 그대로 옮겨 도표에 앉힙니다.
• 경계 — 읽는 글(논지·서술·인용)은 문단 그대로 둡니다. 데이터·단계·항목·관계·표는 시각문법으로 구조화합니다. 핵심은 문장을 다시 쓰지 말고 문장이 담은 구조를 드러내는 것입니다. 예 — "1단계 접수, 2단계 심사, 3단계 발표로 진행됩니다"라는 문장은 그대로 두되 그 안의 3단계를 process-rail로도 보여줄 수 있습니다. "전년 대비 32% 성장"은 문장을 두고 32라는 값을 serif KPI로 한 번 더 강조합니다.
• 자가검사(도표 진입 전 3문) — ① 산문 문단의 어미·어휘·문장·문체를 그대로 두었는가 ② 도표로 끌어낸 것은 데이터·단계·항목·관계뿐이고 그 라벨·수치도 원문 그대로인가 ③ 도표가 본문 읽기 리듬을 깨지 않고 흐름 안에 앉았는가.

Design Rules

• Use a large serif display face for hero and a readable serif for body.
• Use sans only for metadata, labels, captions, and navigation.
• Keep the palette neutral; one subtle accent is optional.
• Use hairlines, not heavy borders.
• Use byline, dateline, caption, credit, and issue/page metadata when appropriate.
• Use real or user-provided imagery when available. If no image is available, use a clean aspect-ratio placeholder and label it clearly.
• Avoid decorative fake photography, stocky blur, generic gradients, and overdesigned cards.
• Keep letter-spacing at 0 except for small positive metadata labels.
• Korean text must use word-break: keep-all; line-break: strict; overflow-wrap: break-word;.
• Respect reduced motion and focus-visible states.

Codex Workflow

1. Start from references/samples/magazine.html, interview.html, or essay.html.
2. Copy references/tokens.css and selected components into the output.
3. Edit with apply_patch.
4. Verify with bash /Users/jason/.codex/skills/editorial-design/scripts/qc.sh <html-file>.
5. Inspect in Browser for readable column width, image framing, and mobile line breaks.

Components — 텍스트 가구 (E1~E8)

references/components.html의 E1~E8입니다.

Group	Use
E1 Masthead	Issue header, breadcrumb, section tag
E2 Hero	Serif hero, photo hero, quote-led hero
E3 Type	Drop cap, body serif, italic emphasis
E4 Photo	Image frame, caption, credit
E5 Quote	Pull quote, attributed blockquote
E6 Structure	Hairline dividers, columns, section rhythm
E7 Meta	Byline, dateline, footnotes, page marks
E8 Motion	Scroll reveal, hover italic, hairline draw

8 시각문법 패밀리 인덱스 (E9~E16)

데이터를 매거진 인포그래픽으로 번안하는 8패밀리입니다. 전부 references/components.html의 E9~E16에 복붙 가능한 완성 스니펫으로 있습니다.

패밀리	논리	컴포넌트	위치
FLOW	흐름·절차	process-rail · branch-flow · sequence-numbered	E9
HIERARCHY	계층·구성	pyramid-tiers · layer-stack · org-tree	E10
COMPARE	비교·대조	compare-matrix · quadrant-2x2 · spec-keyvalue · before-after	E11
METRIC	수치·그래프	kpi-stat-row · bar-hairline · line-spark · donut-ring · gauge-arc · funnel-rule	E12
RELATION	관계·망	network-hairline · venn-stroke · ecosystem-orbit	E13
TIME	시간·변화	timeline-vertical · roadmap-now-next-later · changelog-dated · gantt-hairline	E14
DISTRIBUTION	분포·위치	positioning-map · heat-grid · rag-scorecard	E15
TABLE	표·구조화	ruled-table · definition-list	E16

8패밀리를 모두 보여주는 조립 샘플은 references/samples/data-article.html입니다.

References

Need	Files
Text handling (문체 불가침)	references/text-handling.md
Components (E1E8 + 8패밀리 E9E16)	references/components.html
Tokens (인포그래픽 토큰·유틸 포함)	references/tokens.css
Scope	references/NOT-scope.md
데이터 아티클 샘플 (8패밀리 조립)	references/samples/data-article.html