WIZ Design System

한눈에#

카드 표면(border·radius·background)의 단일 소스. emphasis로 깊이를, 슬롯으로 구조를 잡고, 풍부함은 Badge·Progress 같은 시스템 재료 조립으로 표현합니다 — 표면을 손수 그리지 않습니다.

지난주 대비 +8.2%

emphasis 3종
static · clickable
media 슬롯
Flutter 패리티

같은 콘텐츠, 다른 깊이 — outlined(기본) · filled · elevated

해부#

실물 카드 위에 토큰 실측을 핀으로 얹습니다 — 값이 바뀌면 핀도 함께 움직입니다(드리프트 0).

outlined · 기본 — 실물 카드 위에 토큰 실측을 핀으로 표기

지난주 대비 +8.2%

radius: 14pxradius.lg
border: 1pxcolor.border
body padding: 24pxspace-6
header/footer: 16 · 24pxspace-4 · space-6

사용 시점#

관련 정보·행동을 하나의 표면으로 묶을 때 씁니다. 클릭 동작 방식이 카드의 성격을 가릅니다.

묶기

환경과 권한을 한 카드에서 관리합니다.

관련 정보·행동을 한 표면에 — 요약·설정 그룹·항목

전체 클릭

2026년 5월 요약 — 카드 전체가 링크

카드 전체가 하나의 목적지면 interactive

대신 static

static 카드는 내부 행동을 자유롭게 둡니다.

내부에 독립 버튼이 필요하면 clickable 말고 static (중첩 금지)

변형 — emphasis#

깊이는 그림자가 아니라 표면으로. 기본 outlined(플랫)이고, filled는 톤 표면, elevated만 그림자를 씁니다.

색은 이름이 아니라 실제 표면 스와치로 확인하세요 — emphasis 3종이 같은 콘텐츠를 어떻게 다른 깊이로 만드는지.

surface + 1px border

outlined

surface: color.surface
border: color.border

surface-container 톤 표면

filled

surface: color.surface-container
border: transparent

elevation — shadow.md

elevated

surface: color.surface

변형 — function#

static(기본)은 비대화 컨테이너, interactive는 카드 전체가 클릭 대상이 됩니다 — role="button"·키보드(Enter/Space)·포커스 링. 클릭형 카드 안에는 독립 인터랙티브 요소를 중첩하지 마세요(필요하면 static).

내부 버튼/링크 자유

카드 전체가 클릭 — 호버·포커스·Enter/Space

static vs interactive(clickable)

슬롯#

media(풀-블리드 상단) → header → 본문 → footer. 미디어는 라운드에 맞춰 클립되고 본문 패딩과 무관합니다.

4.5K 레티나 · 256GB SSD · 7색

media + header + body + footer

상태#

interactive 카드의 상호작용 상태는 그림자가 아니라 표면·보더로 표현합니다(:hover→surface-hover, :active→surface-pressed). :focus-visible은 2px 포커스 링. 의사클래스라 정적 문서에선 잘 안 보이니, 아래 카드에 직접 포커스/호버 해보세요.

Tab 또는 호버 시 표면·링이 반응합니다

interactive — 호버·포커스로 표면이 바뀜

레시피#

리치한 카드는 컴포넌트를 복잡하게 만들어서가 아니라 시스템 재료를 조립해서 만듭니다 — 표면은 Card, 나머지는 Badge·Progress·토큰입니다. 인라인 표면 0.

추가적립까지 남은 금액

201,530원

33%

목표 금액: 300,000원
현재 구매확정한 금액: 98,470원

목표 달성 시 리워드 포인트7,000원

목표·적립 — Card(elevated) + Progress + 강조 토큰

추천53%

90회 수강권~~정가 2,160,000원~~897,000원

초급 · Global · 20분 · 90일

총 할인-1,263,000원월 299,000원

가격·플랜 — Card + Badge + 위험/강조 토큰 + 틴트 밴드

플레이그라운드#

컨트롤로 props를 조작하면 미리보기와 코드가 실시간 갱신됩니다.

지난 주 대비 작업 처리량이 18% 증가했습니다.

클릭형본문 패딩

import { Card } from '@wds/ui-web';

<Card header="프로젝트 개요"><p>지난 주 대비 작업 처리량이 18% 증가했습니다.</p></Card>

사용 지침#

권장

한 카드의 주요 행동은 하나로 모읍니다.

기본 actions는 footer에 — primary 1개

권장

레티나 · SSD · 무료배송

본문은 문단보다 스캔 가능한 항목으로

지양

elevated는 강조 1곳에만

깊이를 그림자로 남발 — 기본은 outlined(플랫)

Props#

Prop	타입	기본값	설명
`emphasis`	`'outlined' \| 'filled' \| 'elevated'`	`'outlined'`	시각 깊이. outlined=surface+border(기본) · filled=톤 표면 · elevated=shadow.md
`interactive`	`boolean`	`false`	카드 전체 클릭 — role="button"·tabIndex·Enter/Space·포커스 링. 내부 독립 액션 금지
`media`	`ReactNode`	—	풀-블리드 미디어 슬롯(상단) — 라운드 클립
`header`	`ReactNode`	—	상단 제목 행 — 미제공 시 미렌더
`footer`	`ReactNode`	—	하단 행동 영역 — 미제공 시 미렌더
`bodyPadding`	`boolean`	`true`	false면 본문 패딩 제거 — 이미지/표 풀-블리드용
`shadow`	`boolean`	`false`	@deprecated emphasis="elevated"를 쓰세요. true는 elevated로 매핑(하위호환)
`…rest`	`HTMLAttributes<div>`	—	className·onClick 등 네이티브 속성 전달

토큰#

component 토큰 없이 semantic을 직접 소비합니다(신설 기준 §4 미충족).

속성	토큰
배경 (outlined/elevated)	`color.surface`
배경 (filled)	`color.surface-container`
보더 (outlined)	`color.border`
라운드	`radius.lg`
그림자 (elevated)	`shadow.md`
호버/프레스 (interactive)	`color.surface-hover` · `color.surface-pressed`
포커스 링	`color.focus-ring`
패딩	`space.4` · `space.6`

접근성#

기본은 의미 중립 div — 문서 구조(헤딩 레벨)는 소비자가 책임지며, header 슬롯엔 필요 시 h2/h3를 직접 넣습니다
interactive 카드는 role="button" + tabIndex=0 + Enter/Space 활성 + :focus-visible 링. 클릭형 카드 안에 독립 인터랙티브 요소를 중첩하지 마세요 — 내부 버튼/링크가 필요하면 static 카드를 쓰세요(중첩 인터랙션 혼란 방지)
상호작용 상태는 색 대비뿐 아니라 표면·보더·포커스 링으로 다중 신호를 줍니다

Flutter 패리티#

WDS Card는 Flutter WizCard와 동일 계약을 공유합니다 — 같은 emphasis(outlined/filled/elevated) · onTap(=웹 interactive, 포커스/키보드 동반) · media/header/footer 슬롯, 그리고 shadow→elevated 하위호환. RAG 소스 카드 KnowledgeCard(웹)도 Flutter WizKnowledgeCard와 1:1입니다.