sam-docs/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 데이터 구조

{
  "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 미니 와이어프레임을 반환한다.

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) 함수가 카드 데이터를 다음 구조로 변환한다:

## 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 메뉴 개요 — 전체 R&D 메뉴 구조
• 기획디자인 스토리보드 에디터 — 유사한 단일 파일 SPA 패턴
• 디자인 인사이트 기획서 — 초기 기획 문서

---

최종 업데이트: 2026-03-08