From 8e700fcd64b5cd61afcc90952c6aa3d4c4a874c6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EA=B3=A4?= Date: Sun, 8 Mar 2026 11:22:09 +0900 Subject: [PATCH] =?UTF-8?q?docs:=20[rd]=20=EB=94=94=EC=9E=90=EC=9D=B8=20?= =?UTF-8?q?=EC=9D=B8=EC=82=AC=EC=9D=B4=ED=8A=B8=20=EA=B8=B0=EB=8A=A5=20?= =?UTF-8?q?=EB=AC=B8=EC=84=9C=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - features/rd/design-insight.md 신규 작성 (아키텍처, 카드/카테고리 체계, CSS 와이어프레임, AI 프롬프트 복사) - features/rd/README.md에 디자인 인사이트 메뉴·컨트롤러·관련 문서 등록 - INDEX.md에 디자인 인사이트 문서 등록 --- sam/docs/INDEX.md | 3 +- sam/docs/features/rd/README.md | 7 +- sam/docs/features/rd/design-insight.md | 246 +++++++++++++++++++++++++ 3 files changed, 254 insertions(+), 2 deletions(-) create mode 100644 sam/docs/features/rd/design-insight.md diff --git a/sam/docs/INDEX.md b/sam/docs/INDEX.md index 5b4654b..cb48327 100644 --- a/sam/docs/INDEX.md +++ b/sam/docs/INDEX.md @@ -147,8 +147,9 @@ docs/ | [equipment/README.md](features/equipment/README.md) | 설비관리 (MNG 전용) | | [approvals/README.md](features/approvals/README.md) | 결재관리 시스템 (순차결재, 보류/전결/참조/복사재기안) | | [planning/README.md](features/planning/README.md) | 주일기업 기획 (견적/프로젝트/사진대지/회의록/AI) | -| [rd/README.md](features/rd/README.md) | R&D (조직도/AI견적/기획디자인 스토리보드 에디터) | +| [rd/README.md](features/rd/README.md) | R&D (조직도/AI견적/기획디자인/디자인 인사이트) | | [rd/planning-design.md](features/rd/planning-design.md) | 기획디자인 스토리보드 에디터 기술 명세 | +| [rd/design-insight.md](features/rd/design-insight.md) | 디자인 인사이트 UI/UX 연구 도구 (100종 패턴, AI 프롬프트) | --- diff --git a/sam/docs/features/rd/README.md b/sam/docs/features/rd/README.md index d3cd985..1483160 100644 --- a/sam/docs/features/rd/README.md +++ b/sam/docs/features/rd/README.md @@ -19,6 +19,7 @@ R&D 메뉴는 SAM 플랫폼의 **연구개발 및 내부 도구** 모음이다. |------|------| | **README.md** (이 문서) | 전체 개요, 메뉴 구조, 컨트롤러 매핑 | | [planning-design.md](planning-design.md) | 기획디자인 스토리보드 에디터 기술 명세 | +| [design-insight.md](design-insight.md) | 디자인 인사이트 UI/UX 연구 도구 (100종 패턴, AI 프롬프트) | ### 1.3 하위 메뉴 구조 @@ -33,7 +34,8 @@ R&D │ ├── 상세 /rd/ai-quotation/{id} │ ├── 편집 /rd/ai-quotation/{id}/edit │ └── 문서 /rd/ai-quotation/{id}/document -└── 기획디자인 /rd/planning-design +├── 기획디자인 /rd/planning-design +└── 디자인 인사이트 /rd/design-insight ``` --- @@ -70,6 +72,7 @@ R&D | `editQuotation()` | `GET /rd/ai-quotation/{id}/edit` | AI 견적 편집 | | `documentQuotation()` | `GET /rd/ai-quotation/{id}/document` | AI 견적 문서 | | `planningDesign()` | `GET /rd/planning-design` | 기획디자인 | +| `designInsight()` | `GET /rd/design-insight` | 디자인 인사이트 | ### 2.3 HTMX 전체 페이지 로드 규칙 @@ -92,12 +95,14 @@ if ($request->header('HX-Request')) { | 중대재해처벌법 점검 | Blade (정적) | 없음 | 없음 | 운영 중 | | AI 견적 | Blade + Alpine.js | AiQuotationService | ai_quotations | 운영 중 | | **기획디자인** | **Blade + Alpine.js (SPA)** | **없음 (localStorage)** | **없음** | **운영 중** | +| **디자인 인사이트** | **Blade + Alpine.js (SPA)** | **없음 (localStorage)** | **없음** | **운영 중** | --- ## 4. 관련 문서 - [기획디자인 스토리보드 에디터](planning-design.md) — 블록 에디터, 서식, 인쇄, 내보내기 +- [디자인 인사이트](design-insight.md) — UI/UX 연구 도구 (100종 패턴, AI 프롬프트 복사) - [조직도 관리 기술문서](../../projects/org-chart/) — 조직도 시스템 상세 (별도 프로젝트 문서) --- diff --git a/sam/docs/features/rd/design-insight.md b/sam/docs/features/rd/design-insight.md new file mode 100644 index 0000000..683d02f --- /dev/null +++ b/sam/docs/features/rd/design-insight.md @@ -0,0 +1,246 @@ +# 디자인 인사이트 — 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줄) + ├──