# 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