종합부동산웹앱 simple-drilldown 관제실 단순화
질의 원문
그래도 복잡해.... 간결하지 않아. 전체적인 내용을 분류하고 정리를 할 필요가 있어. 화면에 너무 많은 것들이 있어 정리하고 분류하는 것이 필요해. 심플한데 단계단계로 들어가서 모든 것을 할 수 있도록 해줘.
수집 경로와 시점
- 수집·구현시점: 2026-08-13 02:45:21 +09:00
- 확인 경로: 로컬 저장소
src/realestate/webapp/templates/index.html,src/realestate/webapp/static/app.css,tests/test_webapp_app.py - 직전 맥락: C-lite 화면은 이전 랜딩보다 줄었지만, 첫 화면에 명령센터·예시 질의·초보 단계·관제 요약이 동시에 보여 여전히 정보량이 많았다.
데이터 등급
| 항목 | 등급 | 비고 |
|---|---|---|
| 사용자 피드백 | 1차 사용자 입력 | 본 대화에서 직접 제공 |
| 화면 구조 | 로컬 구현 상태 | Jinja 템플릿·CSS 기준 |
| 사용성 판단 | 설계 판단 | 실제 사용자 클릭 로그 기반 검증 전 |
| 투자 데이터 | 해당 없음 | 이번 작업은 UI/접근 흐름이며 신규 투자 판단 수치 없음 |
설계 결정
홈 상단을 simple-drilldown 구조로 바꿨다. 첫 화면은 모든 기능을 보여주는 관제판이 아니라, 사용자가 어디로 들어갈지만 고르는 분류 입구가 되어야 한다.
첫 화면에 즉시 노출되는 요소는 아래로 제한했다.
control-command: AI 투자 명령센터. 한 문장으로 시작한다.simple-entry-grid: 분석하기, 관리하기, 기록보기 3개 분류 입구.- 접힘 패널: 초보 진행 순서, 예시 질의, 현황 요약.
stage-gateway: 하단 작업 영역을 분석하기, 관리하기, 기록보기 3개 단계 패널로 분리.
기존 C-lite의 beginner-rail과 control-dashboard는 기본 노출에서 제거했다. 초보 단계는 progressive-drawer 안으로 이동하고, 대표 질의 프리셋도 예시 질의 열기를 눌렀을 때만 보이게 했다. 숫자 요약은 summary-drawer로 접어 첫 화면의 시각적 밀도를 줄였다.
하단 작업 영역도 한 화면에 모두 펼치지 않고 stage-panel로 나눴다. 기본값은 1. 분석하기만 열어두고, 2. 관리하기와 3. 기록보기는 요약 줄만 보이게 했다. 관리 단계에는 워치리스트와 칸반 이동을, 기록 단계에는 지역·테마 보드와 최근 분석 문서를 둔다.
가정
- 사용자는 처음에는 "무엇을 할 수 있나"보다 "어디서 시작하나"를 먼저 알아야 한다.
- 반복 사용자는 3개 분류 입구만으로도 원하는 기능으로 이동할 수 있다.
- 초보자 안내와 예시 질의는 필요하지만 항상 노출될 필요는 없다.
- 세부 분석 기능은
AI 투자분석 워크벤치내부에 남기고, 홈 상단은 진입 구조만 담당한다.
한계·미확인
- 실제 사용자의 클릭 로그, 체류 시간, 이탈률로 검증한 것은 아니다.
- 이번 변경은 홈과 하단 작업영역의 정보 구조를 줄이는 작업이며, 워크벤치 내부 입력폼 자체의 단계형 마법사화는 아직 하지 않았다.
- 모바일에서 접힘 패널을 여는 실제 터치 동선은 브라우저 화면 검증으로 추가 확인이 필요하다.
- 원천 수집 실행과 문서 저장 흐름은 기존 백엔드 계약을 유지했다.
검증
- RED 1:
$env:PYTHONPATH='src'; python -m pytest tests/test_webapp_app.py::test_homepage_uses_simple_drilldown_entry_hub tests/test_webapp_app.py::test_homepage_tucks_guidance_examples_and_summary_into_drawers tests/test_webapp_app.py::test_static_css_styles_simple_drilldown_control_room -q-> 3 failed - GREEN 1:
$env:PYTHONPATH='src'; python -m pytest tests/test_webapp_app.py::test_homepage_uses_simple_drilldown_entry_hub tests/test_webapp_app.py::test_homepage_tucks_guidance_examples_and_summary_into_drawers tests/test_webapp_app.py::test_static_css_styles_simple_drilldown_control_room -q-> 3 passed - RED 2:
$env:PYTHONPATH='src'; python -m pytest tests/test_webapp_app.py::test_homepage_uses_simple_drilldown_entry_hub tests/test_webapp_app.py::test_homepage_groups_work_into_progressive_stage_panels tests/test_webapp_app.py::test_static_css_styles_simple_drilldown_control_room -q-> 3 failed - GREEN 2:
$env:PYTHONPATH='src'; python -m pytest tests/test_webapp_app.py::test_homepage_uses_simple_drilldown_entry_hub tests/test_webapp_app.py::test_homepage_groups_work_into_progressive_stage_panels tests/test_webapp_app.py::test_homepage_tucks_guidance_examples_and_summary_into_drawers tests/test_webapp_app.py::test_static_css_styles_simple_drilldown_control_room -q-> 4 passed - Focused:
$env:PYTHONPATH='src'; python -m pytest tests/test_webapp_app.py -q-> 19 passed - JS 문법:
node --check src/realestate/webapp/static/app.js-> 통과 - 현황판 재생성:
$env:PYTHONPATH='src'; python -m realestate.cli invest-board->reports/investment_board.html재생성 - 현황판 연결:
rg "simple-drilldown 관제실|simple-drilldown-관제실" docs/analysis/README.md reports/investment_board.html reports/analysis-> README, 현황판, 렌더링 HTML에서 확인 - 전체 테스트:
$env:PYTHONPATH='src'; python -m pytest -q-> 321 passed, 2 warnings - 로컬 서버:
http://127.0.0.1:8767/-> 200, simple-drilldown 모드·3개 입구·분석/관리/기록 단계 패널 확인, 기존beginner-rail·control-dashboard·kpi-strip기본 노출 제거 확인
다음 단계
- 워크벤치 내부를
질문 → 원천 확인 → 실행 → 후보 저장 → 문서 기록의 단계형 패널로 더 나눈다. - 모바일 화면에서 첫 화면 높이와 접힘 패널 사용성을 실제 브라우저로 확인한다.
- 반복 사용자를 위해 3개 분류 입구별 최근 작업 바로가기만 최소한으로 추가할지 검토한다.