docs: [rd] 디자인 인사이트 기능 문서 추가

- features/rd/design-insight.md 신규 작성 (아키텍처, 카드/카테고리 체계, CSS 와이어프레임, AI 프롬프트 복사) - features/rd/README.md에 디자인 인사이트 메뉴·컨트롤러·관련 문서 등록 - INDEX.md에 디자인 인사이트 문서 등록
2026-03-08 11:22:09 +09:00
parent ba68e138e6
commit 8e700fcd64
3 changed files with 254 additions and 2 deletions
--- a/sam/docs/INDEX.md
+++ b/sam/docs/INDEX.md
@@ -147,8 +147,9 @@ docs/
 | [equipment/README.md](features/equipment/README.md) | 설비관리 (MNG 전용) |
 | [approvals/README.md](features/approvals/README.md) | 결재관리 시스템 (순차결재, 보류/전결/참조/복사재기안) |
 | [planning/README.md](features/planning/README.md) | 주일기업 기획 (견적/프로젝트/사진대지/회의록/AI) |
-| [rd/README.md](features/rd/README.md) | R&D (조직도/AI견적/기획디자인 스토리보드 에디터) |
+| [rd/README.md](features/rd/README.md) | R&D (조직도/AI견적/기획디자인/디자인 인사이트) |
 | [rd/planning-design.md](features/rd/planning-design.md) | 기획디자인 스토리보드 에디터 기술 명세 |
+| [rd/design-insight.md](features/rd/design-insight.md) | 디자인 인사이트 UI/UX 연구 도구 (100종 패턴, AI 프롬프트) |

 ---

--- a/sam/docs/features/rd/README.md
+++ b/sam/docs/features/rd/README.md
@@ -19,6 +19,7 @@ R&D 메뉴는 SAM 플랫폼의 **연구개발 및 내부 도구** 모음이다.
 |------|------|
 | **README.md** (이 문서) | 전체 개요, 메뉴 구조, 컨트롤러 매핑 |
 | [planning-design.md](planning-design.md) | 기획디자인 스토리보드 에디터 기술 명세 |
+| [design-insight.md](design-insight.md) | 디자인 인사이트 UI/UX 연구 도구 (100종 패턴, AI 프롬프트) |

 ### 1.3 하위 메뉴 구조

@@ -33,7 +34,8 @@ R&D
 │   ├── 상세              /rd/ai-quotation/{id}
 │   ├── 편집              /rd/ai-quotation/{id}/edit
 │   └── 문서              /rd/ai-quotation/{id}/document
-└── 기획디자인             /rd/planning-design
+├── 기획디자인             /rd/planning-design
+└── 디자인 인사이트         /rd/design-insight
 ```

 ---
@@ -70,6 +72,7 @@ R&D
 | `editQuotation()` | `GET /rd/ai-quotation/{id}/edit` | AI 견적 편집 |
 | `documentQuotation()` | `GET /rd/ai-quotation/{id}/document` | AI 견적 문서 |
 | `planningDesign()` | `GET /rd/planning-design` | 기획디자인 |
+| `designInsight()` | `GET /rd/design-insight` | 디자인 인사이트 |

 ### 2.3 HTMX 전체 페이지 로드 규칙

@@ -92,12 +95,14 @@ if ($request->header('HX-Request')) {
 | 중대재해처벌법 점검 | Blade (정적) | 없음 | 없음 | 운영 중 |
 | AI 견적 | Blade + Alpine.js | AiQuotationService | ai_quotations | 운영 중 |
 | **기획디자인** | **Blade + Alpine.js (SPA)** | **없음 (localStorage)** | **없음** | **운영 중** |
+| **디자인 인사이트** | **Blade + Alpine.js (SPA)** | **없음 (localStorage)** | **없음** | **운영 중** |

 ---

 ## 4. 관련 문서

 - [기획디자인 스토리보드 에디터](planning-design.md) — 블록 에디터, 서식, 인쇄, 내보내기
+- [디자인 인사이트](design-insight.md) — UI/UX 연구 도구 (100종 패턴, AI 프롬프트 복사)
 - [조직도 관리 기술문서](../../projects/org-chart/) — 조직도 시스템 상세 (별도 프로젝트 문서)

 ---
--- a/sam/docs/features/rd/design-insight.md
+++ b/sam/docs/features/rd/design-insight.md
@@ -0,0 +1,246 @@
+# 디자인 인사이트 — UI/UX 연구 도구
+
+> **작성일**: 2026-03-08
+> **상태**: 운영 중
+> **라우트**: `GET /rd/design-insight`
+> **뷰**: `resources/views/rd/design-insight/index.blade.php`
+
+---
+
+## 1. 개요
+
+### 1.1 목적
+
+디자인 인사이트는 UI/UX 패턴을 **수집·분석·비교**하는 연구 도구이다. 외부 서비스의 UI 레퍼런스를 카드 형태로 정리하고, CSS 와이어프레임 미리보기와 AI 프롬프트 생성 기능으로 디자인 의사결정을 지원한다.
+
+### 1.2 핵심 기능
+
+| 기능 | 설명 |
+|------|------|
+| 카드 관리 | 레퍼런스/분석/패턴/Before-After 4종 카드 CRUD |
+| 프로젝트 관리 | 다중 프로젝트, localStorage 저장 |
+| CSS 와이어프레임 | 100종 UI 패턴의 순수 CSS 미니 와이어프레임 |
+| 프리셋 템플릿 | 인기 UI 패턴 100종 원클릭 불러오기 |
+| AI 프롬프트 복사 | 카드 정보를 AI용 구조화 프롬프트로 변환·복사 |
+| 3종 뷰 | 보드(카테고리별)/갤러리(그리드)/리스트 뷰 |
+| JSON 내보내기/가져오기 | 프로젝트 데이터 백업/복원 |
+
+---
+
+## 2. 아키텍처
+
+### 2.1 기술 스택
+
+| 계층 | 기술 | 설명 |
+|------|------|------|
+| 뷰 | Blade + Alpine.js | 단일 파일 SPA |
+| 컨트롤러 | `RdController::designInsight()` | HX-Redirect 패턴 |
+| 저장 | localStorage | `di_projects`, `di_current` 키 사용 |
+| 백엔드 | 없음 | 서버 API 호출 없이 클라이언트 단독 동작 |
+| 스타일 | 커스텀 CSS 변수 | `--di-*` 접두사 (Tailwind 미사용) |
+
+### 2.2 데이터 구조
+
+```json
+{
+  "id": "di_1709000000_abc123",
+  "title": "프로젝트명",
+  "cards": [
+    {
+      "id": "di_1709000001_def456",
+      "type": "pattern",
+      "title": "KPI 대시보드",
+      "category": "dashboard",
+      "rating": 5,
+      "tags": ["대시보드", "KPI", "통계"],
+      "memo": "레퍼런스 설명",
+      "guidelines": "디자인 가이드라인",
+      "usedIn": ["Stripe", "Shopify"],
+      "components": [
+        { "name": "KPI 요약 카드", "required": true },
+        { "name": "필터 영역", "required": false }
+      ],
+      "image": null,
+      "createdAt": "2026-03-08T00:00:00.000Z"
+    }
+  ],
+  "createdAt": "2026-03-08T00:00:00.000Z",
+  "updatedAt": "2026-03-08T00:00:00.000Z"
+}
+```
+
+---
+
+## 3. 카드 유형 (4종)
+
+| 코드 | 라벨 | 용도 |
+|------|------|------|
+| `reference` | 레퍼런스 | 외부 서비스 UI 스크린샷 수집 |
+| `analysis` | 분석 | CRAP 원칙 등 UX 분석 (8가지 디자인 원칙 평가) |
+| `pattern` | 패턴 | 재사용 가능한 UI 패턴 정의 |
+| `comparison` | Before/After | 개선 전후 비교 (이미지 2장) |
+
+---
+
+## 4. 카테고리 (8종)
+
+| 코드 | 라벨 | 아이콘 |
+|------|------|--------|
+| `dashboard` | 대시보드 | 📊 |
+| `list` | 목록 | 📋 |
+| `form` | 상세/폼 | 📝 |
+| `modal` | 모달/팝업 | 💬 |
+| `navigation` | 네비게이션 | 🧭 |
+| `auth` | 로그인 | 🔐 |
+| `report` | 보고서 | 📄 |
+| `etc` | 기타 | 📎 |
+
+---
+
+## 5. CSS 와이어프레임 시스템
+
+### 5.1 동작 원리
+
+`getWireframe(card)` 함수가 카드의 `title`과 `tags`를 키워드 매칭하여 해당 패턴에 맞는 순수 CSS/HTML 미니 와이어프레임을 반환한다.
+
+```javascript
+getWireframe(card) {
+    const t = (card.title || '').toLowerCase();
+    const tags = (card.tags || []).join(' ').toLowerCase();
+    const key = t + ' ' + tags;
+
+    if (key.includes('kpi') || key.includes('대시보드') && key.includes('통계')) return `...`;
+    // ... 100종 패턴 매칭
+    return `기본 와이어프레임 (매칭 안 됨)`;
+}
+```
+
+### 5.2 프리셋 100종 분포
+
+| 카테고리 | 패턴 수 | 대표 패턴 |
+|---------|---------|----------|
+| 대시보드 | 10 | KPI, 실시간 모니터링, 게이지/미터, 히트맵, 퍼널 |
+| 목록 | 10 | 데이터 테이블, 칸반 보드, 마스터-디테일, 피벗 테이블 |
+| 상세/폼 | 16 | 프로필, 설정, 위지윅 에디터, 멀티스텝 폼, 태그 입력 |
+| 모달/팝업 | 10 | 확인 다이얼로그, 라이트박스, 바텀시트, 컨텍스트 메뉴 |
+| 네비게이션 | 10 | 사이드바, 탭, 브레드크럼, FAB, 앵커 스크롤 |
+| 로그인 | 8 | 로그인 폼, 회원가입, 비밀번호 재설정, RBAC, API 키 |
+| 보고서 | 9 | 인쇄용 보고서, 간트 차트, 조직도, 워터폴, 리포트 빌더 |
+| 기타 | 27 | 댓글, 에러 페이지, FAQ, 캐러셀, 파일 매니저 등 |
+
+---
+
+## 6. AI 프롬프트 복사 기능
+
+### 6.1 목적
+
+카드에 정리된 UI 패턴 정보를 **AI가 이해할 수 있는 구조화된 마크다운 프롬프트**로 변환하여 클립보드에 복사한다. 복사한 프롬프트를 AI(Claude, ChatGPT 등)에 붙여넣으면 해당 스타일로 코드를 생성할 수 있다.
+
+### 6.2 UI 위치
+
+카드 상세 모달 상단, **편집** 버튼 왼쪽에 보라색 `✨ AI 프롬프트` 버튼으로 배치.
+
+### 6.3 프롬프트 구조
+
+`copyAiPrompt(card)` 함수가 카드 데이터를 다음 구조로 변환한다:
+
+```markdown
+## UI 패턴 구현 요청
+
+아래 UI/UX 패턴 레퍼런스를 참고하여, 동일한 스타일과 구조로 코드를 작성해 주세요.
+
+---
+
+### 패턴 정보
+- **패턴명**: {title}
+- **카테고리**: {category label}
+- **완성도 평점**: ★★★☆☆ ({rating}/5)
+- **키워드**: {tags}
+
+### 레퍼런스 설명
+{memo}
+
+### 실제 사용처 (벤치마킹 대상)
+- {usedIn[0]}
+- {usedIn[1]}
+
+### 필수 구성 요소
+
+**필수 (반드시 포함)**:
+- ✅ {required component}
+
+**선택 (권장)**:
+- ○ {optional component}
+
+### 디자인 가이드라인
+{guidelines}
+
+### 개선 제안
+{suggestion}
+
+### 기대 효과
+{effect}
+
+---
+
+### 구현 요구사항
+
+1. **기술 스택**: HTML + Tailwind CSS (또는 프로젝트에 맞는 프레임워크)
+2. **반응형**: 모바일/태블릿/데스크톱 대응
+3. **접근성**: 시맨틱 태그, ARIA 라벨, 키보드 네비게이션
+4. **인터랙션**: hover, focus, active 상태 포함
+5. **위 구성 요소를 모두 포함**하되, 실제 서비스처럼 자연스러운 더미 데이터 사용
+6. **위 가이드라인을 충실히 반영**하여 UX 완성도를 높일 것
+```
+
+### 6.4 포함 필드 매핑
+
+| 카드 필드 | 프롬프트 섹션 | 조건 |
+|----------|-------------|------|
+| `title` | 패턴 정보 > 패턴명 | 항상 |
+| `category` | 패턴 정보 > 카테고리 | 항상 (라벨로 변환) |
+| `rating` | 패턴 정보 > 평점 | 항상 (별점으로 변환) |
+| `tags` | 패턴 정보 > 키워드 | 태그가 있을 때만 |
+| `memo` | 레퍼런스 설명 | 값이 있을 때만 |
+| `usedIn` | 실제 사용처 | 배열이 비어있지 않을 때만 |
+| `components` | 필수 구성 요소 | 배열이 비어있지 않을 때만 |
+| `guidelines` | 디자인 가이드라인 | 값이 있을 때만 |
+| `suggestion` | 개선 제안 | 값이 있을 때만 |
+| `effect` | 기대 효과 | 값이 있을 때만 |
+| `principles` | UX 원칙 | `type === 'analysis'`일 때만 |
+
+---
+
+## 7. 뷰 모드 (3종)
+
+| 모드 | 설명 | 정렬 |
+|------|------|------|
+| `board` | 카테고리별 컬럼 그룹핑 | 카테고리 → 생성순 |
+| `gallery` | 그리드 갤러리 (와이어프레임 강조) | 필터 순 |
+| `list` | 테이블형 리스트 | 필터 순 |
+
+---
+
+## 8. 파일 구조
+
+```
+resources/views/rd/design-insight/
+└── index.blade.php          # 단일 파일 SPA (~6,200줄)
+    ├── <style>               # 커스텀 CSS (~700줄)
+    ├── HTML 템플릿            # Toolbar, 사이드바, 카드, 모달 (~1,300줄)
+    ├── Alpine.js x-data      # 상태 관리, CRUD, 필터 (~2,000줄)
+    ├── getWireframe()        # CSS 와이어프레임 100종 (~2,000줄)
+    └── loadPresetTemplates() # 프리셋 100종 데이터 (~1,200줄)
+```
+
+---
+
+## 관련 문서
+
+- [R&D 메뉴 개요](README.md) — 전체 R&D 메뉴 구조
+- [기획디자인 스토리보드 에디터](planning-design.md) — 유사한 단일 파일 SPA 패턴
+- [디자인 인사이트 기획서](../../plans/design-insight-menu-plan.md) — 초기 기획 문서
+
+---
+
+**최종 업데이트**: 2026-03-08