# InsuRo 이미지 편집기 — 구현 계획서

**버전**: v1.0
**작성일**: 2026-04-25
**프로젝트 경로**: `/home/jay/projects/InsuRo/`
**작업 레벨**: Lv.3
**라우트**: `/tools/image-editor`

---

## 1. 목표

InsuRo "분석 & 도구" 메뉴에 웹 기반 이미지 편집기 추가. 보험 업무 특화 (서류 보정, 개인정보 마스킹, 워터마크 처리) + 범용 이미지 편집 기능.

---

## 2. 전체 기능 목록 (23개)

### 기본 편집
1. 이미지 자르기 (크롭) — 자유/비율 고정 (1:1, 4:3, 16:9, A4)
2. 크기 변경 (리사이즈) — 픽셀/퍼센트 지정
3. 회전 — 90/180/270/자유각도
4. 좌우/상하 반전
5. EXIF 메타데이터 제거
6. 이미지 포맷 변환 — HEIC→JPG, PNG→JPG 등
7. 다운로드 포맷 선택 — PNG/JPG/WebP + 품질 조절
8. Undo/Redo — 편집 되돌리기/다시하기

### 필터 (픽셀 70%+ 변경)
9. 밝기/대비 조정
10. 색온도 (따뜻하게/차갑게)
11. 샤프닝/블러
12. 채도 조정
13. 그레이스케일
14. 세피아
15. 비네팅
16. 노이즈 추가/제거
17. HDR 효과
18. 감마 보정

### 오버레이/삽입
19. 텍스트 삽입 — 폰트/색상/크기/굵기
20. 스티커/이모티콘/이모지/로고 삽입 — 드래그로 위치/크기 조정
21. 드로잉/마크업 — 펜, 형광펜, 화살표, 네모/동그라미
22. 모자이크/블러 영역 — 드래그로 영역 선택 → 마스킹
23. 프레임/테두리 — 둥근 모서리, 그림자, 색상 테두리
24. 워터마크 추가 — 텍스트/로고 반투명 삽입

### AI/고급 기능
25. 워터마크 삭제 (★1순위) — 반투명 워터마크 감지 + 인페인팅
26. 배경 제거 — AI 기반 피사체 분리
27. 배경 투명 — 배경 제거 후 PNG 투명 배경 출력
28. 서류 스캔 보정 — 기울기 자동 교정 + 명암 강화
29. 색상 교체 — 특정 색 → 다른 색

### 특수 기능
30. 콜라주 — 여러 이미지 합치기 (2/4/6분할, 자유배치)
31. 일괄 처리 — 여러 이미지 동시 필터/리사이즈
32. Before/After 비교 — 편집 전후 슬라이더

---

## 3. 기술 스택

- **Canvas 엔진**: fabric.js (v6) — 오브젝트 기반 Canvas, 텍스트/이미지/도형/그룹 지원
- **필터**: fabric.js 내장 필터 + Canvas 2D API 커스텀 필터
- **배경 제거**: @imgly/background-removal (클라이언트 WASM, 서버 불필요)
- **워터마크 삭제**: Canvas 기반 인페인팅 (주변 픽셀 블렌딩) + 선택 영역 복원
- **EXIF 처리**: exifr 라이브러리
- **이미지 포맷**: browser-image-compression + canvas.toBlob()
- **UI**: Shadcn UI + Tailwind (InsuRo 기존 디자인 시스템)

---

## 4. Phase 구조

### Phase 1: 에디터 셸 + 기본 편집 (1팀)
- fabric.js Canvas 에디터 컴포넌트
- 이미지 로드 (파일 선택 + 드래그앤드롭)
- 크롭, 리사이즈, 회전, 반전
- 필터 12종 (밝기~감마)
- Undo/Redo 히스토리
- 다운로드 (PNG/JPG/WebP + 품질)
- EXIF 제거, 포맷 변환
- Before/After 슬라이더
- 라우트 등록 (/tools/image-editor)

### Phase 2: 오버레이 기능 (Phase 1 완료 후)
- 텍스트 삽입 (폰트/색상/크기)
- 스티커/이모지/로고 삽입 (드래그 이동/크기 조절)
- 드로잉/마크업 (자유 그리기, 화살표, 도형)
- 모자이크/블러 영역 (선택 → 마스킹)
- 프레임/테두리
- 워터마크 추가

### Phase 3: AI/고급 기능 (Phase 1 완료 후, Phase 2와 병렬 가능)
- 워터마크 삭제 (인페인팅)
- 배경 제거 + 투명 배경 (@imgly/background-removal)
- 서류 스캔 보정
- 색상 교체

### Phase 4: 특수 기능 (Phase 1 완료 후)
- 콜라주 (템플릿 기반 다중 이미지 배치)
- 일괄 처리 (여러 이미지 동시 변환)

---

## 5. 플랜 게이팅

- Free: 기본 편집 (크롭, 리사이즈, 회전, 반전, 필터) — 워터마크 포함
- 베이직+: 오버레이 + 다운로드 포맷 선택
- 히든: AI 기능 (워터마크 삭제, 배경 제거, 스캔 보정)

---

## 6. 검증 기준

- Phase 1: 이미지 로드 → 크롭 → 필터 → 다운로드 전체 플로우 동작
- Phase 2: 텍스트/스티커 삽입 후 다운로드에 반영 확인
- Phase 3: 배경 제거 결과물 품질 확인, 워터마크 삭제 결과물 확인
- Phase 4: 4장 콜라주 생성 확인
- 전체: npm run build 성공, 타입 에러 0건