YumYum 디자인 시스템 — 엘리베이션 토큰 v3

냠냠픽업 디자인 시스템 Shadow / Elevation 가이드 작성일: 2026-05-13 최종 갱신: 2026-05-18 — 그림자 베이스 rgba(45,43,39,x) → rgba(10,10,10,x) cool 마이그레이션 버전: v3.0

---

1. 디자인 원칙

1.1 핵심 컨셉

• Flat 위주, 그림자 최소화 — 2D 캐릭터 일러스트와 충돌하지 않도록
• 보더로 요소 구분 — 그림자 대신 0.5px 보더 + 배경색으로 위계
• 그림자는 정말 떠 있어야 하는 곳에만 — Modal, Toast 등 최상위 컴포넌트

1.2 왜 Flat 위주인가

YumYum 앱에는 마스코트와 2D 캐릭터 일러스트가 등장. 일러스트는 본질적으로 평면적이라, UI 요소만 강한 그림자로 입체감을 주면 시각적으로 충돌함. 일러스트와 UI가 같은 평면 위에 있는 것처럼 보여야 자연스러움.

이는 카카오, 토스, 라인 등 일러스트를 적극 활용하는 한국 서비스들이 그림자를 절제하는 이유와 같음.

1.3 그림자 색의 비밀

순수 검정(rgba(0, 0, 0, x)) 대신 딥 뉴트럴 톤 사용:

• rgba(10, 10, 10, x) = neutral-950 베이스 (cool gray v3)
• 채도가 0이라 노랑 브랜드를 흐리지 않고 깔끔하게 떠 보임
• v2 warm(rgba(45, 43, 39, x))에서 v3 cool로 마이그레이션됨 (2026-05-18)

---

2. Elevation Scale — 3단계

대부분의 컴포넌트는 elevation-0. 그림자는 특별한 경우에만.

2.1 elevation-0 ⭐ (98% 컴포넌트)

box-shadow: none;
border: 0.5px solid var(--color-neutral-200);

• 용도: 카드, 버튼, 입력창, 리스트 아이템, 뱃지, 일반 컨테이너
• 구분 방법: 보더 + 배경색으로 표현

2.2 elevation-1 (떠있는 컴포넌트)

box-shadow: 0 4px 16px rgba(10, 10, 10, 0.08);

• 용도: Modal, Bottom Sheet, Dropdown, Popover
• 의미: "이 화면 위에 떠 있다"는 신호

2.3 elevation-2 (최상위 알림)

box-shadow: 0 8px 24px rgba(10, 10, 10, 0.12);

• 용도: Toast, Snackbar, 시스템 알림
• 의미: 최상위에서 시선을 강제

---

3. 컴포넌트별 적용 가이드

컴포넌트	Elevation	비고
카드 (매장, 메뉴)	elevation-0	보더만
버튼 (모든 사이즈)	elevation-0	보더 또는 배경색
입력창	elevation-0	보더만
리스트 아이템	elevation-0	보더로 구분
뱃지 / 태그	elevation-0	배경색만
Dropdown	elevation-1	떠있는 메뉴
Popover	elevation-1	떠있는 안내
Modal	elevation-1	dim 배경 + elevation-1
Bottom Sheet	elevation-1	상단 라운드 + elevation-1
Toast	elevation-2	최상위
Snackbar	elevation-2	최상위

---

4. 그림자 디자인 원칙

4.1 그림자 만드는 기술

1. 순수 검정이 아닌 딥 뉴트럴 톤 — rgba(10, 10, 10, x) (neutral-950 베이스, cool gray v3)
2. 큰 blur, 작은 Y offset — Y축 4~8px, blur 16~24px이 부드러움의 비결
3. 투명도 8~12% — 너무 강하면 둔하고, 너무 약하면 안 보임
4. 음수 X offset 사용 X — 자연스러운 빛은 위에서 아래로

4.2 사용 절제 원칙

• 한 화면에 elevation-1, elevation-2는 각각 1-2개씩만
• 너무 많이 사용하면 위계 의미 사라짐
• 카드 hover 같은 미세 상호작용에는 그림자 변화 X (보더 강조나 배경 변화로)

---

5. CSS Variables 구현 예시

:root {
  /* Elevation */
  --elevation-0: none;
  --elevation-1: 0 4px 16px rgba(10, 10, 10, 0.08);
  --elevation-2: 0 8px 24px rgba(10, 10, 10, 0.12);
}

/* 컴포넌트 적용 */
.card {
  background: #FFFFFF;
  border: 0.5px solid var(--color-neutral-200);
  border-radius: var(--radius-md);
  box-shadow: var(--elevation-0); /* none */
}

.modal {
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  box-shadow: var(--elevation-1);
}

.toast {
  background: var(--color-neutral-800);
  color: var(--color-neutral-50);
  border-radius: var(--radius-md);
  box-shadow: var(--elevation-2);
}

---

6. Figma 적용 방법

6.1 Effect Style 구조 권장

Yumyum/
└── Elevation/
    ├── elevation-1 (Drop shadow: Y4, blur16, #0A0A0A 8%)
    └── elevation-2 (Drop shadow: Y8, blur24, #0A0A0A 12%)

elevation-0은 Effect Style로 만들 필요 없음 (그림자 없음).

6.2 적용 시

• 컴포넌트에 Effect Style 변수로 연결
• 디자인 시스템 변경 시 일괄 업데이트

---

7. 기존 vs 신규 비교

항목	기존	v3 (신규)
Shadow 정의	없음	3단계 (0, 1, 2)
그림자 색	검정 (즉흥적) → v2 warm rgba(45,43,39,x)	딥 뉴트럴 rgba(10,10,10,x) (neutral-950, cool gray v3)
일러스트 고려	없음	Flat 위주, 충돌 방지
컴포넌트 매핑	없음	명시적 가이드
사용 원칙	없음	절제 원칙 명시

---

8. 다음 단계

엘리베이션이 잡혔으니, 디자인 시스템 핵심 토큰 5종(Color + Typography + Spacing + Radius + Elevation)이 모두 완성됨. 이제 토큰을 조합해서 실제 컴포넌트를 정의할 수 있음.

• [ ] Components — Button, Input, Card, Modal 등 (모든 토큰을 조합)
• [ ] Stratis UI Icons — Stratis UI Icons 사이즈 가이드 (16 / 20 / 24)
• [ ] Motion — 애니메이션 duration, easing 정의
• [ ] Grid System — 모바일 4-column 그리드 (필요 시)

---

이 문서는 살아있는 문서입니다. 디자인 시스템이 발전하면서 함께 업데이트하세요.