익스프레시브 머티리얼

# 익스프레시브 머티리얼 — ppt 디자인 팩

## 이 스타일의 정체성
Google Material 3 Expressive를 슬라이드로 옮긴다. 대담한 토널 색 조합, 가변 폰트의 굵기·폭을 변주한 역동적 타이포, 크고 둥근 모핑 셰이프(꽃잎·자갈·물방울형)와 명랑한 모션. 5단계 타입 스케일이 또렷한 위계를 만든다 — 한눈에 "표현적이고 통통한 머티리얼"로 식별된다.

## 색
- 배경: `#FEF7FF`(머티리얼 라이트 서피스). 또는 토널 컬러 컨테이너.
- 텍스트: `#1D1B20`(머티리얼 온서피스).
- 토널 강조 4색: `#6750A4`(프라이머리 퍼플), `#7D5260`(시크 핑크), `#386A20`(테르티어리 그린), `#B3261E`(에러 레드 — 강조 포인트). 컨테이너는 각 색의 라이트 토널 변형(불투명 20%).
- 그라디언트 금지 — 토널 단색 면. 색은 대담하되 토널 시스템 안에서.

## 타이포그래피
- 5단계 스케일(Material type scale 응용):
  - Display: `Roboto Flex` 또는 `Pretendard ExtraBold` 56pt / Weight 800 / Width expanded.
  - Headline: 38pt / Weight 700.
  - Title: 28pt / Weight 600.
  - Body: 23pt / Weight 400, 행간 1.45. 슬라이드당 7줄 이하.
  - Label: 15pt / Weight 600, 대문자, 자간 0.06em.
- 가변 폰트 변주: 표지·강조 단어는 Width를 expanded로 늘려 역동성 부여.

## 레이아웃 / 그리드
- 캔버스 16:9 (13.33×7.5in). 좌우 여백 각 0.8in, 상하 각 0.7in.
- 블록 그리드 — 둥근 컨테이너 카드를 12열 그리드에 배치, 카드 간격 0.2in.
- 카드 크기를 의도적으로 비대칭 변주(한 슬라이드에 큰 카드 1 + 작은 카드 2~3).
- 모핑 셰이프 1~2개를 배경 레이어에 부유 배치.

## 형태 / 질감
- 카드: 모서리 반경 28pt — 크고 부드러운 라운드. 토널 컨테이너 색 채움.
- 모핑 셰이프: 꽃잎·자갈·물방울형의 7~12각 둥근 다각형. 토널 색 채움.
- 보더: 보더리스 기본. 필요 시 1pt 토널 색 가는 라인.
- 그림자: 머티리얼 elevation 그림자 — 블러 16pt, 불투명도 12%, 색 `#1D1B20`. 부드러운 확산만.
- 아이콘: Material Symbols 라운드 스타일만 허용(이모지 금지).

## 전환 (PPT)
- 전환은 Morph, 0.4s — 셰이프가 스프링처럼 변형. 카드 등장은 Bounce/Grow(스프링 이징) 0.35s.

## 하지 말 것
- 그라디언트·메시 그라디언트 금지 — 토널 단색 면만.
- 각진 직각 카드·모서리 반경 0 금지 — 28pt 큰 라운드 유지.
- 토널 시스템 밖 임의 채도 원색 금지.
- 검정 하드 섀도 금지 — 부드러운 elevation 그림자만.
- 이모지·클립아트 금지. 아이콘은 Material Symbols 라운드만.
- 5단계 타입 스케일을 무시하고 임의 크기 쓰지 말 것 — 위계는 스케일로.
- **차트 금지사항(아마추어 회귀 차단):** 3D·입체 막대·원근 파이 금지. 검정 하드 섀도 금지(부드러운 elevation만). 격자선 금지. 범례 박스 금지 — 직접 레이블링만. 토널 시스템 밖 무지개 채도 원색 금지. 잘린 y축 금지. 데이터 영역 테두리 박스 금지. div·표 셀 막대 금지 — SVG 정밀 렌더.

## 차트·데이터 시각화
머티리얼 차트 = 토널 색 막대 + 부드러운 라운드 + Label 스타일 수치. 차트도 둥근 컨테이너 카드 안에 들어가 머티리얼 시스템과 일치한다.
- **렌더링:** SVG로 정밀하게 그린다. 막대 폭 : 간격 = 3 : 2, 막대 상단 모서리 반경 8pt(`card_bar_radius`). 막대 하단 기준선은 값 0에 정확히 정렬. 잘린 y축 절대 금지.
- **축·격자:** 격자선 완전 제거. x축(기준선)만 1pt `#CAC4D0` 토널 그레이 솔리드. y축선 제거. 눈금 라벨 최소(0·최댓값).
- **데이터 색:** `tokens.json`의 `color.chart` 토널 4색(`#6750A4`·`#7D5260`·`#386A20`·`#B3261E`). 단일 계열은 프라이머리 퍼플 `#6750A4` 단색 + 강조 막대 1개만 에러 레드 `#B3261E`. 명도 단계가 필요하면 퍼플 토널 명/암 2단(`#9A8AC4`·`#6750A4`). 다계열은 토널 4색 이내, 무지개 채도 금지.
- **값 레이블:** 막대 위·꼭짓점 옆에 직접 표기. `label` 스타일(`Roboto Flex` 15pt Weight 600 대문자 자간 0.06em) `#1D1B20`, 탭형 정렬, 일관된 자릿수·단위.
- **직접 레이블링:** 범례 박스 금지. 항목명은 막대 아래, 계열명은 라인 끝에 `label` 스타일로 직접 붙인다.
- **차트 타입:** 비교=상단 라운드 막대(토널 색). 추세=2.5pt 토널 색 라인(둥근 캡) + 옅은 토널 면적(불투명도 20%). 비중=도넛(조각 3개 이하, 토널 색, 중앙에 핵심 수치 `headline` 38pt). 파이 4조각+·다중 도넛 금지.
- **카드:** 차트를 모서리 반경 28pt 둥근 토널 컨테이너 카드 안에 배치, elevation 그림자(블러 16pt, 불투명도 12%, `#1D1B20`).

## 다이어그램·컴포넌트
머티리얼 다이어그램 = 둥근 토널 컨테이너 노드 + 굵은 라운드 캡 커넥터 + 원형 번호 배지. 모든 다이어그램은 둥근 28pt 토널 카드·알약·정원 안에서 살고, 모핑 셰이프 1개가 배경에 부유한다. 한 언어를 공유한다 — 노드는 모서리 반경 28pt 토널 컨테이너 카드, 커넥터는 3pt 라운드 캡 토널 라인, 번호 배지는 지름 0.44in 정원, 강조는 에러 레드 `#B3261E`. 전부 SVG 정밀 렌더, div 블록 금지.
- **공통 다이어그램 언어:** 노드 = 모서리 반경 28pt 둥근 카드, 토널 컨테이너 색(불투명 20%) 채움 + elevation 그림자(블러 16pt, 불투명도 12%, `#1D1B20`). 커넥터 = 3pt 라운드 캡 토널 색 라인, 화살촉은 둥근 삼각형. 번호 배지 = 지름 0.44in 정원, 토널 색 채움 + 흰색 숫자 `title` 28pt. 활성/강조 노드만 에러 레드 `#B3261E`.
- **프로세스 플로우:** 4~5단계, 둥근 카드 노드 폭 2.5in × 높이 1.0in(반경 28pt), 토널 4색 순환 채움. 노드 간격 0.4in을 3pt 라운드 캡 라인 + 둥근 삼각형 화살촉으로 연결. 노드 좌상단에 정원 번호 배지, 내부 `title` 28pt + `label` 라벨. 활성 단계 1개만 `#B3261E` 토널 채움 + 진한 elevation. 셰브론 대신 둥근 카드 + 라운드 커넥터.
- **타임라인:** 수평 축 = 3pt 라운드 캡 토널 그레이 `#CAC4D0` 라인. 마일스톤 마커 = 축 위 지름 0.32in 토널 색 정원(채운 원), 축에서 0.5in 띄운 위치에 둥근 28pt 카드(`title` + `label` 날짜). 현재 시점만 `#B3261E` 정원 + 외곽 토널 링(불투명 20%, 펄스 느낌). 마커 간격은 날짜 비례.
- **비교 레이아웃:** 2~3개 둥근 토널 카드를 가로 배치(12열을 6+6 또는 4+4+4), 카드 간격 0.2in, 각 카드 다른 토널 색. 카드 상단 `headline` 38pt + 그 아래 `body` 항목, 항목 앞에 토널 색 둥근 점(지름 0.12in). 추천 카드 1개만 `#B3261E` 토널 + 카드 상단에 알약 배지("추천"). vs 표기는 카드 사이 지름 0.6in `#B3261E` 정원에 흰색 "VS".
- **매트릭스 2×2:** 사분면 = 4개 둥근 토널 카드를 0.2in 간격으로 2×2 배치(각 한 변 3.0in, 반경 28pt), 각 다른 토널 색 컨테이너. 축 라벨 = 매트릭스 바깥 상하·좌우에 `label` 스타일. 데이터 포인트 = 지름 0.4in 토널 색 채운 원(버블, 값에 따라 0.3~0.7in 가변) + 옆 `label` 라벨, 핵심 포인트 1개만 `#B3261E`.
- **계층/퍼널:** 수직 적층 둥근 카드 단(段), 각 높이 1.0in(반경 28pt), 폭은 계층=위→아래 축소·퍼널=아래로 축소(폭 차이 1.5in씩), 단 간격 0.12in. 각 단 토널 4색 순환 채움, 좌측 정원 번호 배지, 내부 `title` 28pt + `label`. 정점/병목 단 1개만 `#B3261E`.
- **KPI·스탯 카드:** 카드 = 모서리 반경 28pt 둥근 토널 컨테이너 카드 + elevation 그림자(블러 16pt, 불투명도 12%). 거대 수치 `display` 56pt expanded(토널 색), 그 위 작은 `label` 라벨, 아래 증감 — 상승은 `#386A20`, 하락은 `#B3261E`, 둥근 삼각형 + 수치. 카드 3개는 12열 4+4+4 균등, 카드 간격 0.2in, 각 다른 토널 색.

## 적용 예
- 표지: 라이트 서피스 배경, 중앙에 56pt expanded Display 제목, 배경에 퍼플·핑크 모핑 셰이프 2개 부유, 하단 15pt 라벨.
- 본문: 좌측에 큰 둥근 퍼플 토널 카드(38pt 제목 + 본문), 우측에 작은 그린·핑크 토널 카드 2개(메트릭 + 라벨).
- 차트: SVG 막대/도넛 차트, 둥근 28pt 토널 카드 안에 배치. 막대 폭:간격 = 3:2, 상단 모서리 8pt 라운드. 막대는 프라이머리 퍼플 `#6750A4` + 강조 1개만 `#B3261E`(또는 토널 4색 다계열). 격자선·범례 제거, x축만 1pt `#CAC4D0`, 기준선 0. 값 레이블 `label` 스타일(15pt 대문자 자간 0.06em) 직접 표기.
- 다이어그램(프로세스): SVG 4단계 플로우. 둥근 카드 노드(2.5×1.0in, 반경 28pt) 토널 4색 순환 + elevation 그림자, 3pt 라운드 캡 라인 + 둥근 삼각형 화살촉 연결. 좌상단 정원 번호 배지, 활성 단계 1개만 `#B3261E`.
- 다이어그램(매트릭스 2×2): SVG 4개 둥근 토널 카드 2×2 배치(3.0in, 반경 28pt). 축 라벨 `label` 스타일, 데이터 포인트는 값 가변 토널 버블(0.3~0.7in), 핵심 1개만 `#B3261E`.