Isometric Platform Deck
밝은 쿨그레이 캔버스 위 정사 아이소메트릭 투영의 입체 플랫폼·블록·계단 구조가 콘텐츠를 떠받치고, 코발트 명도 3단계로 입체면을 칠하며 평면 텍스트는 헤어라인 리더선으로 분리하는 입체 다이어그램 키트 덱.
미리보기

색 토큰
bg
#EEF1F5
surface
#FFFFFF
surface_alt
#E3E8EF
text
#1B2330
text_muted
#5C6679
accent
#3B6FE0
accent_top
#3B6FE0
accent_left
#2C53AC
accent_right
#1E3A7E
border
#E3E8EF
hairline
#A9B4C4
neutral_top
#C6CDD8
neutral_left
#AEB7C5
neutral_right
#97A1B2
타이포 · 간격 토큰
display · {"family":"Inter","fallback":"Arial, Pretendard","size":"40pt","weight":700,"tracking":"-0.01em","leading":1.15}
title · {"family":"Inter","fallback":"Arial, Pretendard","size":"28pt","weight":600,"tracking":"-0.01em"}
body · {"family":"Inter","fallback":"Arial, Pretendard","size":"24pt","weight":400,"leading":1.3}
label · {"family":"Inter","fallback":"Pretendard","size":"16pt","weight":500,"leading":1.2}
value · {"family":"Inter","size":"14pt","weight":600,"figures":"tabular"}
caption · {"family":"Inter","fallback":"Pretendard","size":"11pt","weight":400,"color":"#5C6679"}
spacing.unit · 8
spacing.margin_x · 0.7in
spacing.margin_y · 0.55in
spacing.text_zone · 0-3.5in
spacing.stage_zone · 3.5-7.5in
스타일 축
| 색채 | mono |
| 타이포 | minimal-sans |
| 레이아웃 | centered |
| 여백 | airy |
| 모션 | subtle |
| family | isometric-platform |
출처
- Slidesgo — Isometric Infographicsofficial
- SlideBazaar — Isometric Process Infographicofficial
- SlideModel — Isometric Templatesofficial
원자산은 각 출처 라이선스를 따름. 본 팩이 배포하는 것은 디자인 명세·토큰이며 원자산 사본이 아님.
이 팩 적용하기 — design-pick 스킬
Claude Code에 design-pick 스킬이 설치돼 있으면, 아래 한 줄을 붙여넣는 것으로 이 팩이 적용됩니다.
design-pick 스킬로 "ppt-isometric-platform-deck" 팩을 적용해서 [내 주제] 발표자료를 만들어줘
스킬이 없다면 — GitHub 저장소의 design-diversity 에서 skills/design-pick을 .claude/skills/에 복사하면 됩니다.
스킬 없이 쓰기 — 디자인 지시문(prompt.md) 직접 복사
# Isometric Platform Deck — ppt 디자인 팩 ## 이 스타일의 정체성 밝은 쿨그레이 캔버스 위에 30°/-30° 정사 아이소메트릭 투영으로 그린 입체 플랫폼·블록·계단 구조가 콘텐츠를 떠받친다. 단일 코발트 강조색의 명도 3단계가 입체면의 윗면·좌면·우면을 칠해 깊이를 만든다. 평면 텍스트는 슬라이드 상단 절반에 정렬되고, 입체 오브제는 0.5pt 헤어라인 리더선으로만 라벨링된다 — 텍스트와 입체물이 한 면에 섞이지 않는 "평면 텍스트 / 입체 오브제 분리"가 한눈에 보이는 표식이다. ## 색 - 배경 `#EEF1F5` (쿨그레이 캔버스, 전 슬라이드 동일). - 표면/평면 카드 `#FFFFFF`, 보조 표면 `#E3E8EF`. - 본문 텍스트 `#1B2330`, 보조 텍스트 `#5C6679`. - 강조색은 코발트 **1색**, 입체면 명도 3단계로만 사용: - 윗면(top) `#3B6FE0` — 가장 밝음, 빛 받는 면. - 좌면(left) `#2C53AC` — 중간 명도. - 우면(right) `#1E3A7E` — 가장 어두운 면. - 헤어라인 리더선·아이소 격자선 `#A9B4C4`. - 텍스트에는 강조색을 쓰지 않는다. 강조색은 입체 오브제와 차트 데이터 막대에만. ## 타이포그래피 - 폰트: 라틴 **Inter**, 한글 **Pretendard** (대체 `Arial`, `Noto Sans KR`). 둘 다 공개 폰트. - 표지 제목 40pt / Bold / 자간 -0.01em / 행간 1.15. - 슬라이드 제목 28pt / Semibold / 자간 -0.01em. - 본문 24pt / Regular / 행간 1.3 / 슬라이드당 6줄 이하. - 오브제 라벨 16pt / Medium / 행간 1.2 (리더선 끝에 배치). - 차트·KPI 수치 라벨 14pt / Semibold / tabular figures. - 캡션·각주 11pt / Regular / `#5C6679`. ## 레이아웃 / 그리드 - 캔버스 16:9 (13.33×7.5in) 고정. - 좌우 여백 각 0.7in, 상하 여백 각 0.55in. 12열 그리드. - 슬라이드 상단 절반(높이 0~3.5in)은 **평면 텍스트 존** — 제목·본문·키커가 좌측 정렬로만 들어간다. - 하단 절반(3.5~7.5in)은 **아이소메트릭 무대 존** — 입체 오브제·차트·다이어그램만. - 헤더바 없음. 슬라이드 번호는 우하단 11pt. - 모든 입체물은 가상의 단일 광원(좌상단)을 공유 — 명도 3단계 면 배정이 전 슬라이드에서 동일. ## 형태 / 질감 - 아이소메트릭 투영각 고정: 수평선 기준 ±30°. 원근 수렴 없음(정사영, 평행선 유지). - 입체 도형은 솔리드 면(top/left/right) 3면 채움 + 면 경계 0.5pt `#A9B4C4` 라인. - 평면 카드: 모서리 반경 0px, 그림자 없음, 1pt `#E3E8EF` 보더. - 리더선: 0.5pt `#A9B4C4` 직선, 끝에 0.06in 점. 라벨은 리더선 끝 평면 텍스트. - 아이콘은 입체 오브제 자체로 대체 — 별도 클립아트·스톡 아이콘 금지. ## 전환 (PPT) - 슬라이드 전환: fade 0.3s. - 입체 오브제 등장: 좌하단에서 0.2in 떠오르며 0.35s ease-out, 계단형 노드는 0.1s 간격 순차. ## 차트·데이터 시각화 - **차트 타입.** 비교=정육면체 막대(아이소 투영), 추세=아이소 바닥 위 폴리라인, 비중=아이소 원기둥 도넛 대신 입체 막대 100% 누적, 구성변화=계단 슬래브. - **아이소 막대 차트.** 모든 막대는 직육면체 — 정사영(원근 왜곡 절대 금지). 막대 윗면만 코발트 윗면색 `#3B6FE0`으로 강조, 좌·우면은 `#2C53AC`/`#1E3A7E`. 강조 대상 막대 1개만 풀 코발트 3면, 나머지 막대는 무채색 3단계(`#C6CDD8`/`#AEB7C5`/`#97A1B2`). - **막대 치수.** 막대 윗면 한 변 0.55in, 막대 간격(중심거리) 0.95in = 막대:간격 약 3:2. 모든 막대 바닥은 동일 아이소 바닥 평면 위 — 기준선 0 정확. - **격자.** 아이소 바닥에 0.5pt `#A9B4C4` 격자선 최대 4줄(0/중간값 2개/최댓값). 차트 테두리 박스·배경 채움 없음. - **값 레이블.** 막대 윗면 위 0.1in에 14pt Semibold `#1B2330` 직접 표기, tabular. 단위는 첫 막대에만. - **출처 각주.** 차트 슬라이드 좌하단 11pt `#5C6679` "출처: …" 의무. ## 다이어그램·컴포넌트 모든 다이어그램은 아이소메트릭 투영각 ±30°·명도 3단계 코발트·0.5pt 헤어라인 리더선이라는 한 언어를 공유한다. - **프로세스 플로우.** 아이소메트릭 큐브 노드를 좌하→우상 계단형으로 배치(각 노드 다음 노드보다 0.4in 위·0.6in 우). 큐브 한 변 0.9in. 큐브 사이는 입체 화살표 커넥터(폭 0.18in 입체 셰브론, 코발트 좌면색). 단계 번호는 큐브 윗면 중앙 원형 배지(지름 0.34in, 흰 채움, 16pt Semibold 코발트 숫자). 활성 단계만 풀 코발트 3면, 나머지는 무채색 3면. - **타임라인.** 바닥 평면 아이소 레일(폭 0.3in 입체 띠, 좌→우). 마일스톤은 레일 위 핀 타워(높이 0.6~1.0in 입체 직육면체, 윗면에 원형 배지). 날짜는 레일 아래 리더선 라벨. 현재 시점 타워만 풀 코발트, 과거·미래는 무채색. - **비교 레이아웃.** 좌우 두 입체 플랫폼 단(아이소 직육면체). 우월/추천 항목 단을 0.5in 더 높게 — 높이차로 우열 표현. 단 윗면에 항목 라벨, 측면에 무채색 vs 코발트 대비. 최대 3단. - **매트릭스 / 2×2.** 아이소 바닥 그리드(0.5pt `#A9B4C4`)를 4존으로 분할, 각 존 라벨은 바닥 가장자리. 데이터 포인트는 바닥 위 0~0.8in 떠 있는 구체(지름 0.3~0.5in = 3변수, 코발트 명도). 우상단 존만 `#3B6FE0` 12% 바닥 틴트. - **계층 / 퍼널.** 적층 입체 슬래브 — 위→아래로 슬래브 가로폭이 넓어지거나(피라미드) 좁아진다(퍼널). 슬래브마다 코발트 명도 1단계씩 변화. 레벨 라벨은 슬래브 우측 리더선. - **KPI·스탯 카드.** 아이소 바닥 위 0.3in 떠 있는 입체 타일(한 변 1.6×1.1in). 타일 윗면에 거대 수치 40pt Bold `#1B2330` + 14pt 라벨, 증감은 입체 화살표(상승=코발트 윗면색, 하락=무채색). 슬라이드당 3~4 타일. - **목차 / 섹션 디바이더.** 디바이더는 좌하단 큰 아이소 계단 1개 + 우상단 거대 섹션 번호 평면 텍스트(72pt Bold `#1B2330`). 목차는 평면 번호 리스트(상단 존) + 각 항목에 대응하는 작은 큐브(하단 존). - 모든 다이어그램은 SVG로 정밀 렌더 — div 블록 입체 흉내 금지. ## 하지 말 것 - **원근 왜곡된 3D 차트 금지.** 막대·도형은 평행선 유지 정사영(아이소메트릭)만. 소실점으로 수렴하는 원근 3D, 회전 베벨, 입체 그림자 드롭 금지 — 막대는 정사영 + 윗면만 강조. - 다크 배경 금지 — 캔버스는 항상 라이트 쿨그레이. (korea-policy-navy의 다크 3D 플랫폼과 시각적으로 구별되어야 한다.) - 평면 텍스트를 입체면 위에 얹지 말 것 — 텍스트는 상단 평면 존, 라벨은 리더선 끝에만. - 강조색 외 색 추가 금지 — 무지개 차트, 다색 입체면 금지. 코발트 1색 + 무채색만. - 둥근 모서리 평면 카드, 드롭 섀도, 그라디언트 면 채움 금지. - 이모지 불릿·클립아트·스톡 아이콘 금지 — 아이콘은 입체 오브제로. - 모든 슬라이드 중앙 정렬 금지 — 텍스트는 좌측 정렬. ## 적용 예 - **표지.** 쿨그레이 캔버스, 상단 좌측에 40pt Bold 제목 + 24pt 부제. 하단 절반에 큰 아이소메트릭 플랫폼 계단 구조(3단), 윗면 코발트. 우하단 11pt 발표자·날짜. - **본문(스테이트먼트).** 상단 좌측 28pt 제목 + 24pt 본문 4줄. 하단에 본문을 떠받치는 단순 아이소 슬래브 1개 + 리더선 라벨 2개. - **프로세스 다이어그램 슬라이드.** 상단 제목 "도입 4단계". 하단에 큐브 4개 좌하→우상 계단 배치, 입체 화살표 커넥터, 윗면 원형 번호 배지 01~04. 3번 큐브만 풀 코발트(현재 단계), 나머지 무채색. - **타임라인 다이어그램 슬라이드.** 하단에 아이소 레일 + 핀 타워 5개(2022~2026). 2026 타워만 풀 코발트. 각 타워 아래 리더선 + 연도·이벤트 라벨. - **매트릭스 다이어그램 슬라이드.** 하단에 아이소 바닥 2×2 그리드, 4존 라벨. 떠 있는 구체 6개(크기=시장규모), 우상단 존 코발트 틴트. 상단에 축 설명. - **KPI 슬라이드.** 하단에 떠 있는 입체 타일 3개 — "전환율 24%", "MAU 1.8M", "재방문 61%". 각 타일 윗면 거대 수치 + 상승 입체 화살표. - **차트 슬라이드.** 하단에 아이소 직육면체 막대 6개(분기별 매출), 5번 막대만 풀 코발트 3면, 윗면 위 14pt 값 라벨, 아이소 바닥 격자 3줄, 좌하단 출처 각주.
복사한 지시문을 Claude(claude.ai)나 Claude Code에 붙여넣고 “위 디자인 팩을 그대로 따라 [내 주제]로 만들어줘”라고 요청하세요.