styles
← 갤러리

Glassmorphism Deck

반투명 프로스티드 글래스 패널이 4색 메시 그라디언트 위에 부유하고, 밝은 하이라이트 보더가 깊이를 만드는 16:9 슬라이드 스타일 — 배경이 색을 담당하고 강조는 흰색 하나뿐.

glassmorphism glassmorphismfrosted-glassbackdrop-blurmesh-gradienthighlight-borderkeynotetranslucent-panel
⬇ AI 번들 (llms.md) DESIGN.md tokens.json
라이브 프리뷰 — 동일 샘플 UI에 이 스타일 적용

설명

글래스모피즘을 프레젠테이션 덱으로 일반화한 스타일. 슬라이드 전체를 4정점 메시 그라디언트(보라·스카이·핑크·민트)가 풀블리드로 채우고, 콘텐츠는 반투명(불투명도 55% 이상) 프로스티드 글래스 패널 안에 담긴다. 패널은 두 변형 — 본문용 라이트 글래스(흰색 채움)와 표지·강조용 다크 글래스(딥 잉크 채움) — 로 운용하되, 정체성은 배경 비침 + backdrop-blur + 1.5px 밝은 하이라이트 보더로 유지한다. 색은 배경 그라디언트가 담당하므로 유일한 강조는 흰색뿐이고, 패널 위 텍스트는 위계를 알파가 아니라 크기·굵기로만 만들어 WCAG 4.5:1 대비를 사수한다. 차트·다이어그램은 반드시 패널 안에서 패널 텍스트색의 명도 단계로만 인코딩한다. 모서리 반경 24px, 부드러운 드롭 섀도, 0.4s 페이드+미세 스케일 전환.

타입 스케일

title Ag 스타일 견본 Style Specimen
subhead Ag 스타일 견본 Style Specimen
body Ag 스타일 견본 Style Specimen
label Ag 스타일 견본 Style Specimen
value Ag 스타일 견본 Style Specimen
kpi Ag 스타일 견본 Style Specimen
caption Ag 스타일 견본 Style Specimen

덱 전용 타입 스텝(pt 단위, 16:9 / 13.33×7.5in 캔버스 기준). 팩 네이티브 폰트는 SF Pro Display이나 웹폰트로 배포 불가 → Google Fonts 대체는 라틴 Inter + 한글 Pretendard(Noto Sans KR). 제목 40pt Semibold(자간 -1%), 서브헤드 22pt Medium, 본문 18pt Regular(행간 1.4), 라벨 13pt Medium 대문자+넓은 자간, 캡션 11pt. KPI 수치·차트 값 라벨은 tabular figures(font-variant-numeric: tabular-nums) 필수. 텍스트 위계는 크기·굵기로만 — 색에 알파를 걸어 흐리게 만드는 것은 금지(가독 손실).

골든 예제 (exemplar)

Product Keynote — Vision

Everything floats on glass.

A translucent panel lets the gradient breathe through while the text stays solid and legible.

02

Section 02 — Experience

Depth without a single hard edge.

Do

  • 콘텐츠는 반드시 반투명 글래스 패널 안에 담고, 패널 뒤 배경 블러 + 흰색 65% 하이라이트 보더로 유리 질감을 만든다
  • 배경은 항상 4정점 메시 그라디언트(보라·스카이·핑크·민트) 풀블리드 — 배경이 색을 담당한다
  • 패널 채움은 55% 이상 불투명도 유지(라이트=흰색·다크=딥 잉크), 패널 변형에 맞는 텍스트색을 짝지어 WCAG 4.5:1 확보
  • 강조는 흰색 하나 + 크기·굵기 — 텍스트에 알파를 걸어 흐리게 만들지 않는다
  • 차트·다이어그램은 패널 안에서 패널 텍스트색의 명도 단계로만 인코딩, 데이터 도형은 솔리드 100%

Don't

  • 패널 불투명도를 55% 미만으로 내려 텍스트를 메시에 묻히게 하기
  • 그라디언트 배경 위에 패널·칩 없이 텍스트를 직접 올리기, 라이트 패널 위 흰 텍스트/다크 패널 위 잉크 텍스트
  • 직각 모서리·단색 배경·보라-핑크 2색만 쓰기 — 모서리 24px, 배경은 4정점 메시 전부
  • 진한 하드 섀도·베벨·광택, 이모지·클립아트·스톡 아이콘
  • 차트를 메시 위 직접 그리기, 데이터 도형에 반투명 알파, 무지개·계열별 색칠·3D·잘린 y축

컴포넌트 노트

glass_panel
핵심 컨테이너 — 채움 55%+ 불투명도(라이트=흰색·다크=딥 잉크) + 1.5px 흰색 65% 하이라이트 보더 + 미세 드롭 섀도(0 8px 32px 검정 22%) + 패널 뒤 배경 블러. 모서리 반경 24px. 채움을 55% 미만으로 내리지 말 것(텍스트가 메시에 묻힘).
title
제목 40pt Semibold(자간 -1%) — 라이트 패널 위 잉크 솔리드, 다크 패널 위 흰색 솔리드. 서브헤드 22pt Medium. 텍스트에 알파를 걸어 흐리게 만들지 않는다.
chart
반드시 글래스 패널 안(메시 배경 위 직접 금지). 플롯 영역 ≤6.0×3.2in. 데이터 도형은 패널 텍스트색 솔리드 100% — 강조 1개만 진하게·나머지 중간톤(라이트 #6E7090/다크 흰색 45%). 격자선 0~1줄·범례·테두리 박스 제거, x 베이스라인만 0.75pt, 기준선 항상 0. 값은 막대 위 14pt Semibold tabular 직접 라벨. 도넛 조각 ≤3·중앙 40pt 수치·두께 반경 30%. 막대 폭:간격 3:2·반경 6px.
diagram
패널 안 렌더 — 노드는 둥근 사각형(반경 12px), 패널 텍스트색 12% 알파 칩 채움 + 30% 알파 보더, 커넥터 1.5pt 솔리드 직선 + 6px 화살촉, 원형 번호 배지(패널 텍스트색 솔리드 + 반대색 숫자). 프로세스·타임라인·비교·2×2 매트릭스·퍼널이 한 언어. 강조 1개만 칩 22% 알파 + 보더 솔리드, 텍스트·커넥터·배지엔 알파 금지.
kpi_card
작은 글래스 서브카드(반경 16px, 55%+ 채움 + 1.5px 흰 65% 하이라이트 보더 + 미세 섀도). 폭 2.5×1.6in. 상단 13pt 대문자 라벨 + 중앙 40pt Semibold 수치(패널 텍스트색 솔리드·tabular) + 하단 13pt 증감(▲/▼ 솔리드). 3~4개를 0.2in 겹쳐 배치.
cover_panel
표지 = 4색 그라디언트 배경 중앙에 큰 다크 글래스 패널(딥 잉크 55%+) 1개 — 40pt 흰 제목 + 22pt 흰 부제, 모두 솔리드. 가장자리 하이라이트 보더.