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