체인지로그

WIZ Design System은 버전을 두 층으로 나눠 추적합니다. 화면 상단 배지의 플랫폼 릴리스 라벨(예: v0.10.0)은 우플리프트 묶음 단위의 큰 이정표이고, 각 패키지 버전(SemVer)은 산출물별로 독립적으로 올라갑니다 — 토큰 한 줄을 고치면 두 플랫폼이 함께 재생성되므로 같은 모노레포 커밋이 호환의 기준입니다.

버전 정책#

헤더 배지는 portal/lib/site.ts의 platformVersion을 표시하며, portal/lib/site.test.ts가 이 값과 docs/PLATFORM_VERSION.md의 정합을 강제합니다 — 표시 값이 어느 SSOT와도 연결되지 않는 죽은 하드코딩을 게이트로 차단합니다.

현재 버전#

읽는 법#

전체 변경 이력은 Keep a Changelog 1.1.0 형식을 따릅니다(AD-9). 변경 유형은 Added · Changed · Deprecated · Removed · Fixed · Security로 분류하며, 커밋은 conventional commits(feat/fix/docs/refactor/ test/chore/perf/ci)를 따릅니다.

• 버전 태깅·자동 체인지로그 생성·패키지 publish는 GitLab 원격 연결(R-2) 시점에 활성화됩니다. 그 전까지 이 페이지가 단일 정본입니다.
• 패키지 단위 정밀 이력은 각 패키지 CHANGELOG.md(changesets 자동 생성)를 참조하세요.

아래는 루트 CHANGELOG.md의 전체 이력입니다.

[Unreleased]#

패키지 단위 정밀 이력은 각 패키지 CHANGELOG.md(changesets 자동 생성, R-2 publish 시점부터)를 참조한다. 본 루트 CHANGELOG는 플랫폼 서사 정본이다.

차트 시스템 — 데이터 시각화 13종 (E5-3, 기획안 09, 2026-06-19~21)#

@wds/ui-web에 자체 SVG zero-dep 차트(ADR-018)를 13종으로 확장. 각 차트는 순수 코어를 Flutter wiz_charts 포팅 단위와 1:1 공유하고, sr-only 데이터 표를 a11y 정본으로 둔다(SVG는 aria-hidden, 채널 분리). @wds/ui-web 공개 배럴 추가 — minor.

Added

• 웹 차트 13종 — 데카르트 LineChart·BarChart·AreaChart·ComboChart + ScatterChart(추세선)·Sparkline(무축 초소형)·PieChart(파이/도넛)·HeatmapChart(매트릭스)·FunnelChart(전환 사다리꼴)·GaugeChart(KPI 방사형)·RadarChart(다변량 스파이더)·StockChart(애플 주식앱). 전부 src/index.ts 공개 배럴 export.
• ChartExport(웹 전용) — 컨테이너 DOM(sr-only 표 + SVG)을 읽어 모든 차트에 CSV/PNG/SVG 내보내기. 카드 헤더 통합 아이콘 트리거(DropdownMenu 신규 triggerVariant="icon" + DownloadIcon).
• Flutter 패리티 — 순수 코어(차트 math)는 신규 패키지 wiz_charts 0.1.0(fixture로 JS↔Dart 부동소수 동치 핀), WizLineChart…WizStockChart 위젯은 wiz_ui 0.6.0(wiz_charts 의존)에서 Canvas + 골든으로 검증. 데카르트/방사형은 각도 math 공유, 폴리곤/사다리꼴은 좌표까지 공유, 호(파이/게이지)만 네이티브.
• 커스터마이징(기획안 09) — 범례 위치·클릭 토글(시리즈 켜기/끄기)·스케일(time/log)·이중 Y축·누적·계단·가로·콤보 1급.

Changed

• 차트 색은 CORE chart-1..8(색맹 안전)을 var()로 소비 — 다크 data-theme 재바인딩.

AI 가이드라인 비주얼-우선 고도화 (12 섹션, 기획안 10·11, 2026-06-19~21)#

12 AI 가이드라인 섹션을 "AI가 답을 어떻게 그리는가"(마크다운 ↔ 카드/차트 판정)와 "불확실할 때 어떻게 행동하는가"(되묻기·신뢰도·우아한 실패)로 확장. WDS를 AI 응답 콘텐츠 시각화의 정본 레퍼런스로 끌어올린다. 전부 portal/(데모·문서) — @wds/ui-web 런타임 무변경.

Added

• 응답 렌더 판정 + 데이터 답변 카드 — 수치·구조화 데이터는 텍스트가 아니라 WDS 차트·카드로 답한다는 규칙을 결정 매트릭스로 코드화. 날씨 카드는 Apple식 "살아있는 하늘"(그라데이션 + 절제 모션 6컨디션).
• 되묻기(③ ClarifyCard) WIZON 패리티 재설계 — 실제 RequiredInputCard 분석 기반(다중 선택·자유 입력·확인·다단계). Apple식 라이트 질문 슬랩(답변 위젯은 리치 유지).
• 공유 리치 링크 카드 + 도구 결과 셸 — 웹페이지 요약·도구 결과(부분·자막없음·실패 회복)·멀티소스 합성·결과 카드 내 플레이어 점프 + 탭(요약/아티클/원문).
• Copilot UX — 문서 안 인라인 보조(자동완성·인라인 편집·묻기)·다음 편집 예측(NES)·근거(신뢰도 + 출처).

연속 곡률 — 전역 squircle (Continuous Curvature P3, 기획안 08, 2026-06-18)#

원호(arc) 모서리를 Apple식 연속 곡률(스쿼클, superellipse)로 전환. 곡률은 반지름·동심 공식과 직교한다(같은 radius 위에서 곡선만 교체). 웹·Flutter 동시 랜딩 + 통합 패리티 게이트.

Added

• 웹 전역 ENABLE — tokens/wds-base.css: --wds-corner-shape 기본 round→squircle + .wds-root :where(*) 전역 규칙(낮은 특이도)으로 border-radius가 있는 모든 WDS 표면이 곡률을 따른다. Chromium 139+ 초타원, 미지원 브라우저는 원호로 자연 폴백(점진적 향상).
• Flutter 전역 squircle(ADR-017) — WizShape(+WizShape.clip = ClipRSuperellipse/ClipRRect 헬퍼) + RoundedSuperellipseBorder로 13개 표면 컴포넌트: Card·Button(P2) + Input·Alert·Modal·Toast·DropdownMenu·Select·Popover·KnowledgeCard·AgentCard·AiChatInput·Tooltip(P3). 풀/원형·divider는 squircle≈round/N-A라 미변경. Flutter 최소 SDK 3.24→3.32 상향.
• docs/adr/ADR-017 — 연속 곡률 채택·Flutter SDK 상향·기본값 승격 결정 기록.

Changed

• 웹 비주얼 베이스라인 39종(둥근 표면 라우트·specimen) squircle 리베이스(풀/원형 표면은 squircle≈round라 무변화·byte-identical 유지).
• Flutter 골든(lib·example) squircle 리베이스(귀속 최소 diff). web↔Flutter component_parity_diff·login_parity_diff ≤7% 게이트 유지(squircle↔squircle, 회귀 아님).

v0.10 플랫폼 정합성 우플리프트 — R1R5 (감사 후속, 2026-06-1516)#

docs/uplift/06-v010-platform-readiness-audit.md(전문 에이전트팀 감사)로 도출한 플랫폼 정합성 트랙. @wds/ui-web 공개 export·런타임 동작은 비파괴 — 빌드 파이프라인·토큰 계층·게이트·문서·플랫폼 패리티를 보강했다.

Added — 거버넌스 (R1)

• changesets 도입(R1-1) — .changeset/config.json(@wds/ui-web·@wds/build-tokens 독립 SemVer, @wds/portal·@wds/build-icons ignore) + 루트 changeset/version-packages/release 스크립트. Dart wiz_ui는 git tag 정본(범위 밖).
• @wds/ui-web dist 빌드 파이프라인(R1-2, ADR-015) — Vite library mode(preserveModules + rollup-preserve-directives로 RSC 'use client' 지시어 보존), publint·attw 게이트. 소비자는 src 직노출 대신 빌드 산출물을 소비.
• CSS 카스케이드 레이어(R1-3, ADR-016) — 토큰·베이스·컴포넌트 CSS를 @layer wds.tokens < wds.base < wds.components로 발행. 앱 비레이어 스타일이 항상 우선해 소비처 오버라이드 특이성 경쟁을 제거.
• docs/PLATFORM_VERSION.md — 플랫폼 릴리스 라벨 0.10.0 정본(패키지 독립 SemVer 매핑).
• docs/COMPATIBILITY.md(R1-4) — 패키지 호환 매트릭스 + deprecation 정책 + deprecated 표면 6종(mobile prop 5 + Card.shadow, 제거 타깃 1.0.0).
• 체인지로그 페이지(R1 후속) — /docs/changelog — 루트 CHANGELOG.md(플랫폼 서사 정본)를 빌드타임에 읽어 렌더(드리프트 0). 헤더 버전 배지가 체인지로그로 링크.

Added — 패리티 게이트 (R2)

• 컴포넌트 패리티 게이트(R2-1) — portal/lib/parity-gate.ts(+test) — 필수 카테고리(actions·inputs·feedback·loading)는 Flutter 패리티 또는 portal/parity-waiver.json 등재 강제. make check 자동 편입. Flutter 배럴 하한(≥16)으로 ENOENT false-green 차단.
• docs/PARITY_MATRIX.md(R2-2, 생성물) + scripts/generate-parity-matrix.mjs + lint:parity-matrix 신선도 게이트 — 웹 72 · 패리티 29 · 웹 전용 43(전부 waiver 등재).
• 웹↔Flutter API 표면 대조 게이트(R2-3) — variant/size 멤버 드리프트 차단. IconButtonSize 미사용 lg 제거(웹 정본 수렴).
• Modal component 토큰(R2-4) — scrim·surface를 component 계층 토큰으로 승격.
• 컴포넌트 시각 패리티 게이트(R2-5) — 웹 9종 specimen(Playwright 캡처) ↔ Flutter 골든. 크로스엔진(Chromium↔Skia) 한계로 per-pixel 대신 스칼라 3체크(치수·잉크량·평균색) + 크로스플랫폼 톨러런트 골든.

Added — 토큰 계층 · 접근성 · 시각 (R3~R5)

• Alert/Badge/Card/Toast component 토큰(R3-4) — semantic alias라 렌더 byte-identical(웹 make check + Flutter 골든 20/20). 토큰 계층 SSOT 회복.
• 접근성 게이트 확대(R4) — 오버레이 배경 inert + Toast 포커스 일시정지·aria-atomic; axe 게이트를 Modal·Drawer·Tabs·RadioGroup·DropdownMenu·Popover·Tooltip로 확대; Flutter 44dp comfortable 탭타깃 + textScaler 2.0× 가드.
• 측정·시각 도해(R5) — 라이브 대비 미터(전경/배경 토큰 → 대비비 + AA/AAA·DD-6 증명), 스프링 오버슈트 궤적 비주얼라이저(ζ 0.8 vs 1.0), FormMessage·ProviderButton 플레이그라운드 보강.

Changed

• 버전 거버넌스 실행(R1-4) — changeset version 최초 적용 → @wds/ui-web·@wds/build-tokens 0.1.0 → 0.2.0(레지스트리 publish는 R-2 유지). 헤더/푸터 버전 배지를 죽은 하드코딩(site.ts version 0.1.0)에서 플랫폼 라벨 SSOT(platformVersion ← docs/PLATFORM_VERSION.md)로 연결, portal/lib/site.test.ts가 정합 강제.
• docs/adr/ADR-009 — 루트 package.json version=0.0.0은 private orchestrator(배포 단위 아님), 토큰 스키마 버전 = @wds/build-tokens 버전 명문화.

문서 — DESIGN_SYSTEM · FRONTEND_GUIDE 작성 (문서 8종 완비, 2026-06-13)#

P6 종결 후속 — MASTER_PLAN §16 "문서 8종"의 마지막 잔여 2종을 채워 정본을 완비했다.

Added

• docs/DESIGN_SYSTEM.md — 크로스플랫폼 디자인 언어 정본: 토큰 SSOT 파이프라인 (3계층·codegen), 토큰 카테고리, 테마(토널 ADR-013·state layer), 색·대비 거버넌스 (WCAG AA·axe), 컴포넌트 시스템·패리티, 적응형(ADR-012), 레이아웃, 패턴, 접근성, DD-4 토큰 강제, 거버넌스. ARCHITECTURE/COMPONENT_API/플랫폼 가이드로 분기
• docs/FRONTEND_GUIDE.md — 웹 개발자 소비 정본(FLUTTER_GUIDE 대칭): 스택·워크스페이스, @wds/ui-web 소비(RSC·ref·토큰), 컴포넌트/데모 추가법, MDX 저작 요약, 반응형, 품질 게이트(make check/check-full·시각 회귀·axe), 개발 워크플로
• MASTER_PLAN §16: 문서 8종 [x](8종 정본 완비)

Phase 6 — Backend / Infra Base 구축 — P6 종결 (2026-06-13)#

Design System Platform 운영 + 데모 연동용 Base Backend(Backend Scope Control). 풀스택이 docker compose로 기동하고, 포털 Login 패턴이 실제 core-api와 연동된다. 6슬라이스(P6.1~6.6) 원자 커밋, 통합 테스트 19/19, 보안·Java·DB 3중 리뷰 반영.

Added

• 인프라(P6.1) — infra/docker/docker-compose.yml: PostgreSQL 17+pgvector 0.8 · Redis 7.4 · MinIO. 시크릿 하드코딩 0(${VAR:?} 필수 env + .env.example), 호스트 포트 127.0.0.1 비표준 대역(ssh 터널 충돌 회피). make infra-up/backend-test
• core-api 스캐폴드(P6.1) — Spring Boot 4.0.7 · Java 21 · Gradle(Kotlin DSL), actuator health/prometheus, RestTestClient 헬스 스모크
• 인증·인가(P6.2) — Flyway 스키마(조직/사용자/역할/감사로그) + JWT HS256 (access 15m·refresh 14d jti 회전, Redis GETDEL) + RBAC(ADMIN/EDITOR/VIEWER, @PreAuthorize) + 로그인 레이트리밋(Lua 원자 카운터) + 사용자 열거 방어. Testcontainers 통합 테스트
• 감사로그·파일·리소스(P6.3) — 감사로그(JdbcClient append-only, REQUIRES_NEW, 실패 메트릭) + MinIO 업로드/presigned 다운로드(content-type 화이트리스트, inline XSS 차단) + DS 리소스 API 초안(조직 격리)
• 풀스택(P6.4) — FastAPI ai-service 스캐폴드(uv) + core-api/ai-service Dockerfile (멀티스테이지·비루트) + Nginx 단일 진입점(58080, actuator는 health만 외부) + Prometheus/Grafana(데이터소스 프로비저닝). make stack-up으로 8컨테이너 기동
• 연동 데모·CI(P6.5) — 포털 Login 패턴 ↔ core-api 실연동 데모(/docs/patterns/login)
  • .gitlab-ci.yml backend 잡(gate:backend·gate:ai-service·release:images)
• 가이드 문서 3종(P6.6) — BACKEND_GUIDE · DEPLOYMENT_GUIDE · GITLAB_CI_GUIDE. 문서 8종 중 6종 완성(잔여: DESIGN_SYSTEM · FRONTEND_GUIDE)

Security

• 3중 리뷰(security/java/database-reviewer) 병렬 실행 → HIGH 전건 반영: 레이트리밋 IP 스푸핑 차단(nginx XFF→remote_addr) · .env.example 시크릿 플레이스홀더화 · 업로드 content-type 강등 · INCR/EXPIRE 원자화 · 시드 멱등 · N+1 제거(@EntityGraph) · 함수 인덱스 적중(lower(email) JPQL)
• 운영 전환 체크리스트(데모 범위 수용분)는 BACKEND_GUIDE §9에 명문화

DoD

• CI 파이프라인 정의(R-2 활성 즉시 호출) ✓ · JWT+RBAC 통합 테스트 ✓ · 보안 리뷰 통과(인증/비밀키/레이트리밋) ✓ · 시크릿 하드코딩 0 ✓ · docker compose up 풀스택 기동 + 로그인 API ↔ Login 패턴 연동 실측 ✓

Phase 5.4 — FLUTTER_GUIDE + 13 Developer Flutter 본문 + 태그 릴리스 — P5 종결 (2026-06-13)#

P5(Flutter Design System 변환)의 마지막 산출물 2종을 채우고 종결을 선언한다. 태그 wiz_ui-v0.5.0(AD-9 — Dart는 git tag 의존 우선).

Added

• docs/FLUTTER_GUIDE.md — wiz_ui 소비 정본: 설치(path/git tag), WizTheme, 토큰 소비 규칙(DD-4의 Flutter 형태), 컴포넌트 15종 계약, 반응형, 품질 게이트 +패리티 하니스 절차, 릴리스 절차(AD-9). 문서 8종 중 FLUTTER_GUIDE 완성
• 13 Developer — Flutter 본문 — "P5 예정" 스텁 제거, 설치(git tag ref 고정)· WizTheme·웹↔Flutter 매핑 표·게이트 실 콘텐츠로 교체(라이브 렌더 확인)
• MASTER_PLAN §16 체크: Flutter DS 완료(패리티 실측치 기록)

P5 최종 상태

• 산출물: wiz_ui 0.5.0(테마·컴포넌트 15종+보조 3종·반응형 시스템·Pretendard 번들) · 골든 28장 · Login 패리티 데모+하니스 · FLUTTER_GUIDE · git tag
• DoD 전 항목: analyze 0(strict) ✓ · 단위/위젯/골든 그린(wiz_ui 200·example 14) ✓ · 스크린샷 diff ≤5%(2.70/2.55%) ✓ · 토큰값 수동 복사 0 ✓

Phase 5.3 — Pretendard 번들링 + 웹/Flutter 로그인 패리티 diff 실측 통과 (2026-06-13)#

P5 DoD의 마지막 검증 — 웹/Flutter 로그인 스크린샷 diff: light 2.70% / dark 2.55% (≤ 5% 통과). Pretendard static 5웨이트(OFL)를 wiz_ui에 번들하고, 실측 하니스를 example 테스트로 정착시켰다. wiz_ui 0.4.0 → 0.5.0.

Added

• Pretendard 번들 — fonts/ 5웨이트(300~700, v1.3.9 static otf + OFL.txt), pubspec fonts 선언, WizTheme.fontFamily = 'packages/wiz_ui/Pretendard'(에셋 바인딩 상수 — 토큰 sansFamily는 디자인 정본 이름으로 보존)
• 패리티 하니스 — ① portal/e2e/capture-login-parity.mjs(웹 카드 요소 캡처+meta) ② login_parity_golden_test(FontManifest 전 폰트 로드 — Pretendard·MaterialIcons 실글리프, 웹과 동일 카드 폭 렌더, RepaintBoundary로 카드만 캡처) ③ login_parity_diff_test (픽셀 비교 게이트 ≤5%). 허용치 문서화: 채널차 ≤48/255(AA·감마) + 수직 ±2px (렌더러 line-box 글리프 배치 차이) — 색·구조·수평 배치는 허용치 없음
• 측정 추이: 28.4%(초기) → 14.8%(캡처 보정·아이콘 폰트) → 6.2%(웹 결함 3건 수정) → 2.7%(베이스라인 윈도 문서화)

Fixed (Flutter — 패리티 실측이 검출한 라이브러리 결함)

• WizTextLink·WizTabs가 테마 fontFamily를 잃던 결함 — AnimatedDefaultTextStyle에 스타일을 통째로 교체 → 주변 DefaultTextStyle에 merge로 수정(Pretendard 상속 보존)
• 컴포넌트 텍스트 line-height 부재 — 웹은 페이지 기본 1.6을 상속하는데 Flutter는 폰트 메트릭(~1.17)이라 행마다 수 px씩 낮았음 → FormField(label/desc/error)· Checkbox 라벨·TextLink·Alert(title/body)에 lineHeightNormal 명시
• 로그인 데모: CSS 150deg 그라데이션을 박스 투영 길이로 환산(LayoutBuilder — Alignment 고정값은 분포가 압축됨) · 데모 텍스트 line-height 정합

Verified

• diff 게이트 light 2.70%/dark 2.55% · wiz_ui 200 tests + example 14 · analyze 0(양쪽)
• 웹 게이트: make check 그린 · 포털 시각 회귀 20장 베이스라인 무변
• 웹 측 수정 3건은 별도 커밋(fix: P5 패리티 실측이 검출한 웹 결함 3건)

남은 P5 범위 (후속)

• FLUTTER_GUIDE.md(13 Developer) · git tag 릴리스(AD-9)

Phase 5.2 — Flutter wiz_ui 반응형 레이아웃 시스템 (2026-06-13)#

07 레이아웃 시스템의 Flutter 대응 — 웹 useResponsive() 훅과 레이아웃 프리미티브 4종 (Stack·Container·Grid·Split)을 포팅했다. wiz_ui 0.3.0 → 0.4.0.

Added

• WizResponsive — WizWindowSizeClass(compact<600/medium/expanded≥840, 경계 SSOT = breakpoint 토큰) + sizeClassForWidth(순수 함수)·of(context)(MediaQuery 구독)·isCompact. 컨테이너 기준 분기는 LayoutBuilder + sizeClassForWidth 조합으로 안내
• WizStack — 1D 프리미티브(방향·토큰 gap·align/justify·wrap→Wrap). 기본 align은 Flutter 관용 start(웹 CSS 기본 stretch와 의도적 차이, doc 명시)
• WizContainer — content(1200)/prose(760)/full 중앙 정렬 + 인라인 거터
• WizGrid + WizGridItem — CSS grid auto-placement 부분집합(순서 흘림·줄바꿈· start 강제·span 클램프). columns/gap 기본 = size class 자동(4·16/8·24/12·24) (웹 12 고정 기본과 의도적 차이 — 모바일 1순위). 행 stretch는 IntrinsicHeight, 무한 폭이면 명확한 FlutterError
• WizSplit — 52:48 분할(flex 토큰), compact면 세로 적층(웹과 동일 viewport 기준)
• example Layout Demo — size class 실시간 표시 + 그리드 reflow + Split/Container
• 골든 6장(compact 360/medium 720/expanded 1080 × light/dark) — 총 24장

Verified

• flutter analyze 0 이슈(strict) · wiz_ui 199 tests(+28: 경계·배치 기하 실측) · example 10 · 골든 24장 그린

남은 P5 범위 (후속)

• Pretendard 폰트 에셋 번들링 · 웹/Flutter 로그인 스크린샷 diff ≤ 5% 실측
• FLUTTER_GUIDE.md(13 Developer) · git tag 릴리스

Phase 5.1 — Flutter wiz_ui 컴포넌트 15종 완성 (2026-06-13)#

P5 컴포넌트 목록(WizButton~WizKnowledgeCard 15종)을 완성했다. 5.0의 7종(보조 2종 포함) 위에 10종을 4그룹 병렬 에이전트로 추가(각 자기 파일만 → 메인 통합) — 프로젝트 표준 워크플로. wiz_ui 0.2.0 → 0.3.0. 15종: Button·Input·Checkbox·Spinner·TextLink(5.0) + Card·Badge·Avatar·Tabs·Table·Modal·Toast·AiChatInput·AgentCard·KnowledgeCard(5.1) — 보조로 Alert·FormField·FocusRing 포함.

Added

• 표시군 — WizCard(header/footer 슬롯·bodyPadding·shadow) · WizBadge(의미 6변형 × count/max[99+ 클램프]/dot) · WizAvatar(sm/md/lg, 이미지 errorBuilder→이니셜 폴백)
• 데이터군 — WizTabs(WizTab 목록+index, variant fixed/scrollable · level primary/secondary, 화살표/Home/End roving[skipTraversal], 인디케이터·tab-fade 웹 정합, SemanticsRole.tab*) · WizTable(컬럼 정렬/고정폭·hover·caption·SemanticsRole.table 트리 — 웹처럼 표시 전용)
• 오버레이군 — WizModal.show<T>(스크림=colors.overlay, emphasized-decelerate 등장, dismissible·Escape, 반환값 Future) + WizModalPanel(합성용) · WizToaster.show(우하단 스택, 5s 자동 닫힘+hover 일시정지, 변형 4종 좌측 3px 바) + WizToast(카드)
• AI군 — WizAiChatInput(멀티라인+전송/중단, Enter 전송·Shift+Enter 줄바꿈[HW 키만, 모바일 관용 유지], streaming 상태) · WizAgentCard(idle/running/done/error, running 펄스 +reduced-motion 정지) · WizKnowledgeCard(웹 정본 부재 — Flutter 선행 설계, 소스타입 document/web/wiki·excerpt·meta·selected, AgentCard 시각 언어 일관**)**
• 골든 8장 추가(display/data/ai/overlay × light/dark) — 총 18장

Verified

• flutter analyze 0 이슈(strict) · wiz_ui 171 tests(+114) · example 9 · 골든 18장 그린
• 토큰값 수동 복사 0 — 웹 CSS 고유 수치는 출처 주석 달린 named const로만

남은 P5 범위 (후속)

• 반응형 레이아웃 시스템(mobile/tablet/web) · Pretendard 폰트 에셋 번들링
• 웹/Flutter 로그인 스크린샷 diff ≤ 5% 실측 · FLUTTER_GUIDE.md · git tag 릴리스

Phase 5.0 — Flutter wiz_ui 1차 슬라이스: WizTheme + 컴포넌트 7종 + Login 패리티 데모 (2026-06-13)#

P5(Flutter Design System 변환)의 MVP 슬라이스. P2 토큰 생성물 위에 WizTheme(light/dark)와 Wiz* 컴포넌트 1차분을 올리고, 패리티 검증 1호 — Flutter 로그인 화면을 웹 Login 패턴 (portal LoginPatternDemo) 구성과 1:1로 재현했다. wiz_ui 0.1.0 → 0.2.0.

Added

• WizTheme — Material 3 ThemeData 팩토리(WizTheme.light()/dark()) + WizThemeData ThemeExtension(semantic+component 색 페이로드, 필드별 Color.lerp) + WizTheme.of(context) (누락 시 명확한 FlutterError). 역할 타이포 WizTextStyles(H1~Caption, em 자간 → px 환산)
• Wiz 컴포넌트 7종 — WizButton(primary/secondary/ghost × sm/md/lg, fullWidth·loading, hover/pressed/focus 상태색 = Button.module.css 1:1) · WizInput(leading/trailing 슬롯, invalid, 포커스 3px 소프트 링) · WizCheckbox(indeterminate, mixed 시맨틱) · WizTextLink · WizAlert(4변형, 8% 틴트+좌측 3px 보더) · WizFormField · WizSpinner(트랙+헤드 아크). 공용 WizSize enum + WizFocusRing(웹 outline-offset 정합, 레이아웃 불침범)
• Flutter Login Demo (패리티 1호) — example 앱을 홈 내비게이션 구조로 확장(Token Demo + Login Demo, ChangeNotifier 테마 컨트롤러). split(≥600)/stack 적응, 브랜드 패널(그라데이션 150deg·Quintal Bloom 5원 CustomPainter·글로우), 폼 패널(이메일/비밀번호/표시 토글/상태 유지/ 에러 Alert/성공 상태) — 웹 login-pattern.module.css 값 정합
• 골든(시각 회귀) — 컴포넌트 그리드 6장(buttons/inputs/controls × light/dark) + 로그인 4장(split 1024·compact 380 × light/dark) 베이스라인

Verified

• flutter analyze 0 이슈(strict-casts/inference/raw-types, wiz_ui + example) · wiz_ui 57 tests · example 9 tests(P2 토큰 데모 DoD 보존) · 골든 10장 그린
• 토큰값 수동 복사 0 — 색/치수/모션 전부 wiz_tokens 생성물 또는 토큰 파생(color-mix 동치)

남은 P5 범위 (후속)

• Wiz 컴포넌트 15종 확대(Card·Modal·Toast·Tabs·AiChatInput·AgentCard·KnowledgeCard 등 §8)
• 반응형 레이아웃 시스템(mobile/tablet/web) · Pretendard 폰트 에셋 번들링
• 웹/Flutter 로그인 스크린샷 diff ≤ 5% 실측 · FLUTTER_GUIDE.md · git tag 릴리스

Phase 3.9 — 플레이그라운드 전 컴포넌트 확대 50종 (2026-06-12)#

P3.7에서 대표 8종에 도입한 플레이그라운드(props 컨트롤 + 라이브 프리뷰 + 코드 자동 생성·복사)를 나머지 42종에 확대해 50종 전체가 옵션 조작·실시간 테스트·코드 복사를 지원한다.

Added

• 플레이그라운드 42종 추가 — 입력·폼(IconButton·TextLink·Textarea·SearchField·Select·Autocomplete·Checkbox·RadioGroup·BadgeToggle·Switch·Slider·FormField) · 날짜·컨테이너(DatePicker·TimePicker·DayPicker·Card·Splitter) · 데이터(Table·DataGrid·Tabs·Accordion) · 오버레이(Modal·Drawer·BottomSheet·Popover·Tooltip·DropdownMenu·Command·Toast) · 피드백·표시(Progress·Skeleton·Spinner·Badge·Avatar·Separator) · 내비·기타(Breadcrumb·Pagination·Stepper·EmptyState·CopyButton·AiChatInput·AgentCard)
• 레지스트리를 entries/ 그룹 파일 8개로 분리(shared.tsx 공통 헬퍼/타입 + inputs·controls·date-container·data·overlay-a·overlay-b·feedback·nav) — registry.tsx가 병합. num 헬퍼 추가(number→Slider 컨트롤)
• 오버레이는 흐름 안 트리거+useState 래퍼로 렌더(겹침/모달 상태 안전), 코드 스니펫은 대표 사용형(open/onClose 등)으로 표기. Toast는 ToastProvider+useToast 래퍼, 데이터·컴파운드(Table·Tabs 등)는 고정 샘플 + 식별자 표기

Verified

• 71페이지 SSG 그린(50개 컴포넌트 페이지 플레이그라운드 프리렌더) · portal 62 tests · typecheck · stylelint
• 전 그룹 대표 페이지 라이트/다크 axe 위반 0 (검증 중 검출·수정: breadcrumb·pagination 데모↔플레이그라운드 nav 라벨 중복 landmark-unique, Popover 트리거 button 중첩 nested-interactive — Popover는 trigger를 내부 button으로 감싸 자체 button 금지)
• 브라우저 실측: Modal 트리거 열림·코드 동기, Checkbox 컨트롤→프리뷰·코드 실시간 갱신

Phase 3.8 — DateRangePicker 달력 헤더 + 데모 per-demo 테마 토글 (2026-06-12)#

Added

• DateRangePicker 달력 헤더 — 듀얼 먼스 달력 상단에 시작일/종료일 제목 + 현재 선택값(미선택 시 "선택 안 됨"). startLabel/endLabel로 제목과 aria-label을 한 소스로 동기화, showCalendarHeader로 표시 토글(기본 true). 시각 헤더는 aria-hidden — Calendar의 기존 aria-label로 SR 구분은 유지. 플레이그라운드에 컨트롤 추가
• 데모 per-demo 테마 토글 — 문서 데모 판이 포털 테마(ambient)를 따르고, 판 우상단 토글로 그 데모만 라이트/다크 전환(override는 수동 시 고정). Demo 기본 분기를 DemoPane(클라이언트) + useAmbientTheme 훅으로 전환 — 137개 데모 일괄 적용. theme="light"|"dark"|"both" 명시 분기는 보존

Changed

• 데모 판 기본값을 라이트 고정에서 포털 테마 추종으로 — 다크 토글이 데모까지 반영(기존엔 Demo theme 기본 'light'가 판을 라이트로 못박아 "다크 미지원"처럼 보였음). 컴포넌트·토큰 다크 지원은 P2~P3.7에서 이미 완료된 상태였고, 본 변경은 표시 정책만 교정
• ThemeToggle의 인라인 테마 구독 로직을 공유 훅 useAmbientTheme로 추출(DRY)

Fixed

• 코드 복사 버튼 통일 — 플레이그라운드 생성 코드가 @wds/ui-web CopyButton(상시 노출·위치 어긋남)을 따로 쓰던 것을 문서 전역 CodeBlock(호버 노출, 터치 상시)으로 교체. 모든 코드블록이 동일한 복사 어포던스·위치(우상단 8/8)로 통일
• MultiSelect/Select/TimePicker 텍스트 선택 차단 — 빠른/더블 클릭 시 옵션·트리거 라벨이 브라우저 네이티브 텍스트 선택(::selection)으로 강조되어 "전체 선택"처럼 보이던 문제. 트리거·옵션 리스트에 user-select: none 추가(Command·DropdownMenu와 동일 정책). 검색 입력(.searchInput)은 리스트 밖이라 선택·편집 그대로 유지
• 데모 테마 토글 겹침 해소 — per-demo 토글이 position: absolute라 풀폭·세로로 큰 데모(Command·Progress 등) 콘텐츠 우상단을 덮던 문제. DemoPane을 상단 바(토글)+캔버스(콘텐츠) 흐름 구조로 재구성해 토글이 레이아웃상 자리를 차지 — 패딩 매직넘버가 아니라 구조로 겹침을 원천 차단

Verified

• ui-web 664 tests(+2: 헤더 선택값·토글 숨김) · portal 62 · typecheck·stylelint · 71페이지 SSG
• date-range-picker·checkbox·alert·button 라이트/다크 axe 위반 0(데모 토글 버튼 대비 포함), per-demo 토글 클릭→해당 데모만 다크 전환·ambient 추종 브라우저 실측

Phase 3.7 — 아트디렉션 정비 + ColorPicker·FileUpload 2.0 + Playground (2026-06-12)#

스크린샷 실측으로 보고된 정렬·간격·여백 결함의 전수 정비와 픽커/업로드 고도화, 그리고 문서에서 props를 실시간 조작하는 플레이그라운드 시스템(의존성 0, CSP-safe).

Added

• Playground 시스템 — 실물 컴포넌트 프리뷰 + props 컨트롤 패널(boolean→Switch, enum→BadgeToggle/Select, string→Input, number→Slider) + JSX 코드 자동 생성·복사. eval 없는 순수 템플릿 조립이라 nonce CSP(DD-7)와 충돌하지 않음(react-live/Sandpack 불채택 근거). 대표 8종 적용: Button·Input·MultiSelect·DateRangePicker·Alert·Tag·FileUpload·ColorPicker
• ColorPicker 2.0 (WIZ_OPS 사양 승격) — modes(spectrum/grid 120색 생성 팔레트/sliders RGB) 탭 전환, trigger(swatch/field), 표시 포맷 전환(HEX/RGB/HSL — onChange 출력은 HEX 고정), 최근 색(localStorage 최대 10), HEX 복사(CopyButton 합성), alpha 자동 감지(#RRGGBBAA/rgba/hsla), 체커보드 투명 표시, grid 셀 roving 화살표 이동
• FileUpload 2.0 (WIZ_OPS 사양 승격, 전송은 소비자 책임 유지) — 제어형 items(status idle/uploading/success/error + progress + errorMessage) 주입과 onRetry 재시도, listType='picture-card'(Object URL 썸네일, 언마운트 시 revoke), 표준 거부 코드(FILE_TOO_LARGE 등 5종 — 기존 한국어 reason과 병행), enablePaste(클립보드 붙여넣기), directory(폴더 선택+드롭 재귀 수집), aria-live 상태 통지

Changed

• 아트디렉션 정비 18파일 (axe·스크린샷 실측 결함): Stepper 한글 라벨 keep-all+중앙 정렬("장바구 니" 음절 분리 해소) · Pagination 줄임(…) 셀을 페이지 버튼과 동일 셀 메트릭으로 통일 · 리스트형 팝업 5종(Select·MultiSelect·TimePicker·Command·DropdownMenu) 옵션 행 어휘 통일(행 높이·패딩·hover·선택 표시 한 기준)+가는 스크롤바 · DataGrid 체크박스 칼럼 중앙·Pagination 여백 · 타이틀/본문 텍스트 표면 keep-all 전수(Modal·Drawer·BottomSheet·Card·Alert·Toast·Tooltip·EmptyState·AgentCard 등)
• .prose 리스트 번짐 차단 — 마크다운 ul/ol 스타일을 :where(:not([class]))로 한정. 데모 안 컴포넌트 리스트(Pagination 등)에 새던 disc 마커·padding-left·li 마진이 사용자 보고 결함("• 1 2• 3")의 근본 원인이었음(표 가드와 동일 패턴)
• Playground 컨트롤 라벨은 surface-muted 패널 위라 text-subtle이 4.39:1로 AA 미달 → text-muted로 확정(axe 실측)

Verified

• 전 스위트 그린: ui-web 662 tests(+58: ColorPicker 34·FileUpload 22 외) · portal 62(+19 generate-code) · typecheck·stylelint · 71페이지 SSG
• 영향 11페이지 × 라이트/다크 axe 위반 0 (검증 중 검출·수정: 플레이그라운드 라벨 대비, 레지스트리 MultiSelect 접근 이름 누락, file-upload.mdx 중괄호 MDX 표현식 파싱)
• 브라우저 실측: Playground 컨트롤→프리뷰·코드 동기, ColorPicker 3모드·120셀, FileUpload 업로드 시뮬레이션(진행률→완료/실패→재시도) 동작 확인

Phase 3.6 — DK 프로젝트 사양 승격 39→50종 + 모바일 표준 (2026-06-11)#

DK 프론트(Project/DK)의 검증된 표준 컴포넌트 사양(WizDropDown 1,457줄·WizDatePickerEx 1,854줄 등)을 사양 승격 방식으로 통합 — 기능 명세는 DK에서, 구현은 WDS 레일(토큰·테스트·axe·문서)로 재구현.

Added

• BottomSheet — 모바일 선택 UI 표준 표면: 드래그 핸들 닫기·포커스 트랩·Escape·safe-area, mobile prop의 공통 기반
• MultiSelect — 칩(+N 축약)·검색·"전체"(indeterminate)·그룹 선택·allowClear·모바일 시트(임시 선택→확인/취소)
• DateRangePicker — DK WizDatePickerEx 승격: "임의선택"(연도·오늘/이번주/이번달·월·분기·반기 프리셋, 2클릭 범위 결합)/"달력선택"(듀얼 먼스, 시작→끝 제약) 2탭 + 초기화/선택완료 푸터 + 취소 시 확정값 복원 + presetType/presetLabel 결과
• DataGrid — 편집형 그리드: 인라인 편집(text/number/select/checkbox)·정렬(aria-sort)·행 선택(indeterminate)·Pagination 합성·stickyHeader (Table은 정적 용도로 병존)
• Autocomplete — 비동기 태그 입력(서버 조회는 onQueryChange로 분리 — DK의 API 결합 제거판)
• TimePicker(interval·min/max) · DayPicker(요일/매월일 반복 토글) · Splitter(키보드 리사이즈 separator) · ColorPicker(HSV 스펙트럼·프리셋·EyeDropper) · FileUpload(드래그앤드롭, 전송은 소비자 책임) · BadgeToggle(필 단일 선택+"전체")
• 모바일 표준(COMPONENT_API §5): 선택형 오버레이의 mobile?: boolean+mobileTitle? 계약 — 기존 Select·DatePicker에도 적용(DK mobile prop 인터페이스 호환)
• 컴포넌트 문서 11종 + 06 카탈로그 50종 그룹 재편 + DK 통합 노트

Verified

• 전 스위트 그린: ui-web 604 tests(+154) · typecheck·eslint·stylelint · 71페이지 SSG
• 신규·변경 13페이지 × 라이트/다크 axe 위반 0 (검증 중 검출·수정: DayPicker 선택 채움 DD-6 재발, DataGrid 문서 빈 헤더·landmark 중복)
• 통합 제외(도메인 결합): OrgChart·Notification·GlobalSearch·Dashboard/VizStudio — DK 앱 소유 유지. 차트는 @wds/charts ADR로 후속

Phase 3.5 — 컴포넌트 카탈로그 확장 7→39종 (2026-06-11)#

Added

• 신규 32종 (총 39종, 테스트 400개):
  • 입력·폼: IconButton · TextLink · Textarea · SearchField · Select(커스텀 리스트박스, 타이프어헤드) · Checkbox(indeterminate) · RadioGroup(roving tabindex) · Switch · Slider · FormField(라벨/오류 자동 배선) · DatePicker/Calendar(단일+범위, APG 그리드 키보드, ko-KR)
  • 컨테이너: Tabs(컴파운드, APG) · Accordion(single/multiple)
  • 오버레이: Drawer(3방향, 포커스 트랩) · Popover(자동 플립) · Tooltip(지연 표시) · DropdownMenu · Command(⌘K 어휘)
  • 피드백: Toast(Provider/useToast, 자동 해제+hover 일시정지) · Alert · Progress · Skeleton · Spinner · Badge · Tag
  • 내비·표시: Avatar · Separator · Breadcrumb · Pagination(줄임 로직) · Stepper · EmptyState · CopyButton(Copy 패턴 v1 승격)
• 아이콘 5종 추가(calendar·chevron-left·alert-triangle·check-circle·minus — 총 18종)
• 컴포넌트 문서 39종 전체 + 06 카탈로그 개요(그룹별 표) — 사이드바·검색 연동
• 데모 래퍼: DatePickerDemo · DrawerDemo · ToastDemo · CommandDemo

Changed

• 상태 틴트를 surface 고정 혼합으로 표준화: color-mix(... 8%, transparent) → color-mix(... 8%, var(--wds-color-surface)) — 깔리는 배경(gray-50 등)과 무관하게 status-text AA 보장(axe 실측 4.4 → 4.59/다크 7.09)
• Tabs/Accordion 컴파운드에 평탄 명명 export 추가(TabsList 등) — RSC에서 클라이언트 참조 점 접근 미해석 제약 대응(프로덕션 빌드 실측), 점 표기 API는 유지
• 같은 페이지 다중 nav 데모에 고유 라벨 부여(landmark-unique 해소)

Verified

• 39페이지 × 라이트/다크 axe 스윕 위반 0 · 전 스위트 그린(ui-web 400 · 코드젠 56 · 포털 43) · 60페이지 SSG

Phase 3 — 컴포넌트 라이브러리 (2026-06-11)#

Added

• @wds/ui-web React 컴포넌트 라이브러리(MVP 7종): Button · Input · Card(시드 포팅) / Modal · Table · AiChatInput · AgentCard(신규). RSC 우선, CSS Modules + --wds-* 토큰 전용, 67개 테스트(커버리지 100% lines)
• build-icons 파이프라인: icons/*.svg(24×24 스트로크, ADR-011 규격) → React 컴포넌트 생성. 코어 아이콘셋 13종, icon.size-md/icon.stroke를 manifest에서 읽어 SSOT 동기, make icons 배선
• stylelint 토큰 강제 게이트(DD-4 해소): 색·배경·그림자·라디우스·보더·아웃라인·폰트 속성에 var(--wds-*)만 허용 — 포털+ui-web 전 CSS 대상, pnpm lint:css
• 포털 컴포넌트 문서: /docs/components/<name> 서브페이지 라우팅(SSG) + 컴포넌트별 MDX 7종(데모→변형→크기→상태→Props→접근성→토큰 순서 계약) + 06 개요. 라이브 데모는 라이브러리 실물 코드 렌더
• 05 아이코노그래피 본문: 원칙·크기 토큰·코어 셋 그리드(IconGrid)·파이프라인·접근성
• 사이드바 중첩 내비(섹션 하위 문서) · 검색 인덱스 서브문서 포함
• docs/COMPONENT_API.md(컴포넌트 API 컨벤션 정본) · docs/adr/ADR-011-icon-tokens.md(DD-9 해소)
• 토큰: control.height-sm/md/lg · icon.size-*/icon.stroke · color.primary-strong 트리오 · button.height-* · input.height/input.border-invalid

Changed

• DD-6 해소 — Button 기본 채움 AA 확정: button.bg/-hover/-active를 primary-strong 트리오(라이트 700/800/900)로 재배선. 버튼 라벨은 항상 일반 크기(≤16px)라 Blue 600 채움(4.38:1)을 쓸 수 있는 버튼 상황이 없음을 axe 실측으로 확인. 재배선 후 중복이 된 strong 변형은 제거(variant 3종: primary·secondary·ghost), secondary 라벨은 primary-text로 교체. 시드 대비 의도 변경으로 SEED_RECONCILE §3-1 + parity 게이트 등재
• 다크 primary-strong-active를 blue.400으로 확정 — 다크 잉크(on-primary) 계약상 pressed가 600으로 어두워지면 4.04:1 미달(신규 contrast 게이트가 검출)
• AgentCard done/error 칩 틴트 12%→8% — 12%는 status-text와 4.39:1로 AA 미달(axe 실측)
• 포털 .prose table/th/td에 :where(:not([class])) 가드 — 마크다운 표 전용으로 한정, 데모 내 컴포넌트로의 스타일 번짐 차단
• Modal 내부 header/footer 요소를 div로 — body 포털 컨텍스트의 banner/contentinfo 랜드마크 중복 제거

Fixed

• 포커스 트랩: 패널(tabIndex=-1) 초기 포커스 상태에서 Shift+Tab이 다이얼로그 밖으로 탈출하던 경로 차단 + 포커서블 0개 시 컨테이너 고정(ui-web·portal 양쪽)
• Modal 닫기·AiChatInput 전송 버튼 44px 히트 영역(시각 32px 유지)
• Table: caption 제공 시 가로 스크롤 래퍼가 키보드 도달 가능한 region(WCAG 2.1.1)
• AiChatInput: onStop 미제공 시 스트리밍 중단 버튼 비활성(무동작 버튼 차단)
• 검증: 문서 9페이지 × 라이트/다크 + 모달 열림 상태 axe 위반 0

Phase 2 — 디자인 토큰 체계 (2026-06-10)#

• W3C Design Tokens JSON SSOT 완성(3계층, 모호값 확정, 다크 재설계 규칙 4종)
• codegen Dart 타겟(AD-2: rem→px ×16, ThemeExtension-ready 클래스) + 교차타겟/라운드트립 게이트
• WCAG AA 대비 자동 게이트(contrast.test.ts) · 시드 패리티 게이트(INTENTIONAL_CHANGES 거버넌스)
• Flutter wiz_ui 패키지 + Token Demo
• 문서 02 파운데이션 · 03 디자인 토큰 · 11 다크 모드 본문, TokenTable 양 테마
• Copy 인터랙션(코드 블록·토큰명·헤딩 앵커) — Copy 패턴 v1

Phase 1 — Design System Portal 기반 (2026-06-10)#

• 토큰 최소 슬라이스 + build-tokens(CSS 타겟) · Makefile 오케스트레이션
• Next.js 16 포털(App Router·MDX evaluate·TS strict) — 문서 셸(네비·TOC·⌘K 검색·테마 토글·반응형)
• 14섹션 라우팅 + 01 소개 · 04 브랜드 · 07 레이아웃 본문
• 검색 UX 고도화(매치 강조·본문 하이라이트(Custom Highlight API)·최근 검색)
• Lighthouse 99/100 · axe 0 기준선