핸드오프 — 시장 콘솔 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줄) 순서:

헤더(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. 리서치 스코프 (무엇을 조사)

레퍼런스 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 스킬 참조 가능)
정보 아키텍처 재설계 권고: 10섹션을 어떻게 그룹핑/탭/우선순위화? 핵심(검색→카드→매칭)을 어떻게 전면에? 지도-패널 밸런스?
디자인 시스템 제안: 색(다크 우선 + 병원 빨강/공급 파랑/매칭 초록 유지)·타이포·여백·컴포넌트(버튼/인풋/배지/카드/스탯) 토큰. CSS 변수 체계.
데모 임팩트 요소: 부회장 앞에서 "와" 나오게 하는 연출(전환 애니메이션·스포트라이트·풀스크린 데모 모드 등).
제품화 요소: 실사용(매일) 관점의 효율·학습곡선.

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. 시작하는 법

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