feat: [rd] 디자인 인사이트 인기 UI 패턴 20종 프리셋 추가
- 웹서비스 인기 UI 패턴 20종 프리셋 템플릿 - KPI 대시보드, 데이터 테이블, 칸반, Command Palette, 사이드바, 모달 폼, 설정 페이지, 타임라인, 트리 분할뷰, 온보딩 스테퍼, 토스트, Empty State, 검색 자동완성, 탭 레이아웃, 카드 그리드, 가격표, 캘린더, 채팅, 파일 업로드, 브레드크럼 - 빈 상태 및 내보내기 메뉴에서 불러오기 버튼 제공 - 각 패턴별 구성 요소, 가이드라인, 참고 서비스 포함
This commit is contained in:
김보곤
@@ -761,6 +761,10 @@
|
||||
<button class="di-btn ghost sm" style="width: 100%; justify-content: flex-start;" @click="importJSON(); showExportMenu=false">
|
||||
<i class="ri-upload-line"></i> JSON 가져오기
|
||||
</button>
|
||||
<div style="border-top: 1px solid var(--di-border); margin: 4px 0;"></div>
|
||||
<button class="di-btn ghost sm" style="width: 100%; justify-content: flex-start;" @click="loadPresetTemplates(); showExportMenu=false">
|
||||
<i class="ri-magic-line"></i> 인기 UI 패턴 20종
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -861,9 +865,14 @@
|
||||
<i class="ri-palette-line"></i>
|
||||
<h3>인사이트를 수집해보세요</h3>
|
||||
<p><kbd>Ctrl+V</kbd>로 스크린샷을 붙여넣거나, 아래 버튼으로 시작하세요</p>
|
||||
<button class="di-btn primary" @click="openNewCardModal('reference')">
|
||||
<i class="ri-add-line"></i> 첫 번째 카드 추가
|
||||
</button>
|
||||
<div style="display: flex; gap: 8px;">
|
||||
<button class="di-btn primary" @click="openNewCardModal('reference')">
|
||||
<i class="ri-add-line"></i> 첫 번째 카드 추가
|
||||
</button>
|
||||
<button class="di-btn" @click="loadPresetTemplates()" style="border-color: var(--di-indigo); color: var(--di-indigo);">
|
||||
<i class="ri-magic-line"></i> 인기 UI 패턴 20종 불러오기
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -2251,6 +2260,344 @@ function designInsight() {
|
||||
this.toastMsg = msg;
|
||||
setTimeout(() => { this.toastMsg = ''; }, 2500);
|
||||
},
|
||||
|
||||
// ===== Preset Templates =====
|
||||
loadPresetTemplates() {
|
||||
const existing = (this.currentProject.cards || []).length;
|
||||
if (existing > 0 && !confirm('현재 프로젝트에 인기 UI 패턴 20종을 추가합니다. 계속하시겠습니까?')) return;
|
||||
|
||||
const now = new Date().toISOString();
|
||||
const mkId = () => 'di_' + Date.now() + '_' + Math.random().toString(36).substr(2, 6);
|
||||
const presets = [
|
||||
{
|
||||
type: 'pattern', title: 'KPI 대시보드', category: 'dashboard', rating: 5,
|
||||
tags: ['대시보드', 'KPI', '통계', '차트'],
|
||||
memo: 'Stripe, Shopify, Vercel 등 SaaS 서비스에서 사용하는 핵심 패턴. 로그인 직후 전체 현황을 3초 안에 파악할 수 있어야 한다.',
|
||||
components: [
|
||||
{ name: 'KPI 요약 카드 (4~6개, 상단 고정)', required: true },
|
||||
{ name: '추이 차트 (라인/바 차트, 기간 선택)', required: true },
|
||||
{ name: '최근 활동 피드 / 알림', required: false },
|
||||
{ name: '빠른 액션 버튼', required: false },
|
||||
{ name: '기간 필터 (오늘/주/월/커스텀)', required: true },
|
||||
],
|
||||
usedIn: ['Stripe Dashboard', 'Shopify Admin', 'Vercel Dashboard', 'SAM 메인 대시보드'],
|
||||
guidelines: 'KPI 카드는 숫자 + 변화율(▲▼) + 미니 스파크라인 조합. 가장 중요한 지표를 좌상단에 배치. 색상은 긍정(초록)/부정(빨강)으로 즉시 인지 가능하게.',
|
||||
},
|
||||
{
|
||||
type: 'pattern', title: '데이터 테이블 + 검색/필터', category: 'list', rating: 5,
|
||||
tags: ['테이블', '검색', '필터', '정렬', '페이지네이션'],
|
||||
memo: 'Airtable, Notion Database, GitHub Issues 등 데이터 중심 서비스의 핵심 패턴. CRUD 목록 화면의 표준.',
|
||||
components: [
|
||||
{ name: '검색바 (상단 고정, 플레이스홀더 힌트)', required: true },
|
||||
{ name: '필터 칩/드롭다운 (상태, 날짜, 카테고리)', required: true },
|
||||
{ name: '데이터 테이블 (컬럼 정렬, 행 선택)', required: true },
|
||||
{ name: '페이지네이션 / 무한 스크롤', required: true },
|
||||
{ name: '벌크 액션 바 (선택 시 나타남)', required: false },
|
||||
{ name: '컬럼 커스터마이징 (표시/숨기기)', required: false },
|
||||
],
|
||||
usedIn: ['Airtable', 'Notion', 'GitHub Issues', 'SAM 수주목록, 거래처목록, 품목목록'],
|
||||
guidelines: '검색은 debounce 300ms 적용. 필터 상태는 URL 파라미터로 유지 (뒤로가기 대응). 빈 상태 시 "결과 없음" + 필터 초기화 버튼 제공.',
|
||||
},
|
||||
{
|
||||
type: 'pattern', title: '칸반 보드 (Kanban)', category: 'dashboard', rating: 5,
|
||||
tags: ['칸반', '드래그앤드롭', '워크플로우', '상태관리'],
|
||||
memo: 'Trello, Jira, Linear, Notion Board 등 프로젝트 관리 도구의 핵심. 작업 상태를 시각적으로 한눈에 파악.',
|
||||
components: [
|
||||
{ name: '컬럼 헤더 (상태명 + 카드 수)', required: true },
|
||||
{ name: '드래그 가능 카드 (제목 + 라벨 + 담당자)', required: true },
|
||||
{ name: '컬럼 간 드래그 앤 드롭', required: true },
|
||||
{ name: '카드 추가 버튼 (각 컬럼 하단)', required: true },
|
||||
{ name: '필터 (담당자, 라벨, 우선순위)', required: false },
|
||||
{ name: 'WIP 제한 표시', required: false },
|
||||
],
|
||||
usedIn: ['Trello', 'Jira', 'Linear', 'Notion Board', 'GitHub Projects'],
|
||||
guidelines: '컬럼은 3~6개 권장 (너무 많으면 가독성 저하). 카드에는 핵심 정보만 표시 (제목 + 라벨 + 아바타). 드래그 시 시각적 피드백 필수.',
|
||||
},
|
||||
{
|
||||
type: 'pattern', title: 'Command Palette (Cmd+K)', category: 'navigation', rating: 5,
|
||||
tags: ['커맨드팔레트', '검색', '네비게이션', '키보드'],
|
||||
memo: 'Linear, Vercel, GitHub, VS Code, Figma 등 파워유저 대상 서비스의 필수 패턴. 키보드만으로 모든 기능에 접근.',
|
||||
components: [
|
||||
{ name: '오버레이 모달 (화면 중앙 상단)', required: true },
|
||||
{ name: '검색 입력란 (자동 포커스)', required: true },
|
||||
{ name: '결과 목록 (아이콘 + 이름 + 단축키)', required: true },
|
||||
{ name: '카테고리 그룹핑 (페이지, 액션, 최근)', required: true },
|
||||
{ name: '키보드 네비게이션 (↑↓ + Enter)', required: true },
|
||||
{ name: '최근 사용 기록', required: false },
|
||||
],
|
||||
usedIn: ['Linear', 'Vercel', 'GitHub', 'VS Code', 'Figma', 'Raycast'],
|
||||
guidelines: 'Cmd+K 또는 Ctrl+K로 열기. 타이핑 즉시 퍼지 검색. 결과는 최대 8~10개 표시. ESC로 닫기. 최근 사용 항목 상단 표시.',
|
||||
},
|
||||
{
|
||||
type: 'pattern', title: '사이드바 네비게이션', category: 'navigation', rating: 5,
|
||||
tags: ['사이드바', '메뉴', '네비게이션', '트리'],
|
||||
memo: 'Slack, Discord, Notion, Linear, VS Code 등 거의 모든 SaaS 앱의 기본 네비게이션. 접기/펼치기 + 트리 구조.',
|
||||
components: [
|
||||
{ name: '로고/앱 이름 (상단)', required: true },
|
||||
{ name: '메인 메뉴 그룹 (아이콘 + 라벨)', required: true },
|
||||
{ name: '접기/펼치기 토글', required: true },
|
||||
{ name: '현재 위치 하이라이트', required: true },
|
||||
{ name: '트리 구조 (하위 메뉴 들여쓰기)', required: false },
|
||||
{ name: '즐겨찾기/고정 섹션', required: false },
|
||||
{ name: '사용자 프로필 (하단)', required: false },
|
||||
],
|
||||
usedIn: ['Slack', 'Discord', 'Notion', 'Linear', 'VS Code', 'SAM MNG 사이드바'],
|
||||
guidelines: '너비 240~280px 권장. 접힌 상태에서는 아이콘만 표시 (56px). 메뉴 그룹 간 구분선. 활성 항목은 배경색 + 좌측 인디케이터.',
|
||||
},
|
||||
{
|
||||
type: 'pattern', title: '모달 폼 (생성/편집)', category: 'modal', rating: 4,
|
||||
tags: ['모달', '폼', 'CRUD', '입력'],
|
||||
memo: '대부분의 SaaS에서 레코드 생성/편집에 사용. 페이지 이동 없이 빠르게 데이터 입력. Notion, Linear, Jira 등.',
|
||||
components: [
|
||||
{ name: '오버레이 배경 (클릭 시 닫기)', required: true },
|
||||
{ name: '모달 헤더 (제목 + 닫기 버튼)', required: true },
|
||||
{ name: '폼 필드 (라벨 + 입력 + 검증 메시지)', required: true },
|
||||
{ name: '액션 버튼 (저장/취소, 우하단)', required: true },
|
||||
{ name: '키보드 지원 (ESC 닫기, Enter 저장)', required: true },
|
||||
{ name: '로딩 상태 표시', required: false },
|
||||
],
|
||||
usedIn: ['Linear', 'Notion', 'Jira', 'SAM 등록/수정 팝업'],
|
||||
guidelines: '너비 480~640px 권장. 필드 5개 이하면 모달, 그 이상이면 전체 페이지 고려. 필수 필드 * 표시. Tab 순서 정확히 설정.',
|
||||
},
|
||||
{
|
||||
type: 'pattern', title: '설정 페이지 (그룹 섹션)', category: 'form', rating: 4,
|
||||
tags: ['설정', '프로필', '섹션', '그룹'],
|
||||
memo: 'GitHub Settings, Vercel Settings, Notion Settings 등. 좌측 탭 메뉴 + 우측 섹션별 설정 카드.',
|
||||
components: [
|
||||
{ name: '좌측 탭 메뉴 (세로 목록)', required: true },
|
||||
{ name: '섹션 카드 (제목 + 설명 + 입력 필드)', required: true },
|
||||
{ name: '개별 저장 버튼 (섹션마다)', required: true },
|
||||
{ name: '위험 영역 (빨간 테두리, 하단 배치)', required: false },
|
||||
{ name: '변경사항 감지 (저장 안 된 변경 알림)', required: false },
|
||||
],
|
||||
usedIn: ['GitHub Settings', 'Vercel Settings', 'Notion Settings', 'SAM 시스템 설정'],
|
||||
guidelines: '좌측 탭은 고정, 우측은 스크롤. 섹션 간 명확한 구분선. 위험 작업(삭제, 비활성화)은 페이지 최하단 빨간 영역에 배치.',
|
||||
},
|
||||
{
|
||||
type: 'pattern', title: '타임라인/활동 피드', category: 'list', rating: 4,
|
||||
tags: ['타임라인', '피드', '활동로그', '히스토리'],
|
||||
memo: 'GitHub Activity, Twitter/X Feed, Slack Messages 등. 시간순 이벤트 흐름을 표시하는 패턴.',
|
||||
components: [
|
||||
{ name: '타임라인 세로선 (좌측)', required: true },
|
||||
{ name: '이벤트 노드 (아이콘 + 시간)', required: true },
|
||||
{ name: '이벤트 카드 (내용 + 작성자 + 시간)', required: true },
|
||||
{ name: '날짜 구분선', required: false },
|
||||
{ name: '더 보기 / 무한 스크롤', required: false },
|
||||
{ name: '이벤트 타입별 아이콘/색상', required: true },
|
||||
],
|
||||
usedIn: ['GitHub', 'Twitter/X', 'Slack', 'Jira', 'SAM 변경이력'],
|
||||
guidelines: '최신 이벤트 상단. 아이콘과 색상으로 이벤트 타입 즉시 구분. 시간 표시는 상대 시간(3분 전) + hover 시 절대 시간.',
|
||||
},
|
||||
{
|
||||
type: 'pattern', title: '트리 + 상세 분할 뷰', category: 'form', rating: 4,
|
||||
tags: ['트리', '분할뷰', '마스터-디테일', '패널'],
|
||||
memo: 'VS Code 파일 탐색기, Figma 레이어 패널, macOS Finder 컬럼 뷰. 계층 구조를 탐색하며 상세를 확인.',
|
||||
components: [
|
||||
{ name: '좌측 트리 패널 (접기/펼치기 노드)', required: true },
|
||||
{ name: '우측 상세 패널 (선택 항목 정보)', required: true },
|
||||
{ name: '분할선 (드래그 리사이즈)', required: false },
|
||||
{ name: '빈 상태 (선택 안 했을 때)', required: true },
|
||||
{ name: '트리 검색/필터', required: false },
|
||||
{ name: '드래그 앤 드롭 재정렬', required: false },
|
||||
],
|
||||
usedIn: ['VS Code', 'Figma', 'macOS Finder', 'SAM 메뉴관리, 조직도'],
|
||||
guidelines: '좌측 패널 240~320px, 최소 너비 제한. 선택 항목 시각적 하이라이트. 트리 깊이 4단계 이하 권장. 키보드 화살표 네비게이션 지원.',
|
||||
},
|
||||
{
|
||||
type: 'pattern', title: '온보딩 스테퍼/위자드', category: 'form', rating: 4,
|
||||
tags: ['온보딩', '스테퍼', '위자드', '단계별'],
|
||||
memo: 'Notion 초기 설정, Stripe 계정 생성, Linear 워크스페이스 설정 등. 복잡한 프로세스를 단계별로 안내.',
|
||||
components: [
|
||||
{ name: '진행 표시줄 (상단, 현재 단계 강조)', required: true },
|
||||
{ name: '단계별 카드 (제목 + 설명 + 입력)', required: true },
|
||||
{ name: '이전/다음 버튼', required: true },
|
||||
{ name: '단계 건너뛰기 옵션', required: false },
|
||||
{ name: '완료 축하 화면 (마지막 단계)', required: false },
|
||||
{ name: '현재 진행률 (예: 3/5)', required: true },
|
||||
],
|
||||
usedIn: ['Notion', 'Stripe', 'Linear', 'Vercel', 'SAM 초기 설정'],
|
||||
guidelines: '단계는 3~5개 권장. 각 단계는 하나의 주제에 집중. 이전 단계 데이터 유지. 진행률 시각적 표시 필수. 마지막 단계에서 전체 요약.',
|
||||
},
|
||||
{
|
||||
type: 'pattern', title: '토스트 알림 시스템', category: 'etc', rating: 4,
|
||||
tags: ['토스트', '알림', '피드백', '노티피케이션'],
|
||||
memo: 'Vercel, Linear, Notion 등 거의 모든 SaaS 앱. 사용자 액션에 대한 즉각적인 피드백을 비침습적으로 제공.',
|
||||
components: [
|
||||
{ name: '토스트 컨테이너 (우하단 고정)', required: true },
|
||||
{ name: '타입별 아이콘+색상 (성공/오류/경고/정보)', required: true },
|
||||
{ name: '메시지 텍스트 + 선택적 액션 버튼', required: true },
|
||||
{ name: '자동 사라짐 (3~5초)', required: true },
|
||||
{ name: '수동 닫기 (X 버튼)', required: true },
|
||||
{ name: '다중 토스트 스택', required: false },
|
||||
],
|
||||
usedIn: ['Vercel', 'Linear', 'Notion', 'Stripe', 'SAM 전역'],
|
||||
guidelines: '성공=초록, 오류=빨강, 경고=노랑, 정보=파랑. 텍스트는 1줄 이내. 되돌리기(Undo) 액션 제공 시 사용자 신뢰도 향상. 오류는 자동 사라짐 비활성화.',
|
||||
},
|
||||
{
|
||||
type: 'pattern', title: 'Empty State (빈 상태)', category: 'etc', rating: 4,
|
||||
tags: ['빈상태', '온보딩', '가이드', 'CTA'],
|
||||
memo: 'Dropbox, Mailchimp, Notion, Linear 등. 데이터가 없을 때 사용자를 안내하는 핵심 패턴. 이탈을 방지하고 첫 행동을 유도.',
|
||||
components: [
|
||||
{ name: '일러스트/아이콘 (시각적 안내)', required: true },
|
||||
{ name: '제목 (상황 설명)', required: true },
|
||||
{ name: '설명 텍스트 (다음 단계 안내)', required: true },
|
||||
{ name: 'CTA 버튼 (첫 행동 유도)', required: true },
|
||||
{ name: '대안 링크 (도움말, 템플릿 등)', required: false },
|
||||
],
|
||||
usedIn: ['Dropbox', 'Mailchimp', 'Notion', 'Linear', 'SAM 각 목록 화면'],
|
||||
guidelines: '일러스트는 브랜드 톤 유지. CTA 버튼은 1개만 (선택 피로 방지). "데이터 없음" 대신 긍정적 표현 사용 ("첫 프로젝트를 시작하세요!").',
|
||||
},
|
||||
{
|
||||
type: 'pattern', title: '검색 + 자동완성 드롭다운', category: 'navigation', rating: 4,
|
||||
tags: ['검색', '자동완성', '드롭다운', '서제스트'],
|
||||
memo: 'Google, Algolia, GitHub Search, Amazon 등. 타이핑과 동시에 결과를 보여주어 탐색 속도를 극대화.',
|
||||
components: [
|
||||
{ name: '검색 입력란 (돋보기 아이콘 + placeholder)', required: true },
|
||||
{ name: '자동완성 드롭다운 (입력 시 표시)', required: true },
|
||||
{ name: '결과 하이라이팅 (매칭 텍스트 볼드)', required: true },
|
||||
{ name: '카테고리별 그룹핑', required: false },
|
||||
{ name: '최근 검색 기록', required: false },
|
||||
{ name: '키보드 네비게이션 (↑↓ + Enter)', required: true },
|
||||
],
|
||||
usedIn: ['Google', 'Algolia', 'GitHub', 'Amazon', 'SAM 품목 검색'],
|
||||
guidelines: 'Debounce 200~300ms. 최소 2글자부터 검색. 결과 최대 8개. 키워드 하이라이팅 필수. ESC로 닫기, 외부 클릭 시 닫기.',
|
||||
},
|
||||
{
|
||||
type: 'pattern', title: '탭 레이아웃', category: 'navigation', rating: 4,
|
||||
tags: ['탭', '네비게이션', '섹션', '컨텐츠전환'],
|
||||
memo: 'Google Analytics, Stripe Dashboard, GitHub Repo 등. 같은 페이지 내에서 컨텐츠 섹션을 전환.',
|
||||
components: [
|
||||
{ name: '탭 바 (가로 목록, 활성 탭 하이라이트)', required: true },
|
||||
{ name: '탭 콘텐츠 영역', required: true },
|
||||
{ name: '탭 카운트 배지', required: false },
|
||||
{ name: '탭 아이콘 (선택적)', required: false },
|
||||
{ name: '탭 스크롤 (많을 때 화살표)', required: false },
|
||||
],
|
||||
usedIn: ['Google Analytics', 'Stripe', 'GitHub', 'SAM 품목기준관리, 설정'],
|
||||
guidelines: '탭 5개 이하 권장 (7개 초과 시 드롭다운 또는 더보기). 활성 탭은 하단 인디케이터 + 볼드. 탭 전환 시 URL 해시 변경 (북마크 가능).',
|
||||
},
|
||||
{
|
||||
type: 'pattern', title: '카드 그리드 레이아웃', category: 'dashboard', rating: 4,
|
||||
tags: ['카드', '그리드', '갤러리', '레이아웃'],
|
||||
memo: 'Pinterest, Dribbble, Notion Gallery, YouTube 등. 시각적 콘텐츠를 격자로 배열. 정보 밀도와 시각적 매력 균형.',
|
||||
components: [
|
||||
{ name: '반응형 그리드 컨테이너', required: true },
|
||||
{ name: '카드 (이미지 + 제목 + 메타정보)', required: true },
|
||||
{ name: '호버 오버레이 (액션 버튼)', required: false },
|
||||
{ name: '무한 스크롤 / 더 보기', required: false },
|
||||
{ name: '필터/정렬 툴바', required: false },
|
||||
],
|
||||
usedIn: ['Pinterest', 'Dribbble', 'YouTube', 'Notion Gallery', 'SAM 대시보드 카드'],
|
||||
guidelines: '카드 최소 너비 280px, 간격 16px. 이미지 비율 고정 (16:9 또는 4:3). 호버 시 그림자 + 미세 상승 효과. Skeleton 로딩 적용.',
|
||||
},
|
||||
{
|
||||
type: 'pattern', title: '가격표/플랜 비교', category: 'etc', rating: 4,
|
||||
tags: ['가격', '플랜', '비교', '테이블', 'CTA'],
|
||||
memo: 'Stripe, Vercel, Notion, Slack 등 SaaS 가격 페이지. 플랜 간 차이를 한눈에 비교하여 구매 결정을 유도.',
|
||||
components: [
|
||||
{ name: '플랜 카드 (이름 + 가격 + 주요 기능)', required: true },
|
||||
{ name: '추천 플랜 강조 (배지, 테두리)', required: true },
|
||||
{ name: 'CTA 버튼 (각 플랜마다)', required: true },
|
||||
{ name: '상세 기능 비교 테이블 (하단)', required: false },
|
||||
{ name: '월간/연간 토글', required: false },
|
||||
],
|
||||
usedIn: ['Stripe', 'Vercel', 'Notion', 'Slack', 'SAM 요금 안내'],
|
||||
guidelines: '3~4개 플랜 권장. 가장 인기 플랜을 시각적으로 강조. 가격은 크고 볼드하게. 무료 체험 CTA 제공. 기능 비교는 ✓/✗ 아이콘.',
|
||||
},
|
||||
{
|
||||
type: 'pattern', title: '캘린더 뷰', category: 'dashboard', rating: 4,
|
||||
tags: ['캘린더', '일정', '날짜', '이벤트'],
|
||||
memo: 'Google Calendar, Calendly, Notion Calendar 등. 시간 기반 데이터를 날짜 격자에 시각화.',
|
||||
components: [
|
||||
{ name: '월/주/일 뷰 전환 탭', required: true },
|
||||
{ name: '날짜 격자 (이벤트 표시)', required: true },
|
||||
{ name: '이벤트 카드 (색상 코딩)', required: true },
|
||||
{ name: '이전/다음 네비게이션', required: true },
|
||||
{ name: '오늘 버튼 (빠른 이동)', required: true },
|
||||
{ name: '이벤트 생성 (날짜 클릭)', required: false },
|
||||
],
|
||||
usedIn: ['Google Calendar', 'Calendly', 'Notion Calendar', 'SAM 일정관리, 근태'],
|
||||
guidelines: '오늘 날짜 강조 (원형 배경). 이벤트 색상은 카테고리별 구분. 주말 배경색 다르게. 이벤트 3개 초과 시 "+N more" 표시.',
|
||||
},
|
||||
{
|
||||
type: 'pattern', title: '채팅/메시징 인터페이스', category: 'etc', rating: 4,
|
||||
tags: ['채팅', '메시징', '실시간', '대화'],
|
||||
memo: 'Slack, Discord, Intercom, WhatsApp Web 등. 실시간 대화를 위한 인터페이스. 고객 지원 위젯에도 활용.',
|
||||
components: [
|
||||
{ name: '채널/대화 목록 (좌측)', required: true },
|
||||
{ name: '메시지 영역 (시간순 스크롤)', required: true },
|
||||
{ name: '메시지 입력란 (하단 고정)', required: true },
|
||||
{ name: '메시지 버블 (내 메시지 우측, 상대 좌측)', required: true },
|
||||
{ name: '첨부파일/이모지 버튼', required: false },
|
||||
{ name: '읽음 표시 / 타이핑 인디케이터', required: false },
|
||||
],
|
||||
usedIn: ['Slack', 'Discord', 'Intercom', 'WhatsApp Web'],
|
||||
guidelines: '새 메시지 자동 스크롤. 날짜 구분선. 연속 메시지는 아바타 한 번만 표시. 링크 미리보기. 이미지 인라인 표시.',
|
||||
},
|
||||
{
|
||||
type: 'pattern', title: '파일 업로드 + 진행률', category: 'modal', rating: 3,
|
||||
tags: ['업로드', '파일', '진행률', '드래그앤드롭'],
|
||||
memo: 'Dropbox, Google Drive, WeTransfer, Figma 등. 파일 업로드 과정을 시각적으로 안내하여 사용자 불안 해소.',
|
||||
components: [
|
||||
{ name: '드롭존 (점선 테두리, 드래그 안내)', required: true },
|
||||
{ name: '파일 선택 버튼', required: true },
|
||||
{ name: '업로드 진행률 바', required: true },
|
||||
{ name: '파일 목록 (이름 + 크기 + 상태)', required: true },
|
||||
{ name: '개별 취소/삭제 버튼', required: true },
|
||||
{ name: '미리보기 (이미지 썸네일)', required: false },
|
||||
],
|
||||
usedIn: ['Dropbox', 'Google Drive', 'WeTransfer', 'SAM 파일 첨부'],
|
||||
guidelines: '드래그 시 드롭존 하이라이트. 파일 크기/형식 제한 사전 안내. 실패 시 재시도 버튼. 다중 파일 동시 업로드 지원.',
|
||||
},
|
||||
{
|
||||
type: 'pattern', title: '브레드크럼 네비게이션', category: 'navigation', rating: 3,
|
||||
tags: ['브레드크럼', '경로', '네비게이션', '계층'],
|
||||
memo: 'AWS Console, Shopify Admin, Jira, SAM 등. 현재 위치를 계층적으로 표시하여 깊은 네비게이션에서 길을 잃지 않게.',
|
||||
components: [
|
||||
{ name: '경로 항목 (클릭 가능 링크)', required: true },
|
||||
{ name: '구분자 (/ 또는 > 아이콘)', required: true },
|
||||
{ name: '현재 페이지 (비링크, 볼드)', required: true },
|
||||
{ name: '긴 경로 말줄임 (중간 생략)', required: false },
|
||||
{ name: '드롭다운 (형제 페이지 선택)', required: false },
|
||||
],
|
||||
usedIn: ['AWS Console', 'Shopify', 'Jira', 'SAM 상세 페이지'],
|
||||
guidelines: '페이지 상단 좌측 배치. 글꼴 크기 12~13px. 현재 페이지는 클릭 불가 (시각적 구분). 3단계 이상일 때 가장 유용.',
|
||||
},
|
||||
];
|
||||
|
||||
const cards = presets.map(p => ({
|
||||
id: mkId(),
|
||||
type: p.type,
|
||||
title: p.title,
|
||||
image: '',
|
||||
memo: p.memo,
|
||||
source: '',
|
||||
tags: p.tags,
|
||||
category: p.category,
|
||||
rating: p.rating,
|
||||
pinned: false,
|
||||
archived: false,
|
||||
components: p.components || [],
|
||||
usedIn: p.usedIn || [],
|
||||
guidelines: p.guidelines || '',
|
||||
frequency: 0,
|
||||
principles: {},
|
||||
suggestion: '',
|
||||
severity: 'info',
|
||||
beforeImage: '',
|
||||
afterImage: '',
|
||||
changes: [],
|
||||
effect: '',
|
||||
createdAt: now,
|
||||
updatedAt: now,
|
||||
}));
|
||||
|
||||
if (!this.currentProject.cards) this.currentProject.cards = [];
|
||||
this.currentProject.cards = [...cards, ...this.currentProject.cards];
|
||||
this.saveProject();
|
||||
this.categoryFilter = 'pattern';
|
||||
this.toast('인기 UI 패턴 20종이 추가되었습니다');
|
||||
},
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user