Atmospheric Glass — 유리 효과

첫 번째 공식 예시예요. 가상의 날씨 앱용 디자인 시스템이에요. 전략은 한 줄로 "배경이 에너지, UI는 투명한 렌즈". 복잡한 기상 데이터를 차분하고 고급스럽게 보이게 하는 게 목표예요.

눈에 띄는 토큰 선택

반투명 값으로 위계 만들기

흰색 한 가지로 어떻게 카드가 얕은 것·깊은 것·버튼을 구분할까요? 알파(투명도)로 해결해요.

components:
  glass-card-standard:
    backgroundColor: rgba(255, 255, 255, 0.1)    # 10% — 기본 카드
  glass-card-elevated:
    backgroundColor: rgba(255, 255, 255, 0.2)    # 20% — 더 떠 있는 카드
  button-ghost:
    backgroundColor: rgba(255, 255, 255, 0.05)   # 5%  — 아주 연한 버튼

알파만 바꿔서 층(z-stack)을 표현해요. Material Design의 "elevation = 색 + 불투명도" 아이디어를 차용한 거예요.

폰트 — Inter 하나로 절제

배경이 화려하니까 폰트까지 다채로우면 시각 소음이 너무 커져요. Inter 단일을 써서 기하학적 명확함을 유지. 본문 설명에 "글래스 뒤에서 글자가 흐릿해 보이니 폰트 굵기를 한 단계 올려라"라는 지시가 박혀 있어요 — 유리 블러로 가독성이 떨어지는 걸 미리 보정.

색 팔레트 규모

놀랍게도 surface-* 계열이 8개, primary·secondary·tertiary가 fixed variant까지 포함해서 총 ~50개의 색 토큰이 정의돼 있어요. Material Design 3의 팔레트 체계를 그대로 따온 거예요 — 정교함을 추구한 선택.

모서리 — rounded-xl가 기본

버튼·검색창은 rounded.xl = 1.5rem (약 24px). 유리의 유기적이고 부드러운 느낌을 강화하려고 과감한 곡률을 택함.

AI가 이 DESIGN.md만 보고 만들면

1. 다색 그라디언트 배경 (짙은 블루 → 비비드 퍼플 → 소프트 핑크)
2. Inter Medium 굵기로 "72°" 같은 온도가 크게 표시
3. 반투명 흰색 카드(10% 투명도, 20px 블러)에 기상 지표 나열
4. Ghost 버튼은 5% 투명도 — 거의 안 보이는 힌트로 존재
5. 카드 엣지에 1px 흰색 20% 보더 — "유리 가장자리 반사" 느낌