PPTppt-neo-brutalism

네오브루탈리즘

두꺼운 검정 보더와 하드 섀도, 원색 블록의 거친 충돌, 거대 굵은 산세리프의 의도적 비대칭.

미리보기

네오브루탈리즘 샘플 렌더

색 토큰

bg
#FFFFFF
bg_alt
#FFE14D
surface
#FFFFFF
text
#0A0A0A
accent 1
#FF5A36
accent 2
#FFE14D
accent 3
#2D5BFF
border
#0A0A0A

타이포 · 간격 토큰

display · {"family":"Archivo Black","fallback":"Arial Black, Pretendard","size":"48pt","weight":900,"tracking":"-0.02em","leading":1,"case":"uppercase"}
subhead · {"family":"Archivo Black","size":"24pt","weight":800,"case":"uppercase"}
body · {"family":"Arial","fallback":"Helvetica, Pretendard","size":"18pt","weight":700,"leading":1.25}
badge · {"family":"Archivo Black","size":"14pt","weight":900,"case":"uppercase"}
caption · {"family":"Arial","size":"12pt","weight":700}
spacing.unit · 8
spacing.margin_x · 0.5in
spacing.block_layout · intentionally misaligned

스타일 축

색채vivid-primary
타이포heavy-display
레이아웃block-grid
여백dense
모션snappy
familyneo-brutalism

출처

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

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

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

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

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

스킬 없이 쓰기 — 디자인 지시문(prompt.md) 직접 복사
prompt.md
# 네오브루탈리즘 — ppt 디자인 팩

아래 지시를 한 블록으로 따라 16:9(13.33×7.5in) 슬라이드 덱을 만든다. 네오브루탈리즘 — 두꺼운 검정 보더, 100% 불투명 하드 섀도, 원색 블록의 거친 충돌, 의도적 비대칭.

## 이 스타일의 정체성
한눈에 알아보는 단서: (1) 모든 박스에 4px 이상 검정 보더 + 오른쪽-아래로 오프셋된 하드 섀도(블러 0, 불투명 100%), (2) 채도 100%에 가까운 원색 블록이 그라디언트 없이 평면으로 충돌, (3) 거대한 굵은 산세리프가 의도적으로 비뚤게·비대칭으로 배치. 부드러움이 전혀 없다.

## 색
- 배경 `#FFFFFF` 또는 `#FFE14D` (노랑) — 슬라이드별 택1, 평면 단색
- 텍스트·보더 `#0A0A0A`
- 블록 컬러 (평면, 그라디언트 절대 금지): 빨강 `#FF5A36`, 노랑 `#FFE14D`, 파랑 `#2D5BFF`, 흰 `#FFFFFF`
- 하드 섀도 색 `#0A0A0A` (블러 0)
- 강조 규칙: 위 4색을 자유롭게 충돌시키되 한 슬라이드에 3색 이하. 텍스트는 항상 `#0A0A0A` 또는 보색 블록 위 `#FFFFFF`.

## 타이포그래피
- 디스플레이 폰트: `Archivo Black` (대체 `Arial Black`, `Pretendard` 굵게). 한글은 `Pretendard` Black.
- 본문 폰트: `Arial` Bold (대체 `Helvetica`, `Pretendard`).
- 헤드라인: 48pt / 900 / 자간 -2% / 행간 1.0 / 대문자
- 서브헤드: 24pt / 800 / 대문자
- 본문: 18pt / 700 (본문도 굵게) / 행간 1.25
- 라벨/배지: 14pt / 900 / 대문자 / 검정 박스 안 흰 글자
- 캡션: 12pt / 700

## 레이아웃 / 그리드
- **블록 그리드.** 좌우 여백 0.5in. 콘텐츠는 크기가 제각각인 블록을 의도적으로 어긋나게 배치 — 정렬을 일부러 깬다.
- 각 블록은 보더 4~6px + 하드 섀도(오프셋 `8px 8px`, 블러 0).
- 헤드라인 블록은 회전 -2°~+3°로 살짝 비뚤게.
- 슬라이드마다 다른 레이아웃 — 같은 배치 반복 금지.

## 형태 / 질감
- 모서리 반경 0px (직각 필수). 보더 `4-6px solid #0A0A0A`.
- 그림자는 하드 섀도만: `8px 8px 0 #0A0A0A`, 블러 0, 불투명 100%. 부드러운 확산 그림자 절대 금지.
- 아이콘은 굵은 4px 스트로크 또는 평면 솔리드 도형. 화살표는 두껍고 각진 것.

## 차트 / 데이터 시각화 (두꺼운 검정 보더 + 평면 원색)
차트도 브루탈 시각 언어를 그대로 입는다 — 매끄러운 차트는 이 팩의 실패다. SVG로 정밀 렌더하되 거칠고 두껍게.
- **차트 영역(절대값):** 차트 플롯 영역은 가로 약 7.0in × 세로 약 3.8in. 막대 자체는 폭·정렬을 픽셀로 정확히(거친 미감은 회전·배치로 내고, 막대 도형 자체는 정밀하게 그린다). 차트 블록도 5px 검정 보더 + `8px 8px 0` 하드 섀도로 감싼다.
- **차트 타입 매칭:** 항목 비교=세로 막대(기본), 시계열 추세=굵은 꺾은선, 비중=도넛(조각 3개 이하, 두께 두껍게, 각 조각 5px 검정 보더 + 평면 원색). 파이 조각 5개 이상·다중 도넛 금지.
- **막대:** 각 막대에 `5px solid #0A0A0A` 검정 보더 + 평면 원색 채움(빨강 `#FF5A36` / 파랑 `#2D5BFF` / 노랑 `#FFE14D` 중 택1). 그라디언트·반투명 절대 금지. 모서리 반경 0(직각). 막대 폭 : 간격 = 4 : 3(굵직하게), 막대 폭 픽셀 동일.
- **하드 섀도:** 각 막대에 `8px 8px 0 #0A0A0A` 하드 섀도(블러 0, 불투명 100%). 부드러운 확산 그림자 금지.
- **값 레이블 = 검정 배지:** 값은 막대 위에 `#0A0A0A` 채움 사각 배지 안 흰 글자 14pt 900(`badge` 스타일). 축에서 읽게 하지 않는다. 자릿수·단위 일관, 숫자는 탭형(tabular).
- **축:** x축 베이스라인만 `4px solid #0A0A0A` 굵은 룰. y축선·격자선 전면 제거. **막대 기준선 데이터 0에서 시작**(잘린 y축·확대 축척 금지 — 막대 길이가 값에 정비례).
- **직접 레이블링:** 범례 박스 금지. 카테고리명은 막대 아래 14pt 900 대문자 `#0A0A0A` 직접 표기.
- **데이터 색:** 한 차트에 원색 3색 이하. 강조 막대 1개만 다른 원색(예 전부 파랑, 핵심만 빨강). 무지개·계열별 색칠 금지.
- **라인 차트가 필요하면:** 4px `#0A0A0A` 굵은 꺾은선 + 각 꼭짓점에 검정 보더 원색 사각 마커. 곡선 보간 금지(직선 세그먼트만).
- **헤드라인 블록:** 차트 슬라이드도 좌상단에 -3°~+3° 회전한 검정 보더 헤드라인 블록.

## 다이어그램·컴포넌트 (브루탈 다이어그램 언어 — 두꺼운 검정 보더 + 하드 섀도 + 원색)

다이어그램도 브루탈 시각 언어를 그대로 입는다 — 매끄러운 다이어그램은 이 팩의 실패다. SVG로 정밀 렌더하되 거칠고 두껍게(도형 자체는 픽셀 정확, 거친 미감은 회전·배치로). 브루탈 다이어그램 언어는 한 세트로 묶인다 — **노드는 직각 사각형(반경 0) + `5px solid #0A0A0A` 검정 보더 + 평면 원색 채움 + `8px 8px 0 #0A0A0A` 하드 섀도(블러 0), 커넥터는 `6px solid #0A0A0A` 굵은 직선 + 크고 각진 삼각 화살촉(한 변 16px), 번호 배지는 한 변 0.4in 직각 검정 사각형 안 흰 18pt 900 숫자, 강조는 원색 충돌(전부 한 색 + 핵심만 다른 원색)**. 한 다이어그램에 원색 3색 이하. 곡선·둥근 모서리·확산 그림자 금지.

- **프로세스 플로우:** 수평 3~4단계. 각 노드는 직각 사각형 폭 약 2.4in × 높이 1.1in, 5px 검정 보더 + 평면 원색 채움(예 전부 노랑, 핵심만 빨강) + 8px 하드 섀도. 노드 좌상단에 검정 사각 번호 배지. 노드 내 18pt 900 대문자 단계명. 노드 사이 6px 검정 굵은 직선 + 16px 각진 화살촉. 각 노드 회전 -3°~+3°로 어긋나게.
- **타임라인:** 수평 축은 `6px solid #0A0A0A` 굵은 룰. 마일스톤 마커는 한 변 0.3in 직각 사각형(5px 검정 보더 + 평면 원색 채움 + 8px 하드 섀도), 축 위에 어긋나게 배치. 각 마커 위 14pt 900 대문자 날짜 + 아래 검정 배지 안 흰 14pt 이벤트명. 현재 시점만 마커를 빨강 `#FF5A36` 채움 + 한 변 0.42in로 키움.
- **비교 레이아웃:** 2~3열 직각 블록, 각 블록 5px 검정 보더 + 8px 하드 섀도 + 서로 다른 원색 채움. 블록끼리 살짝 겹치거나 회전으로 어긋나게. 각 블록 상단에 검정 배지 헤더(흰 24pt 800 대문자). 행 항목은 18pt 700, 항목 사이 4px 검정 룰. 우월 블록 1개만 빨강 채움, 나머지 노랑·흰.
- **매트릭스 2×2:** 한 변 약 4.5in, 십자 축은 `6px solid #0A0A0A` 굵은 룰 2줄. 축 라벨은 검정 배지 안 흰 14pt 900 대문자(네 끝). 각 사분면은 다른 평면 원색으로 채움(4색이면 흰 포함). 데이터 포인트는 한 변 0.3in 직각 사각형(5px 검정 보더 + 8px 하드 섀도), 핵심 1개만 다른 원색 + 옆에 18pt 900 라벨.
- **계층 / 퍼널:** 수직 3~4단. 각 단은 직각 사각형 5px 검정 보더 + 평면 원색 채움 + 8px 하드 섀도, 폭이 위→아래로 단계별 1.2in 감소(퍼널) 또는 동일 폭 적층(계층). 단 사이 간격 0.12in, 각 단 회전 -2°~+2°. 각 단 좌측 검정 사각 번호 배지, 내부 18pt 900 대문자 레벨명. 핵심 단 1개만 빨강 채움.
- **KPI 스탯 카드:** 직각 사각형 폭 약 2.8in × 높이 1.9in, 5px 검정 보더 + 평면 원색 채움 + 8px 하드 섀도. 카드 회전 -3°~+3°로 어긋나게. 내부: 상단 검정 배지 안 흰 14pt 900 대문자 라벨, 중앙 48pt 900 수치(노랑·흰 카드는 `#0A0A0A`, 파랑·빨강 카드는 흰 글자, 탭형), 하단 14pt 900 증감("▲ 0.0%P" / "▼ 0.0%P", 각진 굵은 삼각 화살표). 카드 3~4개를 어긋난 블록 그리드에.

## 전환 (PPT)
즉시 컷 또는 0.1s 푸시(스냅). 페이드·디졸브 금지 — 전환도 거칠게.

## 하지 말 것
- 둥근 모서리 — 절대 금지, 전부 직각.
- 부드러운 확산 그림자, 그라디언트, 반투명, 블러.
- 파스텔·저채도 색. 원색은 채도 그대로.
- 모든 블록을 가지런히 정렬 — 의도적으로 어긋나게.
- 가는 폰트, 얇은 본문 — 본문도 700 이상.
- 이모지·클립아트·부드러운 일러스트.
- **아마추어 차트 회귀 금지:** 3D·입체 막대, 원근·기울임, 부드러운 확산 그림자·블러·광택·베벨(하드 섀도만 허용), 그라디언트·반투명 채움, 무지개·계열별 색칠, 격자선, 범례 박스, 잘린 y축·확대 축척, 둥근 막대, 곡선 보간 라인, div 블록 막대. 막대는 5px 검정 보더 + 평면 원색 + 하드 섀도만.

## 적용 예
- **표지:** 노랑 배경, 중앙에서 어긋난 위치에 48pt 헤드라인이 검정 보더 흰 블록 안에 -2° 회전. 그 옆 빨강 블록에 부제.
- **본문 슬라이드:** 크기 다른 블록 3~4개를 어긋나게 배치, 각 블록 보더 5px + 하드 섀도 8px. 한 블록만 파랑 채움.
- **차트 슬라이드:** 약 7.0×3.8in SVG 막대 차트 — 각 막대 5px 검정 보더 + 평면 원색(빨강/파랑) 채움 + 8px 하드 섀도, 막대 폭:간격 4:3, 값은 막대 위 검정 배지 안 흰 글자 14pt 900, 카테고리명 막대 아래 14pt 900 대문자, x축 4px 굵은 룰·격자선 없음·막대는 데이터 0 기준선. 좌상단에 -3° 회전한 검정 보더 헤드라인 블록.
- **프로세스 슬라이드:** 좌상단 회전 헤드라인 블록 아래 수평 3~4단계 — 직각 사각형 노드 2.4×1.1in, 5px 검정 보더 + 평면 원색 + 8px 하드 섀도, 검정 사각 번호 배지, 6px 굵은 직선 + 16px 각진 화살촉, 핵심 단계만 빨강 채움, 노드마다 -3°~+3° 어긋남.
- **타임라인 슬라이드:** 6px 굵은 수평 축 + 0.3in 직각 사각 마커(5px 보더 + 하드 섀도)를 어긋나게 — 마커 위 14pt 900 날짜 + 아래 검정 배지 이벤트명, 현재 시점만 빨강 0.42in 마커.
- **매트릭스 슬라이드:** 약 4.5in 2×2 — 6px 굵은 십자 축, 검정 배지 안 흰 14pt 900 축 라벨, 사분면마다 다른 평면 원색 채움, 데이터 포인트는 0.3in 직각 사각형(5px 보더 + 하드 섀도), 핵심 1개만 다른 원색 + 18pt 900 라벨.

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