Implement Step 1 UI simplification and quick-start guidance

README.md

@@ -7,7 +7,7 @@
 
 ## 0) 현재 완성도 빠른 진단
 
-현 시점 기준 기능 완성도(실사용 관점): **약 92%**
+현 시점 기준 기능 완성도(실사용 관점): **약 88%**
 
 - 완료
   - CSV 기초 요약(행/열/결측/숫자 통계)
@@ -18,12 +18,15 @@
   - 인사이트 룰 엔진(결측/이상치/드리프트 경고)
   - 파일 프로파일 캐시(.bitnet_cache)로 재분석 가속
   - 다중 CSV 자동 시각화 차트 생성(histogram/boxplot/top bar/scatter/missing-bar, matplotlib 설치 시)
-  - 브라우저 UI(`bitnet-analyze ui`)
-  - 웹 UI 대시보드(JSON 붙여넣기 기반 KPI/인사이트 뷰)
-  - **윈도우 데스크톱 UI(`bitnet-analyze desktop`, `BitNet_Desktop_Start.bat`)**
-- 남은 과제
-  - 대시보드 필터/드릴다운 고도화
-  - 차트 렌더링 백엔드 비동기 작업 큐(대형 배치용)
+  - 브라우저 UI(`bitnet-analyze ui`) / 웹 대시보드 / Windows 데스크톱 UI
+
+- 남은 과제 (우선순위)
+  - **P1 UI 개선**: 화면 2모드(빠른 시작/고급), 상태·에러 표준화, 대시보드 필터/드릴다운 강화
+  - **P1 분석 품질**: 날짜 파싱 포맷 확장(`YYYYMMDD`, `DD-MM-YYYY` 등), 결과 `schema_version` 도입
+  - **P1 구조화**: UI 스크립트 모듈화(상태관리/API/렌더링/이벤트), 공통 fetch/에러 포맷 정리
+  - **P2 성능**: 대형 JSON incremental 렌더링, 차트 비동기 job UX(queued/running/done/failed, 재시도)
+  - **P2 입력 확장**: Excel(`.xlsx`, `.xls`) 시트 선택·CSV 정규화
+  - **P3 파일 확장**: 문서 포맷(`.pdf`, `.docx`, `.pptx`) 표 추출 + 실패 시 CSV fallback
 
 ### 처리 규모 가이드
 

bitnet_tools/ui/app.js

@@ -9,6 +9,7 @@ const summary = document.getElementById('summary');
 const prompt = document.getElementById('prompt');
 const answer = document.getElementById('answer');
 const statusBox = document.getElementById('statusBox');
+const modeGuide = document.getElementById('modeGuide');
 
 const multiCsvFiles = document.getElementById('multiCsvFiles');
 const groupColumn = document.getElementById('groupColumn');
@@ -24,6 +25,22 @@ function setStatus(message) {
   if (statusBox) statusBox.textContent = message;
 }
 
+function renderModeGuide(mode) {
+  if (!modeGuide) return;
+  const steps = mode === 'quick'
+    ? [
+        '1) CSV 파일을 선택하거나 CSV 텍스트를 붙여넣기',
+        '2) 요청 문장을 확인(칩 버튼으로 빠르게 선택 가능)',
+        '3) "바로 분석" 클릭 후 요약 결과 확인',
+      ]
+    : [
+        '1) 기본 분석을 먼저 실행해 프롬프트 생성',
+        '2) 필요 시 모델 태그 입력 후 BitNet 실행',
+        '3) 멀티 CSV/대시보드 고급 기능 활용',
+      ];
+  modeGuide.innerHTML = steps.map((step) => `<li>${step}</li>`).join('');
+}
+
 function setMode(mode) {
   const advancedOnly = document.querySelectorAll('.advanced-only');
   advancedOnly.forEach((el) => {
@@ -35,10 +52,12 @@ function setMode(mode) {
   });
 
   if (mode === 'quick') {
-    setStatus('빠른 시작 모드: 파일 입력 후 "바로 분석"을 눌러주세요.');
+    setStatus('빠른 시작: 입력 → 요청 확인 → 바로 분석');
   } else {
-    setStatus('고급 모드: 모델 실행, 멀티 분석, 대시보드를 사용할 수 있습니다.');
+    setStatus('고급 모드: 모델 실행/멀티 분석/대시보드를 사용할 수 있습니다.');
   }
+
+  renderModeGuide(mode);
 }
 
 document.querySelectorAll('.mode-btn').forEach((btn) => {
@@ -57,6 +76,7 @@ if (csvFile) {
 document.querySelectorAll('.chip').forEach((chip) => {
   chip.addEventListener('click', () => {
     question.value = chip.dataset.q;
+    if (quickAnalyzeBtn) quickAnalyzeBtn.focus();
   });
 });
 

bitnet_tools/ui/index.html

@@ -18,6 +18,7 @@ <h2>1) 작업 모드</h2>
           <button class="mode-btn" data-mode="advanced" id="modeAdvancedBtn">고급 모드</button>
         </div>
         <p class="sub">빠른 시작은 핵심 분석에 집중하고, 고급 모드는 멀티 분석/모델 실행 옵션을 제공합니다.</p>
+        <ol id="modeGuide" class="quick-guide" aria-live="polite"></ol>
       </section>
 
       <section class="panel">
@@ -51,7 +52,7 @@ <h2>고급: 모델 실행</h2>
 
       <section class="panel">
         <h2>3) 실행 상태</h2>
-        <pre id="statusBox">대기 중</pre>
+        <pre id="statusBox" aria-live="polite">대기 중</pre>
       </section>
 
       <section class="panel">

bitnet_tools/ui/styles.css

@@ -82,3 +82,11 @@ pre {
 }
 .card strong { color: var(--muted); font-size: 12px; }
 .card span { font-size: 18px; font-weight: 700; }
+
+
+.quick-guide {
+  margin: 10px 0 0;
+  padding-left: 18px;
+  color: var(--muted);
+}
+.quick-guide li { margin: 4px 0; }