---
status: active
created: 2026-06-11
type: quality
title: Operator console clean review UI + Pretendard font plan
spec: docs/superpowers/specs/2026-06-11-operator-console-clean-review-ui-design.md
---

# Operator Console Clean Review UI Plan

목표: 전체적 UI 점검 및 폰트 변경, 깔끔하게 잘 떨어지는 심사 프로그램의 목적에 맞게 개선.

## Phase 0 — Baseline (done)

- [x] 전 뷰 데스크톱/모바일 스크린샷 + 오버플로 감사 (`data/logs/ui-font-baseline-*`)
- [x] 정적 테스트 베이스라인: `test_workbench_shell_exposes_all_internal_operator_views` 실패
      (product-purpose 블록/CSS 삭제됨), index.html BOM 유입 확인
- [x] Pretendard Variable woff2 v1.3.9 오프라인 번들 확보
      (`web/operator-gui/assets/fonts/PretendardVariable.woff2`)

## Phase 1 — Font integration

- [ ] `styles.css` 상단에 `@font-face` (Pretendard Variable, weight 45 920, swap)
- [ ] `--font-ui`, `--font-stamp` 토큰을 Pretendard 스택으로 교체 (mono 유지)
- [ ] `index.html`에 woff2 preload 링크 추가, BOM 제거
- [ ] 점수/쿼터/시간 표기에 `font-variant-numeric: tabular-nums`

## Phase 2 — Clean re-skin (token-driven)

- [ ] `:root` 팔레트를 종이톤 → 중성 쿨톤으로 교체 (spec 3.2)
- [ ] body 노이즈 텍스처 + radial-gradient 제거 (플랫 서피스)
- [ ] :root 밖 하드코딩 색상(37 hex, 36 rgba) 중 종이톤 잔재 일괄 정리
- [ ] 그림자/포커스 링을 쿨톤으로 정돈
- [ ] 모든 테스트 계약 문자열 보존 (spec 3.4 목록)

## Phase 3 — Contract restoration

- [ ] top-bar에 `product-purpose` 블록 복원 (HTML + CSS)
- [ ] 큐 오버플로 미세 정리: 데스크톱 `strong`, 모바일 `provider-chip`

## Phase 4 — Verification (사용자 반응성 검토)

- [ ] `pytest tests/operator_gui` 전체 통과
- [ ] 라이브 서버 Playwright 감사: 8개 뷰 × 데스크톱/모바일, docW <= vw
- [ ] `data/logs/ui-overhaul-final-results.json` + 계약 스크린샷 8종 재생성
- [ ] Pretendard 적용 여부 런타임 확인 (document.fonts)
- [ ] 오프라인 검증: GUI 내 외부 fetch 참조 0건
- [ ] `pytest` 전체 회귀

## Phase 5 — Commit

- [ ] 디자인 문서 + 구현 + 산출물 커밋 (feat/chore 분리 없이 단일 feat 커밋)