글래스모피즘

# 글래스모피즘 — ppt 디자인 팩

아래 지시를 한 블록으로 따라 16:9(13.33×7.5in) 슬라이드 덱을 만든다. 글래스모피즘 — 반투명 프로스티드 글래스 패널이 컬러풀 배경 그라디언트 위에 부유, 가장자리 하이라이트 보더가 깊이감을 만든다.

## 이 스타일의 정체성
한눈에 알아보는 단서: (1) 콘텐츠가 반투명(불투명도 15~25%) 흰 패널 안에 담기고 패널 너머로 배경 그라디언트가 흐릿하게 비친다, (2) 패널 가장자리에 1px 밝은 하이라이트 보더, (3) 배경은 채도 높은 다색 그라디언트. 모든 패널이 유리처럼 떠 있다.

## 색
- 배경 그라디언트: 4정점 메시 — `#7B5BFF`(보라) → `#3FA9FF`(스카이) → `#FF6FB5`(핑크) → `#48E1C8`(민트). 부드럽게 대각선 흐름.
- 글래스 패널은 **두 가지 변형**으로 운용한다 (정체성은 반투명 + 블러 + 하이라이트 보더로 유지하되, 텍스트 가독을 절대 희생하지 않는다):
  - **라이트 글래스(본문 패널 기본)**: `#FFFFFF` 불투명도 **55%** 채움. 배경 메시가 은은히 비치되 본문 텍스트가 또렷이 읽혀야 한다. 알파를 0.55 미만으로 내리지 않는다.
  - **다크 글래스(표지·강조 패널)**: `#10122B` 불투명도 **55%** 채움. 컬러풀 배경 위에서 흰 텍스트 대비를 확보할 때 사용.
- 패널 하이라이트 보더: `#FFFFFF` 불투명도 65%, 1.5px (배경 위에서 보이도록 약간 강화).
- 강조색 **1개만**: `#FFFFFF` 솔리드 — 핵심 숫자·아이콘에. 배경 그라디언트가 색을 담당하므로 별도 강조 컬러는 쓰지 않는다.

## 타이포그래피
- 폰트: `SF Pro Display` (대체 `Inter`, `Pretendard`). 한글은 `Pretendard`.
- 제목: 40pt / Semibold(600) / 자간 -1% / 행간 1.15
- 서브헤드: 22pt / Medium(500)
- 본문: 18pt / Regular(400) / 행간 1.4
- 라벨: 13pt / Medium / 자간 +4% / 대문자
- 캡션: 11pt / Regular
- **텍스트 색은 절대값으로 못박는다 — 패널 위 본문은 WCAG 4.5:1 이상 대비를 반드시 보장한다:**
  - **라이트 글래스 패널 위**: 제목·본문·라벨 모두 `#1A1A2E`(딥 잉크) 솔리드 100%. 캡션은 `#3A3A52` 솔리드(불투명도 적용 금지 — 흐린 본문은 판독 불가의 원인).
  - **다크 글래스 패널 위**: 제목·본문·라벨 모두 `#FFFFFF` 솔리드 100%. 캡션은 `#FFFFFF` 불투명도 75%까지만 허용.
  - 텍스트에 불투명도(알파)를 걸어 흐리게 만들지 않는다 — 위계는 크기·굵기로만 만든다. 색을 반투명으로 깎는 것은 가독 손실이므로 금지.
- 만약 텍스트를 그라디언트 배경 위에 패널 없이 직접 올려야 하면, 텍스트 뒤에 **불투명 칩**(라이트면 `#FFFFFF` 100%, 다크면 `#10122B` 100%)을 깔아 4.5:1 대비를 확보한 뒤에만 배치한다.

## 레이아웃 / 그리드
- **중앙 정렬 우선.** 콘텐츠 글래스 패널을 슬라이드 중앙에 배치, 좌우 여백 각 1.0in 이상.
- 패널은 1~3개. 여러 개일 때 약간씩 겹쳐 깊이감(겹침 0.2~0.4in).
- 패널 내부 패딩 0.4in. 패널 사이 간격 0.25in.
- 배경 그라디언트는 슬라이드 전체를 풀블리드로 채움.

## 형태 / 질감
- 모서리 반경 24px (크게 둥글게 — 유리 카드 느낌).
- 패널 채움은 반드시 **불투명도 55% 이상** (라이트 글래스 `#FFFFFF`@55% / 다크 글래스 `#10122B`@55%). 18%처럼 너무 투명하면 텍스트가 메시 배경에 묻혀 판독 불가가 되므로 금지. 글래스의 정체성(배경 비침·블러)은 55%에서도 충분히 살아 있다.
- 패널 구성: 채움(55%+) + 흰 65% 1.5px 하이라이트 보더 + 미세 드롭 섀도(`0 8px 32px` 검정 22%) + **패널 뒤 배경 블러**(PPT에서 배경 그라디언트를 가우시안 블러 처리한 이미지를 패널 뒤에 깔아 프로스티드 글래스 질감을 구현 — 이 블러가 정체성의 핵심).
- 텍스트와 패널 가장자리 사이 내부 패딩은 최소 0.4in 확보 — 텍스트가 반투명 보더 영역과 겹치지 않게.
- 아이콘은 1.5px 라인 아이콘. 라이트 패널 위에서는 `#1A1A2E`, 다크 패널 위에서는 `#FFFFFF`. 도형은 둥근 모서리.

## 차트 / 데이터 시각화 (글래스 패널 안 — 가독 우선, 대비 사수)
차트는 반드시 글래스 패널 **안에** 그린다(메시 배경 위 직접 금지). SVG로 정밀 렌더하되 차트 요소도 4.5:1 대비를 지킨다.
- **차트 영역(절대값):** 차트 플롯 영역은 패널 내부 패딩(0.4in)을 뺀 영역, 가로 약 6.0in × 세로 약 3.2in 이하. 막대·축·레이블 픽셀 정확 정렬.
- **차트 타입 매칭:** 항목 비교=세로 막대(기본), 시계열 추세=라인, 비중=도넛(조각 3개 이하, 중앙 핵심 수치). 파이 조각 5개 이상·다중 도넛·누적 막대 다계열 금지.
- **데이터 색:** 강조색이 흰색뿐이므로 차트는 패널 텍스트색의 명도 단계로 인코딩한다.
  - 라이트 글래스 패널 안: 막대·도넛·라인은 `#1A1A2E`(딥 잉크) 솔리드 100%, 강조 막대 1개만 `#1A1A2E`·나머지는 `#6E7090`(중간 톤). 강조 1막대 기법.
  - 다크 글래스 패널 안: 막대·도넛·라인은 `#FFFFFF` 솔리드 100%, 강조 1개만 `#FFFFFF`·나머지는 `#FFFFFF` 45% 알파.
  - 채움에 반투명 글래스 효과를 막대 자체에 적용하지 않는다(데이터 도형은 솔리드 100% — 흐리면 판독 불가). 무지개·계열별 색칠 금지. 막대 외곽선 없음.
- **데이터 잉크 최소화:** 차트 테두리 박스 제거(패널이 이미 컨테이너), 차트 배경 채움 제거, 범례 박스 제거. 격자선은 패널 텍스트색 10% 알파 1줄만 또는 생략.
- **축:** 베이스라인만 패널 텍스트색 0.75pt 헤어라인. y축선 생략. **막대 기준선 데이터 0에서 시작**(잘린 y축·확대 축척 금지 — 막대 길이가 값에 정비례).
- **값 레이블·레이블링:** 범례 대신 직접 레이블링. 값 레이블은 막대 끝/꼭짓점에 14pt Semibold(600), 색은 패널 텍스트색 규칙(라이트=`#1A1A2E`·다크=`#FFFFFF`) 솔리드 — 알파 금지. 자릿수·단위 일관, 숫자는 탭형(tabular). 카테고리명 13pt.
- **도넛:** 조각 3개 이하, 중앙에 핵심 수치 40pt 솔리드, 두께는 반경의 30%. 다중 도넛 금지. 조각 사이 간격 2px 정도만.
- **막대 형태:** 막대 폭 : 간격 = 3 : 2, 막대 폭 픽셀 동일, 모서리 반경 6px(패널이 24px이므로 막대는 살짝만 둥글게).
- **라인 차트:** 2pt 솔리드, 직선 세그먼트, 마커는 끝점·강조점만 지름 7px 원, 면적 채움 없음(또는 패널 텍스트색 8% 알파의 아주 옅은 면적만).

## 다이어그램·컴포넌트 (글래스 다이어그램 언어 — 패널 안, 둥근 노드, 대비 사수)

다이어그램은 반드시 글래스 패널 **안에** 그린다(메시 배경 위 직접 금지). SVG로 정밀 렌더하되 모든 다이어그램 요소도 WCAG 4.5:1 대비를 지킨다. 글래스 다이어그램 언어는 한 세트로 묶인다 — **노드는 둥근 사각형(반경 12px — 패널 24px보다 작게), 채움은 패널 텍스트색 12% 알파의 옅은 칩 + 1px 패널 텍스트색 30% 알파 보더, 커넥터는 1.5pt 패널 텍스트색 솔리드 직선 + 6px 삼각 화살촉, 번호 배지는 지름 0.32in 원형(패널 텍스트색 솔리드 100% 채움 + 반대색 13pt Semibold 숫자), 강조는 패널 텍스트색 솔리드 100%(중립은 중간 톤)**. 노드 채움 칩에만 옅은 알파를 쓰고, 텍스트·커넥터·배지·강조 도형은 절대 알파를 걸지 않는다(솔리드 100% — 흐리면 판독 불가).

- **프로세스 플로우:** 글래스 패널 안 수평 3~4단계. 각 노드는 둥근 사각형(반경 12px) 폭 약 2.0in × 높이 0.9in, 패널 텍스트색 12% 알파 칩 채움 + 1px 30% 알파 보더. 노드 좌상단 원형 번호 배지. 노드 내 13pt Semibold 단계명 + 11pt Regular 한 줄(모두 패널 텍스트색 솔리드). 커넥터 1.5pt 솔리드 직선 + 6px 화살촉. 핵심 단계 1개만 칩 채움을 패널 텍스트색 22% 알파로 진하게 + 보더 솔리드 100%.
- **타임라인:** 패널 안 수평 축 1.5pt 패널 텍스트색 솔리드. 마일스톤 마커는 지름 0.14in 원(패널 텍스트색 솔리드 100%), 축 위 정확 정렬. 각 마커 위 11pt 라벨(라벨) 날짜 + 아래 13pt Semibold 이벤트명. 현재 시점만 마커 지름 0.2in + 그 둘레에 1.5pt 패널 텍스트색 링.
- **비교 레이아웃:** 한 패널 안을 2~3 칸으로, 칸 사이 1px 패널 텍스트색 25% 알파 헤어라인(또는 칸마다 별도 라이트 글래스 서브패널을 0.2in 겹쳐). 각 칸 상단 13pt Semibold 대문자 라벨. 행 항목 18pt Regular, 행 사이 1px 12% 알파 헤어라인. 우월 칸 1개만 라벨을 패널 텍스트색 솔리드 + 좌측 3px 솔리드 인디케이터.
- **매트릭스 2×2:** 패널 안 한 변 약 4.0in, 십자 축은 1.5pt 패널 텍스트색 솔리드. 축 라벨 13pt 대문자(라벨)(네 끝). 사분면 채움 없음 또는 한 사분면만 패널 텍스트색 8% 알파 옅은 칩. 데이터 포인트는 지름 0.18in 원(버블) — 중립은 중간 톤(라이트 `#6E7090` / 다크 `#FFFFFF`45%), 핵심 1개만 패널 텍스트색 솔리드 100% + 옆에 13pt 라벨.
- **계층 / 퍼널:** 패널 안 수직 3~5단. 각 단은 둥근 사각형(반경 12px), 패널 텍스트색 12% 알파 칩 채움 + 1px 30% 알파 보더, 폭이 위→아래로 단계별 0.8in 감소(퍼널) 또는 동일 폭 적층(계층). 단 사이 0.12in. 좌측 원형 번호 배지, 내부 13pt Semibold 레벨명 + 우측 18pt 수치. 핵심 단 1개만 칩 22% 알파 + 보더 솔리드.
- **KPI 스탯 카드:** 각 KPI는 작은 라이트/다크 글래스 서브카드 — 둥근 사각형(반경 16px), 패널 채움 규칙(55%+ 불투명도) + 1.5px 흰 65% 하이라이트 보더 + 미세 드롭 섀도. 폭 약 2.5in × 높이 1.6in. 내부: 상단 13pt 대문자 라벨, 중앙 40pt Semibold 수치(패널 텍스트색 솔리드 100%, 탭형), 하단 13pt 증감("▲ 0.0%" 증가 / "▼ 0.0%" 감소 — 화살표·텍스트 모두 패널 텍스트색 솔리드, 알파 금지). 카드 3~4개를 살짝 겹쳐(0.2in) 배치.

## 전환 (PPT)
0.4s 페이드 + 미세 스케일업(0.97→1.0). 부드럽게.

## 하지 말 것
- **패널 불투명도를 55% 미만으로 내리기** — 텍스트가 메시 배경에 묻혀 판독 불가가 된다. 글래스 정체성은 블러와 보더로 살리고, 채움은 55%+ 유지.
- **텍스트에 알파(불투명도)를 걸어 흐리게 만들기** — 위계는 크기·굵기로만. 본문은 항상 솔리드 색(라이트=`#1A1A2E`, 다크=`#FFFFFF`).
- **밝은 라이트 패널 위에 흰 텍스트 / 어두운 다크 패널 위에 잉크 텍스트** — 패널 변형에 맞는 텍스트 색을 반드시 짝지어 4.5:1 대비를 확보.
- 그라디언트 배경 위에 패널·칩 없이 텍스트를 직접 올리기.
- 직각 모서리 — 모든 패널 크게 둥글게(24px).
- 단색 배경 — 배경은 항상 다색 그라디언트.
- 진한 그림자, 하드 섀도, 이모지·클립아트·스톡 아이콘.
- 배경 그라디언트를 보라-핑크 2색만 쓰기 — 4정점(보라/스카이/핑크/민트) 모두 사용.
- **아마추어 차트 회귀 금지:** 3D·입체 차트, 원근·기울임, 막대 그림자·광택·베벨, 무지개·계열별 색칠, 격자선 과다, 차트 테두리 박스, 차트 배경 채움, 범례 박스, 잘린 y축·확대 축척, 다중 도넛, 파이 조각 5개 이상, div 블록 막대. 데이터 도형에 반투명 알파를 걸어 흐리게 만들지 않는다(솔리드 100%). 차트는 메시 배경 위 직접 금지 — 반드시 패널 안.

## 적용 예
- **표지:** 4색 그라디언트 배경, 중앙에 큰 **다크 글래스 패널**(`#10122B`@55%) 1개 — 40pt 흰 제목 + 22pt 부제, 모두 솔리드 흰색. 패널 가장자리 하이라이트 보더.
- **본문 슬라이드:** 그라디언트 배경 위 **라이트 글래스 패널**(`#FFFFFF`@55%) 2~3개를 살짝 겹쳐 배치, 각 패널에 13pt 라벨 + 18pt 본문 — 텍스트는 모두 `#1A1A2E` 솔리드. 패널 뒤 배경 블러로 글래스 질감.
- **차트 슬라이드:** 중앙 라이트 글래스 패널 안에 약 6.0×3.2in SVG 도넛(조각 3개 이하, 두께 반경의 30%) 또는 막대 차트 — 데이터 도형은 `#1A1A2E` 솔리드 100%·강조 1개 외 나머지 `#6E7090`, 막대 폭:간격 3:2·모서리 6px, 핵심 수치는 도넛 중앙 40pt `#1A1A2E`, 값 레이블 14pt Semibold 탭형 직접 표기, 격자선 0~1줄·테두리·범례 제거·막대는 데이터 0 기준선. 차트는 패널 안에만.
- **프로세스 슬라이드:** 중앙 라이트 글래스 패널 안에 수평 3~4단계 — 둥근 사각형 노드(반경 12px) 2.0×0.9in, 패널 텍스트색 12% 알파 칩 + 30% 알파 보더, 원형 번호 배지, 1.5pt 솔리드 직선 + 6px 화살촉, 핵심 단계 1개만 칩 22% 알파 + 보더 솔리드. 텍스트는 모두 `#1A1A2E` 솔리드.
- **타임라인 슬라이드:** 라이트 글래스 패널 안 수평 타임라인 — 1.5pt 솔리드 축, 0.14in 솔리드 원 마커, 마커 위 11pt 날짜 + 아래 13pt Semibold 이벤트명, 현재 시점만 0.2in 마커 + 솔리드 링.
- **KPI 슬라이드:** 4색 그라디언트 배경 위 작은 글래스 서브카드 3~4개(둥근 반경 16px, 55%+ 채움 + 하이라이트 보더)를 0.2in 겹쳐 배치 — 13pt 라벨 + 40pt Semibold 수치(패널 텍스트색 솔리드) + 13pt 증감(▲/▼ 솔리드). 알파로 텍스트 흐리게 금지.