4.네이버 쇼핑 상품 분석 프로그램 (2)

파이썬 Flask로 네이버 쇼핑 API 데이터를 수집·분석해서 대시보드로 보여주는 웹 애플리케이션을 단일 파일(app.py)로 만들어줘. HTML 템플릿은 파이썬 코드 안에 문자열로 내장하고, render_template_string으로 렌더링해줘. 외부 HTML 파일 없이 하나의 .py 파일만으로 전부 돌아가게 해줘.

========================================
1.프로그램 개요 
========================================
이름은 "ShopLens — 네이버 쇼핑 인텔리전스"로 해줘. 사용자가 네이버 개발자센터에서 발급받은 Client ID와 Client Secret을 입력하고, 검색 키워드를 넣으면 네이버 쇼핑 검색 API(https://openapi.naver.com/v1/search/shop.json)에서 상품 데이터를 대량 수집한 뒤, 가격 통계·브랜드 분석·쇼핑몰 점유율·키워드 빈도 등을 자동 계산해서 예쁜 대시보드 화면에 차트와 표로 보여주는 앱이야.

전체 흐름은 이래:

처음 접속하면 히어로 화면(검색 입력 폼)이 전체 화면으로 뜸
검색 옵션 설정 후 "분석 시작" 버튼 클릭
로딩 오버레이가 뜨면서 백엔드에서 API 호출 + 통계 계산
완료되면 히어로 화면이 사라지고 대시보드 화면이 나타남
대시보드에서 다시 "새 검색" 버튼으로 히어로 화면으로 돌아갈 수 있음
언어는 전부 한국어로 해줘. UI 텍스트, 라벨, 인사이트 문구 전부 한국어야.

======================================== 
2. 기능
======================================== 
2-1. 검색 입력 폼 (히어로 화면)

API 인증 키 영역은 접을 수 있는 아코디언(collapsible)으로 만들어줘. 기본은 접힌 상태고, 헤더를 클릭하면 펼쳐져. 헤더에 "🔑 API 인증 키 설정" 텍스트와 ▼ 화살표를 넣어줘. 열리면 화살표가 180도 회전해.
Client ID, Client Secret 입력 필드는 비밀번호 타입(type="password")으로 하고, 오른쪽에 👁 버튼을 눌러 보기/숨기기 토글 가능하게 해줘. 보기 상태면 🔒로 아이콘 바뀌게 해줘.
키워드 입력 필드는 크게 만들어줘(input-lg 스타일). 왼쪽에 🔍 아이콘 넣고, placeholder는 "분석할 키워드를 입력하세요", 기본값은 "무선이어폰"으로 해줘. Enter키를 누르면 분석이 시작되게 이벤트도 걸어줘.
수집 건수는 select 드롭다운으로: 50건, 100건(기본 선택), 200건, 300건, 500건, 1,000건(최대) 옵션을 넣어줘.
정렬도 select 드롭다운으로: 정확도순(sim), 날짜순(date), 가격 낮은순(asc), 가격 높은순(dsc).
수집 건수와 정렬은 한 줄에 2열 그리드로 나란히 배치해줘.
제외 항목은 토글 칩(toggle chip) 버튼 3개로: 중고(used), 렌탈(rental), 해외직구(cbshop). 클릭하면 active 클래스 토글되면서 보라색으로 바뀌게 해줘. 내부에 숨겨진 체크박스를 넣어서 상태 관리해줘.
최소 가격, 최대 가격 입력 필드를 한 줄에 2열로 넣어줘. type="number"로 해줘.
맨 아래에 "분석 시작 →" 버튼을 전체 너비로 크게 만들어줘. 그라디언트 배경에 흰색 글자, 호버 시 위로 살짝 뜨는 효과.

2-2. 백엔드 API (/api/analyze)

POST 방식으로 JSON을 받아. 파라미터: client_id, client_secret, query, total_count, sort, filter, exclude, price_min, price_max.
total_count는 최대 1000으로 제한해줘.
네이버 쇼핑 API는 한 번에 최대 100건까지만 가져올 수 있으니까, total_count를 100으로 나눠서 페이지 수를 계산하고 반복 호출해줘. start 파라미터는 page*100+1로 계산하고, start가 1000을 초과하면 중단해줘.
API 호출 시 헤더에 X-Naver-Client-Id와 X-Naver-Client-Secret을 넣어줘.
응답에서 items를 모아서 all_items에 합쳐줘. 각 아이템의 lprice, hprice는 int로 변환하고, productType도 int로 변환해줘. 값이 없거나 None이면 0으로 처리해줘.
price_min이 있으면 lprice가 그 이상인 것만 필터링, price_max가 있으면 lprice가 그 이하이거나 lprice가 0인 것만 남겨줘.
에러 처리: API 키 없으면 에러, 검색어 없으면 에러, HTTP 상태코드가 200이 아니면 에러 메시지 반환, Timeout은 10초 설정, 결과가 비어있으면 에러.
정상이면 compute_stats 함수로 통계를 계산하고, { items: [...], stats: {...} } 형태로 JSON 응답을 반환해줘.

2-3. 통계 계산 (compute_stats 함수)

lprice가 0보다 큰 항목들만 prices 리스트로 뽑아서 아래 통계를 전부 계산해줘:

기본 통계: 평균(mean), 중앙값(median), 표준편차(stdev), 변동계수(CV = 표준편차/평균*100, 소수점 1자리), 최솟값, 최댓값, 가격 범위
사분위수: Q1(전체의 1/4 지점), Q3(전체의 3/4 지점), IQR(Q3-Q1), 이상치(Q1-1.5IQR 미만 또는 Q3+1.5IQR 초과인 가격들) 개수
최저가 상품명, 최고가 상품명
카테고리1(category1) 빈도수 상위 15개 (없으면 '미분류')
쇼핑몰(mallName) 빈도수 상위 20개 (없으면 '기타')
상위 3개 쇼핑몰의 점유율(%) 계산
브랜드별 평균 가격 상위 15개, 브랜드 없는 비율
고유 브랜드 수, 고유 쇼핑몰 수, 최다 브랜드명
히스토그램: 가격 범위를 bin_count개(min(20, max(5, n//5)))로 나눠서 각 구간의 개수 계산. 라벨은 1만 이상이면 "X.X만~Y.Y만" 형식, 미만이면 숫자 그대로 콤마 표기.
키워드 추출: 모든 상품 제목에서 HTML 태그(,) 제거하고, 특수문자를 공백으로 바꾸고, 공백 기준 split해서 2글자 이상인 단어만 카운트. 불용어 목록('the','and','for','with','무료배송','당일발송','특가','할인','세일','국내','정품','NEW','new','사은품','증정','배송','무료')은 제외해줘. 순수 숫자도 제외. 상위 50개.
경쟁 강도: 가격 범위를 8등분해서 각 구간의 상품 수와 평균가 계산.
반환하는 stats 딕셔너리 키: total_items, api_total, mean_price, median_price, std_price, cv_price, min_price, max_price, min_price_item, max_price_item, price_range, iqr, iqr_q1, iqr_q3, outlier_count, unique_brands, unique_malls, top_brand, no_brand_ratio, top3_mall_share, histogram(labels, values), category1_counts, mall_counts, brand_avg_prices, keyword_counts, competition(labels, counts, avg_prices).

2-4. 대시보드 화면

분석이 완료되면 히어로 화면을 숨기고 대시보드를 표시해줘.

(가) 헤더 영역

큰 제목: ""(키워드)" 분석 리포트" — 키워드 부분은 보라색으로.
부제: "N개 상품 · N개 브랜드 · N개 쇼핑몰" 형식.
상단 바에 "← 새 검색" 버튼과 "📥 CSV 내보내기" 버튼이 나타나게 해줘 (분석 전에는 숨김).
(나) KPI 카드 4개 (한 줄에 4열 그리드)

💰 평균 가격 — 값은 큰 숫자로, 하단에 "중앙값 XX원" 표시
📉 최저가 — 하단에 최저가 상품명 앞 24자
📈 최고가 — 하단에 최고가 상품명 앞 24자
📊 가격 변동계수 — 단위 %, 하단에 태그로 80% 초과면 "고변동"(빨간), 이하면 "안정"(초록), 표준편차 금액도 표시
가격 표시 유틸 함수: 1억 이상이면 "X.X억", 1만 이상이면 "X.X만", 미만이면 콤마 표기. 0이나 null이면 '-' 표시.

(다) 차트 6종 (Chart.js 사용) 모든 차트는 Chart.js v4.4.1 CDN으로 불러오고, chartjs-plugin-zoom v2.0.1도 CDN으로 불러와줘.

가격 분포 (히스토그램) — 세로 막대 차트. 보라색 반투명 배경, 보라색 테두리, 모서리 둥글게(borderRadius:6). 범례 없음.
카테고리 비율 — 도넛 차트. 상위 8개 카테고리. cutout 60%. 범례는 오른쪽에. 미리 정의한 15색 팔레트 배열 사용해줘: ['#6c5ce7','#00cec9','#fd79a8','#fdcb6e','#74b9ff','#00b894','#e17055','#a29bfe','#55efc4','#fab1a0','#81ecec','#ffeaa7','#dfe6e9','#636e72','#b2bec3']
가격×순위 산점도 — 전체 너비(single 행). X축은 순위(1부터), Y축은 가격. 보라색 점(반투명). 드래그 줌 가능(zoom 플러그인의 drag 모드, xy 방향). "줌 리셋" 버튼 넣어줘. 툴팁에 상품명 앞 40자와 가격 표시. 마우스 호버 시 호버 카드(아래 설명) 표시. 가격 기준선 기능: 입력 필드와 "적용" 버튼이 있는 분홍색 배경의 작은 바를 차트 위에 넣어줘. 적용 누르면 해당 가격에 분홍색 점선 수평선이 산점도 위에 추가돼.
쇼핑몰 TOP 15 — 가로 막대 차트(indexAxis:'y'). 각 막대 색상은 팔레트에서 순서대로 반투명으로 적용. 범례 없음.
브랜드 평균가 TOP 10 — 세로 막대 차트. 청록색 계열. 범례 없음. Y축에 fmtShort 적용.
가격대별 경쟁 강도 — 복합 차트. 막대(상품 수, 보라색, 왼쪽 Y축)와 라인(평균가, 분홍색, 오른쪽 Y축)을 한 차트에. 라인은 tension 0.4, fill, 점 있음.
차트 공통: 높이 300px 기본, sm이면 240px, lg이면 400px. 산점도와 쇼핑몰·브랜드 차트는 lg. 반응형(responsive:true, maintainAspectRatio:false). 그리드 선은 아주 연한 회색(rgba(0,0,0,0.04)). 기본 텍스트 색 #8b8fa3, 폰트 Pretendard.

(라) 인사이트 카드 3개 (3열 그리드)

가격 변동성 — CV값에 따라 상단 보더 색상 변경(100 초과: 빨강/danger, 50 초과: 노랑/warn, 이하: 기본 보라). 문구 내용: CV값, 변동 수준 설명, 평균, 표준편차.
시장 경쟁 구조 — 상단 보더 청록색. 쇼핑몰 수, 상위 3개 점유율, 시장 유형(50% 초과면 "소수 판매자 집중형", 이하면 "다수 판매자 경쟁형").
가격 분포 형태 — 상단 보더 기본 보라. 평균>중앙값이면 우편향, 아니면 좌편향. IQR 범위, 이상치 개수 표시.
(마) 키워드 클라우드

상위 35개 키워드를 태그 형태로 보여줘.
빈도에 따라 크기 3단계: 최대 빈도 대비 70% 초과면 lg(크고 보라색 배경), 35% 초과면 md(중간 크기), 이하면 sm(작은 크기).
(바) 상품 목록

상단 툴바: 왼쪽에 "총 N개 상품" 텍스트와 정렬 드롭다운(기본 순서, 가격 낮은순, 가격 높은순, 이름 ㄱ→ㅎ, 브랜드 ㄱ→ㅎ). 오른쪽에 뷰 전환 버튼(목록/카드).
목록 뷰(테이블): 열 순서 — #, 썸네일(48x48 둥근 이미지), 상품명(링크, 새 탭), 최저가(보라색 굵게), 최고가, 쇼핑몰(뱃지 스타일), 브랜드, 카테고리. 최대 높이 700px 스크롤. thead는 sticky.
카드 뷰: 그리드(minmax 260px). 각 카드에 이미지(높이 200px), 상품명(2줄 clamp), 가격(크고 보라색), 메타 태그들. 최대 높이 750px 스크롤. 카드 호버 시 살짝 위로 뜨고 그림자 + 보라색 테두리.
카드 뷰에만 북마크 버튼: 카드 우상단에 원형 버튼, ☆/★ 토글. 활성화 시 분홍색 배경.

2-5. 호버 카드 (Hover Card)

테이블 썸네일, 카드 이미지, 산점도 점 위에 마우스를 올리면 고정 위치(position:fixed)의 플로팅 카드가 나타나게 해줘.

폭 320px, 유리 효과 배경(backdrop-filter:blur(24px)), 둥근 모서리, 큰 그림자.
내용: 상품 이미지(높이 180px), 상품명(2줄 clamp), 가격(크고 보라색), 메타 정보(쇼핑몰, 브랜드, 카테고리 경로).
마우스 위치 따라다니되, 화면 밖으로 넘어가지 않게 위치 보정해줘.
pointer-events:none으로 클릭 간섭 안 되게.

2-6. 기타 기능

CSV 내보내기: 상단 바의 버튼 클릭 시 BOM 포함 UTF-8 CSV 파일 다운로드. 열: 순위, 상품명, 최저가, 최고가, 쇼핑몰, 브랜드, 카테고리1, 카테고리2, 링크. 파일명은 shoplens_키워드_타임스탬프.csv.
토스트 알림: 화면 하단 중앙에 어두운 배경 팝업. 아래에서 위로 슬라이드인, 3초 후 사라짐. 에러 시 빨간색 배경. 성공 시 기본(어두운 회색).
로딩 오버레이: 분석 중일 때 전체 화면 반투명 배경 + blur + 중앙에 CSS 스피너(ring 타입 회전 애니메이션) + "데이터 수집 중" 텍스트 + 부제 "네이버 쇼핑 API에서 상품을 불러오고 있습니다".

======================================== 
3. 디자인
========================================

3-1. 전체 톤 
모던하고 깔끔한 SaaS 대시보드 느낌으로 해줘. 밝은 배경(#f0f2f5)에 하얀 카드, 유리 모피즘(glass morphism) 효과 곳곳에 적용.

3-2. 폰트

본문: Pretendard (Google Fonts CDN). 웨이트 300~900.
숫자/브랜드: Space Grotesk (Google Fonts CDN). 웨이트 400~700.

3-3. 컬러 시스템 (CSS 변수) 
--bg:#f0f2f5 --bg-glass:rgba(255,255,255,0.72) --bg-glass-strong:rgba(255,255,255,0.88) --bg-card:#fff --bg-dark:#1b1d21 --bg-dark-soft:#2a2d35 --blur:20px --radius:20px --radius-sm:12px --radius-xs:8px --shadow:0 8px 32px rgba(0,0,0,0.08) --shadow-lg:0 20px 60px rgba(0,0,0,0.12) --text:#1b1d21 --text-2:#4a4d57 --text-3:#8b8fa3 --text-inv:#fff --primary:#6c5ce7 --primary-light:#a29bfe --primary-bg:rgba(108,92,231,0.08) --secondary:#00cec9 --secondary-bg:rgba(0,206,201,0.08) --accent:#fd79a8 --accent-bg:rgba(253,121,168,0.08) --success:#00b894 --warning:#fdcb6e --danger:#e17055 --info:#74b9ff --gradient:linear-gradient(135deg,#6c5ce7,#a29bfe,#74b9ff) --gradient-warm:linear-gradient(135deg,#fd79a8,#fdcb6e) --gradient-cool:linear-gradient(135deg,#00cec9,#74b9ff) --border:rgba(0,0,0,0.06) --border-strong:rgba(0,0,0,0.1)

3-4. 상단 바 (topbar) 
높이 64px, 고정(fixed), 유리 효과 배경, 하단 보더. 왼쪽에 브랜드 아이콘(36x36, 그라디언트 배경, 흰색 "S" 글자, 둥근 모서리 10px)과 "ShopLens" 텍스트(Space Grotesk, 그라디언트 텍스트).

3-5. 히어로 화면 
전체 높이(100vh - 64px) 중앙 정렬. 배경에 은은한 radial-gradient 2개 (보라색 좌상단, 청록색 우하단, 6% 불투명도). 상단에 "실시간 분석" 뱃지(보라색 배경, 왼쪽에 pulse 애니메이션 점). 타이틀 48px 굵은 글씨, "데이터로 해부하다" 부분은 그라디언트 텍스트. 검색 카드는 최대 680px 너비, 유리 효과 배경, 큰 그림자.

3-6. KPI 카드 
흰 배경, 얇은 보더, 둥근 모서리 20px. 호버 시 그림자 생기고 Y축 -2px 이동. 아이콘은 44x44 둥근 사각형(12px) 안에 이모지. 값은 32px 극굵은 글씨(800 weight), 자간 -1px. 단위는 작은 글씨(14px, 연한 색).

3-7. 차트 패널
흰 배경 카드에 헤더(제목 + 컬러 인디케이터 사각형 10x10) + 액션 버튼 영역. 인디케이터 색상: purple, teal, pink, warn(노랑), info(파랑) 등 구분.

3-8. 반응형 
1200px 이하: KPI 2열, 차트 1열, span-2 해제, 인사이트 1열. 768px 이하: KPI 1열, 값 크기 축소(24px), input-row 1열, 타이틀 32px, padding 축소.

3-9. 기타 디자인 요소

스크롤바: 6px 너비, 둥근, 연한 회색.
모든 인터랙티브 요소에 transition 0.15~0.2s 적용.
select에 커스텀 화살표 아이콘 (SVG data URL background-image로 처리).
테이블 th에 호버 시 보라색, 정렬된 열은 보라색 유지.
테이블 tr 호버 시 아주 연한 보라색 배경.
========================================
4. 기술
========================================

4-1. 백엔드

Python Flask 단일 파일. import: Flask, render_template_string, request, jsonify, requests, statistics, math, re, collections.Counter
HTML 전체를 파이썬 파일 안 r"""...""" raw 문자열 변수(HTML_TEMPLATE)로 넣어줘.
라우트 2개: GET / (HTML 반환), POST /api/analyze (JSON 반환).
실행: app.run(debug=True, port=5000, use_reloader=False)
4-2. 프론트엔드

순수 HTML + CSS + Vanilla JavaScript. 프레임워크 없음.
차트: Chart.js v4.4.1 (CDN: https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js)
줌 플러그인: chartjs-plugin-zoom v2.0.1 (CDN: https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@2.0.1/dist/chartjs-plugin-zoom.min.js)
모든 API 호출은 fetch로 비동기 처리.
차트 인스턴스는 charts 객체에 id를 키로 저장하고, 새로 그리기 전에 기존 인스턴스를 destroy한 후 생성해줘.

4-3. 데이터 흐름 
프론트에서 /api/analyze로 POST → 백엔드에서 네이버 API 반복 호출 + 통계 계산 → JSON 응답 → 프론트에서 renderDashboard 함수로 전체 대시보드 렌더링 (KPI → 차트 6개 → 인사이트 → 키워드 → 상품 목록 순서대로).

======================================== 
5. 추가 조건
========================================
코드 전체를 단일 app.py 파일 하나에 담아줘. HTML, CSS, JS 전부 파이썬 문자열 안에.
외부 이미지나 정적 파일 없이, CDN과 이모지만 사용해줘.
productType 매핑 딕셔너리도 JS에 넣어줘: {1:'일반-가격비교',2:'일반-비매칭',3:'일반-매칭',4:'중고-가격비교',5:'중고-비매칭',6:'중고-매칭',7:'단종-가격비교',8:'단종-비매칭',9:'단종-매칭',10:'예정-가격비교',11:'예정-비매칭',12:'예정-매칭'}
상품명에서 HTML 태그를 제거하는 clean 유틸 함수를 JS에 만들어줘.
차트 색상 팔레트 15색 배열을 JS 상단에 상수로 정의해줘.
CSS에서 -webkit-font-smoothing:antialiased 적용해줘.
body에 overflow-x:hidden 넣어줘.
Chart.js 기본 설정에서 color를 #8b8fa3, font.family를 Pretendard, borderColor를 rgba(0,0,0,0.06)으로 설정해줘 (makeChart 함수 안에서 Chart.defaults로).
모든 에러 처리에서 사용자에게 친절한 한국어 메시지를 보여줘.