시각 언어
블루 액센트·큰 라디우스·소프트 깊이·스팟 일러스트 — 화면에 따뜻함과 위계를 주는 표현 어휘. 새 디자인 시스템이 아니라 기존 WDS 토큰을 화면에서 꺼내 쓰는 증폭입니다.
마지막 업데이트 2026-06-26
한 문장#
“부드러운 SaaS” 인상은 새 시스템이 아니라 기존 토큰의 증폭에서 나옵니다 — 연블루 틴트(primary-subtle), 한 단계 큰 라디우스(radius-xl), 미세한 그림자(shadow-md), 그리고 스팟 일러스트(BloomSpot). 아래 6개 장치는 모두 이미 있는 토큰으로 동작하며, 표현 컴포넌트 4종만 새로 얹었습니다.
패스키를 권장합니다
비밀번호는 예비 키로 두고, 일상 로그인은 패스키로 — 더 안전하고 빠릅니다.
- 표현 컴포넌트 4종
- 기존 토큰만(신규 0)
- 라이트/다크 양 테마
- 한 화면 한 주인공
틴트 아이콘 타일 · 스텝 배지 · 콜아웃 · 틴트 패널 — 한 카드 안에서 위계를 만드는 장치들
장치 6종#
1 · 틴트 아이콘 타일 — IconTile#
맨 아이콘 대신 연블루 라운드 배경에 담아 섹션·행·모달 헤더의 시각 앵커로 씁니다. 틴트는 구조 신호라 의미가 있을 때만 색을 바꿉니다.
타일은 장식이라 의미는 옆 텍스트가 담습니다. 자세히는 IconTile.
2 · 숫자 스텝 배지 — StepBadge#
설정 위저드의 단계 번호를 원형 배지로. 현재 단계는 **채운 강조 + aria-current**로, 색맹에 안전하게 번호·채움·aria 세 채널로 전달합니다.
자세히는 StepBadge.
3 · 레이어드 틴트 패널 — TintPanel#
카드 안의 중첩 영역. 활성 단계·추천 블록을 틴트 배경 + accent 보더로 끌어올립니다. 강조는 보더·배경으로 표현해 잉크 대비(DD-6)와 무관합니다.
차분한 surface 배경 + 중립 보더.
틴트 + accent 보더로 지금 위치를 강조.
자세히는 TintPanel.
4 · 인포 콜아웃 — Callout#
에러·경고가 아닌 상시 권유·안내. 떴다 사라지는 Alert·Toast와 달리 페이지에 머무는 팁·전제에 씁니다. 틴트는 배경에만, 잉크는 진한 토큰으로 대비를 지킵니다.
권유
대부분의 안내는 info — 중립 권유·전제 설명에 씁니다.
확인
완료·정상 상태가 지속되는 안내.
Alert와 구분: Alert=일시적 상태 피드백, Callout=상시 안내. 자세히는 Callout.
5 · 스팟 일러스트 — BloomSpot#
화면에 따뜻함·깊이를 주는 블루 씬. 핵심 surface에만(빈 상태 중앙, 모달 완료, 카드 헤더), 한 화면에 1~2개로 절제합니다. 장식이 기본이라 aria-hidden.
빈 상태 8씬까지 전체는 EmptyState에서.
6 · 큰 라디우스 + 소프트 깊이#
“부드러운 SaaS” 인상의 대부분은 라디우스 한 단계 상향 + 미세한 그림자에서 나옵니다(저비용·고효과).
| 표면 | 라디우스 | 깊이 |
|---|---|---|
| 카드 | radius.xl(20) | shadow.md |
| 모달 | radius.xl ~ xxl(20–28) | shadow.md |
| 타일·패널 | radius.lg ~ xl(14–20) | 보더 hairline |
| 컨트롤 | radius.md(10) | — |
보더는 hairline을 유지합니다 — 그림자로 떠 있게 하고, 선은 가늘게.
원칙#
절제가 핵심입니다 — 장치를 남발하면 위계가 무너집니다.
권장 — 이렇게 쓰세요
지양 — 이러지 마세요
한 화면 한 주인공 — 스팟 1~2개, 강조 블록 하나. 시선이 갈 곳을 분명히
틴트 위 틴트 — 틴트 패널 위에 또 틴트, 한 카드에 콜아웃+스팟+틴트 동시 — 위계 붕괴
파스텔 위 회색 텍스트 — 틴트 배경 위 흐린 잉크는 대비 미달(DD-6). 잉크는 진한 토큰으로
- 대비(DD-6): 틴트는 배경에만. 텍스트·아이콘은 진한 토큰(
text/primary-text). primary 채움 위 텍스트는primary-strong(7.3:1). - 색 외 채널: 단계·상태는 색만이 아니라 번호·라벨·
aria-current로도(색맹 안전). - 일러스트: 장식은
aria-hidden, 의미가 있으면label. 화면당 1~2개.
어디에 쓰나#
첫 쇼케이스는 어드민 콘솔입니다 — 인증&접근 카드의 메서드 행이 IconTile로 앵커되고, 2단계 인증 설정 모달이 StepBadge·TintPanel·Callout·BloomSpot으로 단계를 안내합니다. 새 화면을 만들 때 이 어휘를 먼저 꺼내 쓰세요: 맨 아이콘은 IconTile로, 권유는 Callout으로, 위저드 단계는 TintPanel+StepBadge로, 핵심 빈 화면은 스팟 하나로.