PPTppt-cinematic-keynote-deck

Cinematic Keynote Deck

순흑 무대 위 거대 키 비주얼 한 점과 최소 텍스트, 정연한 균형 리듬과 끝의 서머리 슬라이드를 가진 시네마틱 키노트 덱.

미리보기

Cinematic Keynote Deck 샘플 렌더

색 토큰

bg
#000000
surface
#0E0E0E
text
#F5F5F7
text_muted
#8A8A8E
accent
#E8B341
border
#262626

타이포 · 간격 토큰

display · {"family":"Inter","fallback":"Manrope, Helvetica Neue, Pretendard","size":"64pt","weight":300,"tracking":"-0.02em","leading":1.05}
headline · {"family":"Inter","size":"40pt","weight":400,"tracking":"-0.015em","leading":1.1}
sub · {"family":"Inter","size":"20pt","weight":400,"tracking":"-0.005em","color":"#8A8A8E"}
body · {"family":"Inter","fallback":"Manrope, Pretendard","size":"22pt","weight":400,"leading":1.4}
kpi · {"family":"Inter","size":"88pt","weight":300,"color":"#F5F5F7"}
caption · {"family":"Inter","size":"11pt","weight":400,"color":"#8A8A8E"}
spacing.unit · 8
spacing.margin_x · 1.0in
spacing.margin_y · 0.85in
spacing.visual_gap · 0.5in

스타일 축

색채dark
타이포minimal-sans
레이아웃full-bleed
여백balanced
모션subtle
familycinematic-keynote

출처

원자산은 각 출처 라이선스를 따름. 본 팩이 배포하는 것은 시각 연출 원리(다크 무대·풀블리드 비주얼·서머리 그리드·차트 스타일) 명세이며 Apple의 로고·제품 이미지·SF Pro 폰트·독점 자산 사본이 아니다. 폰트는 오픈 라이선스 대체(Inter)를 지정한다.

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

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

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

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

스킬 없이 쓰기 — 디자인 지시문(prompt.md) 직접 복사
prompt.md
# 시네마틱 키노트 — ppt 디자인 팩

아래 지시를 한 블록으로 따라 16:9(13.33×7.5in) 슬라이드 덱을 만든다. 순흑 무대 위에 거대한 키 비주얼을 한 점 띄우고 텍스트는 극단적으로 줄인 시네마틱 키노트 미감 — 한 슬라이드 한 메시지, 무대 같은 균형 리듬.

## 이 스타일의 정체성
한눈에 알아보는 단서: (1) 배경은 순흑 `#000000`, 슬라이드 대부분이 글자 몇 개와 큰 비주얼 하나로만 구성된다. (2) 디스플레이는 타이트한 자간의 라이트~레귤러 산세리프를 화면 중앙에 크게, 본문 불릿은 거의 없다. (3) 비주얼과 캡션이 정연한 간격으로 한 묶음처럼 떠 있고, 덱 끝에 핵심 수치를 모은 '서머리 슬라이드'가 온다.

## 색
- 배경 `#000000` (순흑 고정, 그라디언트·텍스처·회색 배경 금지)
- 표면/카드(서머리 슬라이드용) `#0E0E0E` (거의 검정, 1px `#262626` 보더로만 분리)
- 1차 텍스트 `#F5F5F7` (오프화이트 — 순백 아님, 눈부심 완화)
- 2차 텍스트·캡션 `#8A8A8E` (중성 회색)
- 헤어라인·구분선 `#262626`
- 강조색 **1개만**: `#E8B341` (웜 골드/앰버) — 핵심 수치, 차트 발광 데이터, 키 캡션 1어절에만. 그 외 텍스트는 무채색.

## 타이포그래피
- 폰트: `Inter` (대체 `Manrope`, `Helvetica Neue`). 한글 병기 시 `Pretendard`.
- 키 메시지(표지/스테이트먼트): 64pt / Light(300) / 자간 -2% / 행간 1.05 / 최대 2줄 / 중앙 정렬
- 슬라이드 헤드라인: 40pt / Regular(400) / 자간 -1.5% / 행간 1.1 / 최대 2줄
- 서브 캡션: 20pt / Regular(400) / 자간 -0.5% / 색 `#8A8A8E`
- 본문(드물게): 22pt / Regular(400) / 행간 1.4 / 슬라이드당 최대 3줄
- 거대 KPI 숫자(서머리): 88pt / Light(300) / 색 `#F5F5F7` 또는 강조 `#E8B341`
- 캡션·출처: 11pt / Regular(400) / 색 `#8A8A8E`

## 레이아웃 / 그리드
- **무대형 중앙 축 그리드.** 슬라이드 안전영역 좌우 여백 각 1.0in, 상하 각 0.85in.
- 키 비주얼은 캔버스 면적의 50~70%를 차지하며 중앙 또는 좌우 한쪽에 단 하나만 배치. 풀블리드(가장자리까지) 비주얼도 허용.
- 텍스트 블록은 비주얼과 0.5in 간격으로 한 묶음. 한 슬라이드의 텍스트·비주얼 묶음은 시각 무게 중심이 캔버스 중앙선 ±0.6in 안.
- 서머리 슬라이드: 2×2 또는 3×1 KPI 그리드, 각 셀 `#0E0E0E` 면 + 1px `#262626` 보더, 88pt 숫자 + 14pt 라벨.
- 슬라이드 번호·러닝 헤더 없음(키노트는 미니멀). 출처가 필요한 차트 슬라이드에만 우하단 11pt 캡션.

## 형태 / 질감
- 모서리 반경 6px(서머리 카드·이미지). 그림자 금지 — 깊이는 순흑 배경과 비주얼 자체의 명암으로만.
- 비주얼 주변에 아주 미세한 비네팅(가장자리 8% 어둡게)까지만 허용, 인공 글로우·렌즈플레어 금지.
- 아이콘 사용 최소화. 쓸 경우 1.5pt 스트로크 라인 아이콘, 단색 `#F5F5F7`.

## 차트 / 데이터 시각화 (다크 무대 — 발광 단색 + 큰 숫자 오버레이)
차트는 SVG로 정밀 렌더한다(div 블록 막대 금지). 이 팩의 차트는 "어두운 무대 위에 데이터 한 줄이 떠 있고, 그 위에 거대한 숫자가 얹힌" 연출이다.
- **차트 영역(절대값):** 플롯 영역 가로 약 8.0in × 세로 약 3.2in, 캔버스 중앙 하단. 그 위쪽에 40pt 헤드라인 1줄. 모든 막대·점·축은 픽셀 단위 정렬.
- **차트 타입 매칭:** 추세=라인(기본, 무대에 가장 어울림), 항목 비교=세로 막대(소수 항목), 비중=도넛(조각 3개 이하, 중앙에 88pt 핵심 수치), 단일 핵심 지표=거대 KPI 숫자 1개. 파이 5조각 이상·3D 금지.
- **데이터 잉크 최소화:** 차트 테두리 박스·배경 채움·범례 박스 제거. 격자선 그리지 않음(어두운 무대엔 격자선이 노이즈). y축 눈금 라벨 생략 — 값은 직접 레이블로만.
- **축:** x축 기준선만 0.75pt `#262626` 헤어라인. y축선 생략. **막대·라인 기준선은 데이터 0에서 시작**(잘린 y축 금지).
- **직접 레이블링:** 카테고리 이름을 각 막대·점 아래 13pt `#8A8A8E`. 값 레이블은 막대 끝/꼭짓점 위 0.08in에 18pt Semibold, 강조 데이터 값만 `#E8B341`·나머지 `#F5F5F7`, 자릿수·단위 일관, 탭형 정렬. 가장 중요한 데이터 1개는 그 위에 별도 88pt 거대 숫자로 오버레이.
- **데이터 색:** 강조할 막대/라인 1개만 `#E8B341`(채움·스트로크), 나머지는 `#4A4A4E`(다크 중립). 무지개·계열별 다른색 금지. 라인은 강조 계열만 보이고 비교 계열은 `#4A4A4E` 1.25pt.
- **세로 막대:** 막대 폭 : 간격 = 3 : 2. 막대 채움 강조색 단색(그라디언트 채움 금지 — 발광 느낌은 색 자체로). 외곽선 없음, 모서리 반경 0~2px.
- **라인 차트:** 2pt 실선, 강조 계열 `#E8B341`, 마커는 끝점·강조점에만 지름 7px 원(채움 `#E8B341`, 1.5px `#000000` 테두리로 분리). 면적 채움은 강조 계열 아래 12% 불투명도 `#E8B341`까지만. 직선 세그먼트.
- **헤드라인 + 출처:** 차트 슬라이드도 상단 40pt 헤드라인 의무. 차트 하단에 단위 명기, 우하단 11pt 출처 캡션 의무.

## 다이어그램·컴포넌트 (다크 무대 — 헤어라인 골격 위 발광 노드 한 점)
다이어그램은 전부 SVG로 정밀 렌더한다(div 블록 금지). 이 팩의 다이어그램 언어는 차트와 동일하다 — **순흑 무대 위에 `#262626` 헤어라인 골격, 노드는 거의-검정 `#0E0E0E` 면 + 1px `#262626` 보더, 단 하나의 활성 요소만 앰버로 발광**. 모서리 반경 6px, 화살촉은 가는 삼각(채움). 단계 번호는 동일 배지로: 지름 0.4in 원, 1px `#262626` 보더, `#0E0E0E` 채움, 안에 `Inter` Regular 16pt `#8A8A8E` — 활성 단계만 보더·숫자 `#E8B341`. 다이어그램은 무대형 중앙 축에 배치하고 요소 수를 극단적으로 줄인다(한 다이어그램 = 한 메시지). 그림자 금지 — 깊이는 명암으로만.
- **프로세스 플로우:** 수평 단계 노드, 노드 = `#0E0E0E` 면 + 1px `#262626` 보더, 폭 2.2in × 높이 0.9in, 6px 반경, 내부 패딩 0.2in. 노드 안 20pt `Inter` Regular 라벨 + 13pt `#8A8A8E` 보조 1줄, 좌상단에 0.4in 번호 배지. 커넥터 = 1pt `#262626` 실선 + 채움 삼각 화살촉(폭 0.11in). 노드 간격 0.5in. 최대 4단계(무대는 절제), 활성 단계만 보더·번호·라벨 강조 `#E8B341`.
- **타임라인:** 수평 1pt `#262626` 축선 1줄, 캔버스 중앙. 마일스톤 마커 = 지름 9px 원, `#4A4A4E` 채움(현재/핵심 시점만 `#E8B341` 채움 + 1.5px `#000000` 분리 테두리). 마커 위 13pt `#8A8A8E` 날짜, 마커 아래 20pt `Inter` Regular `#F5F5F7` 이벤트명. 마커 5개 이하, 등간격.
- **비교 레이아웃:** 2열 대조(무대는 3열보다 2열). 두 패널 = `#0E0E0E` 면 + 1px `#262626` 보더, 6px 반경, 사이 간격 0.5in. 각 패널 상단 20pt `Inter` 헤더 + 22pt 본문 2줄 이하. 두 패널 중앙에 1px `#262626` 수직 헤어라인 또는 40pt Light "vs"(1어절만 `#E8B341` 허용). 대조 결과 1개 패널만 보더 `#E8B341`.
- **매트릭스 / 2×2:** 가로·세로 축선 각 1pt `#262626` 십자, 캔버스 중앙. 사분면 채움 없음(어두운 무대 자체가 배경). 축 라벨 13pt `#8A8A8E`, 사분면명 20pt `Inter`. 데이터 포인트 = 지름 0.2~0.5in 원, `#4A4A4E` 채움, 강조 1개만 `#E8B341` 채움 + 그 위 별도 88pt 거대 숫자 오버레이까지 허용. 점 옆 13pt 라벨.
- **계층 / 피라미드 / 퍼널:** 3레벨 권장(무대는 극단적 절제), 위→아래 폭이 변하는 막대/사다리꼴, `#0E0E0E` 면 + 1px `#262626` 보더, 레벨 사이 0.12in 간격. 레벨 라벨 도형 안 20pt `Inter` Regular. 핵심 1레벨만 보더·라벨 `#E8B341`. 퍼널 최하단 전환값은 88pt 거대 숫자로.
- **KPI·스탯 카드:** 서머리 슬라이드 그리드와 동일 — `#0E0E0E` 면 + 1px `#262626` 보더, 6px 반경, 88pt Light 거대 수치(핵심 1개만 `#E8B341`, 나머지 `#F5F5F7`) + 14pt `#8A8A8E` 라벨. 증감은 수치 아래 13pt `Inter` + 가는 ▲/▼(`#E8B341` 상승 / `#8A8A8E` 하락). 2×2 또는 3×1 그리드, 셀 사이 간격 0.4in.

## 전환 (PPT)
긴 페이드/디졸브로 시네마틱 호흡을 만든다 — 0.4~0.6s 크로스 디졸브. 키 비주얼은 0.5s 미세 스케일 인(102%→100%)까지 허용. 날아오기·회전·바운스 금지.

## 하지 말 것
- 배경을 회색·네이비·그라디언트로 — 반드시 순흑 `#000000`.
- 슬라이드를 불릿 리스트로 채우기 — 한 슬라이드 한 메시지, 텍스트 3줄 이하.
- 강조색 2개 이상, 본문 텍스트에 컬러.
- 인공 글로우·렌즈플레어·네온 외곽선·과한 그림자.
- **아마추어 차트 회귀 금지:** 3D·입체 막대, 막대 그림자·광택·베벨, 무지개·계열별 색칠, 격자선, 차트 테두리 박스, 배경 채움, 범례 박스, 잘린 y축, div 블록 막대, 그라디언트 채움 막대.
- 클립아트·이모지·스톡 아이콘으로 무대 채우기.
- 슬라이드마다 같은 레이아웃 반복 — 비주얼 위치(중앙/좌/우/풀블리드)를 슬라이드마다 의도적으로 바꾼다.

## 적용 예
- **표지:** 순흑 배경 중앙에 64pt Light 키 메시지 2줄, 그 아래 0.5in 간격으로 20pt 서브 캡션 1줄(1어절 `#E8B341`). 비주얼은 없거나 풀블리드 어두운 키 비주얼 위 텍스트 오버레이.
- **스테이트먼트 슬라이드:** 좌측 절반에 풀블리드 키 비주얼, 우측 절반 중앙에 40pt 헤드라인 + 22pt 본문 2줄. 텍스트·비주얼이 0.5in 간격 한 묶음.
- **차트 슬라이드:** 상단 40pt 헤드라인, 중앙 하단에 약 8.0×3.2in SVG 라인 차트 — 강조 계열 2pt `#E8B341` + 12% 면적, 비교 계열 1.25pt `#4A4A4E`, 끝점 7px 마커, 격자선 0개, x축 0.75pt 헤어라인. 가장 중요한 값은 88pt 거대 숫자로 차트 위 오버레이. 차트 하단 단위, 우하단 11pt 출처.
- **서머리 슬라이드:** 2×2 KPI 그리드, 각 셀 `#0E0E0E` + 1px `#262626` 보더, 88pt 숫자(핵심 1개만 `#E8B341`) + 14pt 라벨.
- **프로세스 다이어그램 슬라이드:** 상단 40pt 헤드라인, 중앙에 4단계 수평 플로우 — 각 노드 2.2×0.9in `#0E0E0E` 면 + 1px `#262626` 보더, 좌상단 0.4in 원형 번호 배지, 1pt `#262626` 커넥터 + 채움 삼각 화살촉, 활성 단계 1개만 `#E8B341` 발광.
- **타임라인 슬라이드:** 상단 40pt 헤드라인, 캔버스 중앙에 1pt `#262626` 수평 축 — 9px 원형 마일스톤 마커(핵심 시점만 `#E8B341`), 마커 위 13pt 날짜, 아래 20pt 이벤트명. 가장 중요한 마일스톤 값은 88pt 거대 숫자로 오버레이 허용.

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