docs: [plans] UI/UX 디자인 인사이트 연구 메뉴 기획서 작성

- 기획디자인 모티브의 UI/UX 연구 도구 기획 - 4종 인사이트 카드 (레퍼런스/분석/패턴/Before-After) - CRAP 디자인 원칙 체크리스트 - 4 Phase 개발 로드맵
2026-03-08 09:43:17 +09:00
parent 95b9efbcc5
commit ba68e138e6
2 changed files with 612 additions and 0 deletions
--- a/sam/docs/INDEX.md
+++ b/sam/docs/INDEX.md
@@ -267,6 +267,7 @@ docs/
 | [leave-management-plan.md](plans/leave-management-plan.md) | 휴가관리 모듈 개발 계획 (연차 발생/신청/승인/정책) |
 | [approval-management-system-plan.md](plans/approval-management-system-plan.md) | 결재관리 시스템 기획서 (전자결재 전체 설계: 기안~회수, DB 설계, 17개 양식, 4 Phase) |
 | [block-builder-evolution-plan.md](plans/block-builder-evolution-plan.md) | 양식 디자이너(Block Builder) 고도화 계획 (6 Phase: 렌더러→결재→동적테이블→수식→인쇄→Legacy 대체) |
+| [design-insight-menu-plan.md](plans/design-insight-menu-plan.md) | UI/UX 디자인 인사이트 연구 메뉴 기획서 (레퍼런스 수집, 화면 분석, 패턴 라이브러리, Before/After) |

 ### features/ - 기능별 문서

--- a/sam/docs/plans/design-insight-menu-plan.md
+++ b/sam/docs/plans/design-insight-menu-plan.md
@@ -0,0 +1,611 @@
+# UI/UX 디자인 인사이트 연구 메뉴 기획서
+
+> **작성일**: 2026-03-08
+> **상태**: 기획 중
+> **라우트**: `/rd/design-insight`
+> **모티브**: 기획디자인 스토리보드 에디터 (`/rd/planning-design`)
+
+---
+
+## 1. 개요
+
+### 1.1 배경
+
+기획디자인 메뉴는 ERP 화면을 **설계(Output)**하는 도구다.
+그런데 좋은 설계를 하려면 **연구(Input)**가 먼저 필요하다.
+
+```
+연구 (이 메뉴)              설계 (기획디자인)
+┌─────────────────┐        ┌─────────────────┐
+│ 레퍼런스 수집    │        │ 스토리보드 작성   │
+│ 패턴 분석       │ ──→    │ 와이어프레임 설계  │
+│ 인사이트 정리    │        │ HTML 내보내기     │
+│ 디자인 원칙 학습  │        │ 인쇄             │
+└─────────────────┘        └─────────────────┘
+```
+
+현재 SAM ERP 화면을 만들 때 참고할 디자인 패턴이나 인사이트를 체계적으로 관리하는 도구가 없다. 외부 서비스(Dribbble, Mobbin 등)를 참고하지만 **우리 ERP에 맞는 패턴**을 축적하는 곳이 없다.
+
+### 1.2 목적
+
+SAM ERP 화면 개발에 필요한 **UI/UX 디자인 인사이트를 수집·분석·축적**하는 연구 도구
+
+### 1.3 핵심 가치
+
+| 가치 | 설명 |
+|------|------|
+| **패턴 축적** | "이 화면은 왜 좋은가?" — 반복 사용할 패턴을 라이브러리화 |
+| **Before/After** | 개선 전후를 비교하여 디자인 결정의 근거를 기록 |
+| **팀 학습** | 디자인 인사이트를 팀원과 공유, 일관된 UI 품질 유지 |
+| **빠른 참조** | 새 화면 설계 시 기존 패턴을 즉시 찾아 재사용 |
+
+---
+
+## 2. 기술 아키텍처
+
+### 2.1 기획디자인과 동일한 패턴
+
+기획디자인 메뉴의 성공 패턴을 그대로 적용한다.
+
+| 항목 | 선택 | 이유 |
+|------|------|------|
+| 프레임워크 | Alpine.js 단일 파일 SPA | 서버 API 없이 즉시 사용, MNG 기존 스택 |
+| 저장 | localStorage | 서버 의존성 제거, 즉시 사용 가능 |
+| 뷰 파일 | `resources/views/rd/design-insight/index.blade.php` | 단일 파일 구조 |
+| 컨트롤러 | `RdController@designInsight()` | 기존 R&D 컨트롤러 확장 |
+| 이미지 | Base64 Data URL (localStorage) | 서버 업로드 불필요 |
+
+### 2.2 라우트
+
+```php
+// routes/web.php — R&D 그룹 내 추가
+Route::get('/rd/design-insight', [RdController::class, 'designInsight'])
+    ->name('rd.design-insight');
+```
+
+### 2.3 localStorage 키
+
+| 키 | 용도 |
+|----|------|
+| `di_projects` | 연구 프로젝트 목록 (메인 저장소) |
+| `di_current` | 현재 프로젝트 ID |
+| `di_patterns` | 디자인 패턴 라이브러리 (프로젝트 간 공유) |
+
+---
+
+## 3. 화면 구조
+
+### 3.1 전체 레이아웃
+
+```
+┌──────────────────────────────────────────────────────────────┐
+│  툴바: [프로젝트명] [저장] [내보내기]     [뷰: 보드│리스트│갤러리] │
+├──────────────────────────────────────────────────────────────┤
+│  카테고리 탭: 전체 │ 레퍼런스 │ 분석 │ 패턴 │ Before/After      │
+├────────┬─────────────────────────────────────────────────────┤
+│        │                                                     │
+│ 사이드  │  메인 콘텐츠 영역                                    │
+│ 바     │                                                     │
+│        │  ┌─────────┐ ┌─────────┐ ┌─────────┐              │
+│ ◆ 프로  │  │ 인사이트  │ │ 인사이트  │ │ 인사이트  │              │
+│   젝트  │  │ 카드 1   │ │ 카드 2   │ │ 카드 3   │              │
+│   목록  │  │         │ │         │ │         │              │
+│        │  │ 🏷️태그   │ │ 🏷️태그   │ │ 🏷️태그   │              │
+│ ◆ 태그  │  └─────────┘ └─────────┘ └─────────┘              │
+│   필터  │                                                     │
+│        │  ┌─────────┐ ┌─────────┐                           │
+│ ◆ 검색  │  │ 인사이트  │ │ + 새 카드 │                           │
+│        │  │ 카드 4   │ │ 추가     │                           │
+│        │  └─────────┘ └─────────┘                           │
+│        │                                                     │
+├────────┴─────────────────────────────────────────────────────┤
+│  상태바: 카드 12개 │ 패턴 5개 │ 태그 8개                        │
+└──────────────────────────────────────────────────────────────┘
+```
+
+### 3.2 뷰 모드 (3종)
+
+| 뷰 | 설명 | 용도 |
+|----|------|------|
+| **보드 (Board)** | 칸반 스타일 카드 격자 배열 | 전체 현황 파악, 기본 뷰 |
+| **리스트 (List)** | 테이블형 목록 (정렬/필터) | 대량 데이터 관리, 검색 |
+| **갤러리 (Gallery)** | 이미지 중심 큰 썸네일 격자 | 시각적 비교, 레퍼런스 브라우징 |
+
+---
+
+## 4. 인사이트 카드 (핵심 데이터 단위)
+
+### 4.1 카드 유형 (4종)
+
+#### A. 레퍼런스 카드 (Reference)
+
+외부/내부 화면 스크린샷을 수집하고 메모를 남긴다.
+
+```
+┌──────────────────────────────┐
+│ 📷 [스크린샷 이미지]          │
+│                              │
+├──────────────────────────────┤
+│ 📌 Notion 대시보드           │
+│ "카드형 레이아웃이 정보 밀도를  │
+│  유지하면서도 시각적으로 깔끔"  │
+├──────────────────────────────┤
+│ 출처: notion.so              │
+│ 🏷️ 대시보드  카드  레이아웃    │
+│ ⭐⭐⭐⭐☆                     │
+└──────────────────────────────┘
+```
+
+| 필드 | 타입 | 설명 |
+|------|------|------|
+| `image` | string (Base64) | 스크린샷 이미지 |
+| `title` | string | 제목 |
+| `memo` | string | 인사이트 메모 (왜 좋은가/나쁜가) |
+| `source` | string | 출처 (URL, 앱 이름 등) |
+| `tags` | string[] | 태그 배열 |
+| `rating` | number (1-5) | 평점 |
+| `category` | string | 화면 카테고리 |
+
+#### B. 분석 카드 (Analysis)
+
+화면을 분석하고 디자인 원칙을 체크한다.
+
+```
+┌──────────────────────────────┐
+│ 🔍 SAM 수주 목록 화면 분석    │
+├──────────────────────────────┤
+│ [스크린샷 + 어노테이션 오버레이]│
+│   ①→ 검색 영역 너무 넓음      │
+│   ②→ 버튼 정렬 불일치        │
+│   ③→ 여백 불균형             │
+├──────────────────────────────┤
+│ ✅ 정렬 (Alignment)          │
+│ ❌ 대비 (Contrast)           │
+│ ✅ 반복 (Repetition)         │
+│ ⚠️ 근접성 (Proximity)        │
+├──────────────────────────────┤
+│ 개선 제안:                    │
+│ "검색 영역을 접을 수 있게 하고  │
+│  버튼 그룹을 우측 정렬"        │
+│ 🏷️ 목록화면  개선필요         │
+└──────────────────────────────┘
+```
+
+| 필드 | 타입 | 설명 |
+|------|------|------|
+| `image` | string (Base64) | 분석 대상 스크린샷 |
+| `annotations` | Annotation[] | 어노테이션 배열 (마커 번호, 좌표, 텍스트) |
+| `principles` | object | CRAP 원칙 체크 (contrast, repetition, alignment, proximity) |
+| `suggestion` | string | 개선 제안 |
+| `severity` | string | 심각도 (info, warning, critical) |
+
+#### C. 패턴 카드 (Pattern)
+
+반복 사용할 UI 패턴을 템플릿으로 등록한다.
+
+```
+┌──────────────────────────────┐
+│ 📐 검색 + 필터 + 목록 패턴    │
+├──────────────────────────────┤
+│ [패턴 와이어프레임 이미지]      │
+├──────────────────────────────┤
+│ 사용처:                       │
+│  • 수주 목록                  │
+│  • 거래처 목록                 │
+│  • 품목 목록                  │
+├──────────────────────────────┤
+│ 구성 요소:                    │
+│  ☑ 검색바 (상단 고정)         │
+│  ☑ 필터 칩 (접기/펼치기)      │
+│  ☑ 테이블 (정렬 가능)         │
+│  ☑ 페이지네이션 (하단)        │
+│  ☑ 액션 버튼 (우상단)         │
+├──────────────────────────────┤
+│ 🏷️ 목록  CRUD  테이블        │
+│ 📊 사용빈도: ★★★★★ (12회)    │
+└──────────────────────────────┘
+```
+
+| 필드 | 타입 | 설명 |
+|------|------|------|
+| `image` | string (Base64) | 패턴 와이어프레임 |
+| `usedIn` | string[] | 사용처 목록 |
+| `components` | Component[] | 구성 요소 체크리스트 |
+| `guidelines` | string | 사용 가이드라인 |
+| `frequency` | number | 사용 빈도 |
+
+#### D. Before/After 카드 (Comparison)
+
+디자인 개선 전후를 비교한다.
+
+```
+┌──────────────────────────────────────────┐
+│ 🔄 거래처 상세 화면 리뉴얼               │
+├───────────────────┬──────────────────────┤
+│ ❌ Before         │ ✅ After             │
+│ [이전 스크린샷]    │ [개선 스크린샷]       │
+│                   │                      │
+├───────────────────┴──────────────────────┤
+│ 변경 포인트:                              │
+│  1. 탭 구조 → 섹션 접기/펼치기 변경        │
+│  2. 좌우 2컬럼 → 단일 컬럼 (모바일 대응)   │
+│  3. 저장 버튼 하단 고정 → 상단 sticky      │
+├──────────────────────────────────────────┤
+│ 효과: 스크롤 40% 감소, 작업 완료 시간 단축  │
+│ 🏷️ 상세화면  폼  리뉴얼                   │
+└──────────────────────────────────────────┘
+```
+
+| 필드 | 타입 | 설명 |
+|------|------|------|
+| `beforeImage` | string (Base64) | 개선 전 스크린샷 |
+| `afterImage` | string (Base64) | 개선 후 스크린샷 |
+| `changes` | string[] | 변경 포인트 목록 |
+| `effect` | string | 개선 효과 |
+
+### 4.2 공통 필드
+
+모든 카드 유형이 공유하는 기본 필드:
+
+```json
+{
+  "id": "di_1709856000000_abc",
+  "type": "reference",
+  "title": "카드 제목",
+  "createdAt": "2026-03-08T10:00:00",
+  "updatedAt": "2026-03-08T15:30:00",
+  "tags": ["대시보드", "카드", "레이아웃"],
+  "category": "dashboard",
+  "pinned": false,
+  "archived": false
+}
+```
+
+### 4.3 카테고리 (화면 유형별)
+
+| 카테고리 | 코드 | 설명 |
+|---------|------|------|
+| 대시보드 | `dashboard` | 통계, KPI, 차트 화면 |
+| 목록 | `list` | 테이블, 검색, 필터 화면 |
+| 상세/폼 | `form` | 입력, 편집, 상세 보기 |
+| 모달/팝업 | `modal` | 모달 다이얼로그, 확인창 |
+| 네비게이션 | `navigation` | 사이드바, 탭, 메뉴 |
+| 로그인/온보딩 | `auth` | 인증, 초기 설정 |
+| 보고서/인쇄 | `report` | 인쇄용, PDF 출력 화면 |
+| 기타 | `etc` | 분류 불가 |
+
+---
+
+## 5. 기능 상세
+
+### 5.1 이미지 수집
+
+| 기능 | 설명 |
+|------|------|
+| 파일 업로드 | 이미지 파일 선택 (PNG, JPG, GIF) |
+| 클립보드 붙여넣기 | `Ctrl+V`로 스크린샷 즉시 붙여넣기 |
+| 드래그 앤 드롭 | 이미지 파일을 카드 영역에 드롭 |
+
+> **Ctrl+V 붙여넣기가 핵심** — 스크린샷 캡처 후 즉시 카드 생성이 워크플로우의 핵심
+
+### 5.2 어노테이션 (분석 카드)
+
+분석 카드에서 이미지 위에 마커를 추가하여 문제점이나 인사이트를 표시한다.
+
+| 어노테이션 유형 | 설명 |
+|---------------|------|
+| 번호 마커 (①②③) | 이미지 위 클릭 → 번호 자동 증가, 하단 설명과 연동 |
+| 영역 하이라이트 | 드래그로 사각형 영역 표시 (반투명 컬러 오버레이) |
+| 텍스트 메모 | 이미지 위 임의 위치에 짧은 메모 |
+
+> 기획디자인의 번호 마커(marker 블록) + Description 패널 패턴을 재활용
+
+### 5.3 태그 시스템
+
+| 기능 | 설명 |
+|------|------|
+| 자유 태그 | 카드에 자유 태그 추가 (콤마 구분 입력) |
+| 태그 자동 완성 | 기존 태그 목록에서 자동 완성 |
+| 태그 필터 | 사이드바에서 태그 클릭 → 해당 태그 카드만 표시 |
+| 태그 색상 | 카테고리별 자동 색상 배정 |
+
+### 5.4 CRAP 디자인 원칙 체크리스트
+
+분석 카드에서 사용하는 디자인 원칙 평가:
+
+| 원칙 | 체크 항목 |
+|------|----------|
+| **C**ontrast (대비) | 중요 요소가 시각적으로 구분되는가? |
+| **R**epetition (반복) | 일관된 스타일이 반복 적용되는가? |
+| **A**lignment (정렬) | 요소들이 논리적으로 정렬되어 있는가? |
+| **P**roximity (근접성) | 관련 요소가 가까이 그룹핑되어 있는가? |
+
+추가 체크:
+
+| 원칙 | 체크 항목 |
+|------|----------|
+| 여백 (Whitespace) | 적절한 여백이 확보되어 있는가? |
+| 계층 (Hierarchy) | 정보의 우선순위가 시각적으로 드러나는가? |
+| 일관성 (Consistency) | 다른 화면과 일관된 패턴을 따르는가? |
+| 접근성 (Accessibility) | 색상 대비, 폰트 크기가 충분한가? |
+
+### 5.5 검색 & 필터
+
+| 기능 | 설명 |
+|------|------|
+| 텍스트 검색 | 제목, 메모, 태그에서 전문 검색 |
+| 카테고리 필터 | 화면 유형별 필터 (탭) |
+| 카드 유형 필터 | 레퍼런스 / 분석 / 패턴 / Before/After |
+| 평점 필터 | ⭐ 3점 이상만 표시 등 |
+| 정렬 | 최신순, 평점순, 이름순 |
+
+### 5.6 내보내기
+
+| 형식 | 설명 |
+|------|------|
+| JSON | 전체 프로젝트 데이터 백업/복원 |
+| HTML | 인사이트 카드를 HTML 보고서로 출력 (인쇄 가능) |
+| 패턴 → 기획디자인 | 패턴 카드의 와이어프레임을 기획디자인 템플릿으로 전송 |
+
+### 5.7 키보드 단축키
+
+| 단축키 | 기능 |
+|--------|------|
+| `Ctrl+V` | 클립보드 이미지로 새 카드 생성 |
+| `Ctrl+S` | 프로젝트 저장 |
+| `Ctrl+F` | 검색 포커스 |
+| `Ctrl+N` | 새 카드 추가 |
+| `Delete` | 선택 카드 삭제 |
+| `Ctrl+Z` | 실행 취소 |
+| `Ctrl+Y` | 다시 실행 |
+
+---
+
+## 6. 데이터 구조
+
+### 6.1 프로젝트 (localStorage: `di_projects`)
+
+```json
+[
+  {
+    "id": "diproj_1709856000000",
+    "title": "SAM ERP v2 디자인 연구",
+    "description": "SAM ERP 화면 개선을 위한 UI/UX 인사이트 수집",
+    "cards": [],
+    "createdAt": "2026-03-08T10:00:00",
+    "updatedAt": "2026-03-08T15:30:00"
+  }
+]
+```
+
+### 6.2 인사이트 카드 (cards 배열 내)
+
+```json
+{
+  "id": "di_1709856000000_abc",
+  "type": "reference",
+  "title": "Notion 대시보드 카드 레이아웃",
+  "image": "data:image/png;base64,...",
+  "memo": "카드형 레이아웃이 정보 밀도를 유지하면서도 시각적으로 깔끔",
+  "source": "notion.so",
+  "tags": ["대시보드", "카드", "레이아웃"],
+  "category": "dashboard",
+  "rating": 4,
+  "pinned": false,
+  "archived": false,
+  "createdAt": "2026-03-08T10:00:00",
+  "updatedAt": "2026-03-08T15:30:00"
+}
+```
+
+### 6.3 분석 어노테이션
+
+```json
+{
+  "annotations": [
+    {
+      "id": "ann_001",
+      "type": "marker",
+      "num": 1,
+      "x": 150,
+      "y": 80,
+      "text": "검색 영역 너무 넓음 — 접기 기능 필요"
+    },
+    {
+      "id": "ann_002",
+      "type": "highlight",
+      "x": 200,
+      "y": 300,
+      "w": 150,
+      "h": 40,
+      "color": "rgba(239,68,68,0.3)",
+      "text": "버튼 정렬 불일치"
+    }
+  ]
+}
+```
+
+### 6.4 디자인 패턴 라이브러리 (localStorage: `di_patterns`)
+
+프로젝트 간 공유되는 패턴 라이브러리:
+
+```json
+[
+  {
+    "id": "pat_001",
+    "name": "검색 + 필터 + 목록",
+    "image": "data:image/png;base64,...",
+    "components": [
+      { "name": "검색바", "required": true },
+      { "name": "필터 칩", "required": false },
+      { "name": "데이터 테이블", "required": true },
+      { "name": "페이지네이션", "required": true },
+      { "name": "액션 버튼", "required": true }
+    ],
+    "guidelines": "검색바는 상단 고정, 필터는 접기/펼치기 지원",
+    "usedIn": ["수주 목록", "거래처 목록", "품목 목록"],
+    "tags": ["목록", "CRUD", "테이블"],
+    "frequency": 12,
+    "createdAt": "2026-03-08T10:00:00"
+  }
+]
+```
+
+---
+
+## 7. 프리셋 데이터
+
+### 7.1 기본 카테고리 (하드코딩)
+
+```javascript
+categories: [
+  { code: 'dashboard', label: '대시보드', icon: '📊', color: '#6366f1' },
+  { code: 'list',      label: '목록',     icon: '📋', color: '#3b82f6' },
+  { code: 'form',      label: '상세/폼',  icon: '📝', color: '#10b981' },
+  { code: 'modal',     label: '모달/팝업', icon: '💬', color: '#f59e0b' },
+  { code: 'navigation',label: '네비게이션',icon: '🧭', color: '#8b5cf6' },
+  { code: 'auth',      label: '로그인',   icon: '🔐', color: '#ec4899' },
+  { code: 'report',    label: '보고서',   icon: '📄', color: '#0ea5e9' },
+  { code: 'etc',       label: '기타',     icon: '📎', color: '#64748b' },
+]
+```
+
+### 7.2 CRAP 원칙 체크리스트 (하드코딩)
+
+```javascript
+designPrinciples: [
+  { key: 'contrast',    label: '대비 (Contrast)',    icon: '🔲', desc: '중요 요소가 시각적으로 구분' },
+  { key: 'repetition',  label: '반복 (Repetition)',  icon: '🔁', desc: '일관된 스타일 반복 적용' },
+  { key: 'alignment',   label: '정렬 (Alignment)',   icon: '📏', desc: '논리적 정렬' },
+  { key: 'proximity',   label: '근접성 (Proximity)', icon: '🧲', desc: '관련 요소 그룹핑' },
+  { key: 'whitespace',  label: '여백 (Whitespace)',  icon: '⬜', desc: '적절한 여백 확보' },
+  { key: 'hierarchy',   label: '계층 (Hierarchy)',   icon: '🔺', desc: '정보 우선순위 시각화' },
+  { key: 'consistency', label: '일관성 (Consistency)',icon: '🔗', desc: '다른 화면과의 일관성' },
+  { key: 'a11y',        label: '접근성 (A11y)',      icon: '♿', desc: '색상 대비, 폰트 크기' },
+]
+```
+
+### 7.3 샘플 패턴 템플릿 (프리셋)
+
+| 패턴명 | 구성 요소 | SAM 내 사용처 |
+|--------|----------|--------------|
+| 검색 + 목록 | 검색바, 필터, 테이블, 페이지네이션, 액션버튼 | 수주/거래처/품목 목록 |
+| 상세 폼 | 섹션 헤더, 라벨+입력, 저장/취소 버튼 | 수주 상세, 거래처 상세 |
+| 대시보드 | 통계 카드 4개, 차트 2개, 요약 테이블 | 메인 대시보드 |
+| 탭 레이아웃 | 탭 메뉴, 탭 콘텐츠, 액션 버튼 | 설정, 품목기준관리 |
+| 트리 + 상세 | 좌측 트리, 우측 상세 패널 | 메뉴 관리, 조직도 |
+| 모달 폼 | 모달 헤더, 입력 필드, 확인/취소 | 등록/수정 팝업 |
+| 칸반 보드 | 컬럼 헤더, 드래그 카드, 필터 | 업무 관리 |
+| 캘린더 | 월/주/일 뷰, 이벤트 카드, 필터 | 일정 관리, 근태 |
+
+---
+
+## 8. 워크플로우
+
+### 8.1 일반 사용 흐름
+
+```
+1. 새 연구 프로젝트 생성 ("SAM ERP v2 디자인 연구")
+     ↓
+2. 레퍼런스 수집
+   • 외부 서비스 스크린샷 → Ctrl+V 붙여넣기
+   • SAM 기존 화면 스크린샷 → 파일 업로드
+   • 태그 + 카테고리 분류
+     ↓
+3. 화면 분석
+   • 분석 카드 생성 → 어노테이션 추가
+   • CRAP 원칙 체크
+   • 개선 제안 작성
+     ↓
+4. 패턴 추출
+   • 반복되는 좋은 패턴 → 패턴 카드로 등록
+   • 구성 요소 정리, 사용 가이드라인 작성
+     ↓
+5. Before/After 기록
+   • 개선 전후 비교 카드 생성
+   • 변경 포인트 + 효과 기록
+     ↓
+6. 기획디자인 연계
+   • 패턴 라이브러리에서 참고하며 스토리보드 작성
+```
+
+### 8.2 기획디자인 연계
+
+```
+디자인 인사이트           기획디자인
+┌──────────────┐        ┌──────────────┐
+│ 패턴 카드:    │        │ 스토리보드:    │
+│ "검색+목록"   │──참조──→│ 새 페이지에   │
+│ 구성요소 체크  │        │ 패턴 적용     │
+│ 가이드라인    │        │              │
+└──────────────┘        └──────────────┘
+```
+
+> 향후 패턴 카드의 구성 요소를 기획디자인 블록 템플릿으로 자동 변환하는 연계 기능을 검토한다.
+
+---
+
+## 9. 개발 로드맵
+
+### Phase 1 — 기본 구조 (MVP)
+
+| 항목 | 내용 |
+|------|------|
+| 라우트 + 컨트롤러 | `GET /rd/design-insight` → 뷰 반환 |
+| 프로젝트 CRUD | 생성/저장/로드/삭제 (localStorage) |
+| 레퍼런스 카드 | 이미지 업로드 + 메모 + 태그 + 카테고리 |
+| 보드 뷰 | 카드 격자 배열 기본 화면 |
+| 검색/필터 | 텍스트 검색, 카테고리 탭 필터 |
+| Ctrl+V 붙여넣기 | 클립보드 이미지 → 새 카드 자동 생성 |
+
+### Phase 2 — 분석 도구
+
+| 항목 | 내용 |
+|------|------|
+| 분석 카드 | 어노테이션 시스템 (마커, 하이라이트) |
+| CRAP 체크리스트 | 디자인 원칙 체크 UI |
+| Before/After 카드 | 전후 비교 카드 유형 |
+| 갤러리 뷰 | 이미지 중심 큰 썸네일 |
+| 리스트 뷰 | 테이블형 정렬/필터 |
+
+### Phase 3 — 패턴 라이브러리
+
+| 항목 | 내용 |
+|------|------|
+| 패턴 카드 | 구성 요소 체크리스트, 가이드라인 |
+| 패턴 프리셋 | SAM ERP 기본 패턴 8종 |
+| 패턴 공유 | 프로젝트 간 패턴 공유 (di_patterns) |
+| 내보내기 | JSON 백업, HTML 보고서 |
+
+### Phase 4 — 연계 & 고도화
+
+| 항목 | 내용 |
+|------|------|
+| 기획디자인 연계 | 패턴 → 블록 템플릿 변환 |
+| DB 저장 전환 | localStorage → DB (협업 지원) |
+| 팀 공유 | 다른 사용자와 인사이트 공유 |
+
+---
+
+## 10. 파일 구조 (예상)
+
+```
+mng/
+├── app/Http/Controllers/
+│   └── RdController.php                      ← designInsight() 메서드 추가
+├── resources/views/rd/design-insight/
+│   └── index.blade.php                       ← 전체 CSS + HTML + Alpine.js
+└── routes/web.php                            ← Route 추가
+```
+
+---
+
+## 11. 관련 문서
+
+- [기획디자인 기술 스펙](../features/rd/planning-design.md) — 모티브가 된 스토리보드 에디터
+- [기획디자인 프로젝트](../projects/planning-design/README.md) — 프로젝트 이력
+- [R&D 메뉴 개요](../features/rd/README.md) — R&D 전체 메뉴 구조
+
+---
+
+**최종 업데이트**: 2026-03-08