PPTppt-folio-portfolio-keynote

Folio 포트폴리오 키노트PREMIUM

슬라이드 한쪽을 큰 직사각 작품 이미지가 채우고 반대쪽에 거대 인덱스 번호(01·02… 120~160px)와 짧은 케이스 캡션이 비대칭으로 앉는, coral 한 점의 크리에이티브 포트폴리오 케이스 스터디 키노트.

상세 페이지 미리보기7개 활용 장면

색 토큰

bg
#F7F7F5
surface
#FFFFFF
text
#141414
text_muted
#9A9A9A
accent
#FF5C35
data_light
#CFCFCB
data_dark
#141414

타이포 · 간격 토큰

index_number · {"family":"Space Grotesk","fallback":"General Sans, Inter, Pretendard, sans-serif","size":"110pt","weight":700,"tracking":"-0.03em","numerals":"tabular"}
display · {"family":"Space Grotesk","fallback":"General Sans, Inter, Pretendard, sans-serif","size":"36pt","weight":700,"tracking":"-0.01em","leading":1.15}
case_caption · {"family":"Space Grotesk","size":"18pt","weight":400,"leading":1.45}
tag · {"family":"Space Grotesk","size":"12pt","weight":500,"tracking":"0.06em","case":"uppercase"}
body · {"family":"Space Grotesk","size":"18pt","weight":400,"leading":1.45}
kpi · {"family":"Space Grotesk","size":"56pt","weight":700,"numerals":"tabular"}
spacing.unit · 8
spacing.margin_x · 0.65in
spacing.margin_y · 0.55in
spacing.grid · asymmetric, 12-column split 7:5 or 5:7, large image one side / giant index number + caption other

스타일 축

색채vivid-primary
타이포minimal-sans
레이아웃asymmetric
여백balanced
모션playful
familyfolio-portfolio

출처

원자산은 각 출처 라이선스를 따름. 본 팩이 배포하는 것은 디자인 명세·토큰이며 원자산 사본이 아님. 브랜드 영감은 brand_inspiration로만 참고하며 독점 폰트는 오픈 폰트로 대체한다.

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

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

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

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

스킬 없이 쓰기 — 디자인 지시문(prompt.md) 직접 복사
prompt.md
# Folio 포트폴리오 키노트 — ppt 디자인 팩

아래 지시를 한 블록으로 따라 16:9(13.33×7.5in) 슬라이드 덱을 만든다. Folio 포트폴리오 키노트 — 슬라이드 한쪽을 큰 작품 이미지 한 점이 채우고 반대쪽에 거대 인덱스 번호(01, 02… 120~160px)와 짧은 케이스 캡션이 비대칭으로 앉는 크리에이티브 포트폴리오/케이스 스터디 키노트. 강조는 coral 한 점.

## 이 스타일의 정체성
한눈에 알아보는 단서: (1) 거대 인덱스 번호(`01`·`02`… Space Grotesk 700, 120~160px)가 모든 케이스 슬라이드의 형태 정체성 — 작품 인덱스, (2) 슬라이드 한쪽은 큰 직사각 작품 이미지 한 점, 반대쪽은 거대 번호 + 짧은 케이스 캡션의 비대칭 배치, (3) 밝은 오프화이트 배경에 coral `#FF5C35` 한 점. 케이스 스터디처럼 흐른다.

## 색
- 배경 `#F7F7F5` (밝은 오프화이트)
- 표면(카드) `#FFFFFF`
- 잉크/인덱스 번호 `#141414`
- 강조 coral `#FF5C35` — 인덱스 번호 강조·작은 태그·차트 핵심 계열에만. 한 점.
- 캡션 `#9A9A9A`
- 강조색은 coral 1개뿐. 그라디언트·다른 컬러 금지.
- 통화 표기: 거대 수치는 `₩` 글리프 대신 `1,240억`·`KRW 1.24T`·`$1.2B` 식으로 표기(일부 폰트에서 ₩가 숫자와 겹친다).

## 타이포그래피
- 폰트: 전부 `Space Grotesk`(대체 `General Sans, Inter, sans-serif`). 한글은 `Pretendard`.
- 거대 인덱스 번호: 120~160px(16:9에서 약 90~120pt) / Space Grotesk 700 / 자간 -3% / tabular numerals
- 슬라이드 제목: 36pt / Space Grotesk 700 / 자간 -1% / 행간 1.15
- 케이스 캡션: 18pt / Space Grotesk 400 / 행간 1.45
- 작은 태그·라벨: 12pt / Space Grotesk 500 / 자간 +6% / 대문자
- 본문: 18pt / Space Grotesk 400 / 행간 1.45 / 슬라이드당 6줄 이하
- KPI 대형 수치: 56pt / Space Grotesk 700 / tabular

## 레이아웃 / 그리드
- **비대칭(asymmetric) + balanced + 고정 외곽 여백.** 1280×720 기준 좌·우·상 외곽 여백 각 64px 고정, 하단 풋라인 baseline 52px 고정 — 모든 슬라이드 동일, 드리프트 금지. 12열 그리드를 좌우 비대칭 분할(7:5 또는 5:7), 거터 0.25in.
- 케이스 슬라이드: 한쪽(보통 5~7열)에 큰 직사각 작품 이미지, 반대쪽에 거대 인덱스 번호 + 제목 + 캡션. 분할 경계는 12열 그리드에 스냅 — 떠다니는 요소 금지. 헤딩 baseline·텍스트 좌측 엣지는 슬라이드 타입별로 동일 위치 고정, 수직 리듬 24/32/48px 스텝.
- 거대 인덱스 번호를 슬라이드 가장자리에 부분적으로 걸치게(엣지 크롭) 배치 가능 — 동적 비대칭. 단 엣지 크롭도 의도적 정렬이며 임의 위치가 아니다.
- **구성 균형:** 캔버스의 어느 한 영역도 ~20%를 넘게 비우지 않는다. 콘텐츠 쪽 빈 오프화이트 공간을 한 구석에 고이게 두지 않고 KPI 카드·태그·콜아웃 모듈로 고르게 채운다.
- **밀도 원칙:** 케이스 스터디 슬라이드는 거대 번호 + 이미지만으로 끝나지 않는다 — 콘텐츠 쪽에 **모듈 3개 이상**(케이스 캡션 + 결과 KPI 카드 + 메타 태그 행, 또는 차트/표 + 콜아웃)을 비대칭으로 정연히 채운다. 본문성 슬라이드는 캔버스 86% 이상을 의미 있는 모듈로. 거대 번호 하나만 두고 비우는 것 금지(간지 예외).
- **모듈 좌표 컨벤션:** 7:5 또는 5:7 비대칭 분할 — 한쪽 이미지, 다른 쪽을 세로 스택(거대 번호 + 제목 + 캡션 + KPI 카드 행 + 태그). 모듈 사이 거터 0.25in.
- **콜아웃 모듈:** 흰 카드(각진, 보더 없음) + 좌측 0.08in coral 룰, 안에 18pt 인사이트 1~2줄 + 12pt 대문자 태그. 카드 높이는 내용 높이 + 일관 패딩(상하 좌우 0.2in)으로 — 하단 절반이 비지 않는다. 차트·케이스 옆에 1개 두어 결과를 명시.
- **이미지 블록은 실제 비주얼을 담는다.** 직사각 작품 이미지 블록은 실제 렌더된 비주얼(작품 사진, 톤 그라디언트 필드 + 라벨, 차트)을 담는다 — 평면 단색 빈 블록 금지.
- **레퍼런스 미세 디테일:** 대문자 태그·라벨은 자간 +0.12~0.16em, 12px. 모든 본문성 슬라이드는 좌하단 출처 태그 + 우하단 페이지 번호를 풋라인 baseline에 정렬. 수치는 tabular figures, 소수 자릿수·단위 일관, tabular 수치는 우정렬. 비교 표 행 룰은 헤어라인 일관, 평결행 굵게, 강조 셀/행은 1개만. 텍스트 좌측 엣지는 광학 정렬로 동일 x.

## 형태 / 질감
- 이미지는 직사각형 그대로(클립·둥근 모서리 없음). 모서리 반경 0px. 그림자 없음.
- 거대 인덱스 번호가 형태 정체성 — 잉크 솔리드 또는 coral.
- coral은 인덱스 번호·작은 태그·룰에만 — 큰 면 도배 금지.
- 아이콘 거의 안 씀 — 쓴다면 1.5pt 가는 라인 단색.

## 차트·데이터 시각화 (포트폴리오 차트 — 잉크 + coral 한 점)
차트는 SVG로 정밀 렌더한다(div 블록 막대 금지). 차트도 케이스 스터디 미감.
- **데이터 색:** 막대·선 기본은 무채색 `#CFCFCB`(연) / `#141414`(진). 강조할 1개만 coral `#FF5C35` 솔리드. 무지개 채색 금지.
- **막대 형태:** 막대 폭 : 간격 = 3 : 2, 모서리 0px. 베이스라인 0(잘린 y축 금지).
- **데이터 잉크 최소화:** 격자선 제거(또는 y축 주요 눈금 2~3개 0.5pt `#CFCFCB`). 차트 테두리 박스 제거. x축선 0.75pt `#141414`.
- **값 레이블:** 막대·꼭짓점에 직접 표기, 14pt Space Grotesk 600 tabular. 범례 박스 금지 — 직접 라벨링.
- **출처:** 차트 하단 좌측 12pt Space Grotesk `#9A9A9A` 출처·단위 각주.
- **타입 매칭:** 비교=세로 막대, 추세=2pt 폴리라인(coral, 면적 채움 없음), 비중=도넛 1개(조각 3개 이하). 파이 다중·3D 금지.

## 다이어그램·컴포넌트 (포트폴리오 다이어그램 키트)
색만으로는 템플릿이 아니다. 아래 컴포넌트를 모두 SVG로 정밀 렌더하며 **하나의 다이어그램 언어**를 공유한다 — 모든 요소는 각진(반경 0px) 흰/오프화이트, 거대 인덱스 번호가 단계·항목을 색인, 커넥터는 2pt 가는 라인, 강조는 coral 텍스트·작은 룰.
- **프로세스 플로우:** 좌→우 거대 인덱스 번호(80~100px Space Grotesk 700) 3~5개 + 각 아래 18pt 단계 라벨 + 12pt 캡션. 노드 박스 없음 — 거대 번호와 2pt 가는 라인 커넥터가 흐름. 핵심 단계 번호만 coral.
- **타임라인:** 수평 축 0.75pt `#141414`. 마일스톤은 거대 인덱스 번호 라벨 + 0.14in 무채색 원(현재 시점만 coral 솔리드). 날짜 라벨 12pt 대문자.
- **비교(2~3열):** 흰 카드 칼럼(각진, 보더 없음) — 각 칼럼 상단에 거대 인덱스 번호 + 12pt 대문자 태그. 우세 칼럼만 상단 0.08in coral 룰.
- **매트릭스 2×2:** 0.75pt 무채색 십자축. 데이터 포인트는 0.16in 무채색 원(핵심만 coral 솔리드) + 옆에 작은 인덱스 번호. 사분면 라벨 12pt 대문자.
- **계층/퍼널:** 폭 비례 사각 적층 — 무채색 명도 단계, 핵심 단만 coral. 각 단에 인덱스 번호 + 18pt 라벨.
- **KPI·스탯 카드:** 흰 카드(각진, 보더 없음), 좌상단 거대 인덱스 번호 또는 12pt 태그 + 56pt Space Grotesk 700 수치 + 14pt coral 델타. 카드 3~4개 비대칭 가로 배치.
- **목차/섹션 디바이더/인용:** 목차는 거대 `01`~`NN` 인덱스 번호 세로 나열 + 18pt 케이스명. 디바이더는 오프화이트 배경 + 엣지 크롭 거대 인덱스 번호 + 36pt 섹션명. 인용은 흰 카드 + 거대 인덱스 번호 + 26pt 700 풀쿼트 + 12pt 출처 태그.

## 전환 (PPT)
playful — 거대 인덱스 번호가 한쪽에서 빠르게 슬라이드 인하며 살짝 오버슈트(220ms ease-out, 오버슈트 6%), 작품 이미지는 100ms 늦게 페이드 인. 케이스 스터디를 넘기는 경쾌한 리듬.

## 하지 말 것
- 둥근 이미지 프레임 금지 — 직사각 이미지(둥근 프레임은 다른 룩북 팩의 자리).
- 그라디언트·그림자·이모지·클립아트 금지.
- 인덱스 번호를 작게 쓰지 말 것 — 120~160px 거대해야 한다(형태 정체성).
- coral을 큰 면으로 도배하지 말 것 — 인덱스 번호·작은 태그·룰에만.
- 강조색 2개 이상 금지. 대칭 중앙 정렬로 회귀 금지 — 비대칭이 정체성.
- 차트 회귀: 3D, 무지개색, 격자선 과다, 범례 박스, 잘린 y축.
- **거대 인덱스 번호 하나만 두고 슬라이드 비우기 금지(간지 예외).** 케이스 스터디는 번호 + 이미지 + 모듈 3개 이상으로 채운다. 모든 본문성 슬라이드에 출처 태그 + 페이지 번호.
- **캔버스 한 구석에 죽은 오프화이트 공백을 고이게 두지 말 것 / 빈 단색 플레이스홀더 이미지 블록 금지(이미지 블록은 실제 작품 사진·톤 필드·차트를 담는다) / 케이스 제목 문장 중간 단어 비대 금지(거대 인덱스 번호 외 제목은 일관 크기) / 외곽 여백·풋라인·헤딩 baseline 위치 드리프트 금지.** 외곽 여백 64px·풋라인 baseline 52px를 슬라이드 전체에서 고정한다.

## 상세 페이지 (7종)

### 01 · 표지 (cover)
오프화이트 `#F7F7F5` 배경. 슬라이드를 좌 5열 : 우 7열로 비대칭 분할. 우측 7열에 큰 직사각 작품 이미지. 좌측 5열에 12pt coral 대문자 라벨 + 거대 인덱스 번호(약 110pt Space Grotesk 700, 엣지 크롭 가능) + 36pt 700 타이틀 + 18pt 부제 + 그 아래 도큐먼트 메타 태그 행(`STUDIO` · `YEAR` · `EDITION` 12pt 대문자). 하단 12pt 메타 태그 + 페이지 번호. 표지는 절제 허용.

### 02 · 케이스 인덱스 목차 (agenda)
오프화이트 배경. 상단 36pt 700 헤딩 `Index` + 12pt coral 라벨. 본문 영역 좌측 8열에 거대 `01`~`05` 인덱스 번호(약 80px Space Grotesk 700) 세로 나열 + 각 옆에 18pt 케이스명 + 12pt 캡션 + 우측 끝 12pt 페이지 번호, 행 사이 가는 무채 디바이더 + 현재 항목 번호만 coral(진행 인디케이터). 우측 4열에 흰 카드 — 본 포트폴리오 한 줄 요지(18pt) + 핵심 케이스 썸네일 이미지 1점. 행 사이 넓은 간격.

### 03 · 케이스 스터디 본문 (body)
오프화이트 배경. 슬라이드를 좌 7열(큰 직사각 작품 이미지) : 우 5열(콘텐츠)로 비대칭 분할. 우측에 거대 인덱스 번호(약 100px, 코너에 부분 걸침) + 36pt 700 케이스 제목 + 18pt 케이스 캡션 3~4줄(핵심 구절 coral) + 결과 KPI 카드 행 3개(각 56pt 700 수치 + 12pt 라벨 + 14pt coral 델타) + 12pt 대문자 태그 행(역할 · 연도 · 클라이언트). 콘텐츠 하단에 콜아웃 모듈 1개(좌측 0.08in coral 룰 + 18pt 인사이트). 모듈 4개 이상. 하단 12pt 출처 태그 + 페이지 번호.

### 04 · 작품 쇼케이스 갤러리 (gallery)
오프화이트 배경. 상단 36pt 700 헤딩 + 12pt coral 라벨. 본문 영역에 직사각 작품 이미지 4~6개를 비대칭 블록 그리드로 배치(크기 가변 — 일부 큰, 일부 작은). 각 이미지 모서리에 작은 인덱스 번호 + 12pt 캡션. 둥근 모서리·그림자 없음. 갤러리는 이미지가 모듈 — 절제 허용.

### 05 · 케이스 성과 차트 (chart)
오프화이트 배경. 상단 36pt 700 헤딩 + 12pt coral 라벨. 본문 영역 좌 7열에 메인 세로 막대 또는 추이 차트(무채색 + 강조 1막대/시점 coral, 베이스라인 0, 14pt 값 레이블) + 변곡점 콜아웃 2개. 우 5열을 세로 스택 — 거대 인덱스 번호 + 보조 데이터 표(3~4행) + KPI 요약 카드(56pt 700 수치 + 12pt 라벨). 범례 없이 직접 라벨링. 하단 12pt 출처·단위 태그 + 페이지 번호.

### 06 · Before / Process 비교 (comparison)
오프화이트 배경. 상단 36pt 700 헤딩 + 12pt coral 라벨. 본문 영역에 흰 카드 칼럼 2~3개(각진, 보더 없음) — 각 칼럼 상단에 거대 인덱스 번호 + 12pt 대문자 태그(`BEFORE`·`PROCESS`·`AFTER`) + 직사각 이미지 + 18pt 본문 + 본격 비교 항목 4~6행(행라벨 + 수치, 우세 셀 coral). 결과 칼럼만 상단 0.08in coral 룰. 본문 하단에 흰 평결 카드(종합 결과 56pt 700 + 18pt 평결 1줄). 하단 12pt 출처 + 페이지 번호.

### 07 · 클로징·컨택트 (closing)
오프화이트 배경. 슬라이드를 좌 5열 : 우 7열 비대칭 분할. 좌측에 거대 인덱스 번호 또는 36pt 700 클로징 스테이트먼트 + 18pt 부제 + 다음 단계 3개(인덱스 번호 + 18pt 라벨) + 12pt coral 컨택트 태그. 우측 7열에 큰 직사각 작품 이미지 또는 KPI 카드 그리드(56pt 수치). 균형 여백 + 페이지 번호.

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