SamProject/sam-manage
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: [rd] 디자인 인사이트 도움말 모달 추가

Browse Source 
- ? 버튼 클릭 시 7개 탭 도움말 모달 표시
- 개요, 툴바, 카드 유형, 뷰 모드, 사이드바, 단축키, 워크플로우
- 각 기능별 상세 설명 및 빠른 시작 가이드
This commit is contained in:
김보곤
2026-03-08 10:02:37 +09:00
parent d9c808b928
commit ce055542a5
1 changed files with 558 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

558
resources/views/rd/design-insight/index.blade.php
View File

@@ -556,6 +556,98 @@
.di-star.filled { color: #f59e0b; }
.di-star:hover { color: #fbbf24; }
/* Help Modal */
.di-help-modal { width: 740px; }
.di-help-modal .di-modal-body { padding: 0; }
.di-help-tabs {
display: flex;
border-bottom: 1px solid var(--di-border);
padding: 0 20px;
gap: 0;
overflow-x: auto;
}
.di-help-tab {
padding: 12px 16px;
font-size: 13px;
color: var(--di-text-secondary);
cursor: pointer;
border-bottom: 2px solid transparent;
white-space: nowrap;
background: none;
border-top: none; border-left: none; border-right: none;
transition: all .15s;
}
.di-help-tab:hover { color: var(--di-text); }
.di-help-tab.active { color: var(--di-blue); border-bottom-color: var(--di-blue); font-weight: 600; }
.di-help-content { padding: 24px; max-height: 60vh; overflow-y: auto; }
.di-help-content h4 { font-size: 15px; font-weight: 700; color: var(--di-text); margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.di-help-content h4 i { font-size: 18px; color: var(--di-blue); }
.di-help-content p { font-size: 13px; color: var(--di-text-secondary); line-height: 1.7; margin: 0 0 16px; }
.di-help-section { margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid #f1f5f9; }
.di-help-section:last-child { border-bottom: none; margin-bottom: 0; }
.di-help-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 12px;
}
.di-help-item {
display: flex;
gap: 10px;
padding: 12px;
background: #f8fafc;
border-radius: 8px;
border: 1px solid #f1f5f9;
}
.di-help-item .h-icon {
width: 36px;
height: 36px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
flex-shrink: 0;
}
.di-help-item .h-body { flex: 1; }
.di-help-item .h-title { font-size: 13px; font-weight: 600; color: var(--di-text); margin-bottom: 2px; }
.di-help-item .h-desc { font-size: 11.5px; color: var(--di-text-secondary); line-height: 1.5; }
.di-help-kbd {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 8px;
background: #f1f5f9;
border: 1px solid #e2e8f0;
border-radius: 4px;
font-size: 11.5px;
font-family: monospace;
color: var(--di-text);
margin: 2px;
}
.di-help-step {
display: flex;
gap: 12px;
margin-bottom: 12px;
align-items: flex-start;
}
.di-help-step .step-num {
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--di-blue);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 700;
flex-shrink: 0;
}
.di-help-step .step-body { flex: 1; padding-top: 3px; }
.di-help-step .step-title { font-size: 13.5px; font-weight: 600; color: var(--di-text); margin-bottom: 2px; }
.di-help-step .step-desc { font-size: 12.5px; color: var(--di-text-secondary); line-height: 1.6; }
/* Status Bar */
.di-statusbar {
display: flex;
@@ -687,6 +779,9 @@
<button class="di-btn sm" @click="showProjectsModal = true" title="프로젝트 관리">
<i class="ri-folder-line"></i>
</button>
<button class="di-btn sm" @click="showHelpModal = true" title="도움말 (?)">
<i class="ri-question-line"></i>
</button>
</div>
<!-- Category Tabs -->
@@ -1177,6 +1272,467 @@
</div>
</template>
<!-- ===== Help Modal ===== -->
<template x-if="showHelpModal">
<div class="di-modal-overlay" @click.self="showHelpModal = false">
<div class="di-modal di-help-modal">
<div class="di-modal-header">
<h3><i class="ri-question-line" style="color: var(--di-blue);"></i> 디자인 인사이트 도움말</h3>
<button class="di-btn ghost" @click="showHelpModal = false"><i class="ri-close-line" style="font-size: 18px;"></i></button>
</div>
<div class="di-help-tabs">
<button class="di-help-tab" :class="helpTab === 'overview' && 'active'" @click="helpTab = 'overview'">개요</button>
<button class="di-help-tab" :class="helpTab === 'toolbar' && 'active'" @click="helpTab = 'toolbar'">툴바</button>
<button class="di-help-tab" :class="helpTab === 'cards' && 'active'" @click="helpTab = 'cards'">카드 유형</button>
<button class="di-help-tab" :class="helpTab === 'views' && 'active'" @click="helpTab = 'views'">뷰 모드</button>
<button class="di-help-tab" :class="helpTab === 'sidebar' && 'active'" @click="helpTab = 'sidebar'">사이드바</button>
<button class="di-help-tab" :class="helpTab === 'shortcuts' && 'active'" @click="helpTab = 'shortcuts'">단축키</button>
<button class="di-help-tab" :class="helpTab === 'workflow' && 'active'" @click="helpTab = 'workflow'">워크플로우</button>
</div>
<div class="di-help-content">
<!-- 개요 -->
<template x-if="helpTab === 'overview'">
<div>
<div class="di-help-section">
<h4><i class="ri-palette-line"></i> 디자인 인사이트란?</h4>
<p>SAM ERP 화면을 만들 때 참고할 <strong>UI/UX 디자인 레퍼런스를 수집하고, 분석하고, 패턴으로 축적</strong>하는 연구 도구입니다. 외부 서비스(Dribbble, Mobbin 등)나 기존 SAM 화면의 스크린샷을 캡처하여 인사이트를 기록하고, 팀과 공유할 수 있습니다.</p>
</div>
<div class="di-help-section">
<h4><i class="ri-lightbulb-line"></i> 핵심 가치</h4>
<div class="di-help-grid">
<div class="di-help-item">
<div class="h-icon" style="background: #eff6ff;">📷</div>
<div class="h-body">
<div class="h-title">레퍼런스 수집</div>
<div class="h-desc">좋은 화면을 스크린샷으로 수집하고 왜 좋은지 메모</div>
</div>
</div>
<div class="di-help-item">
<div class="h-icon" style="background: #fef3c7;">🔍</div>
<div class="h-body">
<div class="h-title">화면 분석</div>
<div class="h-desc">CRAP 디자인 원칙으로 화면의 장단점 분석</div>
</div>
</div>
<div class="di-help-item">
<div class="h-icon" style="background: #ecfdf5;">📐</div>
<div class="h-body">
<div class="h-title">패턴 라이브러리</div>
<div class="h-desc">반복 사용할 UI 패턴을 템플릿으로 등록</div>
</div>
</div>
<div class="di-help-item">
<div class="h-icon" style="background: #fae8ff;">🔄</div>
<div class="h-body">
<div class="h-title">Before/After 비교</div>
<div class="h-desc">개선 전후를 비교하여 디자인 결정 근거 기록</div>
</div>
</div>
</div>
</div>
<div class="di-help-section">
<h4><i class="ri-rocket-line"></i> 빠른 시작</h4>
<div class="di-help-step">
<div class="step-num">1</div>
<div class="step-body">
<div class="step-title">스크린샷 캡처</div>
<div class="step-desc">참고할 화면을 <span class="di-help-kbd">Win + Shift + S</span> 또는 캡처 도구로 스크린샷을 찍으세요.</div>
</div>
</div>
<div class="di-help-step">
<div class="step-num">2</div>
<div class="step-body">
<div class="step-title">Ctrl+V 붙여넣기</div>
<div class="step-desc">이 화면에서 <span class="di-help-kbd">Ctrl</span>+<span class="di-help-kbd">V</span>를 누르면 자동으로 새 카드가 생성되고 이미지가 붙여넣어집니다.</div>
</div>
</div>
<div class="di-help-step">
<div class="step-num">3</div>
<div class="step-body">
<div class="step-title">정보 입력</div>
<div class="step-desc">제목, 인사이트 메모, 출처, 태그, 카테고리, 평점을 입력하고 저장하세요.</div>
</div>
</div>
<div class="di-help-step">
<div class="step-num">4</div>
<div class="step-body">
<div class="step-title">분류 및 검색</div>
<div class="step-desc">카테고리 탭, 태그 필터, 검색으로 원하는 인사이트를 빠르게 찾으세요.</div>
</div>
</div>
</div>
</div>
</template>
<!-- 툴바 -->
<template x-if="helpTab === 'toolbar'">
<div>
<div class="di-help-section">
<h4><i class="ri-tools-line"></i> 상단 툴바 기능</h4>
<p>화면 최상단의 도구 모음입니다. 프로젝트 관리, 저장, 뷰 전환 등 주요 기능에 접근합니다.</p>
<div class="di-help-grid" style="grid-template-columns: 1fr;">
<div class="di-help-item">
<div class="h-icon" style="background: #f1f5f9;"><i class="ri-layout-left-line"></i></div>
<div class="h-body">
<div class="h-title">사이드바 토글 (좌측 첫 번째 아이콘)</div>
<div class="h-desc">좌측 사이드바(카테고리, 태그, 검색, 정렬)를 접거나 펼칩니다. 넓은 화면이 필요할 때 접으세요.</div>
</div>
</div>
<div class="di-help-item">
<div class="h-icon" style="background: #f1f5f9;">📝</div>
<div class="h-body">
<div class="h-title">프로젝트 제목 (입력 필드)</div>
<div class="h-desc">현재 프로젝트의 이름입니다. 클릭하여 직접 수정할 수 있습니다. 예: "SAM ERP v2 디자인 연구"</div>
</div>
</div>
<div class="di-help-item">
<div class="h-icon" style="background: #eff6ff;"><i class="ri-save-line"></i></div>
<div class="h-body">
<div class="h-title">저장 버튼</div>
<div class="h-desc">현재 프로젝트를 브라우저 localStorage에 저장합니다. <span class="di-help-kbd">Ctrl</span>+<span class="di-help-kbd">S</span>로도 가능합니다.</div>
</div>
</div>
<div class="di-help-item">
<div class="h-icon" style="background: #eff6ff;"><i class="ri-download-line"></i></div>
<div class="h-body">
<div class="h-title">내보내기 버튼</div>
<div class="h-desc"><strong>JSON 내보내기</strong>: 프로젝트 전체를 JSON 파일로 다운로드 (백업용)<br><strong>JSON 가져오기</strong>: 이전에 내보낸 JSON 파일을 불러와 복원</div>
</div>
</div>
<div class="di-help-item">
<div class="h-icon" style="background: #f1f5f9;"><i class="ri-layout-grid-line"></i></div>
<div class="h-body">
<div class="h-title">뷰 전환 탭 (보드 / 갤러리 / 리스트)</div>
<div class="h-desc">카드 표시 방식을 변경합니다. 보드(격자), 갤러리(이미지 중심), 리스트(테이블형) 중 선택하세요.</div>
</div>
</div>
<div class="di-help-item">
<div class="h-icon" style="background: #f1f5f9;"><i class="ri-folder-line"></i></div>
<div class="h-body">
<div class="h-title">프로젝트 관리 버튼</div>
<div class="h-desc">여러 연구 프로젝트를 만들고 전환할 수 있습니다. 예: "대시보드 연구", "목록 화면 연구" 등 주제별 분리.</div>
</div>
</div>
<div class="di-help-item">
<div class="h-icon" style="background: #dbeafe;"><i class="ri-question-line"></i></div>
<div class="h-body">
<div class="h-title">도움말 버튼 (지금 보고 있는 화면)</div>
<div class="h-desc">이 도움말 모달을 엽니다.</div>
</div>
</div>
</div>
</div>
<div class="di-help-section">
<h4><i class="ri-layout-top-line"></i> 카테고리 탭 (툴바 아래)</h4>
<p>카드의 <strong>유형별 필터</strong>입니다. "전체"를 누르면 모든 카드를, 특정 유형을 누르면 해당 유형만 표시합니다. 각 탭 옆의 숫자는 해당 유형의 카드 수입니다.</p>
<div class="di-help-grid">
<div class="di-help-item">
<div class="h-icon" style="background: #eff6ff;">📷</div>
<div class="h-body"><div class="h-title">레퍼런스</div><div class="h-desc">외부/내부 화면 스크린샷 수집</div></div>
</div>
<div class="di-help-item">
<div class="h-icon" style="background: #fef3c7;">🔍</div>
<div class="h-body"><div class="h-title">분석</div><div class="h-desc">화면 분석 + CRAP 디자인 원칙 체크</div></div>
</div>
<div class="di-help-item">
<div class="h-icon" style="background: #ecfdf5;">📐</div>
<div class="h-body"><div class="h-title">패턴</div><div class="h-desc">반복 사용할 UI 패턴 등록</div></div>
</div>
<div class="di-help-item">
<div class="h-icon" style="background: #fae8ff;">🔄</div>
<div class="h-body"><div class="h-title">Before/After</div><div class="h-desc">개선 전후 비교</div></div>
</div>
</div>
</div>
</div>
</template>
<!-- 카드 유형 -->
<template x-if="helpTab === 'cards'">
<div>
<div class="di-help-section">
<h4 style="color: #2563eb;"><i class="ri-camera-line"></i> 1. 레퍼런스 카드</h4>
<p>외부 서비스나 내부 화면의 <strong>스크린샷을 수집</strong>하고 왜 좋은지(또는 나쁜지) 메모를 남깁니다.</p>
<div class="di-help-grid" style="grid-template-columns: 1fr;">
<div class="di-help-item">
<div class="h-body">
<div class="h-title">입력 항목</div>
<div class="h-desc">
<strong>이미지</strong> — 스크린샷 (클릭/드래그/Ctrl+V)<br>
<strong>인사이트 메모</strong> — "카드형 레이아웃이 정보 밀도를 유지하면서도 깔끔"<br>
<strong>출처</strong> — 출처 URL이나 앱 이름 (예: notion.so, Figma)<br>
<strong>태그</strong> — 자유 태그 (콤마 구분)<br>
<strong>카테고리</strong> — 대시보드, 목록, 상세/폼 등 화면 유형<br>
<strong>평점</strong> — 1~5점 (참고 가치 평가)
</div>
</div>
</div>
</div>
</div>
<div class="di-help-section">
<h4 style="color: #d97706;"><i class="ri-search-eye-line"></i> 2. 분석 카드</h4>
<p>화면을 <strong>디자인 원칙(CRAP)으로 분석</strong>하고 개선 제안을 기록합니다.</p>
<div class="di-help-grid" style="grid-template-columns: 1fr;">
<div class="di-help-item">
<div class="h-body">
<div class="h-title">CRAP 디자인 원칙</div>
<div class="h-desc">
각 원칙을 클릭하면 상태가 순환합니다: <strong>— → ✅ 통과 → ⚠️ 주의 → ❌ 미달</strong><br><br>
<strong>C</strong>ontrast (대비) — 중요 요소가 시각적으로 구분되는가?<br>
<strong>R</strong>epetition (반복) — 일관된 스타일이 반복 적용되는가?<br>
<strong>A</strong>lignment (정렬) — 요소들이 논리적으로 정렬되어 있는가?<br>
<strong>P</strong>roximity (근접성) — 관련 요소가 가까이 그룹핑되어 있는가?<br>
+ 여백, 계층, 일관성, 접근성 체크
</div>
</div>
</div>
<div class="di-help-item">
<div class="h-body">
<div class="h-title">추가 입력</div>
<div class="h-desc">
<strong>개선 제안</strong> — "검색 영역을 접을 수 있게 하고 버튼 그룹을 우측 정렬"<br>
<strong>심각도</strong> — 정보(ℹ️) / 경고(⚠️) / 심각(🔴)
</div>
</div>
</div>
</div>
</div>
<div class="di-help-section">
<h4 style="color: #059669;"><i class="ri-layout-masonry-line"></i> 3. 패턴 카드</h4>
<p>반복 사용할 <strong>UI 패턴을 템플릿으로 등록</strong>하여 새 화면 설계 시 재사용합니다.</p>
<div class="di-help-grid" style="grid-template-columns: 1fr;">
<div class="di-help-item">
<div class="h-body">
<div class="h-title">입력 항목</div>
<div class="h-desc">
<strong>사용처</strong> — 이 패턴이 사용된 화면 (예: "수주 목록, 거래처 목록")<br>
<strong>구성 요소</strong> — 패턴을 이루는 요소 체크리스트 (검색바, 필터 칩, 테이블 등)<br>
<strong>사용 가이드라인</strong> — 이 패턴 사용 시 주의사항
</div>
</div>
</div>
</div>
</div>
<div class="di-help-section">
<h4 style="color: #a855f7;"><i class="ri-arrow-left-right-line"></i> 4. Before/After 카드</h4>
<p>디자인 <strong>개선 전후를 나란히 비교</strong>하여 변경 근거와 효과를 기록합니다.</p>
<div class="di-help-grid" style="grid-template-columns: 1fr;">
<div class="di-help-item">
<div class="h-body">
<div class="h-title">입력 항목</div>
<div class="h-desc">
<strong>Before 이미지</strong> — 개선 전 스크린샷<br>
<strong>After 이미지</strong> — 개선 후 스크린샷<br>
<strong>변경 포인트</strong> — 무엇을 어떻게 바꿨는지 (줄 단위 입력)<br>
<strong>개선 효과</strong> — "스크롤 40% 감소, 작업 완료 시간 단축"
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<!-- 뷰 모드 -->
<template x-if="helpTab === 'views'">
<div>
<div class="di-help-section">
<h4><i class="ri-layout-grid-line"></i> 뷰 모드 (3종)</h4>
<p>우측 상단의 아이콘 탭으로 카드 표시 방식을 전환합니다.</p>
<div class="di-help-grid" style="grid-template-columns: 1fr;">
<div class="di-help-item">
<div class="h-icon" style="background: #eff6ff;"><i class="ri-layout-grid-line" style="font-size: 20px; color: var(--di-blue);"></i></div>
<div class="h-body">
<div class="h-title">보드 뷰 (기본)</div>
<div class="h-desc">카드를 격자(그리드)로 배열합니다. 이미지 썸네일 + 제목 + 태그 + 평점이 한눈에 보여 <strong>전체 현황 파악</strong>에 적합합니다.</div>
</div>
</div>
<div class="di-help-item">
<div class="h-icon" style="background: #ecfdf5;"><i class="ri-image-line" style="font-size: 20px; color: #059669;"></i></div>
<div class="h-body">
<div class="h-title">갤러리 뷰</div>
<div class="h-desc">이미지를 크게 표시하는 뷰입니다. <strong>시각적 비교</strong>나 <strong>레퍼런스 브라우징</strong>에 최적화되어 있습니다.</div>
</div>
</div>
<div class="di-help-item">
<div class="h-icon" style="background: #fef3c7;"><i class="ri-list-unordered" style="font-size: 20px; color: #d97706;"></i></div>
<div class="h-body">
<div class="h-title">리스트 뷰</div>
<div class="h-desc">테이블 형태로 한 줄씩 표시합니다. <strong>대량 데이터 관리</strong>, 빠른 스캔, 태그 확인에 효율적입니다.</div>
</div>
</div>
</div>
</div>
</div>
</template>
<!-- 사이드바 -->
<template x-if="helpTab === 'sidebar'">
<div>
<div class="di-help-section">
<h4><i class="ri-layout-left-line"></i> 좌측 사이드바</h4>
<p>카드를 <strong>필터링하고 검색</strong>하는 패널입니다. 사이드바 토글 버튼으로 접거나 펼 수 있습니다.</p>
<div class="di-help-grid" style="grid-template-columns: 1fr;">
<div class="di-help-item">
<div class="h-icon" style="background: #f1f5f9;"><i class="ri-search-line"></i></div>
<div class="h-body">
<div class="h-title">검색</div>
<div class="h-desc">제목, 메모, 태그, 출처에서 키워드를 검색합니다. <span class="di-help-kbd">Ctrl</span>+<span class="di-help-kbd">F</span>로 포커스 가능.</div>
</div>
</div>
<div class="di-help-item">
<div class="h-icon" style="background: #f1f5f9;">📊</div>
<div class="h-body">
<div class="h-title">카테고리 (화면 유형)</div>
<div class="h-desc">대시보드, 목록, 상세/폼, 모달, 네비게이션, 로그인, 보고서, 기타 — 화면 유형별로 카드를 필터링합니다. 숫자는 해당 카테고리의 카드 수.</div>
</div>
</div>
<div class="di-help-item">
<div class="h-icon" style="background: #f1f5f9;">🏷️</div>
<div class="h-body">
<div class="h-title">태그 필터</div>
<div class="h-desc">카드에 추가한 태그 목록이 표시됩니다. <strong>태그를 클릭하면 해당 태그가 포함된 카드만</strong> 표시합니다. 여러 태그를 선택하면 OR 조건으로 필터링됩니다.</div>
</div>
</div>
<div class="di-help-item">
<div class="h-icon" style="background: #f1f5f9;"><i class="ri-sort-asc"></i></div>
<div class="h-body">
<div class="h-title">정렬</div>
<div class="h-desc">최신순 / 오래된순 / 평점순 / 이름순으로 카드를 정렬합니다. 핀(📌) 고정된 카드는 항상 최상단에 표시됩니다.</div>
</div>
</div>
</div>
</div>
</div>
</template>
<!-- 단축키 -->
<template x-if="helpTab === 'shortcuts'">
<div>
<div class="di-help-section">
<h4><i class="ri-keyboard-line"></i> 키보드 단축키</h4>
<div class="di-help-grid" style="grid-template-columns: 1fr;">
<div class="di-help-item">
<div class="h-body" style="display: flex; align-items: center; gap: 16px;">
<div style="flex-shrink: 0;"><span class="di-help-kbd">Ctrl</span>+<span class="di-help-kbd">V</span></div>
<div class="h-desc"><strong>클립보드 이미지 붙여넣기</strong> — 스크린샷 캡처 후 이 화면에서 Ctrl+V 하면 자동으로 새 레퍼런스 카드가 생성됩니다. 가장 핵심적인 기능!</div>
</div>
</div>
<div class="di-help-item">
<div class="h-body" style="display: flex; align-items: center; gap: 16px;">
<div style="flex-shrink: 0;"><span class="di-help-kbd">Ctrl</span>+<span class="di-help-kbd">S</span></div>
<div class="h-desc"><strong>프로젝트 저장</strong> — 현재 상태를 localStorage에 저장합니다.</div>
</div>
</div>
<div class="di-help-item">
<div class="h-body" style="display: flex; align-items: center; gap: 16px;">
<div style="flex-shrink: 0;"><span class="di-help-kbd">Ctrl</span>+<span class="di-help-kbd">N</span></div>
<div class="h-desc"><strong>새 카드 추가</strong> — 새 레퍼런스 카드 생성 모달을 엽니다.</div>
</div>
</div>
<div class="di-help-item">
<div class="h-body" style="display: flex; align-items: center; gap: 16px;">
<div style="flex-shrink: 0;"><span class="di-help-kbd">Ctrl</span>+<span class="di-help-kbd">F</span></div>
<div class="h-desc"><strong>검색 포커스</strong> — 사이드바 검색 입력란으로 포커스를 이동합니다.</div>
</div>
</div>
</div>
</div>
<div class="di-help-section">
<h4><i class="ri-mouse-line"></i> 이미지 입력 방법 (3가지)</h4>
<div class="di-help-grid" style="grid-template-columns: 1fr;">
<div class="di-help-item">
<div class="h-icon" style="background: #eff6ff;"><i class="ri-clipboard-line"></i></div>
<div class="h-body">
<div class="h-title">1. 클립보드 붙여넣기 (가장 빠름)</div>
<div class="h-desc">메인 화면에서 <span class="di-help-kbd">Ctrl</span>+<span class="di-help-kbd">V</span> → 새 카드 자동 생성</div>
</div>
</div>
<div class="di-help-item">
<div class="h-icon" style="background: #ecfdf5;"><i class="ri-upload-line"></i></div>
<div class="h-body">
<div class="h-title">2. 파일 업로드</div>
<div class="h-desc">카드 편집 모달에서 이미지 영역을 클릭 → 파일 선택</div>
</div>
</div>
<div class="di-help-item">
<div class="h-icon" style="background: #fef3c7;"><i class="ri-drag-drop-line"></i></div>
<div class="h-body">
<div class="h-title">3. 드래그 앤 드롭</div>
<div class="h-desc">카드 편집 모달에서 이미지 영역에 파일을 끌어다 놓기</div>
</div>
</div>
</div>
</div>
</div>
</template>
<!-- 워크플로우 -->
<template x-if="helpTab === 'workflow'">
<div>
<div class="di-help-section">
<h4><i class="ri-flow-chart"></i> 추천 워크플로우</h4>
<p>디자인 인사이트를 효과적으로 활용하는 단계별 흐름입니다.</p>
<div class="di-help-step">
<div class="step-num">1</div>
<div class="step-body">
<div class="step-title">프로젝트 생성</div>
<div class="step-desc">연구 주제별로 프로젝트를 생성합니다. 예: "SAM 대시보드 리뉴얼", "목록 화면 개선"</div>
</div>
</div>
<div class="di-help-step">
<div class="step-num">2</div>
<div class="step-body">
<div class="step-title">레퍼런스 수집</div>
<div class="step-desc">Dribbble, Mobbin, 경쟁 서비스 등에서 좋은 화면을 스크린샷으로 수집합니다. Ctrl+V로 빠르게 추가하고, 태그와 카테고리를 분류하세요.</div>
</div>
</div>
<div class="di-help-step">
<div class="step-num">3</div>
<div class="step-body">
<div class="step-title">화면 분석</div>
<div class="step-desc">SAM 기존 화면을 분석 카드로 만들어 CRAP 원칙을 체크합니다. 어떤 부분이 부족한지 개선 제안을 기록하세요.</div>
</div>
</div>
<div class="di-help-step">
<div class="step-num">4</div>
<div class="step-body">
<div class="step-title">패턴 추출</div>
<div class="step-desc">레퍼런스에서 반복되는 좋은 패턴을 발견하면 패턴 카드로 등록합니다. 구성 요소와 사용 가이드라인을 정리하세요.</div>
</div>
</div>
<div class="di-help-step">
<div class="step-num">5</div>
<div class="step-body">
<div class="step-title">Before/After 기록</div>
<div class="step-desc">화면을 개선한 후 전후 비교 카드를 만들어 변경 포인트와 효과를 기록합니다. 팀 회의에서 근거 자료로 활용하세요.</div>
</div>
</div>
<div class="di-help-step">
<div class="step-num">6</div>
<div class="step-body">
<div class="step-title">기획디자인 연계</div>
<div class="step-desc">축적된 패턴과 인사이트를 참고하여 기획디자인 메뉴에서 스토리보드를 작성합니다.</div>
</div>
</div>
</div>
<div class="di-help-section">
<h4><i class="ri-information-line"></i> 데이터 저장 안내</h4>
<p>
모든 데이터는 <strong>브라우저 localStorage</strong>에 저장됩니다.<br>
브라우저 데이터를 삭제하면 인사이트도 함께 삭제되므로, 중요한 프로젝트는 <strong>JSON 내보내기</strong>로 백업해두세요.<br>
다른 PC에서 작업하려면 JSON 내보내기 → 가져오기로 이동할 수 있습니다.
</p>
</div>
</div>
</template>
</div>
</div>
</div>
</template>
<!-- Toast -->
<template x-if="toastMsg">
<div class="di-toast" x-text="toastMsg" x-init="setTimeout(() => toastMsg = '', 2500)"></div>
@@ -1202,6 +1758,8 @@ function designInsight() {
showCardModal: false,
showProjectsModal: false,
showExportMenu: false,
showHelpModal: false,
helpTab: 'overview',
editingCard: {},
newProjectTitle: '',
toastMsg: '',