sam-docs/features/rd/design-insight.md

# 디자인 인사이트 — 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