diff --git a/sam/docs/INDEX.md b/sam/docs/INDEX.md index ed0ef4b..5b4654b 100644 --- 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/ - 기능별 문서 diff --git a/sam/docs/plans/design-insight-menu-plan.md b/sam/docs/plans/design-insight-menu-plan.md new file mode 100644 index 0000000..28122f5 --- /dev/null +++ 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