PPTppt-precision-fintech-deck

Precision Fintech Deck

푸른 회색 면 위 단일 인디고-바이올렛 강조색이 CTA·핵심 수치·차트를 모두 책임지는 절제된 핀테크 덱. 헤어라인 그리드와 면적 그래프의 에디토리얼 밀도.

미리보기

Precision Fintech Deck 샘플 렌더

색 토큰

bg
#FFFFFF
surface
#F6F9FC
surface_alt
#EBF0F6
text
#0A2540
text_muted
#5C6B7E
accent
#5A55E0
accent_light
#7C78F0
border
#E3E8EE

타이포 · 간격 토큰

display · {"family":"Inter","fallback":"Helvetica Neue, Arial, Pretendard","size":"54pt","weight":700,"tracking":"-0.025em","leading":1.05}
title · {"family":"Inter","size":"32pt","weight":600,"tracking":"-0.015em","leading":1.15}
kicker · {"family":"Inter","size":"12pt","weight":600,"tracking":"0.06em","case":"uppercase","color":"#5A55E0"}
body · {"family":"Inter","size":"18pt","weight":400,"leading":1.45}
card_header · {"family":"Inter","size":"15pt","weight":600}
kpi · {"family":"Inter","size":"46pt","weight":700,"tracking":"-0.02em","color":"#5A55E0"}
caption · {"family":"Inter","size":"10pt","weight":400,"color":"#5C6B7E"}
spacing.unit · 8
spacing.margin_x · 0.75in
spacing.margin_y · 0.6in
spacing.gutter · 0.18in

스타일 축

색채pastel
타이포minimal-sans
레이아웃asymmetric
여백airy
모션subtle
familyprecision-fintech

출처

원자산은 각 출처 라이선스를 따름. 본 팩이 배포하는 것은 시각 원리(색 관계·그리드·차트 스타일) 명세이며 영감 브랜드의 상표·로고·독점 폰트·독점색을 포함하지 않는다. 폰트는 오픈 라이선스 Inter.

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

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

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

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

스킬 없이 쓰기 — 디자인 지시문(prompt.md) 직접 복사
prompt.md
# Precision Fintech Deck — ppt 디자인 팩

아래 지시를 한 블록으로 따라 16:9(13.33×7.5in) 슬라이드 덱을 만든다. 흰 종이 캔버스 위에 단 하나의 인디고-바이올렛 강조색이 CTA·핵심 수치·차트 시리즈를 모두 책임지는, 절제된 핀테크 프로덕트 미감.

## 이 스타일의 정체성
한눈에 알아보는 단서: (1) 거의 흰색에 가까운 푸른 회색 `#F6F9FC` 면이 순백 배경 위에 잔잔한 단차를 만든다 — 보더가 아니라 면의 명도차로 구획한다, (2) 강조색은 인디고-바이올렛 `#5A55E0` 단 하나, 텍스트는 깊은 네이비 `#0A2540`, (3) 디스플레이 타이포를 음수 자간으로 타이트하게 좁혀 '에디토리얼 밀도'를 내고 콘텐츠는 비대칭 좌측 정렬로 앉힌다. 그림자 거의 없고, 차트는 헤어라인까지 지운 부드러운 면적 그래프다.

## 색
- 배경 `#FFFFFF` (순백 고정)
- 표면/카드 `#F6F9FC` (푸른 기 도는 매우 옅은 회색 — 면 단차용)
- 표면 보조 `#EBF0F6` (한 단계 더 진한 푸른 회색, 중첩 블록용)
- 본문 텍스트 `#0A2540` (깊은 네이비), 보조 텍스트·캡션 `#5C6B7E`
- 헤어라인·구분선 `#E3E8EE` (1px, 최소 사용 — 면 단차를 우선)
- 강조색 **1개만**: `#5A55E0` (인디고-바이올렛). CTA 버튼·핵심 KPI 숫자·차트 주계열·링크 어절에만. 강조 그라디언트가 필요하면 `#5A55E0` → `#7C78F0` 동일 hue 2스톱만.
- 차트 면적 채움: `#5A55E0` 14% 투명도 → 0% 세로 그라디언트.

## 타이포그래피
- 폰트: `Inter` (대체 `Helvetica Neue`, `Arial`). 한글 병기 시 `Pretendard`.
- 표지 디스플레이: 54pt / Bold(700) / 자간 -2.5% / 행간 1.05 / 최대 3줄
- 슬라이드 제목: 32pt / SemiBold(600) / 자간 -1.5% / 행간 1.15 / 최대 2줄
- 섹션 키커(제목 위 라벨): 12pt / SemiBold / 대문자 / 자간 +6% / 색 `#5A55E0`
- 본문: 18pt / Regular(400) / 행간 1.45 / 슬라이드당 최대 7줄
- 카드 헤더: 15pt / SemiBold
- KPI 대형 숫자: 46pt / Bold / 자간 -2% / 색 `#5A55E0`
- 캡션·출처: 10pt / Regular / 색 `#5C6B7E`

## 레이아웃 / 그리드
- **12열 그리드, 비대칭 사용.** 좌우 여백 각 0.75in, 상하 여백 각 0.6in. 거터 0.18in.
- 콘텐츠는 좌측 정렬 — 제목·본문 블록을 좌측 7열에 두고 우측 5열은 차트·KPI·여백으로. 슬라이드마다 좌우 비중을 7:5 또는 5:7로 번갈아 비대칭 리듬을 만든다.
- 제목 영역: 상단 0.6~1.7in. 제목 위에 키커 라벨 한 줄.
- 카드: `#F6F9FC` 면 채움, 보더 없음, 내부 패딩 0.22in. 카드를 카드 위에 겹칠 때만 `#EBF0F6` 사용.
- 우하단 7.0~7.3in에 출처/페이지 캡션 10pt.

## 형태 / 질감
- 모서리 반경 8px(카드·버튼 공통). 그림자는 최대 1개 — `0 2px 8px rgba(10,37,64,0.06)` 매우 옅게, CTA 버튼에만. 그 외 그림자 금지.
- 아이콘은 1.5px 스트로크 라인 아이콘, 단색 `#0A2540` 또는 강조 `#5A55E0`. 채움 아이콘 금지.
- 이미지는 8px 라운드 코너, 보더 없음.

## 차트 / 데이터 시각화 (핀테크식 — 부드러운 면적 + 단색 단계조)
차트는 SVG로 정밀 렌더한다(div 블록 막대 금지). 이 팩 차트의 핵심은 "헤어라인까지 지운 매우 차분한 면적·라인 + 인디고 단색 단계조"다.
- **차트 영역(절대값):** 플롯 영역은 가로 약 5.3in × 세로 약 3.2in(우측 5열 또는 좌측 7열). 좌측 값축 여유 0.25in, 하단 라벨 0.45in 확보. 모든 점·선·면은 픽셀 단위 정렬.
- **차트 타입 매칭:** 시계열 추세=얇은 라인 + 면적 채움(기본), 항목 비교=세로 막대(모서리 반경 4px 허용), 비중=도넛(조각 3개 이하, 중앙에 핵심 수치 46pt), 구성 변화=기울기 그래프. 파이차트 5조각 이상·3D 금지.
- **데이터 잉크 최소화:** 차트 테두리 박스·배경 채움·범례 박스 제거. 격자선은 그리지 않거나 y축 주요 눈금 1~2개만 0.5pt `#E3E8EE` 헤어라인. y축 눈금 라벨은 0과 최댓값 2개만.
- **축:** x축 기준선만 0.75pt `#E3E8EE`. y축선 생략. **막대·면적 기준선은 데이터 0에서 시작**(잘린 y축 금지).
- **직접 레이블링:** 범례 대신 계열명을 라인 끝·막대 위에 12pt `#5C6B7E`로 직접. 값 레이블은 14pt SemiBold, 강조 계열 값은 `#5A55E0`·나머지 `#0A2540`, 자릿수·단위 일관, 탭형 정렬.
- **데이터 색:** 주계열 `#5A55E0`, 보조 계열은 같은 hue 단계조 `#A9A6F2`(연한 인디고), 3계열째는 중립 `#C2CBD6`. 무지개·계열별 다른 hue 금지.
- **라인 + 면적:** 라인 1.75pt 실선 `#5A55E0`, 곡선 보간 허용(부드러운 monotone 스플라인). 면적은 `#5A55E0` 14% → 0% 세로 그라디언트. 마커는 끝점·강조점에만 지름 6px 흰 속·`#5A55E0` 테두리 2px.
- **세로 막대:** 막대 폭 : 간격 = 3 : 2, 모서리 반경 4px, 강조 막대 1개만 `#5A55E0`·나머지 `#C2CBD6`.
- **단위·출처:** 차트 하단에 단위 명기("단위: %, 2025"), 우하단 10pt 출처 캡션 의무.

## 다이어그램·컴포넌트 (핀테크식 — 면 단차 알약 노드 + 인디고 헤어라인 커넥터)
색·차트만으로는 색 팔레트일 뿐이다. 이 팩은 아래 컴포넌트를 한 다이어그램 언어로 묶는다 — **모든 노드는 모서리 반경 8px, 채움 `#F6F9FC`(보더 없음), 커넥터는 1.5pt `#5A55E0` 헤어라인, 단계 번호는 지름 0.3in 원형 배지(`#5A55E0` 면·흰 숫자 13pt SemiBold), 강조 1요소만 `#5A55E0` 채움**. 모두 SVG로 정밀 렌더(div 블록 금지).
- **프로세스 플로우:** 가로 3~5단계. 각 노드는 폭 2.0in × 높이 0.85in 알약형(반경 8px) `#F6F9FC` 면, 노드 안 좌상단에 원형 번호 배지 + 제목 15pt SemiBold + 캡션 12pt `#5C6B7E`. 커넥터는 1.5pt `#5A55E0` 직선 + 끝에 6px 삼각 화살촉. 노드 간격 0.4in. 활성/현재 단계 1개만 `#5A55E0` 면 채움 + 흰 텍스트.
- **타임라인:** 수평 축 — 0.75pt `#E3E8EE` 베이스라인 1줄, 마일스톤 마커는 지름 10px 원(흰 속·`#5A55E0` 테두리 2px), 현재 시점만 지름 14px `#5A55E0` 채움. 날짜 라벨 12pt `#5C6B7E` 마커 아래, 이벤트 제목 15pt SemiBold 마커 위. 마일스톤 4~6개 균등 배치.
- **비교 레이아웃:** 2~3열. 각 열은 `#F6F9FC` 카드(반경 8px, 패딩 0.22in), 열 사이 구분선 없음(면 단차로 분리), 헤더 행은 `#EBF0F6` 한 단계 진한 면. 헤더 15pt SemiBold, 항목 18pt. 추천/우위 열 1개만 헤더를 `#5A55E0` 면·흰 텍스트로.
- **매트릭스 / 2×2:** 축선 0.75pt `#E3E8EE`, 사분면 채움 없음(축 라벨만 12pt `#5C6B7E` 대문자 키커 스타일). 데이터 포인트는 지름 0.5in 알약 또는 원, `#A9A6F2` 연한 인디고 면, 강조 포인트 1개만 `#5A55E0`. 축 끝에 화살촉 없음 — 헤어라인만.
- **계층 / 퍼널:** 3~4단 수평 띠. 각 띠 높이 0.7in, 반경 8px, 위에서 아래로 폭이 단계당 18%씩 좁아진다(퍼널). 띠 채움은 `#F6F9FC`, 단계 라벨 15pt SemiBold 좌측 정렬 + 수치 14pt SemiBold 우측. 핵심 단(전환 단계) 1개만 `#5A55E0` 면.
- **KPI·스탯 카드:** `#F6F9FC` 카드(반경 8px, 보더 없음, 패딩 0.22in). 거대 수치 46pt Bold `#5A55E0` + 라벨 12pt `#5C6B7E` 대문자. 증감은 ▲/▼ 삼각형 + 값 14pt SemiBold(증가 `#5A55E0`·감소 `#5C6B7E`, 무채색 — 빨강 금지). 카드 3~4개 가로 등간격 0.18in.

## 전환 (PPT)
부드러운 페이드 0.25s 또는 짧은 위로 슬라이드(8px, 0.2s ease-out). 모핑·날아오기·회전 금지.

## 하지 말 것
- 강조색 2개 이상 쓰기, 본문 텍스트에 컬러 입히기 — 강조는 `#5A55E0` 하나, CTA·KPI·차트 주계열에만.
- 보더로 카드를 가르기 — 구획은 `#F6F9FC` 면 단차로. 헤어라인은 차트 축 등 최소한만.
- 진한 그림자·다중 그림자·네온 글로우. 그라디언트는 동일 hue 2스톱만 허용, 무지개 그라디언트 금지.
- **아마추어 차트 회귀 금지:** 3D·입체 막대, 막대/면적 그림자·광택, 무지개 계열색, 격자선 과다, 차트 테두리 박스, 범례 박스(계열 3개 미만일 때), 잘린 y축, div 블록 막대.
- 모든 요소 중앙 정렬 — 본문은 좌측 정렬, 슬라이드별 7:5 비대칭 유지.
- 이모지 불릿·클립아트·채움 아이콘·스톡 사진 남발.
- 슬라이드를 7줄 넘는 글로 채우기.

## 적용 예
- **표지:** 순백 배경. 좌측 7열에 키커 라벨 12pt + 54pt Bold 제목 3줄(자간 -2.5%), 그 아래 18pt 한 줄 서브카피. 우측 5열은 비우거나 `#F6F9FC` 면에 작은 라인 차트 하나. 하단 좌측에 날짜·작성처 10pt.
- **본문 슬라이드:** 키커 + 32pt 제목, 좌측 7열에 본문 7줄 이하, 우측 5열에 `#F6F9FC` 카드 1~2개(헤더 15pt + 본문 18pt). KPI를 쓰면 46pt `#5A55E0`. 우하단 캡션.
- **차트 슬라이드:** 키커 + 32pt 제목. 좌측 7열에 약 5.3×3.2in SVG 면적 라인 차트 — 라인 1.75pt `#5A55E0` + 14% 면적 그라디언트, 끝점 마커 1개, x축 0.75pt 헤어라인, y축 라벨 0·최댓값 2개, 라인 끝 직접 레이블 14pt SemiBold `#5A55E0`. 우측 5열에 해석 텍스트 3줄 + KPI 1개. 차트 하단 단위 명기, 우하단 10pt 출처.
- **프로세스 플로우 슬라이드:** 키커 + 32pt 제목. 본문 영역에 가로 4단계 알약 노드 — 각 2.0×0.85in `#F6F9FC` 면, 좌상단 원형 번호 배지, 제목 15pt + 캡션 12pt, 노드 사이 1.5pt `#5A55E0` 화살표 커넥터. 현재 단계 1개만 `#5A55E0` 면·흰 텍스트. 우하단 캡션.
- **KPI·매트릭스 슬라이드:** 키커 + 32pt 제목. 상단에 `#F6F9FC` KPI 카드 3개 가로 등간격(46pt `#5A55E0` 수치 + 12pt 라벨 + ▲/▼ 무채색 증감), 하단에 2×2 매트릭스 — 0.75pt `#E3E8EE` 축, 데이터 포인트 알약 4~6개, 강조 1개만 `#5A55E0`. 우하단 10pt 출처.

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