현재 구현 계획:
IMPLEMENTATION_PLAN.md· 현재 작업 상태:WORKLOG.md
Local-First Business Intelligence & Data Analytics Platform
Tableau의 시각화 + Power BI의 대시보드 + JMP의 통계 + Orange의 분석 흐름 + ChatGPT의 자연어 인터페이스를
하나의 로컬 웹 애플리케이션으로 통합한 개인용 데이터 분석 플랫폼
-lightgrey){kind=icon}
상세 브랜드 스펙:
docs/insight Analytics Brand Spec (standalone) ver2.html
로고는 in + sight + Analytics 세 요소로 구성됩니다.
| 구성 | 색상 | 역할 |
|---|---|---|
in |
tx-hi (흰/다크, #E9EAEC) |
조용히 시작하는 전치사 — 소문자로 겸손하게 |
sight |
Heritage Orange #E8611A |
브랜드 핵심 — 시각·통찰·발견 |
Analytics |
tx-faint #6E6E86 · 0.62em |
기능 설명 — 배경으로 물러남 |
워드마크 HTML (표준 표기):
<span style="color:#E9EAEC">in</span><span style="color:#E8611A">sight</span><span style="color:#6E6E86;font-size:.62em"> Analytics</span>컴팩트 (좁은 공간): insight — Analytics 생략
단색/워터마크: insight Analytics — 단일 색상
| 이름 | 값 | 용도 |
|---|---|---|
| Heritage Orange | #E8611A / oklch(0.70 0.17 47) |
기본 accent · sight · 집중/발견 |
| Orange Hi | oklch(0.80 0.14 55) |
hover · 강조 텍스트 |
| Orange Soft | oklch(0.72 0.17 48 / .16) |
선택 배경 · 뱃지 · 액티브 칩 |
| 역할 | 폰트 | 굵기 |
|---|---|---|
| UI 전반 · 워드마크 · 본문 | IBM Plex Sans / IBM Plex Sans KR | 400 / 500 / 600 / 700 |
| 수치 · 코드 · 토큰 · 필드 키 | IBM Plex Mono | tabular-nums |
| 제품 | 색상 | 역할 |
|---|---|---|
| insight Analytics Workbench | 🟠 주황 (sight) | 분석 · 시각화 |
| insight Data hub | 🔵 블루 #3F74E8 |
데이터 수집 · 공급 |
컨셉: "보다(See)"의 핵심 단어 sight를 주황으로 강조해 데이터를 꿰뚫어 보는 시각이라는 의미를 직관적으로 전달합니다. 소문자 워드마크는 부드럽고 현대적인 인상을 주며,
sight의 주황만이 시선을 사로잡습니다.
# 저장소 클론
git clone https://github.com/HOYUN-Y/Visualization-Tool.git
cd Visualization-Tool
# 로컬 서버 실행
python3 -m http.server 8742
# 브라우저에서 열기
open http://localhost:8742빌드 단계 없음 — 순수 HTML + in-browser Babel 구성입니다.
앱 실행에 Node.js / npm 설치는 불필요합니다. (테스트를 돌릴 때만 필요 — 아래 참조)
| 모드 | 기능 |
|---|---|
| Data | 데이터셋 탐색기 + 고밀도 데이터 그리드 + 자동 프로파일링 + 직접 편집 (JMP/Excel 스타일 — 셀 편집 · 행/열 추가·삭제 · 피처명 변경 · 타입 변경 · 헤더 드래그 열 순서 변경, 모두 비파괴 Undo/Redo) |
| Clean | 결측치/중복/이상치 처리 · 컬럼 변환 · Encoding (Label/Dummy) · 수치 변환 (Z-Score/Min-Max/Log/Rank/Winsorize/Binning) · Formula Column (JS 수식 파생 컬럼) · Undo/Redo 파이프라인 (Data 모드 편집 이력도 여기에 통합 표시) |
| SQL | DuckDB-WASM 엔진 — 전체 SQL(JOIN·서브쿼리·CTE·윈도우 함수). 데이터셋이 테이블로 자동 등록되고 따옴표 식별자로 한글 컬럼 지원 · DuckDB 미로드 시 내장 JS 엔진 폴백(JOIN/윈도우 제외) |
| Chart | Tableau 스타일 Dimension/Measure 셸프 → ECharts (Basic 8 + Advanced 8 + Financial 3 + Special 1, 총 20종) |
| Map | 3개 탭 — Seoul · 구 (서울 25구 Choropleth + 버블맵) · Korea · 행정구역 (17 시도 choropleth + 84 시군구 버블맵 + 내 데이터 모드) · World · GDP (30개국 choropleth) |
| Board | 드래그/리사이즈 위젯 대시보드 + Cross Filtering + 위젯 Inspector(타입·필드·크기 편집) + 안전 KPI 수식(SUM/AVG/COUNT/… 사칙연산, eval 없음) |
| Stats | 상관분석, T-Test, ANOVA, Chi-Square, 회귀분석 + Distribution 탭 (히스토그램+박스플롯+왜도/첨도) + Analysis Builder (자동 분석 유형 선택) + 시계열 (계절분해 4단 차트 additive/multiplicative · ACF/PACF) + SPC 관리도 + 다변량 이상치 + 자동 해석 패널 |
| ML | 브라우저 내 AutoML 10종 — OLS 회귀 · k-NN · Decision Tree(CART) · Naive Bayes(Gaussian) · Logistic(다중클래스 one-vs-rest) · KMeans · DBSCAN · 계층 군집 · PCA + Cross Validation(k-fold mean±std) + 적격성 게이팅(이 데이터로 못 돌리는 태스크는 사유와 함께 비활성) + 클래스별 Precision/Recall/F1 + 군집 특성표 + 모델 비교 이력 |
| Ask Insight | 데이터셋 자동 프로파일 (IE.profileDataset) + 마지막 분석 결과 요약 + NL→차트/모드 전환 |
| Projects | IndexedDB 다중 프로젝트 · 1초 자동저장(+언로드 플러시) · 즉시 저장 상태 · JSON 백업/복원 · 공유 링크(#p= URL fragment, deflate 압축, 백엔드 없음) |
| Export | PNG/SVG/CSV · PPT 네이티브 차트(스택·보조축·콤보를 편집 가능한 PowerPoint 차트로 매핑, 미대응 형식은 이미지 폴백) |
| Import | CSV/TSV/JSON/XLSX 공통 Preview · 결정적 타입 추론 · XLSX 복수 시트 선택 · 타입 override |
| Combine | 데이터셋 Union(행 결합·타입 승격·__source) / Join(Inner·Left·Right·Full·복수키·폭증 경고) · lineage 포함 새 데이터셋 생성 |
| Pivot | Rows × Columns 크로스탭 · 복수 Values 개별 집계 · 범주/범위 필터 · Grand Total(원본 재계산) · 결과를 데이터셋으로 저장 후 Chart 열기 |
- React 18.3.1 (UMD, no bundler)
- Apache ECharts 5.5.1 (차트, SRI 고정)
- Babel Standalone 7.29.0 (in-browser 트랜스파일)
- DuckDB-WASM 1.29.0 (SQL 엔진 — jsDelivr ESM 동적 로드, JS 폴백 보유)
- SheetJS CE 0.20.3 (로컬 vendoring — XLSX 파싱)
- PptxGenJS (로컬 vendoring — PPT 네이티브 차트 export)
- IndexedDB (브라우저 로컬 다중 프로젝트 저장)
- IBM Plex Sans / Mono (타이포그래피)
- CSS Custom Properties (디자인 토큰 기반 다크/라이트 테마)
앱 자체는 여전히 빌드 단계가 없습니다.
package.json은 테스트 하네스(Node 유닛 + Playwright E2E) 전용이며 앱 실행에 필요하지 않습니다.
- 최신 데스크톱 Chromium 기준.
oklch()/color-mix()를 쓰므로 Safari <16.2 · Chrome <111에서 스타일이 깨집니다. - 클립보드 복사(PPT용)는 HTTPS 전용입니다(
localhost는 예외).http://접속 시 자동으로 PNG 다운로드로 폴백하며 이유를 안내합니다. - 로컬 저장은 영구 보장이 아닙니다. 앱이 시작할 때 브라우저에 저장소 보존(
StorageManager.persist())을 요청하지만, 허용되지 않으면(Safari는 미지원) ITP 7일 규칙·시크릿 모드·용량 압박으로 프로젝트가 삭제될 수 있습니다. 이 경우 앱이 1회 안내하며, 중요한 작업은Projects › Project JSON으로 백업하세요. - 같은 프로젝트를 여러 탭에서 열지 마세요. 양쪽이 1초마다 자동저장하므로 나중에 저장한 쪽이 상대 작업을 덮어씁니다. 감지되면 상단바에 경고 배지가 뜨지만 차단하지는 않습니다.
- Frontend: Next.js + TypeScript + TailwindCSS + shadcn/ui + Zustand + TanStack Table + dnd-kit
- Backend: FastAPI + Polars + Pandas
- ML: scikit-learn + statsmodels
- AI: OpenAI API / Ollama / LM Studio
DuckDB는 원래 백엔드 전환 항목이었으나 DuckDB-WASM으로 브라우저에서 해결되어 v2.0.0에 포함됐습니다.
개발은 빌드가 없지만, 배포할 때는 빌드하세요. 개발용 구성(react.development.js + 브라우저 Babel 3MB + 매 로드 JSX 컴파일)을 그대로 올리면 첫 화면까지 수 초 걸리고 콘솔에 개발 경고가 노출됩니다.
npm run build # → dist/ (JSX 사전 트랜스파일 · React production 로컬 vendoring · Babel 제거)
npm run verify:dist # 빌드 결과를 실제 Chrome으로 부팅 검증 (권장 — 배포 전 필수)
npm run preview # 빌드 후 dist/를 :8743에 서빙해 눈으로 확인dist/를 정적 호스팅에 그대로 올리면 됩니다 (git에는 커밋하지 않습니다).
npm run verify:dist를 건너뛰지 마세요. 브라우저 Babel은const를var로 낮춰 컴파일하므로, 개발 환경에서는 우연히 동작하지만 빌드에서는 깨지는 코드가 존재할 수 있습니다. 실제로 2026-07-17에 이 검증이 Data 모드를 통째로 크래시시키는 TDZ 버그를 잡아냈습니다.
알려진 제약: DuckDB-WASM은 여전히 런타임에 jsDelivr에서 로드됩니다(로컬 vendoring 미적용). 오프라인·CDN 장애 시 SQL은 내장 JS 엔진으로 폴백하며 JOIN·윈도우 함수만 제한됩니다 —
IMPLEMENTATION_PLAN.md§12 A3′.
서울 부동산·금융·지도 데모 데이터 (시뮬레이션/정적 참조 데이터):
| 데이터셋 | 행 수 | 설명 |
|---|---|---|
Seoul_Apartment_Txns |
503 | 거래 상세 (구, 건물유형, 면적, 층, 준공연도, 가격) |
Monthly_Price_Index |
42 | 월별 평균 ㎡당 가격 + 거래량 추이 |
KOSPI_Stock_2024 |
320 | OHLCV 금융 차트용 데이터 |
District_Summary |
12 | 서울 구별 통계 + 위경도 |
World_GDP_2023 |
30 | 세계 GDP·인구·성장률 지도 데이터 |
Korea_Provinces_2023 |
17 | 시도별 인구·면적·GRDP |
Korea_시군구_2023 |
84 | 시군구별 인구·면적·위경도 |
.
├── index.html # 메인 진입점 (스크립트 로드 순서 = 의존성 순서)
├── IMPLEMENTATION_PLAN.md # 계획 정본 — 앞으로 할 일 (§12 하드닝 백로그)
├── WORKLOG.md # 현재 상태 + 완료 기록 + 릴리스 이력 (세션 시작 시 여기부터)
├── HANDOFF.md # 코드 아키텍처
├── css/ # 13개 CSS 파일 (토큰 → 기능별 분리)
├── js/ # JS/JSX 모듈 (window.* 전역 공유)
├── vendor/ # 로컬 고정 서드파티 (sheetjs-0.20.3 · pptxgenjs)
├── scripts/ # build.mjs(배포 빌드) · verify-dist.mjs · bump-assets.sh
├── dist/ # 배포 산출물 (npm run build로 생성 · git 미포함)
├── tests/ # Node 유닛 테스트 + e2e/ (Playwright)
└── docs/ # 개발자 매뉴얼 · 브랜드 에셋 · archieve/(폐기 문서)
npm install # 테스트·빌드 도구만 설치 (앱 실행에는 불필요)
npm test # Node 유닛 361개
npm run test:e2e # Playwright E2E 73개 (시스템 Chrome 사용 — 브라우저 다운로드 없음)
npm run bump # 자산 캐시버스트 ?v= 일괄 갱신window.*로 내보내기 — 모든 모듈은window.X = ...로 전역 노출- 데이터 접근 — 반드시
Store.derive.getActiveData(id)사용 (직접 접근 금지) - ECharts
animation: false— iframe/Preview 환경에서 빈 차트 방지를 위해 유지 - CSS 변수만 사용 —
css/tokens.css의 커스텀 프로퍼티로만 색상 정의 - 스크립트 로드 순서 유지 —
index.html내<script>순서 = 의존성 순서
- 전체 UI 프레임워크 (8개 모드)
- 샘플 데이터셋 + Data/Clean/Chart/Dashboard/Stats/ML/Map/SQL 모드
- 다크/라이트 테마, Tweaks 패널, Ask Insight AI 드로어
js/insightEngine.js신규: 규칙 기반 자동 해석 엔진 (window.IE)- Stats 모드 Distribution 탭: 히스토그램 + 수평 박스플롯 + 8개 통계 카드 (왜도/첨도 포함)
- Stats 모드 Analysis Builder 탭: 컬럼 타입 자동 감지 → 회귀/ANOVA/카이제곱 중 적합한 분석 자동 선택
- 모든 Stats 탭: Interpretation 패널 (파란색, IE 생성 해석 문구) + Next Step 패널 (초록색, 다음 분석 제안)
statsMath.js왜도(skewness) / 첨도(excess kurtosis) 함수 추가- ML 분류 결과: 클래스별 Precision / Recall / F1 테이블
- ML 군집 결과: 군집별 특성 평균 테이블 (원본 스케일)
- ML: Model Comparison History 테이블 (최근 10개 실행 비교)
- Ask Insight 드로어:
IE.profileDataset()자동 실행 + 마지막 분석 결과 연동
- Export (PNG/CSV), CSV/TSV/JSON 파일 임포트 (드래그앤드롭)
- Map 모드 — World · GDP choropleth 탭 추가
- Map 모드 — Korea · 행정구역 탭 (시도 choropleth + 시군구 버블맵, WGS84→UTM52N 좌표 변환)
- Map 모드 — 내 데이터 모드 (위경도 컬럼 자동 감지, 임포트 데이터를 지도에 직접 표시)
- Encoding: Label Encode (문자→정수), Dummy Encode (One-Hot 0/1 컬럼)
- 수치 변환: Z-Score 표준화, Min-Max 정규화, Log(1+x), 순위(Rank)
- Outlier 처리: Winsorize (상하 p% 클리핑), Binning (등폭 구간 범주화)
- Formula Column: JS 수식으로 파생 컬럼 생성 (
row객체 +Math.*접근) - 모든 op 파이프라인 Undo/Redo 지원
- 셀 편집: 더블클릭 인라인 편집, 열 타입 자동 형변환
- 행 편집: 행 추가 / 다중선택 삭제(Del 키)
- 열 편집: 열 추가 · 삭제 · 피처명 변경 · 타입 변경 · 헤더 드래그 순서 변경
- 숨김 행 ID(
__rid)로 정렬·필터·페이징과 무관하게 안정적 행 지목 - 모든 편집을 비파괴 스텝으로 기록 → Undo/Redo + Clean 모드 PIPELINE 통합 표시
- IndexedDB 다중 프로젝트 생성·전환·이름 변경·복제·삭제
- Store/데이터셋/분석 이력 1초 debounce 자동저장 + 즉시 저장 상태
- schema version 1 JSON 백업·복원과 미래 버전 거부
- 데이터셋 등록 API 중앙화와
__rid복원 연속성
- SheetJS CE 0.20.3 로컬 고정 + 라이선스/SHA-256 기록
- CSV/TSV/JSON/XLSX 공통 ImportEngine과 원문 기반 결정적 타입 추론
- XLSX 시트 범위·행/열·첫 20행 Preview, 복수 시트 선택, 컬럼별 타입 override
- 중복 데이터셋명
_2,_3처리와 Import 완료 후 프로젝트 즉시 저장
- 순수 결정적
window.DataOps엔진: Union(타입 승격·null 채움·__source), Join(4종·복수키·정규화 비교·리네임·폭증 감지) - Combine 모달: 실시간 Preview·many-to-many 경고·lineage 포함 새 데이터셋 materialize
- Node 9/9 회귀 테스트 + 브라우저 러너 케이스
- 순수 결정적
window.PivotEngine: Rows × Columns 크로스탭, 복수 Values 개별 집계, 범주/범위 필터 - Grand Total은 원본 행에서 재계산(평균·중앙값 정확), 빈 셀 안전 처리
- Pivot rail 모드: 드래그 shelf + 크로스탭 테이블 + 데이터셋 저장·Chart 열기
- Node 8/8 회귀 테스트 + 브라우저 러너 케이스
- 안전한
window.KPIFormula파서/평가기(eval 없음): SUM/AVG/COUNT(*)/COUNTD/MIN/MAX/MEDIAN + 사칙연산 - 위젯 Inspector: 선택 위젯의 타입·필드·집계·색상·크기 편집(Chart/KPI/Table/Text)
- KPI 수식은 Cross Filtering 이후 행 기준 계산, 오류는
—표시 - Text 위젯
dangerouslySetInnerHTML제거(보안) + 기존 HTML→평문 마이그레이션 - Node 7/7 회귀 테스트 + 브라우저 러너 케이스
결정적 window.* 엔진 + Node 테스트 + Stats/ML 모드 UI 모두 완료.
- ML 모드: PCA(Scree+로딩), Logistic Regression + ROC/AUC(계수 막대), DBSCAN(eps/minPts), 계층군집(Ward, K 컷) — 7종 task 그리드
- Stats 모드: Normal Q-Q(왜도/첨도/Jarque-Bera), Time Series(MA/EMA + ACF), SPC 관리도(I-MR + CL/UCL/LCL)
- 엔진:
window.PCA·Logistic·TimeSeries·DistFit·SPC·Clustering(Cp/Cpk·Pareto·Holt·PACF 등 추가 함수 포함, 일부는 UI 후속)
- 8모드 전환 크래시(P0) 수정 — 모드를 함수호출이 아닌 엘리먼트로 렌더
- Playwright E2E 14스펙 — 모드 전환·un-bricking·ML·DuckDB·SQL·Export·공유링크 회귀 잠금
- Formula Column 안전 파서 —
new Function제거, 재귀하강 파서로 임의 코드 실행 차단 - 언로드 저장 플러시 · ECharts SRI · 캐시버스트 자동화(
npm run bump)
원래 "백엔드 필요" 항목이었으나 브라우저에서 해결.
- SQL 모드가 DuckDB-WASM에서 전체 SQL 실행 (JOIN·서브쿼리·CTE·윈도우)
- 데이터셋 자동 테이블 등록(
__rid제외), 따옴표 식별자로 한글 컬럼 지원 - DuckDB 미로드 시 내장 JS 엔진 폴백 → 오프라인에서도 기본 SQL 동작
강제 순서 없음. 전부 "지금 로컬 개인 사용에는 문제 없고, 특정 조건에서 터지는 것". 상세·근거·해소 이력:
IMPLEMENTATION_PLAN.md§122026-07-18 실사 백로그 소탕 완료 — 정확성(E1
E6)·구조(F1F6)·전역 리렌더(C1)·formula 한글(B3′), 그리고 배포 선행이던 A2·A4·A6·C3까지 전부 해소. 남은 건 아래 조건부 대기 항목뿐.
| 트리거 | 선행 필요 항목 (미해소) |
|---|---|
| 오프라인 보장 | A3′ DuckDB 로컬 벤더링 (JS 폴백 있어 SQL 자체는 오프라인 동작) |
| 대용량 XLSX 사용 | D1 인메모리 복제 가드 · B4 undo 스택 압축 |
| 팀·다중 기기 사용 | B1 다중 탭 실제 잠금(경고까지는 완료) |
| 구형 브라우저 / 품질 | A5 CSS 폴백 · C6 접근성 · C7 라이트 테마 검증 · C8 소형 화면 |
- Box-Cox 변환 · Stepwise Regression · ANCOVA · Bootstrap
- Precision-Recall Curve · Lift/Gain/KS Chart · 트리 모델 Feature Importance
- Auto Chart Recommendation · Parallel Coordinates · Mosaic/Pair/Contour Plot
- DOE 기초 (Full/Fractional Factorial, CCD, Taguchi, Prediction Profiler)
구현 가능하나 5k 행 초과 시 실용성 저하. 경고와 함께 제한적 지원.
| 기능 | 제한 이유 | 실용 상한 |
|---|---|---|
| Random Forest | 다수 트리 = O(n·d·T) CPU | ~5k 행, ~10 트리 |
| DBSCAN | O(n²) naive 구현 | ~5k 행 |
| t-SNE | 반복 최적화 매우 느림 | ~3k 행 |
| Gaussian Mixture Model | EM 수렴 느림 | ~5k 행 |
| Factor Analysis | SVD 반복 계산 | ~10k 행 |
| Neural Network | TF.js CDN (~1.5MB) 필요 | 소규모 아키텍처 |
| 기능 | 불가 이유 |
|---|---|
| XGBoost / LightGBM | C++ 네이티브, 순수 JS 구현 없음 |
| SVM | Quadratic Programming solver 필요 |
| UMAP | 신뢰할 CDN 없음, 계산 비용 과대 |
| SOM | 복잡한 구현, CDN 없음 |
| ARIMA / SARIMA | MLE 최적화 수치 불안정, JS 라이브러리 미성숙 |
| Prophet | Facebook Python/Stan 전용 |
| Bayesian Analysis (MCMC) | 샘플링 비용 — 브라우저에서 수분~수십분 |
| DOE Custom Design (D-optimal) | Exchange 알고리즘 = 복잡 수치 최적화 |
| Survival Analysis (Cox) | Partial likelihood 최적화 복잡 |
| Gradient Boosting | 대용량 데이터 시 너무 느림 |
- FastAPI + Polars 백엔드 → 위 ❌ 항목 구현 가능
- Next.js TypeScript 포팅
- Analysis Pipeline Builder (노드 기반 워크플로우)
- AI Analytics Assistant (실제 LLM 연동)
자세한 작업 이력은 WORKLOG.md를 참고하세요.
Private project — HOYUN-Y