PPTppt-bold-block-infographic-deck

Bold Block Infographic Deck

흰 바탕에 차콜·앰버·틸 3색 솔리드 컬러 블록이 노드·구간·셀이 되어 다이어그램 자체를 이루는, 보더 없는 단정한 평면 모더니즘 인포그래픽 덱.

미리보기

Bold Block Infographic Deck 샘플 렌더

색 토큰

bg
#FFFFFF
surface
#2A2D34
text
#2A2D34
text_muted
#6B6F76
text_inverse
#FFFFFF
accent 1
#2A2D34
accent 2
#E8A317
accent 3
#1F8A82
tint.charcoal
#EEEEEF
tint.amber
#FBEFD3
tint.teal
#DDEEED
delta_up
#1F8A82
delta_down
#C0392B

타이포 · 간격 토큰

display · {"family":"Archivo","fallback":"Arial Black, Pretendard","size":"32pt","weight":800,"tracking":"-0.02em"}
block_number · {"family":"Archivo","size":"64pt","weight":800,"color":"#FFFFFF"}
section_number · {"family":"Archivo","size":"200pt","weight":800,"color":"#EEEEEF"}
card_header · {"family":"Inter","size":"13pt","weight":700,"tracking":"0.06em","case":"uppercase"}
kpi · {"family":"Archivo","size":"54pt","weight":800}
body · {"family":"Inter","fallback":"Arial, Pretendard","size":"18pt","weight":400,"leading":1.35}
caption · {"family":"Inter","size":"11pt","weight":600,"color":"#6B6F76"}
spacing.unit · 8
spacing.margin_x · 0.55in
spacing.margin_y · 0.5in
spacing.block_gutter · 0.1in
spacing.grid · 12-column x 6-row module grid

스타일 축

색채vivid-primary
타이포heavy-display
레이아웃block-grid
여백dense
모션none
familybold-block-infographic

출처

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

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

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

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

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

스킬 없이 쓰기 — 디자인 지시문(prompt.md) 직접 복사
prompt.md
# 볼드 블록 인포그래픽 — ppt 디자인 팩

아래 지시를 한 블록으로 따라 16:9(13.33×7.5in) 슬라이드 덱을 만든다. 볼드 블록 인포그래픽 — 흰 바탕에 큼직한 솔리드 컬러 블록(차콜·앰버·틸 3색)이 다이어그램 자체를 이루는, 모서리 각진 단정한 모더니즘 인포그래픽.

## 이 스타일의 정체성
한눈에 알아보는 단서: (1) 색면(차콜·앰버·틸 솔리드 블록)이 장식이 아니라 노드·구간·셀·열 그 자체다, (2) 둥근 모서리가 거의 없는(반경 0~2px) 각진 도형과 두꺼운 지오메트릭 산세리프, (3) 검정 보더·하드 섀도·그라디언트가 전혀 없는 평면 모더니즘. 색블록 위 텍스트는 화이트로 반전된다.

## 색
- 배경 `#FFFFFF`
- 3색 블록 시스템(다이어그램의 본체):
  - 차콜 `#2A2D34` — 1차/주축 블록, 헤더 블록
  - 앰버 `#E8A317` — 2차/강조 블록, 활성 단계
  - 틸 `#1F8A82` — 3차/대비 블록
- 본문 텍스트 `#2A2D34`, 보조 텍스트 `#6B6F76`
- 블록 위 반전 텍스트 `#FFFFFF`
- 옅은 면 채움(보조 셀·비강조): 차콜 8% `#EEEEEF`, 앰버 14% `#FBEFD3`, 틸 12% `#DDEEED`
- 강조색은 위 3색뿐. 4번째 색·그라디언트·장식 컬러 금지. 강조할 단 한 블록만 앰버, 나머지는 차콜/틸 또는 옅은 채움.

## 타이포그래피
- 폰트: `Archivo`(헤비/디스플레이, 대체 `Arial Black`), 본문 `Inter`(대체 `Arial`). 한글은 `Pretendard`(디스플레이는 굵게 800).
- 슬라이드 타이틀: 32pt / Archivo 800 / 자간 -2%
- 블록 안 디스플레이 번호: 64pt / Archivo 800 / 화이트 반전
- 섹션 번호(디바이더): 200pt / Archivo 800 / 차콜 8% `#EEEEEF`
- 카드 헤더: 13pt / Inter 700 / 자간 +6% / 대문자
- KPI 대형 수치: 54pt / Archivo 800
- 본문: 18pt / Inter 400 / 행간 1.35 / 슬라이드당 6줄 이하
- 캡션·축 레이블: 11pt / Inter 600

## 레이아웃 / 그리드
- **블록 그리드(dense).** 좌우 여백 각 0.55in, 상하 0.5in. 콘텐츠 영역 12열 × 6행 모듈 그리드.
- 블록·셀은 그리드에 정확히 스냅, 블록 간 거터 0.1in(블록끼리 거의 맞붙는 빽빽한 모더니즘).
- 슬라이드 타이틀은 상단 왼쪽 정렬(중앙 정렬 금지), 좌측에 0.18in 폭 차콜 세로 바.
- 한 슬라이드 핵심 메시지 1개. 색블록 모듈 3~6개.

## 형태 / 질감
- 모서리 반경 0~2px(각진 도형). 보더 없음 — 색면 자체가 경계.
- 그림자·베벨·그라디언트 전면 금지. 완전 평면.
- 아이콘: 2.5px 스트로크 라인 아이콘 또는 솔리드 단색 픽토그램, 블록 위에서는 화이트.
- 셰브론 노치: 블록 우변에 깊이 0.22in 삼각 노치, 다음 블록 좌변이 맞물림.

## 차트·데이터 시각화 (평면 색블록 차트 + 의미 코딩)
차트는 SVG로 정밀 렌더한다(div 블록 막대 금지). 차트가 팩과 따로 놀면 허접해진다 — 차트도 색블록 어휘를 입는다.
- **데이터 색(의미 코딩):** 막대·면적은 두꺼운 평면 색블록. 단일 계열이면 전부 차콜 `#2A2D34`, 강조할 막대 **1개만** 앰버 `#E8A317`. 다계열은 차콜·앰버·틸 3색 순서 배정(4계열 이상 금지). 추세 증가=틸, 감소=`#C0392B`(경고, 차트 한정). 무지개 채색·계열별 난색 금지.
- **막대 형태:** 두껍게 — 막대 폭 : 간격 = 5 : 2(굵은 색면이 정체성). 모서리 반경 0px(각진 막대). 모든 막대 베이스라인 0에서 정확히 시작(잘린 y축 금지).
- **데이터 잉크 최소화:** 격자선 제거(또는 최댓값 1개만 11pt 헤어라인 `#E2E2E3`). 차트 테두리 박스·플롯 배경 채움 제거. x축 베이스라인만 2px `#2A2D34`.
- **값 레이블:** 막대 안 상단(공간 있으면) 또는 막대 끝 바깥에 직접 표기. `Archivo` 16pt 700, 막대 안이면 화이트·바깥이면 차콜. 카테고리명은 막대 아래 11pt 600 `#6B6F76`. 범례 박스 금지 — 계열명은 첫 막대 위 11pt 색 점 인라인.
- **차트 타입 매칭:** 비교=세로/가로 색블록 막대, 비중=100% 누적 색블록 막대 1개(차콜·앰버·틸 세그먼트, 각 세그먼트 안 화이트 값), 추세=옅은 면적(틸 18% 알파) + 2.5pt 틸 선, 부분=도넛 대신 100% 누적 막대 권장(쓴다면 조각 3개·각진 아크 불가하므로 막대형). 파이·3D·도넛 다중 금지.
- **출처:** 차트 하단 좌측 11pt 600 `#6B6F76` 출처·단위 캡션 의무.

## 다이어그램·컴포넌트 (색면=다이어그램 셀 키트)
색만으로는 템플릿이 아니다. 아래 컴포넌트를 모두 SVG로 정밀 렌더하며(div 블록 금지) **하나의 다이어그램 언어**를 공유한다 — 모든 노드/셀은 각진(반경 0~2px) 솔리드 색블록(차콜·앰버·틸 순환), 보더·그림자 없음, 블록 위 텍스트는 화이트 반전, 번호는 블록 안 64pt Archivo 800 화이트, 커넥터는 셰브론 노치 맞물림(별도 화살표 선 없음), 강조는 단 한 블록만 앰버.
- **프로세스 플로우:** 가로 3~6단계, 각 단계 = 풀하이트 색블록(높이 1.4in), 블록끼리 셰브론 노치(깊이 0.22in)로 맞물림 — 별도 화살표 커넥터 없음. 블록 색은 차콜→틸→차콜 교대, 활성 단계만 앰버. 블록 안 좌상단 64pt 화이트 단계 번호 + 그 아래 16pt 화이트 단계명. 블록 아래 18pt 차콜 설명.
- **타임라인:** 색블록 띠를 가로로 이어붙임(블록 1개 = 1페이즈, 폭=기간 비례, 색은 차콜·틸 교대·현재 페이즈 앰버). 마일스톤은 띠 위에 0.16in 각진 화이트 사각 핀 + 11pt 600 날짜. 현재 시점 페이즈 블록만 앰버 + 상단에 11pt 화이트 "NOW".
- **비교 레이아웃:** 2~3 풀하이트 색블록 칼럼(높이 4.8in, 차콜·틸·옅은 채움 또는 권장안만 앰버). 각 칼럼 상단 0.7in 헤더 띠(반전 텍스트 13pt 700 대문자). 행은 화이트 헤어라인 0.75pt로 구획, 항목 라벨 + 값. 우세 항목은 블록 안 굵게.
- **매트릭스 2×2:** 4개 솔리드 색블록 사분면(차콜·앰버·틸·옅은 채움 — 우상 권장 사분면만 앰버). 사분면 사이 0.08in 화이트 거터. 데이터 포인트는 0.3in 화이트 솔리드 원 + 옆 11pt 라벨. 축 라벨은 매트릭스 바깥 11pt 600 대문자.
- **계층/퍼널:** 적층 색블록 — 위→아래 폭 비례로 좁아지는 4~5단(각진 사다리꼴 불가하므로 각 단은 폭만 다른 직사각 색블록), 색은 차콜→틸 명도/색 전환, 각 단 안 화이트 단계명 16pt + 우측에 54pt Archivo 수치. 계층은 적층 색블록 + 들여쓰기.
- **KPI·스탯 카드:** 솔리드 색블록 카드(차콜 기본, 강조 1개만 앰버), 보더·그림자 없음. 블록 안 좌상단 13pt 700 대문자 화이트 헤더, 중앙 54pt Archivo 800 화이트 KPI 수치, 그 아래 13pt 화이트 라벨 + 각진 델타 태그(틸=상승/`#C0392B`=하락 작은 솔리드 사각 + 화이트 ▲▼ 11pt).
- **목차/섹션 디바이더/인용:** 목차는 각진 차콜 번호 사각(0.5in) + 18pt 항목명 좌측 정렬 리스트. 디바이더는 화면 절반을 차지하는 거대 앰버 색블록 + 200pt 화이트 섹션 번호 + 32pt 화이트 섹션명. 인용은 차콜 풀블리드 블록 + 28pt 화이트 풀쿼트 + 좌측 0.18in 앰버 바.

## 전환 (PPT)
0.2s 컷(페이드 아님 — 색블록은 또렷이 전환). 색블록은 좌→우 0.15s 와이프 빌드 허용.

## 하지 말 것
- 검정 1px 보더·하드 섀도(예: `6px 6px 0`)를 색블록에 두르기 — 이건 네오브루탈리즘이다. 이 팩은 보더·그림자 없는 평면 모더니즘.
- 둥근 모서리(반경 2px 초과), 그라디언트·베벨·입체 효과.
- 3색 외 4번째 색 추가, 무지개 차트, 계열별 난색 색칠.
- 모든 슬라이드 중앙 정렬, 슬라이드마다 같은 레이아웃 반복 — 색블록 배치를 슬라이드마다 비대칭으로 바꾼다.
- 색블록을 1~2개만 — 밀도가 정체성, 3~6개 모듈.
- 이모지 불릿·클립아트·스톡 아이콘. 큼직한 스테이트먼트 한 줄로 슬라이드 비우기(이건 confident-color-block — 이 팩은 빽빽한 인포그래픽).
- 차트 회귀: 3D·입체 막대, 막대 그림자·그라디언트 채움, 격자선 과다, 범례 박스, 잘린 y축, 파이/다중 도넛.

## 적용 예
- **표지:** 흰 배경 좌측 상단 32pt 차콜 타이틀, 화면 우측 절반을 차콜·앰버·틸 색블록 3개가 셰브론 노치로 맞물린 큰 그래픽이 채움. 하단 좌측 11pt 메타.
- **본문 슬라이드:** 좌측 18pt 본문 4줄, 우측에 3색 색블록으로 구성한 100% 누적 막대 1개 + 그 아래 KPI 색블록 카드 2개. 비대칭 배치.
- **차트 슬라이드:** 좌측 큰 세로 색블록 막대 차트(폭:간격 5:2, 단일 계열 차콜·강조 1막대 앰버, 막대 안 16pt 화이트 값, x축 2px 베이스라인, 격자선 없음), 우측 100% 누적 색블록 막대 + 11pt 출처 캡션.
- **프로세스 슬라이드:** 가로 5단계 풀하이트 색블록이 셰브론 노치로 맞물림 — 차콜→틸 교대, 3단계만 앰버, 각 블록 안 64pt 화이트 번호 + 16pt 단계명.
- **매트릭스 슬라이드:** 4개 솔리드 색블록 사분면(우상만 앰버), 화이트 솔리드 원 데이터 포인트 5개, 바깥 11pt 축 라벨.
- **디바이더 슬라이드:** 화면 절반 거대 앰버 블록 + 200pt 화이트 섹션 번호 "02" + 32pt 화이트 섹션명, 나머지 절반은 흰 여백.

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