PPTppt-editorial-magazine

에디토리얼 매거진

스프레드 단위 다단 칼럼 그리드, 큰 세리프 헤드라인과 드롭캡, 잡지 활자 부속의 출판물 위계.

미리보기

에디토리얼 매거진 샘플 렌더

색 토큰

bg
#FBFAF7
surface
#FBFAF7
text
#1C1B19
text_muted
#8A8782
accent
#A8312A
border
#C9C5BC

타이포 · 간격 토큰

display · {"family":"Playfair Display","fallback":"Georgia, Noto Serif KR","size":"40pt","weight":700,"tracking":"-0.01em","leading":1.1}
subhead · {"family":"Playfair Display","size":"22pt","weight":400,"style":"italic"}
body · {"family":"Source Serif Pro","fallback":"Georgia, Noto Serif KR","size":"17pt","weight":400,"leading":1.45}
dropcap · {"family":"Playfair Display","size":"54pt","weight":700,"color":"#A8312A","span_lines":3}
kicker · {"family":"Arial","fallback":"Helvetica, Pretendard","size":"11pt","weight":700,"tracking":"0.12em","case":"uppercase","color":"#A8312A"}
caption · {"family":"Arial","size":"10pt","weight":400,"style":"italic","color":"#8A8782"}
spacing.unit · 8
spacing.margin_x · 0.7in
spacing.margin_y · 0.6in
spacing.column_gap · 0.3in
spacing.column_ratio · 5:7

스타일 축

색채mono
타이포serif-editorial
레이아웃asymmetric
여백balanced
모션none
familyeditorial-magazine

출처

원자산은 각 출처 라이선스를 따름. 본 팩이 배포하는 것은 디자인 명세·토큰이며 원자산 사본이 아님.

이 팩 적용하기 — design-pick 스킬

Claude Code에 design-pick 스킬이 설치돼 있으면, 아래 한 줄을 붙여넣는 것으로 이 팩이 적용됩니다.

PPT 만들기
design-pick 스킬로 "ppt-editorial-magazine" 팩을
적용해서 [내 주제] 발표자료를 만들어줘

스킬이 없다면 — GitHub 저장소의 design-diversity 에서 skills/design-pick .claude/skills/에 복사하면 됩니다.

스킬 없이 쓰기 — 디자인 지시문(prompt.md) 직접 복사
prompt.md
# 에디토리얼 매거진 — ppt 디자인 팩

아래 지시를 한 블록으로 따라 16:9(13.33×7.5in) 슬라이드 덱을 만든다. 고급 잡지 스프레드 미감 — 다단 칼럼 그리드, 큰 세리프 헤드라인과 드롭캡, 풀컷 사진과 본문이 비대칭으로 교차한다.

## 이 스타일의 정체성
한눈에 알아보는 단서: (1) 본문이 2~3단 칼럼으로 흐르고 단의 폭이 서로 다른 비대칭 구성, (2) 세리프 헤드라인이 크고 첫 문단에 드롭캡(대문자 3줄 높이), (3) 풀컷 사진이 한쪽 단을 통째로 점유하고 본문이 그 옆을 감싼다. 슬라이드가 아니라 펼침면처럼 보인다.

## 색
- 배경/지면 `#FBFAF7` (펄 화이트, 따뜻한 종이 톤)
- 본문 텍스트 `#1C1B19` (잉크 블랙)
- 보조·캡션 `#8A8782`
- 헤어라인·룰 `#C9C5BC`
- 스팟 컬러 **1개만**: `#A8312A` (딥 버밀리언) — 드롭캡, 키커, 풀퀘이트 인용부호, 헤드라인 강조 1어절에만. 다른 색 금지.

## 타이포그래피
- 헤드라인 폰트: `Playfair Display` (대체 `Georgia`, `Noto Serif KR`). 한글은 `Noto Serif KR`.
- 본문 폰트: `Source Serif Pro` (대체 `Georgia`, `Noto Serif KR`).
- 키커/캡션 폰트: `Arial` (대체 `Helvetica`, `Pretendard`) — 산세리프로 대비.
- 헤드라인: 40pt / Bold / 자간 -1% / 행간 1.1
- 부제: 22pt / Italic / Regular
- 본문: 17pt / Regular / 행간 1.45 / 단당 최대 12줄
- 드롭캡: 첫 글자 54pt / Bold / 색 `#A8312A` / 본문 3줄에 걸침
- 키커: 11pt / Bold / 대문자 / 자간 +12% / 색 `#A8312A`
- 캡션: 10pt / Italic / 색 `#8A8782`

## 레이아웃 / 그리드
- **다단 칼럼 그리드.** 좌우 여백 0.7in, 상하 0.6in. 본문 영역을 2단(폭 비 5:7 비대칭) 또는 3단으로 분할, 단 간격 0.3in.
- 헤드라인은 단 경계를 넘어 상단 전폭 또는 좌측 2/3 점유.
- 풀컷 사진은 한 단을 위아래로 꽉 채우고(상하 여백까지) 본문이 다른 단으로 흐른다.
- 페이지 번호는 하단 외측, 10pt 세리프. 키커는 헤드라인 위.

## 형태 / 질감
- 모서리 반경 0px. 그림자 금지. 사진은 직사각 풀컷, 보더 없음.
- 구분은 헤어라인 룰(0.5pt `#C9C5BC`)로만 — 단 사이 또는 섹션 사이.
- 아이콘 사용하지 않음. 풀퀘이트는 본문보다 큰 24pt Italic + 좌측 버밀리언 인용부호.

## 차트 / 데이터 시각화 (잡지 인포그래픽 — 잉크빛 단색 + 세리프 캡션)
차트는 본문 칼럼 흐름 안에 삽입하는 작은 잡지 인포그래픽이다. SVG로 정밀 렌더한다. 신문 데이터면의 절제된 미감을 따른다.
- **차트 영역(절대값):** 차트는 한 칼럼 폭(2단 5:7 구성에서 좁은 단 약 4.5in, 넓은 단 약 6.2in) 안에 맞추고 세로는 2.4~3.2in. 본문 흐름을 끊지 않게 칼럼 폭에 정확히 정렬.
- **차트 타입 매칭:** 항목 비교=세로 막대(기본), 시계열 추세=라인, 비중=도넛(조각 3개 이하, 중앙 핵심 수치) 또는 100% 누적 막대 1줄, 구성 변화 비교=기울기 그래프. 파이차트 조각 5개 이상 금지.
- **데이터 잉크 최소화:** 차트 테두리 박스 제거, 배경 채움 제거, 범례 박스 제거. 격자선 전면 제거. 차트 위아래는 0.5pt `#C9C5BC` 헤어라인 룰로만 본문에서 분리.
- **축:** x축(또는 라인 차트 베이스라인)만 0.75pt `#1C1B19` 잉크 헤어라인. y축선 생략. **막대 기준선 데이터 0에서 시작**(잘린 y축·확대 축척 금지 — 막대 길이가 값에 정비례).
- **데이터 색:** 막대·선·면적은 잉크 블랙 `#1C1B19` 단색. 강조할 막대·구간 단 1개만 스팟 컬러 `#A8312A`(딥 버밀리언). 무지개·계열별 색칠 금지. 계열이 둘이면 잉크 블랙 + 50% 톤(`#8A8782`)으로 명도 구분. 막대 외곽선 없음.
- **직접 레이블링:** 범례 대신 계열명을 선·막대 끝에 직접. 값 레이블은 막대 끝/꼭짓점에 직접, **13pt Source Serif Pro Regular**(본문 세리프와 동일 폰트, 본문보다 작게), 자릿수·단위·소수 자리 일관, 숫자는 탭형(tabular figures) 정렬. 카테고리·축 라벨과 차트 캡션은 10pt `Arial` Italic `#8A8782`(키커·캡션 산세리프 규칙 유지).
- **막대 형태:** 막대 폭 : 간격 = 3 : 2, 모서리 각짐(반경 0), 막대 폭 픽셀 동일. 라인 차트는 1.5pt 실선·직선 세그먼트, 마커 없음 또는 끝점만 지름 5px 원, 면적 채움 없음.
- **출처:** 차트 하단에 10pt Arial Italic 출처 캡션 + 단위.

## 다이어그램·컴포넌트 (잡지 인포그래픽 다이어그램 언어 — 잉크 헤어라인 + 세리프 라벨)

다이어그램은 본문 칼럼 흐름 안에 삽입하는 잡지 인포그래픽이다. SVG로 정밀 렌더한다. 에디토리얼 다이어그램 언어는 한 세트로 묶인다 — **노드는 직각 사각형(반경 0), 보더는 0.5pt `#C9C5BC` 헤어라인 룰 + 채움 없음(지면색 `#FBFAF7` 위 그대로), 커넥터는 0.5pt `#1C1B19` 잉크 헤어라인 직선 + 작은 5px 삼각 화살촉, 번호 배지는 세리프 숫자 — 지름 0.3in 원형 0.5pt `#1C1B19` 보더 + 13pt Playfair Display Bold 숫자, 강조는 스팟 컬러 `#A8312A` 하나만**. 다이어그램 위아래는 0.5pt 헤어라인 룰로 본문에서 분리, 모든 라벨은 캡션 규칙(10pt Arial Italic `#8A8782`) 또는 본문 세리프.

- **프로세스 플로우:** 수평 4~5단계. 각 노드는 직각 사각형 폭 약 2.0in × 높이 0.85in, 0.5pt `#C9C5BC` 헤어라인 보더 + 채움 없음. 노드 좌상단에 세리프 번호 배지. 노드 내 13pt Source Serif Pro Bold 단계명 + 11pt Regular 한 줄. 노드 사이 커넥터 0.5pt 잉크 직선 + 5px 삼각 화살촉. 핵심 단계 1개만 보더를 1pt `#A8312A`로, 번호 배지 채움 `#A8312A` + 흰 숫자.
- **타임라인:** 수평 축 0.5pt `#1C1B19` 잉크 헤어라인. 마일스톤 마커는 지름 0.1in 원(`#1C1B19` 채움), 축 위 정확 정렬. 각 마커 위 10pt Arial Italic `#8A8782` 날짜 + 아래 13pt Source Serif Pro 이벤트명. 현재 시점만 마커 `#A8312A` 채움 + 지름 0.16in로 키움 + "현재" 10pt Arial Italic 라벨.
- **비교 레이아웃:** 칼럼 그리드를 활용해 2단(5:7 비대칭 유지 또는 1:1) 대조 — 단 사이 0.5pt `#C9C5BC` 헤어라인 룰 1줄. 각 단 상단에 22pt Playfair Display Italic 헤더. 행 항목은 좌측 17pt 세리프 라벨, 행 사이 0.5pt `#C9C5BC`. 우월 단 1개 헤더만 `#A8312A`.
- **매트릭스 2×2:** 한 변 약 4.2in, 십자 축은 0.5pt `#1C1B19` 잉크 헤어라인. 축 라벨은 11pt 대문자 키커 `#A8312A`(네 끝). 사분면 채움 없음(지면색 그대로), 핵심 사분면 1개만 `#C9C5BC` 25% 옅은 채움. 데이터 포인트는 지름 0.14in 원 — 중립 `#1C1B19` 채움, 핵심 1개 `#A8312A` + 옆에 13pt 세리프 라벨.
- **계층 / 퍼널:** 수직 3~5단. 각 단은 직각 사각형 0.5pt `#C9C5BC` 헤어라인 보더 + 채움 없음, 폭이 위→아래로 단계별 0.9in 감소(퍼널) 또는 동일 폭 적층(계층). 단 사이 0.5pt 헤어라인 룰. 각 단 좌측 세리프 번호 배지, 내부 13pt Source Serif Pro Bold 레벨명 + 우측 17pt 수치. 핵심 단 1개만 보더 1pt `#A8312A`.
- **KPI 스탯 카드:** 카드는 사각 박스가 아니라 헤어라인 룰로 구획 — 각 KPI는 위아래 0.5pt `#C9C5BC` 룰 사이에 놓는다. 상단 11pt 대문자 키커 `#A8312A` 라벨, 그 아래 40pt Playfair Display Bold `#1C1B19` 수치(탭형), 하단 10pt Arial Italic 증감("▲ 0.0%p" 증가 / "▼ 0.0%p" 감소, 화살표·텍스트 모두 `#8A8782`). 3~4개를 칼럼 그리드에 균등 배치, 카드 사이 세로 0.5pt 헤어라인.

## 전환 (PPT)
페이지 넘김 느낌의 0.4s 페이드만. 모핑·날아오기 금지.

## 하지 말 것
- 산세리프로 헤드라인·본문 쓰기 — 세리프가 정체성. 산세리프는 키커·캡션에만.
- 좌우 대칭 중앙 정렬 레이아웃 — 칼럼 폭은 의도적으로 비대칭.
- 둥근 모서리, 그림자, 카드 박스, 그라디언트.
- 불릿 리스트로 본문 채우기 — 본문은 칼럼으로 흐르는 산문.
- 스팟 컬러 2개 이상, 텍스트 본문에 컬러.
- 이모지·클립아트·스톡 아이콘.
- **아마추어 차트 회귀 금지:** 3D·입체 차트, 원근·기울임, 그림자·광택·베벨, 무지개·계열별 색칠, 격자선, 차트 테두리 박스, 배경 채움, 범례 박스, 잘린 y축·확대 축척, 둥근 막대, div 블록 막대. 데이터는 잉크 블랙 단색 + 버밀리언 강조 1개, 값 레이블은 본문 세리프, 캡션은 Arial Italic.

## 적용 예
- **표지:** 펄 화이트 지면, 상단 키커, 40pt 세리프 헤드라인 2줄, 그 아래 풀폭 풀컷 사진. 하단 외측 페이지 번호.
- **본문 슬라이드:** 좌 5단에 풀컷 사진, 우 7단에 본문 — 첫 문단 드롭캡, 단 사이 헤어라인. 헤드라인은 상단 전폭.
- **차트 슬라이드:** 본문 칼럼 흐름 안에 칼럼 폭(약 4.5~6.2in)에 맞춘 SVG 차트 1개를 잡지 인포그래픽처럼 삽입 — 위아래 0.5pt 헤어라인 룰로 분리, 막대/선은 잉크 블랙 `#1C1B19` 단색·강조 1개만 `#A8312A`, 막대 폭:간격 3:2, 값 레이블 13pt Source Serif Pro 탭형 직접 표기, 격자선·테두리·범례 제거·막대는 데이터 0 기준선. 차트 캡션과 출처는 10pt `Arial` Italic `#8A8782`.
- **프로세스 슬라이드:** 헤드라인 상단 전폭 + 그 아래 수평 4단계 프로세스를 잡지 다이어그램처럼 — 직각 사각형 노드 2.0×0.85in(헤어라인 보더·채움 없음), 세리프 번호 배지, 0.5pt 잉크 직선 + 5px 화살촉, 핵심 단계 1개 보더 1pt `#A8312A`. 위아래 0.5pt 헤어라인 룰로 본문과 분리.
- **타임라인 슬라이드:** 헤드라인 아래 수평 타임라인 — 0.5pt 잉크 축, 0.1in 원 마커, 마커 위 10pt Arial Italic 날짜 + 아래 13pt 세리프 이벤트명, 현재 시점만 `#A8312A`. 칼럼 폭에 정렬, 출처 10pt Arial Italic.
- **매트릭스 슬라이드:** 좌 5단에 풀컷 사진, 우 7단에 약 4.2in 2×2 매트릭스 — 0.5pt 잉크 십자 축, 네 끝 11pt 대문자 키커 `#A8312A` 축 라벨, 데이터 포인트 0.14in 원(중립 `#1C1B19`·핵심 1개 `#A8312A`) + 13pt 세리프 라벨, 핵심 사분면만 `#C9C5BC` 25% 옅은 채움.

복사한 지시문을 Claude(claude.ai)나 Claude Code에 붙여넣고 “위 디자인 팩을 그대로 따라 [내 주제]로 만들어줘”라고 요청하세요.