소개
WIZ Design System은 WIZ 제품군 전체가 공유하는 제품 설계 운영체계입니다. 무엇을 위해 존재하고, 어떤 순서로 일하며, 어디서부터 읽어야 하는지 안내합니다.
마지막 업데이트 2026-06-10
WIZ Design System이란#
WIZ Design System(WDS)은 단순한 UI 라이브러리나 스타일 가이드가 아니라, Design · Development · AI · Product를 연결하는 운영 체계(Design Operating System) 입니다.
디자이너, 프론트엔드 개발자, 백엔드 개발자, 그리고 AI 에이전트까지 — WIZ 제품을 만드는 모든 주체가 동일한 기준으로 설계하고 구현하도록 만드는 것이 목표입니다.
모든 UI는 토큰 기반으로 만들어집니다. 색상·spacing·radius·shadow의 하드코딩은 금지됩니다.
이 플랫폼이 달성하려는 목표는 다섯 가지입니다.
- 디자인과 코드의 일관성
- Web과 Flutter의 일관성
- 제품군 간 UX 일관성
- AI Collaboration UX 표준화
- 장기 운영 가능한 플랫폼 구축
AI Collaboration OS#
WIZ는 사람(People) · 업무(Task) · 문서(Document) · 지식(Knowledge) · AI(Intelligence)를 연결하는 AI Collaboration OS를 지향합니다. 디자인 시스템도 이 5축을 기준으로 설계됩니다.
| 축 | 의미 | 중심 제품 |
|---|---|---|
| People | 사람과 조직의 연결 | WIZ-FLOW Next |
| Task | 업무와 프로세스 | WIZ-FLOW Next · WIZ-GOV AI |
| Document | 문서의 생성과 관리 | WIZ-DOCS · WIZ-GOV AI |
| Knowledge | 지식의 축적과 검색 | WIZON · WIZ-DOCS |
| Intelligence | AI 협업과 자동화 | WIZON · WIZ-GOV AI |
이 포털에서 정의하는 토큰·컴포넌트·패턴은 위 제품군 전체의 공통 기준이며, AI 가이드라인에서 AI 상태 모델과 Multi-Agent UX 표준으로 확장됩니다.
핵심 디자인 원칙#
여섯 가지 원칙이 모든 설계 판단의 기준입니다. 의사결정이 충돌할 때는 Clarity · Consistency · Scalability · AI First를 우선합니다.
| 원칙 | 의미 |
|---|---|
| Clarity | 명료함이 장식보다 먼저다 — 문서 가독성과 정보 구조 최우선 |
| Consistency | 같은 문제는 같은 방식으로 푼다 — 제품이 달라도 경험은 하나 |
| Simplicity | 필요한 것만 만든다 — Glass 최소, 과도한 애니메이션 금지 |
| Accessibility | 모두가 쓸 수 있어야 완성이다 — WCAG 기준 준수 |
| Scalability | 제품군 전체로 확장된다 — 한 화면이 아니라 체계를 설계 |
| AI First | AI 협업 경험을 기본으로 설계한다 |
디자인 방향은 Light First(다크 지원), 화이트스페이스 중심, Apple 수준의 정돈된 정보 구조입니다.
설계 순서#
새로운 화면이나 기능 요구가 생기면 항상 같은 순서로 접근합니다.
Design Token → Component → Pattern → Product
화면을 먼저 그리고 값을 뽑아내는 것이 아니라, 토큰과 컴포넌트라는 기준을 먼저 정비한 뒤 제품에 적용합니다. 새 요구사항이 생기면 기존 Token → Component → Pattern으로 흡수 가능한지 먼저 검토하고, 흡수할 수 없을 때만 신규 자산 추가 절차(Governance)를 밟습니다.
개발 8원칙#
모든 구현 판단은 아래 8원칙을 기준으로 합니다.
| # | 원칙 | 의미 |
|---|---|---|
| 1 | Build Less | 필요한 것만 만든다 |
| 2 | Token First | UI보다 Token이 우선이다 |
| 3 | Component Before Pattern | Pattern보다 Component가 우선이다 |
| 4 | Pattern Before Product | 제품보다 Pattern이 우선이다 |
| 5 | Web + Flutter Parity | 항상 두 플랫폼을 함께 고려한다 |
| 6 | Documentation Driven | 문서가 먼저다 |
| 7 | Governance First | 모든 변경은 거버넌스를 따른다 |
| 8 | MVP First | 전체 구현보다 MVP 검증을 우선한다 |
브랜드 스토리 — Quintal Bloom#
WIZ의 마스터 심볼 Quintal Bloom은 다섯 개의 원이 72° 간격으로 겹쳐 피어나는 형태입니다. 다섯 개의 원은 People · Task · Document · Knowledge · Intelligence의 5축을, 겹침의 농도는 협업을 의미합니다. 자세한 사용 규칙은 브랜드 아이덴티티에서 다룹니다.
로드맵과 문서 상태#
이 포털의 14개 섹션은 Phase 로드맵을 따라 본문이 채워집니다. 각 섹션 상단의 배지로 현재 상태를 확인할 수 있습니다.
| Phase | 본문이 채워지는 섹션 | 상태 |
|---|---|---|
| P1 | 01 소개 · 04 브랜드 아이덴티티 · 07 레이아웃 시스템 | 본문 제공 |
| P2 | 02 파운데이션 · 03 디자인 토큰 · 11 다크 모드 | 예정 |
| P3 | 05 아이코노그래피 · 06 컴포넌트 | 예정 |
| P4 | 08 패턴 · 09 접근성 · 10 모션 디자인 · 12 AI 가이드라인 | 예정 |
| P5 | 13 개발자 리소스 | 예정 |
| P6 | 14 리소스 | 예정 |
처음 읽는다면 이 순서를 권합니다 — ① 이 문서, ② 브랜드 아이덴티티, ③ 레이아웃 시스템. 토큰 값 체계가 필요하면 디자인 토큰 섹션이 P2에서 SSOT 기반 자동 생성 표로 제공됩니다.