---
title: "핸드오프 — 시장콘솔 UI/UX 개선 리서치(병렬세션용)"
from: claude-code
to: ["jadong"]
project: "clean-veteran"
date: 2026-07-03T13:23:25.969280+09:00
status: sent
type: report
---

# 핸드오프 — 시장 콘솔 UI/UX 개선 리서치 (병렬 Claude Code 세션용)

> **이 문서 하나로 병렬 세션이 바로 리서치 시작.** 스코프 = **리서치 + 우선순위 개선 스펙 산출**(코드 구현 아님). 구현은 프론트 세션(별도)이 이 스펙을 받아 수행.
> 작성: 2026-07-03 · 리포: `/home/tlswk/projects/clean-veteran` · 브랜치 `feat/onboard-landing` (HEAD `59f1417`, origin 동기화됨)

## 0. 미션 (한 줄)
시장 콘솔의 **기능은 전부 동작**(검색·카드·필터·매칭CRM·워터폴·점유율 오도미터·수요히트맵)하지만, **UI/UX가 목적에 못 미친다.** 무엇을 어떻게 고쳐야 하는지 **레퍼런스 리서치 기반의 우선순위 개선 스펙**을 만들어라.

## 1. 목적/비전 (개선의 기준)
- **정체성 = 팔란티어식 시장 인텔리전스 콘솔** (Foundry/Gotham 계열). "관측(지도)→액션(매칭 배정)→운영(CRM)→전략(워터폴/점유율)" 워크플로를 한 화면에서.
- **용도 2개**: ① **7/3 부회장 미팅 라이브 데모** — 드라마틱·신뢰감·"컨설팅펌은 말만, 우리는 보여준다"의 임팩트. ② **클린베테랑에 제공할 실제 제품** — 매일 쓰는 오퍼빌더+고객사/공급사 관리 툴("이런 걸 제공하는 프로그램").
- **톤**: 데이터 밀도 높고 프로페셔널. 팔란티어의 다크·정밀·"통제실(mission control)" 감성 + 토스식 마이크로인터랙션(카운트업 등 이미 일부 적용).
- **신뢰 방어**: 모든 수치에 출처·"추정치" 면책 이미 있음 — UI가 이 신뢰장치를 더 또렷하게.

## 2. 현재 UI 실태 (grounded — 직접 확인 필수)
**레이아웃**: 좌측 전체 지도(`#map`, Leaflet+V-World 타일) + 우측 사이드바(`#panel`, ~360px) 1개에 **10개 섹션 세로 적층**. `web-console/index.html`(113줄) 순서:
1. 헤더(h1 "클린베테랑 시장 콘솔"+부제) 2. 검색창(`#q`)+드롭다운 3. 오퍼 변수(단가·주기) 4. **워터폴** 5. **수요** 6. **세그먼트 필터**(종별 16개 체크박스 평면나열+시도 셀렉트+평수레인지+CSV버튼) 7. **통합 카드**(`#card`) 8. **매칭 CRM**(`#match-panel`) 9. panel-body(로딩상태 잔여) 10. **점유율→매출 프로젝터**.

**식별된 약점**(개선 후보 — 리서치로 검증·확장):
- **정보 위계 붕괴**: 핵심인 "검색→통합 카드"(스페셜 오퍼)가 필터·워터폴·수요 **뒤 7번째**에 묻힘. 순서가 설계가 아니라 태스크 추가순으로 누적됨.
- **한 사이드바에 전부 적층** → 긴 스크롤, 그룹핑·탭·접힘 없음. 지도(주인공)와 10섹션이 경쟁.
- **종별 16개 체크박스 평면 나열** → 시각적 과부하. (기본=의원급 3종)
- **디자인 시스템 부재**: 색/타이포/여백 ad-hoc, 인라인 스타일 산재(`map.js` 버튼, `card.js` `<small>` 등). **다크테마 없음**(팔란티어 감성과 배치).
- **unstyled/미완성 요소**: 검색 드롭다운·CSV버튼·일부 패널 최소스타일(과거 태스크 리포트가 반복 지적).
- **panel-body "로딩 중…"** = 로드 후 남는 잔여 클러터(9번 위치).
- **사이드바 360px 협소**: 12자리 숫자 줄바꿈, 카드 정보 밀림.
- **지도 UX**: 클러스터 버블 병원(빨강)/공급(파랑) 색 미구분(개별 마커만 구분), 팝업 스타일 기본.
- **모바일/반응형** 미고려.
- (기능적 잔가지: 필터 디바운스 없음(105k O(n)) — UX 지연 가능. UI 리서치 부수 항목.)

**인스펙트(반드시 실제로 보고 판단)**:
- 라이브: **https://cv-hospital-map.vercel.app** — 브라우저 도구(Playwright/chrome-devtools)로 열어 스크린샷·구조 확인. 병원 검색("성모"·"의원")→카드, 필터, 매칭 배정, 하단 점유율 입력+Enter(오도미터) 등 실제 만져볼 것.
- 로컬: `cd web-console && python3 -m http.server 8899` → localhost:8899.
- 소스: `web-console/index.html`(구조), `web-console/css/app.css`(482줄, 현 스타일), `web-console/js/*.js`(18모듈).

## 3. 리서치 스코프 (무엇을 조사)
1. **레퍼런스 UI 분석** (구체 사례·패턴 캡처):
   - 팔란티어 **Foundry/Gotham** UI(공개 데모·스크린샷·케이스): mission-control 레이아웃, 오브젝트 익스플로러, 다크 팔레트, 데이터 밀도.
   - 지도 기반 인텔리전스/부동산/GIS 대시보드(예: 카카오맵/네이버지도 비즈, Zillow/Redfin, CARTO, Kepler.gl, Mapbox studio 갤러리) — 지도+사이드패널 밸런스, 검색·필터 UX.
   - **CRM 파이프라인**(Salesforce/HubSpot/Pipedrive/미소·숨고 어드민) — 고객사/공급사 관리, 상태 칸반, 리스트↔지도 연동.
   - **토스/토스플레이스·핀테크** — 숫자 카운트업, 마이크로인터랙션, 신뢰감 타이포·여백.
   - 데이터 대시보드 디자인 시스템(예: Tremor, shadcn charts, Grafana) — KPI 카드·스탯 타일·차트 톤. (dataviz 스킬 참조 가능)
2. **정보 아키텍처 재설계 권고**: 10섹션을 어떻게 그룹핑/탭/우선순위화? 핵심(검색→카드→매칭)을 어떻게 전면에? 지도-패널 밸런스?
3. **디자인 시스템 제안**: 색(다크 우선 + 병원 빨강/공급 파랑/매칭 초록 유지)·타이포·여백·컴포넌트(버튼/인풋/배지/카드/스탯) 토큰. CSS 변수 체계.
4. **데모 임팩트 요소**: 부회장 앞에서 "와" 나오게 하는 연출(전환 애니메이션·스포트라이트·풀스크린 데모 모드 등).
5. **제품화 요소**: 실사용(매일) 관점의 효율·학습곡선.

## 4. 산출물 (이게 결과물)
**`docs/ux-research-20260703.md`** (신규) — 아래 포함:
- **레퍼런스 분석**: 사례별 "무엇을 차용할지"(캡처/링크/근거).
- **우선순위 개선 목록**: P0(데모 크리티컬)/P1/P2로, 각 항목 = 문제→권고→근거→예상 임팩트. 구체적으로(예: "IA 재정렬: 헤더→검색→카드→매칭을 상단 고정, 필터/워터폴/수요는 탭 or 접힘").
- **디자인 시스템 초안**: 색·타이포·여백·핵심 컴포넌트 스펙(CSS 변수 예시).
- **(선택) 목업/와이어프레임**: ASCII/마크다운/또는 간단 HTML 목업으로 재배치안 1~2개.
- **구현 난이도·범위 추정**(프론트 세션이 받을 수 있게).

## 5. 제약 / 충돌 방지 (중요)
- **바닐라 JS ES모듈 정적앱 유지** — React/프레임워크 마이그레이션 **금지**(YAGNI, 배포 단순성). CSS/바닐라JS/경량 CDN 범위 내 개선.
- **데모 안 깨기**: 기능 회귀 0. 개선은 점진적.
- **이 리서치 세션은 `docs/`에 스펙만 산출 — `web-console/` 코드 미변경.** (프론트 구현 세션이 별도로 이 스펙을 실행. 두 세션이 코드 동시 편집 금지.)
- 커밋은 `docs/ux-research-20260703.md`만.
- kontology 등 내부 프로젝트명은 외부 산출물 표현에 넣지 말 것(중립 표현).

## 6. 참조 문서 (리포 내)
- 설계 `docs/superpowers/specs/2026-07-02-cv-market-console-design.md` (§11 팔란티어 프레이밍 = authoritative 비전).
- 플랜 `docs/superpowers/plans/2026-07-02-cv-market-console.md` (전 기능 구조).
- SDD 원장 `.superpowers/sdd/progress.md` (태스크별 UI concern 다수 기록 — Minor triage 항목).
- 데이터/배포 맥락 `docs/HANDOFF-vworld-local-data-20260702.md`.
- 스킬: `dataviz`(차트/색/스탯타일), `chrome-devtools-mcp:a11y-debugging`(접근성) 참고 가능.

## 7. 시작하는 법
1. 이 문서 읽기 → 라이브(cv-hospital-map.vercel.app) 브라우저로 열어 실제 만지고 스크린샷.
2. `index.html`·`app.css` 훑기 → 현재 구조·스타일 파악.
3. 레퍼런스 리서치(§3) → `docs/ux-research-20260703.md`에 우선순위 개선 스펙(§4) 작성 → 커밋.