3-1_내업무_빈폴더.zip

구매관리규정.pdf

3-2_개념목록_작성지.md

3-3_데이터사전_작성양식.xlsx

구매관리규정.docx

요구사항정의서 작성 실습

예시

올리브영 템플릿.xlsx

올리브영 템플릿 예시 데이터.xlsx

올리브영 데이터관리 툴

# 개발 프롬프트 — H&B 리테일 마케팅 성과 데이터 관리 프로그램 (HTML 단일 파일)

## 0. 역할과 목표
너는 시니어 프론트엔드 개발자다. 아래 명세에 따라 **HTML 파일 1개(index.html)** 로 동작하는 "리테일 마케팅 성과 데이터 관리 프로그램"을 만들어라.
사용자가 정해진 템플릿 구조의 엑셀(.xlsx)을 업로드하면, 브라우저 안에서만 데이터를 읽고·검증하고·지표를 재계산하고·대시보드와 분석 화면을 보여주며·수정한 데이터를 다시 엑셀로 내보낸다. 서버 없이 동작해야 한다.

## 1. 기술 제약
- 단일 파일: HTML + `<style>` + `<script>` 모두 index.html 안에 포함. 빌드 도구·프레임워크 없이 순수 JavaScript(ES2020)로 작성.
- 외부 라이브러리는 CDN으로만, 버전 고정:
  - SheetJS: `https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js`
  - Chart.js: `https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js`
- 데이터는 서버로 전송하지 않는다. 모든 처리는 메모리에서. (선택) 마지막 작업 상태를 localStorage에 저장하되 try/catch로 감싸고, 실패해도 정상 동작해야 한다.
- 한국어 UI. 금액은 `₩1,234,567`, 비율은 `12.3%`, ROAS는 `450%`(4.5 → 450%) 형식. 큰 금액은 카드에서 `1.2억`, `3,450만` 축약 표시 옵션.
- 반응형(모바일 360px까지), 라이트/다크 모드(`prefers-color-scheme`) 지원.

## 2. 입력 엑셀 템플릿 구조
**원칙: 엑셀 안의 수식 열 값은 신뢰하지 않는다.** 입력 열만 읽고, 계산 열은 프로그램이 아래 공식으로 다시 계산한다. (업로드 파일의 수식 결과가 캐시되어 있지 않을 수 있음.)
행 수는 고정이 아니다. 각 시트에서 첫 열(키 열)이 비어 있지 않은 행만 데이터로 인식한다. 입력값이 전부 비어 있는 행은 "미입력 행"으로 분류한다(오류 아님).

### 시트 1. `README_활용안내` — 무시(읽지 않음). 존재 여부만 체크.

### 시트 2. `월별_판매실적`
| 열 | 필드 | 구분 |
|---|---|---|
| A | 기준월 | 입력(키, `YYYY-MM`) |
| B | 브랜드 | 입력 |
| C | 총매출_원 | 입력 |
| D | 전년동월매출_원 | 입력 |
| E | YoY | 계산 `C/D - 1` (C·D 공란 또는 D=0이면 공란) |
| F | 주문건수 | 입력 |
| G | 판매수량 | 입력 |
| H | 객단가_원 | 계산 `C/F` (F 공란·0이면 공란) |
| I | 환불액_원 | 입력 |
| J | 순매출_원 | 계산 `C - (I 또는 0)` (C 공란이면 공란) |
| K | 비고 | 입력 |

### 시트 3. `상품별_성과`
| 열 | 필드 | 구분 |
|---|---|---|
| A | 기준월 | 입력(키) |
| B | SKU | 입력(키) |
| C | 상품명 | 입력 |
| D | 카테고리 | 입력 |
| E | 판매수량 | 입력 |
| F | 판매매출_원 | 입력 |
| G | 할인액_원 | 입력 |
| H | 반품금액_원 | 입력 |
| I | 순매출_원 | 계산 `F - G - H` (G·H 공란은 0, F 공란이면 공란) |
| J | 매출비중 | 계산 `I / (같은 기준월 I 합계)` |
| K | 재고수량 | 입력 |
| L | 평점 | 입력 |

### 시트 4. `광고_마케팅`
| 열 | 필드 | 구분 |
|---|---|---|
| A | 기준월 | 입력(키) |
| B | 캠페인ID | 입력(키) |
| C | 채널 | 입력 (예: 검색광고, SNS 등) |
| D | 목표 | 입력 (예: 전환, 인지 등) |
| E | 광고비_원 | 입력 |
| F | 노출수 | 입력 |
| G | 클릭수 | 입력 |
| H | CTR | 계산 `G/F` |
| I | CPC_원 | 계산 `E/G` |
| J | 광고기여주문 | 입력 |
| K | 광고기여매출_원 | 입력 |
| L | CVR | 계산 `J/G` |
| M | CPA_원 | 계산 `E/J` |
| N | ROAS | 계산 `K/E` |

### 시트 5. `유입_전환`
| 열 | 필드 | 구분 |
|---|---|---|
| A | 기준월 | 입력(키) |
| B | 유입경로 | 입력(키) |
| C | 방문수 | 입력 |
| D | 상품상세조회 | 입력 |
| E | 장바구니추가 | 입력 |
| F | 구매건수 | 입력 |
| G | 구매매출_원 | 입력 |
| H | 상세조회율 | 계산 `D/C` |
| I | 장바구니율 | 계산 `E/D` |
| J | 구매전환율 | 계산 `F/C` |
| K | 방문당매출_원 | 계산 `G/C` |

### 시트 6. `프로모션`
| 열 | 필드 | 구분 |
|---|---|---|
| A | 프로모션ID | 입력(키) |
| B | 시작일 | 입력 (`YYYY-MM-DD` 문자열 또는 엑셀 날짜 serial — 둘 다 처리) |
| C | 종료일 | 입력 (동일) |
| D | 프로모션명 | 입력 |
| E | 대상상품 | 입력 (상품별_성과의 상품명과 매칭) |
| F | 유형 | 입력 |
| G | 정가_원 | 입력 |
| H | 할인가_원 | 입력 |
| I | 할인율 | 계산 `1 - H/G` |
| J | 집행비용_원 | 입력 |
| K | 주문수 | 입력 |
| L | 매출액_원 | 계산 `H × K` |
| M | 성과메모 | 입력 |

### 시트 7. `월별_KPI` — 읽지 않고 **프로그램이 직접 생성**한다. 기준월별로:
- 총매출 = 월별_판매실적 C 합계 (값이 하나도 없으면 공란)
- YoY = 해당 월 월별_판매실적 YoY
- 순매출 = 월별_판매실적 J 합계
- 광고비 = 광고_마케팅 E 합계
- 광고기여매출 = 광고_마케팅 K 합계
- 전체 CPC = 광고비 합 / 클릭수 합
- 전체 CTR = 클릭수 합 / 노출수 합
- 광고 CVR = 광고기여주문 합 / 클릭수 합
- 전체 ROAS = 광고기여매출 합 / 광고비 합
- 광고 CPA = 광고비 합 / 광고기여주문 합
> 주의: 채널 합계 지표는 행별 비율의 평균이 아니라 **분자 합 / 분모 합**으로 계산한다.

### 시트 8. `데이터사전` — 존재하면 읽어서 "도움말" 탭에 표로 보여준다(시트, 필드명, 의미, 단위/형식, 계산 기준, 주의사항).

### 공통 계산 규칙
- 분모가 공란·0이거나 분자가 공란이면 결과는 `null`(화면에는 "–").
- 숫자 셀이 문자열이면 `,`, `₩`, `원`, 공백, `%`를 제거하고 파싱. 파싱 실패 시 검증 오류로 기록.
- 기준월이 엑셀 날짜 serial·Date로 들어오면 `YYYY-MM`으로 정규화.

## 3. 기능 명세

### 3-1. 업로드 & 구조 검증
- 드래그앤드롭 + 파일 선택. `.xlsx`만 허용.
- 업로드 직후 **검증 리포트** 모달/패널을 표시:
  - 시트 존재 여부 (필수: 시트 2~6. 7·8은 선택)
  - 헤더 일치 여부: 시트별로 기대 헤더와 실제 헤더를 비교해 누락/순서 다름/이름 다름을 표시. 헤더는 이름으로 매칭(공백·대소문자 무시)하고 순서는 경고만.
  - 행 단위 검증 (오류=빨강, 경고=주황), 각 항목은 "시트 / 행번호 / 필드 / 값 / 사유":
    - 오류: 기준월 형식 불일치, 숫자 필드에 비숫자, 음수 금액·수량, 키 중복(같은 기준월+SKU, 기준월+캠페인ID, 기준월+유입경로, 프로모션ID)
    - 경고: 클릭수 > 노출수, 구매건수 > 방문수, 장바구니추가 > 상품상세조회, 할인가 > 정가, 종료일 < 시작일, 환불액 > 총매출, 평점이 0~5 범위 밖, 프로모션 대상상품이 상품별_성과에 없음
  - 요약: 시트별 데이터 행 수 / 미입력 행 수 / 오류 수 / 경고 수
- 오류가 있어도 "오류 행 제외하고 계속" 또는 "그대로 계속" 선택 가능.

### 3-2. 레이아웃
- 상단 바: 프로그램명, 업로드한 파일명, **기준월 선택 드롭다운**(데이터에 존재하는 월, 기본값=가장 최근 월), 엑셀 내보내기 버튼, 다시 업로드 버튼.
- 탭: `대시보드` / `판매` / `상품` / `광고` / `유입·전환` / `프로모션` / `데이터 편집` / `검증 리포트` / `도움말`
- 파일 업로드 전에는 빈 상태 화면(업로드 안내 + 템플릿 시트 구조 요약).

### 3-3. 대시보드 탭
- KPI 카드 6개(선택 월 기준): 총매출, 매출 YoY, 순매출, 광고비, ROAS, 광고 CPA. 각 카드에 **전월 대비 증감**(▲▼, 색상: 매출·ROAS는 상승=긍정, 광고비·CPA·CPC는 상승=부정).
- 차트:
  1. 월별 총매출(막대) + 전년동월매출(선) 겹침
  2. 월별 광고비(막대) + ROAS(선, 보조축)
  3. 선택 월 채널별 광고비 비중(가로 막대)
- 이상치 알림 박스: 선택 월에서 전월 대비 ±30% 이상 변동한 지표 목록(임계값은 설정에서 변경 가능).
- 안내 문구 고정: "광고기여매출과 실제 판매매출은 집계 기준이 달라 합산하지 않습니다."

### 3-4. 판매 탭
- 월별_판매실적 테이블(계산 열 포함, 계산 열은 배경색 구분).
- 월별 객단가·주문건수 추이 차트, 환불률(환불액/총매출) 추이.

### 3-5. 상품 탭
- 선택 월 상품 테이블: 순매출 내림차순, 매출비중 막대 인라인 표시.
- 파레토 차트(누적 매출비중 선 + 80% 기준선).
- 카테고리별 순매출 비중.
- 경고 표시: 반품률(반품금액/판매매출) 상위, 할인율(할인액/판매매출) 상위, **재고 위험**(재고수량 / 최근 월 판매수량 < 1개월분이면 "품절 위험", > 6개월분이면 "과잉 재고").
- SKU 클릭 시 해당 SKU의 월별 추이 상세.

### 3-6. 광고 탭
- 필터: 기준월(복수 선택), 채널, 목표.
- 캠페인 테이블(CTR, CPC, CVR, CPA, ROAS 계산 포함).
- 채널별 월 추이 차트: 지표 선택(CPC/CTR/CVR/ROAS/CPA).
- **CPC 변동 분해**: 선택 채널의 전월 대비 CPC 변화를 "광고비 변화율"과 "클릭수 변화율"로 나눠 텍스트로 설명. 예: "검색광고 CPC +18.2% — 광고비 +5.1%, 클릭수 −11.1%. 클릭 감소가 주원인."
- 산점도: x=광고비, y=ROAS, 점=캠페인.

### 3-7. 유입·전환 탭
- 선택 월 유입경로별 퍼널(방문 → 상세조회 → 장바구니 → 구매) 가로 막대 퍼널, 단계별 전환율과 이탈률 표기.
- 가장 이탈이 큰 단계를 경로별로 하이라이트.
- 경로별 구매전환율·방문당매출 월 추이.

### 3-8. 프로모션 탭
- 프로모션 목록 + 타임라인(간트 형태, 월 축).
- 각 프로모션: 할인율, 매출액(할인가×주문수), **ROI = (매출액 − 집행비용) / 집행비용**, 주문당 비용.
- 대상상품을 상품별_성과와 매칭해, 프로모션 시작 월과 직전 월의 해당 상품 순매출·판매수량 비교(데이터 없으면 "비교 불가").
- 할인율 vs ROI 산점도.

### 3-9. 데이터 편집 탭
- 시트 선택 → 편집 가능한 표(입력 열만 편집 가능, 계산 열은 읽기 전용·자동 갱신).
- 행 추가 / 행 삭제 / 실행 취소(최소 20단계).
- 편집 즉시 재검증 + 모든 탭 재계산.
- 변경된 셀은 표시(점 또는 배경색), "변경사항 n건" 카운터.

### 3-10. 엑셀 내보내기
- 템플릿과 **같은 시트명·같은 헤더 순서**로 .xlsx 생성.
- 계산 열에는 원래 템플릿과 같은 엑셀 수식을 다시 넣는다(행 번호에 맞게). 예: 월별_판매실적 E열 `=IF(OR(C2="",D2="",D2=0),"",C2/D2-1)`. 월별_KPI 시트도 SUMIF 수식으로 재생성하되, 범위는 실제 데이터 행 수에 맞춘다.
- 옵션: "수식 대신 계산된 값으로 내보내기".
- 파일명: `원본파일명_수정_YYYYMMDD.xlsx`.
- 각 테이블 화면에 "CSV로 복사" 버튼.

### 3-11. 여러 파일 누적(병합)
- "파일 추가" 버튼으로 두 번째 이후 파일을 기존 데이터에 병합.
- 키가 겹치는 행: 덮어쓰기 / 기존 유지 / 행별 선택 중 고르게 하고, 병합 결과 요약(추가 n, 갱신 n, 건너뜀 n) 표시.

### 3-12. 월간 요약 리포트
- 버튼 클릭 시 선택 월 요약을 인쇄용 레이아웃으로 표시(`@media print` 최적화): KPI 카드, 주요 차트 3개, 자동 생성 코멘트.
- 자동 코멘트는 규칙 기반 문장 생성(외부 AI 호출 없음): 매출 YoY, 최고/최저 ROAS 채널, 매출비중 1위 상품, 이탈이 가장 큰 퍼널 단계, 이상치 목록을 문장으로 조합.
- (선택) "AI 분석용 프롬프트 복사" 버튼: 선택 월 집계 데이터를 JSON + 분석 지시문으로 만들어 클립보드에 복사(사용자가 다른 AI에 붙여넣어 쓰는 용도).

## 4. 코드 구조 요구사항
- 하나의 `<script>` 안에서 모듈처럼 구분:
  - `SCHEMA` — 시트별 필드 정의(이름, 타입: month/text/int/money/ratio/date/rating, 입력/계산 여부, 키 여부, 계산 함수). **검증·계산·테이블 렌더·내보내기가 모두 이 SCHEMA 하나를 기준으로 동작**하게 해서, 템플릿 열이 바뀌면 SCHEMA만 고치면 되도록.
  - `parser` — SheetJS로 읽기, 헤더 매칭, 값 정규화
  - `validator` — 오류/경고 생성
  - `calc` — 행 단위 계산 + 월별 KPI 집계 (순수 함수)
  - `store` — 단일 상태 객체 + 변경 시 구독자 알림 + undo 스택
  - `views` — 탭별 렌더 함수
  - `charts` — Chart.js 인스턴스 생성/파기 관리(탭 전환·재렌더 시 메모리 누수 없도록 destroy)
  - `exporter` — xlsx/CSV 내보내기
- 금액 계산은 정수 원 단위로, 비율 표시는 소수 1자리.
- 모든 사용자 입력/셀 값은 DOM에 넣을 때 `textContent` 사용(innerHTML로 셀 값 삽입 금지).

## 5. 디자인
- 차분한 업무용 톤. 템플릿 헤더 색과 맞춰 포인트 컬러는 보라 계열(예: `#6B4FBB`), 상승=초록, 하락=빨강은 증감 표시에만 제한적으로 사용.
- CSS 변수로 색 토큰 정의, 다크 모드 대응.
- 표: 헤더 고정(sticky), 숫자 우측 정렬, 계산 열은 연한 배경, 정렬·검색 가능.
- 차트 색은 채널/카테고리별로 일관되게(같은 채널은 모든 차트에서 같은 색).

## 6. 테스트용 샘플 데이터
- 빈 상태 화면에 "샘플 데이터로 체험" 버튼: 코드 안에 내장한 가상 데이터(2025-01~2026-09 판매, 2026-01~09 상품 6개·광고 캠페인 4개 채널·유입경로 4개, 프로모션 9개)를 SCHEMA 구조로 생성해 로드한다. 브랜드명은 "CMSLAB 교육용 가상브랜드".
- 샘플에 일부러 검증 경고가 2~3개 나오도록 이상값을 포함.

## 7. 완료 기준 (스스로 점검 후 제출)
1. 템플릿 빈 파일 업로드 → 오류 없이 "미입력 행"으로 인식, 대시보드는 빈 상태 안내.
2. 샘플 데이터 → 모든 탭이 차트와 함께 렌더, 콘솔 에러 없음.
3. 계산 결과가 엑셀 원본 수식 결과와 일치(YoY, CTR, CPC, CVR, CPA, ROAS, 매출비중, 할인율, 월별 KPI 집계).
4. 편집 → 재계산 → 내보내기 → 그 파일을 다시 업로드했을 때 동일한 데이터 복원.
5. 헤더 하나 이름을 바꾼 파일 → 검증 리포트에 정확히 표시.
6. 모바일 폭(360px)에서 가로 스크롤 없이 사용 가능(표 영역 내부 스크롤은 허용).

## 8. 출력 형식
- 완성된 `index.html` 전체 코드를 하나의 코드 블록으로 출력.
- 코드 앞에 구현한 기능 목록과, 명세 중 구현하지 못했거나 단순화한 부분이 있으면 그 이유를 짧게 적어라.
- 코드가 너무 길어 한 번에 출력이 어렵다면, 1차로 3-1~3-3, 3-9~3-10을 완성하고 나머지 탭은 다음 응답에서 이어서 추가할 수 있도록 구조를 잡아라.

AI API

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