diff --git a/resources/views/rd/design-insight/index.blade.php b/resources/views/rd/design-insight/index.blade.php
index 72ad4c38..29d90723 100644
--- a/resources/views/rd/design-insight/index.blade.php
+++ b/resources/views/rd/design-insight/index.blade.php
@@ -834,7 +834,7 @@
-
@@ -941,7 +941,7 @@
-
@@ -3422,6 +3422,938 @@ function designInsight() {
`;
+ // ===== 추가 50종 와이어프레임 (51~100) =====
+ // 게이지/미터
+ if (key.includes('게이지') || key.includes('미터') && key.includes('대시보드')) return `
+
+
+ ${[{l:'CPU 사용률',v:'73%',c:'#f59e0b',pct:73},{l:'메모리',v:'45%',c:'#10b981',pct:45},{l:'달성률',v:'92%',c:'#ef4444',pct:92}].map(g => `
+
+
+
+
${g.v}
+
${g.l}
+
+ `).join('')}
+
+
+
활동 기록
+
+
+ 월 수 금
+
+
+ ${Array.from({length:26},(_, w) => `
${Array.from({length:7},(_, d) => {
+ const r = Math.random();
+ const colors = ['#f1f5f9','#dcfce7','#86efac','#22c55e','#15803d'];
+ const ci = r > 0.7 ? (r > 0.9 ? 4 : 3) : (r > 0.4 ? (r > 0.55 ? 2 : 1) : 0);
+ return `
`;
+ }).join('')}
`).join('')}
+
+
+
+
적음
+ ${['#f1f5f9','#dcfce7','#86efac','#22c55e','#15803d'].map(c => `
`).join('')}
+
많음
+
+
+
수주 파이프라인
+ ${[{s:'리드',v:'1,240',w:100,c:'#bfdbfe'},{s:'미팅',v:'680',w:82,c:'#93c5fd',r:'54.8%'},{s:'제안',v:'340',w:64,c:'#60a5fa',r:'50.0%'},{s:'협상',v:'180',w:46,c:'#3b82f6',r:'52.9%'},{s:'수주',v:'95',w:28,c:'#1d4ed8',r:'52.8%'}].map(f => `
+
+
${f.s}
+
+ ${f.v}
+
+ ${f.r?`
→ ${f.r} `:''}
+
+ `).join('')}
+
+
+
기간 비교
+
+
3월
+
vs
+
2월
+
+
+ ${[{l:'매출',a:'₩48.5M',b:'₩42.1M',d:'+15.2%',up:true},{l:'수주',a:'247건',b:'198건',d:'+24.7%',up:true},{l:'미수금',a:'₩3.2M',b:'₩2.8M',d:'+14.3%',up:false},{l:'거래처',a:'52개',b:'49개',d:'+6.1%',up:true}].map(k =>
+ `
+
${k.l}
+
+ ${k.a}
+ ${k.b}
+
+
${k.up?'▲':'▲'} ${k.d}
+
`
+ ).join('')}
+
+
+
+
거래처 분포
+ ${['서울 28','경기 15','부산 8'].map(r => `
${r}개
`).join('')}
+
+
+ ${[{x:35,y:30,s:20,c:'#3b82f6'},{x:40,y:35,s:14,c:'#3b82f6'},{x:55,y:70,s:10,c:'#3b82f6'},{x:25,y:55,s:8,c:'#3b82f6'},{x:60,y:45,s:6,c:'#3b82f6'}].map(m =>
+ `
`
+ ).join('')}
+
서울
+
+
+
+ ${['수주 #1024|ABC산업|true','수주 #1023|XYZ전자|false','수주 #1022|한국물산|false','수주 #1021|글로벌|false'].map(r => {
+ const [t,c,a] = r.split('|');
+ return `
`;
+ }).join('')}
+
+
+
+
수주 #1024
+
+ 편집
+ 인쇄
+
+
+
+ ${['거래처|ABC산업(주)','금액|₩12,500,000','납기일|2026-04-15','상태|진행 중'].map(f => {
+ const [k,v] = f.split('|');
+ return `
`;
+ }).join('')}
+
+
+
+
+
이미지 라이브러리
+
+
▦
+
≡
+
정렬 ▾
+
+
+ ${[{h:70,c:'#bfdbfe',t:'도면 A-101'},{h:90,c:'#bbf7d0',t:'제품 사진'},{h:60,c:'#fde68a',t:'견적서'},{h:80,c:'#ddd6fe',t:'시방서'},{h:65,c:'#fecaca',t:'카탈로그'},{h:75,c:'#e0e7ff',t:'설치 매뉴얼'}].map(i => `
+
+ `).join('')}
+
+
+
+ 매출 분석 (피벗)
+
+
+
+
+ 거래처 \\ 월
+ 1월
+ 2월
+ 3월
+ 합계
+
+ ${[['ABC산업','12.5','15.2','18.3','46.0'],['XYZ전자','8.1','9.4','11.2','28.7'],['한국물산','5.3','6.8','7.5','19.6']].map(r =>
+ `${r[0]} ${r.slice(1).map((v,i) => `${v}M `).join('')}
+ 합계
+ 25.9M
+ 31.4M
+ 37.0M
+ 94.3M
+
+
+
+
+
+
프로젝트 로드맵
+
+
+ ${[{x:5,t:'기획',d:'1월',done:true},{x:25,t:'설계',d:'2월',done:true},{x:45,t:'개발',d:'3월',active:true},{x:65,t:'테스트',d:'4월'},{x:85,t:'배포',d:'5월'}].map(e => `
+
+
${e.done?'✓':e.active?'●':'○'}
+
${e.t}
+
${e.d}
+
+ `).join('')}
+
+
+
+
+ ${[{n:'▾ 블라인드 50mm',q:'1',p:'',a:'15,000',bold:true,lv:0},{n:'알루미늄 슬랫',q:'25',p:'200',a:'5,000',lv:1},{n:'헤드레일',q:'1',p:'3,000',a:'3,000',lv:1},{n:'▸ 부속품 세트',q:'1',p:'',a:'4,500',lv:1,collapsed:true},{n:'조작 코드',q:'1',p:'2,500',a:'2,500',lv:1}].map(r => `
+
+
${r.n}
+
${r.q}
+
${r.p}
+
${r.a}
+
+ `).join('')}
+
+
+ ${[{n:'1',t:'기본 정보',done:true},{n:'2',t:'상세 설정',active:true},{n:'3',t:'확인'}].map((s,i) => `
+
+ ${i>0?`
`:''}
+
${s.done?'✓':s.n}
+
+ `).join('')}
+
+
상세 설정
+ ${['납기일','배송 방법','결제 조건'].map(f => `
`).join('')}
+
+
+
태그
+
+ ${['블라인드','50mm','수동','알루미늄'].map(t => `${t}× `).join('')}
+ 태그 입력...
+
+
+ ${['전동','롤스크린','커튼'].map((s,i) => `
${s}
`).join('')}
+
+
+
+
+ 가격 범위
+ ₩10,000 ~ ₩50,000
+
+
+
₩0 ₩100,000
+
+
+
+
알림 설정
+ ${[{t:'이메일 알림',d:'수주/견적 상태 변경 시 이메일 발송',on:true},{t:'푸시 알림',d:'실시간 푸시 알림 수신',on:true},{t:'슬랙 연동',d:'슬랙 채널에 알림 전달',on:false},{t:'주간 리포트',d:'매주 월요일 주간 요약 발송',on:true},{t:'마케팅 메일',d:'신규 기능 안내 및 팁',on:false}].map(s => `
+
+ `).join('')}
+
+
+
+
+
+ ${['#ef4444','#f59e0b','#10b981','#3b82f6','#8b5cf6','#ec4899','#64748b','#1e293b'].map(c => `
`).join('')}
+
+
+
+
4.5
+
★★★★☆
+
128개 리뷰
+
+
+ ${[{s:5,w:65},{s:4,w:20},{s:3,w:8},{s:2,w:4},{s:1,w:3}].map(r => `
+
+ `).join('')}
+
+
+
+
+
+
+
필터
+ ${['상태','날짜 범위','거래처'].map(f => `
${f} 선택 ▸
`).join('')}
+
+
+
+
+
+
+ ${[{t:'복사',k:'⌘C'},{t:'붙여넣기',k:'⌘V'},{t:'잘라내기',k:'⌘X'},{sep:true},{t:'편집',icon:'✏️'},{t:'복제',icon:'📋'},{t:'이동',icon:'📁'},{sep:true},{t:'삭제',danger:true,icon:'🗑️'}].map(i =>
+ i.sep?`
`:
+ `
+ ${i.icon?`${i.icon} `:''}
+ ${i.t}
+ ${i.k?`${i.k} `:''}
+
`
+ ).join('')}
+
+
+
+
+
+ 수주 상세
+ ✕
+
+
+ ${['거래처|ABC산업','금액|₩12.5M','상태|진행 중','담당자|홍길동'].map(f => {
+ const [k,v] = f.split('|');
+ return `
`;
+ }).join('')}
+
+
+ 편집
+ 삭제
+
+
+
+
+
+
🍪
+
+
이 웹사이트는 쿠키를 사용합니다
+
더 나은 경험을 위해 쿠키를 사용합니다. 자세히 보기
+
+
+ 설정
+ 모두 동의
+
+
+
+
+
+ ${['대시보드','수주','거래처','품목'].map((m,i) => `
${m} `).join('')}
+
+
+
+
+
+
+
가이드 문서
+ ${['1. 소개','내용이 여기에 표시됩니다...','2. 설치 방법','npm install sam-sdk','3. 기본 사용법'].map((t,i) =>
+ i%2===0?`
${t}
`:
+ `
${t}
`
+ ).join('')}
+
+
+
목차
+ ${['소개','설치 방법','기본 사용법','API 레퍼런스','FAQ'].map((t,i) => `
+
${t}
+ `).join('')}
+
+
+
페이지네이션 유형
+
+
기본형
+
+ ${['◀','1','2','3','...','28','29','30','▶'].map(p => `${p} `).join('')}
+
+
+
+
미니형
+
+ ← 이전
+ 3 / 30
+ 다음 →
+
+
+
+
상세형
+
+
총 842건
+
|
+
페이지당 20 ▾
+
+
+ ${['◀','1','2','3','▶'].map(p => `${p} `).join('')}
+
+
+
+
+
+
+ ${[{icon:'📋',label:'수주 등록'},{icon:'🏢',label:'거래처 등록'},{icon:'📦',label:'품목 등록'}].map(a => `
+
+
${a.label}
+
${a.icon}
+
+ `).join('')}
+
+
+
+
+
+ ${[{icon:'📊',active:true},{icon:'📋',active:false},{icon:'🏢',active:false},{icon:'⚙️',active:false}].map(t => `
+
${t.icon}
+ `).join('')}
+
+
+
+
역할/권한 관리
+
+
+
+ 기능
+ 관리자
+ 매니저
+ 일반
+
+ ${[['수주 조회','✅','✅','✅'],['수주 등록','✅','✅','❌'],['수주 삭제','✅','❌','❌'],['설정 변경','✅','❌','❌'],['사용자 관리','✅','❌','❌']].map(r =>
+ `${r[0]} ${r.slice(1).map(v => `${v} `).join('')}
+
+
+
+
+ 활성 세션
+ 모두 로그아웃
+
+ ${[{d:'Chrome · Windows',ip:'192.168.1.100',time:'현재 활동 중',current:true},{d:'Safari · macOS',ip:'10.0.0.55',time:'2시간 전'},{d:'Samsung Internet · Android',ip:'172.16.0.12',time:'어제'}].map(s => `
+
+
${s.d.includes('Windows')?'💻':s.d.includes('mac')?'🖥️':'📱'}
+
+
${s.d} ${s.current?'이 기기 ':''}
+
${s.ip} · ${s.time}
+
+ ${!s.current?'
로그아웃 ':''}
+
+ `).join('')}
+
+
+ 🔑 API 키
+ + 새 키 생성
+
+ ${[{name:'Production Key',key:'sk-prod...x8f2',created:'2026-01-15',last:'2분 전'},{name:'Development Key',key:'sk-dev...m4k9',created:'2026-02-20',last:'1시간 전'},{name:'Test Key',key:'sk-test...p2j7',created:'2026-03-01',last:'3일 전'}].map(k => `
+
+
+
${k.name}
+
+ ${k.key}
+ 📋
+
+
생성: ${k.created} · 마지막 사용: ${k.last}
+
+
폐기
+
+ `).join('')}
+
+
+
프로젝트 일정
+
+
◀ 2026년 3월 ▶
+
+
+
+
작업
+ ${['기획','UI 설계','개발','테스트','배포'].map(t => `
${t}
`).join('')}
+
+
+
+ ${Array.from({length:10},(_, i) => `
${i+1}
`).join('')}
+
+ ${[{s:0,w:3,c:'#10b981',p:100},{s:2,w:3,c:'#3b82f6',p:80},{s:3,w:5,c:'#f59e0b',p:40},{s:6,w:3,c:'#8b5cf6',p:0},{s:8,w:2,c:'#ec4899',p:0}].map(b => `
+
+ `).join('')}
+
+
+
+
+
+
+
+
+ ${['영업팀|김영업','개발팀|이개발','생산팀|박생산'].map(d => {
+ const [dept,lead] = d.split('|');
+ return `
`;
+ }).join('')}
+
+
+
손익 분석
+
+ ${[{l:'매출',v:100,h:100,c:'#3b82f6',base:0},{l:'원가',v:-40,h:40,c:'#ef4444',base:60},{l:'판관비',v:-25,h:25,c:'#ef4444',base:35},{l:'기타수익',v:10,h:10,c:'#10b981',base:35},{l:'영업이익',v:45,h:45,c:'#8b5cf6',base:0}].map(b => `
+
+
${b.v>0?'+':''}${b.v}M
+
+
${b.l}
+
+ `).join('')}
+
+
+
+
필드 선택
+ ${['📋 거래처명','💰 수주금액','📅 수주일','👤 담당자','📊 상태'].map((f,i) => `
${f} ${i<3?'✓':''}
`).join('')}
+
차트
+ ${['📊 바','📈 라인','🍩 도넛'].map((c,i) => `
${c}
`).join('')}
+
+
+
미리보기
+
+
+ ${[60,40,80,50,70,90,45].map(h => `
`).join('')}
+
+
+
+ 실행
+ 저장
+ 📥 PDF
+
+
+
+
💬 댓글 3
+ ${[{u:'김영업',t:'견적 금액이 확정되면 알려주세요.',time:'2시간 전',replies:[{u:'이관리',t:'네, 오늘 중으로 확인하겠습니다.',time:'1시간 전'}]},{u:'박생산',t:'납기일 조정이 필요합니다.',time:'30분 전',replies:[]}].map(c => `
+
+
+
+
+
${c.u} ${c.time}
+
${c.t}
+
👍 2 답글
+ ${c.replies.map(r => `
+
+ `).join('')}
+
+
+
+ `).join('')}
+
+
404
+
페이지를 찾을 수 없습니다
+
요청하신 페이지가 존재하지 않거나
+
+ 홈으로 가기
+ ← 이전 페이지
+
+
+
+
+ ${['Basic','Pro','Enterprise'].map((p,i) => `
`).join('')}
+ ${[['사용자 수','5명','50명','무제한'],['저장 공간','1GB','10GB','무제한'],['API 호출','1,000/일','10,000/일','무제한'],['우선 지원','❌','✅','✅'],['커스텀 도메인','❌','❌','✅']].map(r =>
+ `
${r[0]}
${r.slice(1).map((v,i) => `
${v}
`).join('')}`
+ ).join('')}
+
+
+
+
◀
+
▶
+
+ ${[false,true,false,false,false].map(a => `
`).join('')}
+
+
+
자주 묻는 질문
+ ${[{q:'SAM은 어떤 서비스인가요?',a:'SAM은 블라인드/스크린 제조업체를 위한 ERP/MES 통합 솔루션입니다.',open:true},{q:'무료 체험이 가능한가요?',a:'',open:false},{q:'데이터 마이그레이션을 지원하나요?',a:'',open:false},{q:'커스터마이징이 가능한가요?',a:'',open:false}].map(f => `
+
+
+ ${f.q}
+ ▾
+
+ ${f.open?`
${f.a}
`:''}
+
+ `).join('')}
+
+
+
+
클릭 요소
+
+
+
팝오버 제목
+
추가 정보를 여기에 표시합니다.
+
+
+
+
수주 진행 상태
+
+ ${[{s:'수주 접수',t:'2026-03-01 09:00',done:true},{s:'설계 검토',t:'2026-03-03 14:00',done:true},{s:'생산 중',t:'2026-03-05 ~',active:true},{s:'품질 검사',t:'',wait:true},{s:'출하/배송',t:'',wait:true}].map(e => `
+
+
+
${e.done?'✓':e.active?'●':'○'}
+ ${!e.wait?`
`:''}
+
+
+
${e.s}
+ ${e.t?`
${e.t}
`:''}
+
+
+ `).join('')}
+
+
+
+ ${['1 업로드','2 매핑','3 확인'].map((s,i) => `
+
+ ${i>0?`
`:''}
+
${i+1}
+
${s.slice(2)}
+
+ `).join('')}
+
+
필드 매핑
+ ${['거래처명 → company_name','연락처 → phone','주소 → address'].map(m => `
+
+
${m.split(' → ')[0]}
+
→
+
${m.split(' → ')[1]}
+
+ `).join('')}
+
+
+
스마트한 제조 관리,
+
수주부터 출하까지, 하나의 플랫폼에서
+
+ 무료로 시작하기
+ 데모 보기
+
+
+ ${['제조사 120+','도입 6개월','만족도 98%'].map(s => `${s} `).join('')}
+
+
+
+
+
+
1 use App\\Http\\Controllers ;
+
2
+
3 Route ::get ('/orders' , function () {
+
4 return Order ::all ();
+
5 });
+
+
+
+ ⌨️ 키보드 단축키
+ ✕
+
+
+
일반
+ ${[['⌘ K','검색 열기'],['⌘ N','새로 만들기'],['⌘ S','저장']].map(([k,d]) => `
${d} ${k}
`).join('')}
+
네비게이션
+ ${[['G → D','대시보드'],['G → O','수주 목록'],['?','단축키 도움말']].map(([k,d]) => `
${d} ${k}
`).join('')}
+
+
+
+
📁 전체 파일
+ ${['📂 견적서','📂 도면','📂 계약서','📂 사진'].map((f,i) => `
${f}
`).join('')}
+
+
+
+
+ ${['A-101.dwg|📐','A-102.dwg|📐','제품사진.png|🖼️','시방서.pdf|📄','매뉴얼.pdf|📄','+ 새 폴더|📁'].map(f => {
+ const [n,i] = f.split('|');
+ return `
`;
+ }).join('')}
+
+
+
@@ -3764,7 +4696,7 @@ function designInsight() {
// ===== Preset Templates =====
loadPresetTemplates() {
const existing = (this.currentProject.cards || []).length;
- if (existing > 0 && !confirm('현재 프로젝트에 인기 UI 패턴 50종을 추가합니다. 계속하시겠습니까?')) return;
+ if (existing > 0 && !confirm('현재 프로젝트에 인기 UI 패턴 100종을 추가합니다. 계속하시겠습니까?')) return;
const now = new Date().toISOString();
const mkId = () => 'di_' + Date.now() + '_' + Math.random().toString(36).substr(2, 6);
@@ -4520,6 +5452,734 @@ function designInsight() {
usedIn: ['Airbnb', 'Booking.com', 'Google Flights', 'SAM 기간 필터'],
guidelines: '오늘 날짜 강조. 선택 불가 날짜 회색 처리. 기간 선택 시 범위 배경색. 모바일: 전체 화면 달력. 키보드: 화살표 키 이동.',
},
+ // ===== 추가 50종 (51~100) =====
+ // ===== 대시보드 추가 (5) =====
+ {
+ type: 'pattern', title: '게이지/미터 대시보드', category: 'dashboard', rating: 4,
+ tags: ['게이지', '미터', '진행률', '속도계'],
+ memo: 'Grafana, Datadog, 자동차 계기판 UI. 원형 게이지로 목표 달성률이나 시스템 사용률을 직관적으로 표시.',
+ components: [
+ { name: '원형 게이지 (반원 또는 전원)', required: true },
+ { name: '현재 값 (중앙 큰 텍스트)', required: true },
+ { name: '목표/한계 값 표시', required: true },
+ { name: '색상 구간 (초록/노랑/빨강)', required: true },
+ { name: '라벨 (측정 항목명)', required: true },
+ ],
+ usedIn: ['Grafana', 'Datadog', 'Google PageSpeed', 'SAM 생산 달성률'],
+ guidelines: '0~100% 범위. 초록(0~60%), 노랑(60~80%), 빨강(80~100%). 애니메이션 전환. 숫자는 게이지 중앙 크게 표시.',
+ },
+ {
+ type: 'pattern', title: '히트맵 캘린더 (활동 기록)', category: 'dashboard', rating: 4,
+ tags: ['히트맵', '캘린더', '활동', '잔디'],
+ memo: 'GitHub Contribution, Wakatime 등. 일별 활동량을 색상 농도로 표현하여 장기 패턴을 한눈에 파악.',
+ components: [
+ { name: '일별 셀 그리드 (52주 × 7일)', required: true },
+ { name: '색상 농도 스케일 (연→진)', required: true },
+ { name: '요일 라벨 (좌측)', required: true },
+ { name: '월 라벨 (상단)', required: true },
+ { name: '셀 hover 시 상세 툴팁', required: true },
+ ],
+ usedIn: ['GitHub', 'Wakatime', 'Habitica', 'SAM 출근 기록'],
+ guidelines: '5단계 색상 (없음/연/중/진/최대). 셀 크기 10~12px. 오늘 날짜 테두리 강조. 빈 날짜는 가장 연한 색.',
+ },
+ {
+ type: 'pattern', title: '퍼널/전환율 차트', category: 'dashboard', rating: 4,
+ tags: ['퍼널', '전환율', '세일즈', '단계'],
+ memo: 'HubSpot, Salesforce, Mixpanel 등. 단계별 전환율을 시각화하여 이탈 구간을 파악하는 세일즈/마케팅 핵심 차트.',
+ components: [
+ { name: '단계별 사다리꼴 바', required: true },
+ { name: '각 단계 수치 + 전환율 (%)', required: true },
+ { name: '단계 간 이탈률 표시', required: true },
+ { name: '단계 라벨', required: true },
+ { name: '기간 필터', required: false },
+ ],
+ usedIn: ['HubSpot', 'Salesforce', 'Mixpanel', 'SAM 수주 파이프라인'],
+ guidelines: '최상단이 가장 넓고 아래로 좁아지는 형태. 전환율은 단계 사이에 표시. 이탈률이 큰 구간 빨간 강조.',
+ },
+ {
+ type: 'pattern', title: '비교 대시보드 (전월 vs 당월)', category: 'dashboard', rating: 3,
+ tags: ['비교', '전월', '당월', '증감'],
+ memo: 'Google Analytics 비교 뷰, Stripe 비교 등. 두 기간의 데이터를 나란히 비교하여 성과 변화를 분석.',
+ components: [
+ { name: '기간 A / 기간 B 선택기', required: true },
+ { name: '병렬 KPI 카드 (A vs B)', required: true },
+ { name: '증감률 화살표 + 색상', required: true },
+ { name: '겹친 라인 차트 (비교)', required: true },
+ { name: '차이 요약 테이블', required: false },
+ ],
+ usedIn: ['Google Analytics', 'Stripe', 'Shopify', 'SAM 월간 비교'],
+ guidelines: '기간 A는 실선, B는 점선. 증가=초록, 감소=빨강. 카드에서 양쪽 숫자 나란히 표시. 차이 절대값 + 퍼센트 동시 표시.',
+ },
+ {
+ type: 'pattern', title: '지도 기반 데이터 시각화', category: 'dashboard', rating: 3,
+ tags: ['지도', '위치', '지리', '분포'],
+ memo: 'Google Maps, Mapbox, Tableau 지도 등. 지역별 데이터 분포를 지도 위에 시각화.',
+ components: [
+ { name: '지도 배경 (벡터/래스터)', required: true },
+ { name: '데이터 마커/핀', required: true },
+ { name: '클러스터링 (밀집 지역)', required: false },
+ { name: '범례 (색상/크기 의미)', required: true },
+ { name: '지역 hover 상세 정보', required: true },
+ ],
+ usedIn: ['Google Maps', 'Tableau', 'Uber', 'SAM 거래처 분포'],
+ guidelines: '마커는 데이터 크기에 비례. 밀집 시 클러스터 자동 그룹핑. 지역 클릭 시 드릴다운. 줌 레벨별 상세도 조절.',
+ },
+ // ===== 목록 추가 (5) =====
+ {
+ type: 'pattern', title: '마스터-디테일 레이아웃', category: 'list', rating: 5,
+ tags: ['마스터', '디테일', '분할', '목록상세'],
+ memo: 'Apple Mail, Outlook, Notion 등. 좌측 목록 + 우측 상세의 2패널 구조. ERP에서 가장 빈번히 사용.',
+ components: [
+ { name: '좌측 목록 패널 (검색 + 스크롤)', required: true },
+ { name: '우측 상세 패널', required: true },
+ { name: '목록 항목 선택 하이라이트', required: true },
+ { name: '리사이즈 핸들 (패널 너비 조절)', required: false },
+ { name: '상세 패널 탭 (정보/이력/첨부)', required: false },
+ { name: '빈 상태 (선택 안 됨)', required: true },
+ ],
+ usedIn: ['Apple Mail', 'Outlook', 'Notion', 'SAM 수주/거래처 상세'],
+ guidelines: '좌측 300~400px 고정, 우측 flex:1. 목록에서 현재 선택은 파란 배경. 모바일: 스택 레이아웃 (목록→상세 전환).',
+ },
+ {
+ type: 'pattern', title: '타일/썸네일 뷰', category: 'list', rating: 3,
+ tags: ['타일', '썸네일', '갤러리', '그리드뷰'],
+ memo: 'Pinterest, Dribbble, macOS Finder 등. 이미지 중심 데이터를 그리드 타일로 표시하는 시각적 목록.',
+ components: [
+ { name: '이미지 썸네일 (메인)', required: true },
+ { name: '타이틀 + 메타정보', required: true },
+ { name: 'Masonry/균등 그리드 레이아웃', required: true },
+ { name: '뷰 모드 전환 (타일/목록)', required: true },
+ { name: '정렬 옵션', required: false },
+ ],
+ usedIn: ['Pinterest', 'Dribbble', 'macOS Finder', 'SAM 도면/이미지 관리'],
+ guidelines: '타일 최소 200px, 최대 4열. 이미지 비율 유지 (object-fit: cover). hover 시 오버레이 액션. lazy loading 적용.',
+ },
+ {
+ type: 'pattern', title: '피벗 테이블', category: 'list', rating: 4,
+ tags: ['피벗', '크로스탭', '집계', '엑셀'],
+ memo: 'Excel 피벗, Google Sheets, Tableau 등. 행/열 교차 집계로 다차원 데이터를 분석하는 테이블.',
+ components: [
+ { name: '행 헤더 (그룹핑 기준)', required: true },
+ { name: '열 헤더 (분석 차원)', required: true },
+ { name: '데이터 셀 (집계 값)', required: true },
+ { name: '행/열 합계', required: true },
+ { name: '필드 드래그 앤 드롭 (행↔열)', required: false },
+ { name: '집계 함수 선택 (합계/평균/카운트)', required: false },
+ ],
+ usedIn: ['Excel', 'Google Sheets', 'Tableau', 'SAM 매출 분석'],
+ guidelines: '행 그룹 접기/펼치기. 합계 행은 볼드 + 배경색. 금액은 천단위 콤마 우측 정렬. 큰 데이터는 가상 스크롤.',
+ },
+ {
+ type: 'pattern', title: '수평 타임라인', category: 'list', rating: 3,
+ tags: ['타임라인', '수평', '이력', '연대기'],
+ memo: 'LinkedIn Experience, 프로젝트 로드맵, 제품 릴리즈 히스토리 등. 시간순 이벤트를 가로로 나열.',
+ components: [
+ { name: '수평 축 (시간선)', required: true },
+ { name: '이벤트 노드 (점/아이콘)', required: true },
+ { name: '이벤트 카드 (상/하 교대 배치)', required: true },
+ { name: '스크롤/드래그 네비게이션', required: true },
+ { name: '현재 시점 표시', required: false },
+ ],
+ usedIn: ['LinkedIn', 'Jira Roadmap', 'Product Hunt', 'SAM 프로젝트 이력'],
+ guidelines: '카드를 상/하 교대로 배치하여 가독성 확보. 현재 시점 빨간 선. 이벤트 노드 클릭 시 상세 팝업. 좌우 스크롤 또는 드래그.',
+ },
+ {
+ type: 'pattern', title: '트리 테이블 (계층형 데이터)', category: 'list', rating: 4,
+ tags: ['트리', '계층', '테이블', '접기펼치기'],
+ memo: 'Jira 이슈 트리, BOM 구조, 파일 탐색기 등. 테이블 행 안에서 부모-자식 관계를 트리로 표현.',
+ components: [
+ { name: '접기/펼치기 화살표 (행 좌측)', required: true },
+ { name: '들여쓰기 레벨 (depth 표현)', required: true },
+ { name: '테이블 헤더 (일반 컬럼)', required: true },
+ { name: '부모 행 볼드/배경색 구분', required: false },
+ { name: '전체 펼치기/접기 버튼', required: true },
+ ],
+ usedIn: ['Jira', 'SAM BOM 트리', 'Windows Explorer', 'macOS Finder'],
+ guidelines: '레벨당 들여쓰기 16~20px. 리프 노드는 화살표 없음. 접힌 상태에서 자식 수 표시. Shift+클릭으로 재귀 펼치기.',
+ },
+ // ===== 폼 추가 (8) =====
+ {
+ type: 'pattern', title: '멀티 스텝 폼 (위자드)', category: 'form', rating: 5,
+ tags: ['멀티스텝', '위자드', '단계', '폼'],
+ memo: 'Typeform, Stripe Checkout, HubSpot 등. 복잡한 폼을 여러 단계로 나눠 사용자 부담을 줄이는 패턴.',
+ components: [
+ { name: '진행 바/스텝 인디케이터', required: true },
+ { name: '현재 단계 폼 필드', required: true },
+ { name: '이전/다음 버튼', required: true },
+ { name: '단계별 유효성 검사', required: true },
+ { name: '요약/확인 단계 (마지막)', required: true },
+ { name: '임시 저장 (중간 이탈 방지)', required: false },
+ ],
+ usedIn: ['Typeform', 'Stripe Checkout', 'HubSpot', 'SAM 견적 등록'],
+ guidelines: '3~5단계 권장. 각 단계 필드 3~5개 이내. 완료 단계에 확인 아이콘. 진행 바에 퍼센트 또는 단계 번호 표시.',
+ },
+ {
+ type: 'pattern', title: '주소 검색/입력 폼', category: 'form', rating: 3,
+ tags: ['주소', '검색', '우편번호', 'API'],
+ memo: '다음 주소 API, Google Places, 네이버 지도 등. 우편번호 검색 후 상세주소를 입력하는 한국형 주소 입력.',
+ components: [
+ { name: '우편번호 검색 버튼', required: true },
+ { name: '주소 검색 모달/팝업', required: true },
+ { name: '기본 주소 (자동 채워짐)', required: true },
+ { name: '상세 주소 입력란', required: true },
+ { name: '검색 결과 목록', required: true },
+ ],
+ usedIn: ['카카오 주소 API', '네이버 주소', 'SAM 거래처 주소'],
+ guidelines: '검색창에 동/도로명/건물명 입력. 결과 클릭 시 기본주소 자동 채움 + 상세주소 포커스. 모바일: 전체 화면 검색.',
+ },
+ {
+ type: 'pattern', title: '태그/칩 입력', category: 'form', rating: 4,
+ tags: ['태그', '칩', '다중선택', '입력'],
+ memo: 'Gmail 수신자, Notion 태그, Jira 라벨 등. 여러 항목을 태그 형태로 추가/삭제하는 입력 UI.',
+ components: [
+ { name: '입력 필드 (텍스트 입력)', required: true },
+ { name: '태그 칩 (X 삭제 버튼)', required: true },
+ { name: '자동완성 드롭다운', required: true },
+ { name: 'Enter/콤마로 추가', required: true },
+ { name: 'Backspace로 마지막 태그 삭제', required: true },
+ { name: '드래그로 순서 변경', required: false },
+ ],
+ usedIn: ['Gmail', 'Notion', 'Jira', 'SAM 품목 태그'],
+ guidelines: '태그 칩 높이 24px, pill 형태. 입력 필드와 태그가 같은 줄에 배치. 중복 태그 방지 (이미 있으면 깜빡임). 최대 개수 제한 안내.',
+ },
+ {
+ type: 'pattern', title: '슬라이더/레인지 입력', category: 'form', rating: 3,
+ tags: ['슬라이더', '레인지', '범위', '조절'],
+ memo: 'Airbnb 가격 필터, YouTube 볼륨, Figma 투명도 등. 드래그로 수치를 조절하는 입력 컨트롤.',
+ components: [
+ { name: '트랙 바 (가로 선)', required: true },
+ { name: '핸들/썸 (드래그 포인트)', required: true },
+ { name: '현재 값 표시 (핸들 위 또는 옆)', required: true },
+ { name: '최소/최대 라벨', required: true },
+ { name: '범위 선택 (핸들 2개)', required: false },
+ { name: '수치 직접 입력 (옆 필드)', required: false },
+ ],
+ usedIn: ['Airbnb', 'YouTube', 'Figma', 'SAM 가격 필터'],
+ guidelines: '핸들 크기 최소 20px (터치 영역 44px). 드래그 중 값 실시간 업데이트. 스텝 단위 설정 가능. 키보드: 좌우 화살표로 미세 조정.',
+ },
+ {
+ type: 'pattern', title: '토글 설정 패널', category: 'form', rating: 3,
+ tags: ['토글', '스위치', '설정', '온오프'],
+ memo: 'iOS 설정, Android 설정, Notion 설정 등. 각 옵션을 토글 스위치로 켜고 끄는 설정 패널.',
+ components: [
+ { name: '토글 스위치 (ON/OFF)', required: true },
+ { name: '옵션 라벨 + 설명', required: true },
+ { name: '섹션 그룹핑', required: true },
+ { name: '위험한 설정 빨간 강조', required: false },
+ { name: '변경 시 즉시 저장 / 저장 버튼', required: true },
+ ],
+ usedIn: ['iOS 설정', 'Android 설정', 'Notion', 'SAM 알림 설정'],
+ guidelines: '토글 너비 44px, 높이 24px. ON=파랑/초록, OFF=회색. 라벨 좌측, 토글 우측 정렬. 변경 사항 즉시 저장 또는 하단 저장 버튼.',
+ },
+ {
+ type: 'pattern', title: '서명 패드 (전자 서명)', category: 'form', rating: 3,
+ tags: ['서명', '전자서명', '캔버스', '필기'],
+ memo: 'DocuSign, Adobe Sign, SAM 전자결재 등. 마우스/터치로 직접 서명을 작성하는 UI.',
+ components: [
+ { name: '캔버스 영역 (서명 작성)', required: true },
+ { name: '지우기 버튼', required: true },
+ { name: '펜 굵기/색상 옵션', required: false },
+ { name: '서명 완료/확인 버튼', required: true },
+ { name: '서명 이미지 미리보기', required: false },
+ { name: '텍스트 서명 옵션 (타이핑)', required: false },
+ ],
+ usedIn: ['DocuSign', 'Adobe Sign', 'HelloSign', 'SAM 전자결재 서명'],
+ guidelines: '캔버스 배경 연한 줄무늬. 펜 압력 감지 (가능 시). 서명 이미지 PNG/SVG로 저장. 모바일: 가로 모드 권장.',
+ },
+ {
+ type: 'pattern', title: '컬러 피커', category: 'form', rating: 3,
+ tags: ['컬러', '색상', '피커', '팔레트'],
+ memo: 'Figma, Photoshop, Notion 등 디자인 도구. 색상을 시각적으로 선택하는 UI 컴포넌트.',
+ components: [
+ { name: '색상 영역 (Saturation/Brightness)', required: true },
+ { name: '색상 바 (Hue 슬라이더)', required: true },
+ { name: '투명도 슬라이더 (Alpha)', required: false },
+ { name: 'HEX/RGB/HSL 입력', required: true },
+ { name: '최근 사용 색상', required: false },
+ { name: '프리셋 팔레트', required: false },
+ ],
+ usedIn: ['Figma', 'Photoshop', 'VS Code', 'SAM 테마 설정'],
+ guidelines: '미리보기 원형 또는 사각형. HEX 6자리 입력. 스포이드 도구 (브라우저 지원 시). 자주 사용 색상 저장.',
+ },
+ {
+ type: 'pattern', title: '평점/별점 입력', category: 'form', rating: 3,
+ tags: ['별점', '평점', '리뷰', '평가'],
+ memo: 'Amazon, Google Maps, App Store 등. 별 아이콘을 클릭하여 점수를 매기는 UI.',
+ components: [
+ { name: '별 아이콘 5개 (클릭 가능)', required: true },
+ { name: 'hover 시 미리보기', required: true },
+ { name: '반별 (0.5점 단위) 지원', required: false },
+ { name: '숫자 표시 (4.5/5.0)', required: true },
+ { name: '리뷰 텍스트 영역', required: false },
+ ],
+ usedIn: ['Amazon', 'Google Maps', 'App Store', 'SAM 공급업체 평가'],
+ guidelines: '별 크기 24~32px. 채워진 별=노랑, 빈 별=회색. hover 시 해당 별까지 채워짐. 읽기 전용 모드: 평균 + 리뷰 수.',
+ },
+ // ===== 모달/팝업 추가 (5) =====
+ {
+ type: 'pattern', title: '바텀 시트 (모바일)', category: 'modal', rating: 4,
+ tags: ['바텀시트', '모바일', '시트', '슬라이드업'],
+ memo: 'Google Maps, Apple Maps, Uber 등 모바일 앱. 화면 하단에서 올라오는 시트형 모달.',
+ components: [
+ { name: '드래그 핸들 (상단 바)', required: true },
+ { name: '시트 콘텐츠', required: true },
+ { name: '반쯤 열린 / 완전히 열린 상태', required: true },
+ { name: '배경 딤 (오버레이)', required: true },
+ { name: '아래로 스와이프 닫기', required: true },
+ ],
+ usedIn: ['Google Maps', 'Apple Maps', 'Uber', 'SAM 모바일 필터'],
+ guidelines: '핸들 바 너비 40px, 높이 4px, 중앙 배치. 3단계 높이 (peek/half/full). 스와이프 속도에 따라 닫기 판단. 배경 탭 시 닫기.',
+ },
+ {
+ type: 'pattern', title: '컨텍스트 메뉴 (우클릭)', category: 'modal', rating: 3,
+ tags: ['컨텍스트', '우클릭', '메뉴', '팝업'],
+ memo: 'VS Code, Figma, macOS 등. 마우스 우클릭 위치에 나타나는 상황별 액션 메뉴.',
+ components: [
+ { name: '메뉴 항목 목록', required: true },
+ { name: '키보드 단축키 표시', required: true },
+ { name: '구분선 (그룹 분리)', required: true },
+ { name: '아이콘 (항목 좌측)', required: false },
+ { name: '비활성 항목 (회색)', required: true },
+ { name: '서브메뉴 (우측 화살표)', required: false },
+ ],
+ usedIn: ['VS Code', 'Figma', 'macOS', 'SAM 테이블 우클릭'],
+ guidelines: '마우스 위치에 생성 (화면 밖으로 나가지 않게 조정). 외부 클릭 시 닫기. 메뉴 항목 높이 28~32px. 위험 항목 빨간색.',
+ },
+ {
+ type: 'pattern', title: '슬라이드오버 상세 패널', category: 'modal', rating: 4,
+ tags: ['슬라이드오버', '패널', '사이드', '상세'],
+ memo: 'AWS Console, Jira 상세, Salesforce Record 등. 우측에서 슬라이드하여 상세 정보를 보여주는 패널.',
+ components: [
+ { name: '우측 슬라이드 패널 (320~480px)', required: true },
+ { name: '패널 헤더 (제목 + 닫기)', required: true },
+ { name: '콘텐츠 영역 (스크롤)', required: true },
+ { name: '배경 딤 (반투명)', required: true },
+ { name: '하단 액션 버튼 (고정)', required: false },
+ ],
+ usedIn: ['AWS Console', 'Jira', 'Salesforce', 'SAM 수주 상세'],
+ guidelines: '패널 너비 400~500px. 뒤 페이지는 어둡게 + 클릭 가능(닫기). 슬라이드 애니메이션 200~300ms. ESC로 닫기.',
+ },
+ {
+ type: 'pattern', title: '쿠키/개인정보 동의 배너', category: 'modal', rating: 3,
+ tags: ['쿠키', '동의', 'GDPR', '배너'],
+ memo: 'EU GDPR 대응. 거의 모든 웹사이트에 필수. 쿠키 사용 동의를 받는 하단 배너 또는 모달.',
+ components: [
+ { name: '안내 텍스트 (쿠키 사용 목적)', required: true },
+ { name: '동의/거부 버튼', required: true },
+ { name: '상세 설정 링크', required: true },
+ { name: '개인정보처리방침 링크', required: true },
+ { name: '카테고리별 토글 (필수/분석/마케팅)', required: false },
+ ],
+ usedIn: ['EU 웹사이트 전체', 'Vercel', 'Notion', 'SAM (향후 적용)'],
+ guidelines: '하단 고정 또는 중앙 모달. "모두 동의" 버튼 강조. 필수 쿠키는 비활성화 불가 (회색 토글). 닫기 버튼 없이 선택 강제.',
+ },
+ {
+ type: 'pattern', title: '풀스크린 모달 (이머시브)', category: 'modal', rating: 3,
+ tags: ['풀스크린', '전체화면', '모달', '이머시브'],
+ memo: 'Medium 글쓰기, Notion 전체화면, Google Docs 등. 전체 화면을 차지하는 몰입형 모달.',
+ components: [
+ { name: '전체 화면 오버레이', required: true },
+ { name: '상단 툴바 (닫기 + 액션)', required: true },
+ { name: '중앙 콘텐츠 영역 (최대 너비 제한)', required: true },
+ { name: '닫기 버튼 (좌상단 또는 우상단)', required: true },
+ { name: '저장/발행 버튼', required: false },
+ ],
+ usedIn: ['Medium', 'Notion', 'Google Docs', 'SAM 문서 편집'],
+ guidelines: '배경 완전 흰색 또는 단색. 콘텐츠 최대 너비 720~800px (가독성). ESC로 닫기 + 저장 안 됨 확인. 애니메이션: fade-in.',
+ },
+ // ===== 네비게이션 추가 (5) =====
+ {
+ type: 'pattern', title: '탑 네비게이션 바 + 검색', category: 'navigation', rating: 5,
+ tags: ['탑바', 'GNB', '검색', '헤더'],
+ memo: 'GitHub, Notion, AWS Console 등. 상단 고정 네비게이션 바. 로고 + 메뉴 + 검색 + 프로필의 표준 구조.',
+ components: [
+ { name: '로고 (좌측)', required: true },
+ { name: '메뉴 항목 (중앙 또는 좌측)', required: true },
+ { name: '검색 바 (중앙)', required: true },
+ { name: '알림 아이콘 + 배지', required: false },
+ { name: '프로필 아바타 + 드롭다운', required: true },
+ ],
+ usedIn: ['GitHub', 'Notion', 'AWS', 'SAM 상단 헤더'],
+ guidelines: '높이 48~64px. position: sticky. 스크롤 시 그림자 추가. 검색: Ctrl+K 단축키. 프로필 클릭 시 드롭다운 메뉴.',
+ },
+ {
+ type: 'pattern', title: '앵커/스크롤 스파이 네비게이션', category: 'navigation', rating: 3,
+ tags: ['앵커', '스크롤스파이', '목차', '사이드'],
+ memo: 'Bootstrap Docs, MDN, Tailwind Docs 등. 긴 문서에서 현재 섹션을 추적하는 사이드 목차.',
+ components: [
+ { name: '섹션 링크 목록 (사이드)', required: true },
+ { name: '현재 섹션 하이라이트', required: true },
+ { name: '스크롤 연동 (자동 추적)', required: true },
+ { name: '클릭 시 스무스 스크롤', required: true },
+ { name: '들여쓰기 (서브섹션)', required: false },
+ ],
+ usedIn: ['Bootstrap Docs', 'MDN', 'Tailwind CSS', 'SAM 가이드 페이지'],
+ guidelines: '사이드 고정 (position: sticky). IntersectionObserver로 현재 섹션 감지. 현재 섹션 파란색 + 좌측 바. 모바일: 상단 드롭다운.',
+ },
+ {
+ type: 'pattern', title: '페이지네이션 패턴', category: 'navigation', rating: 4,
+ tags: ['페이지네이션', '페이지', '이동', '넘기기'],
+ memo: 'Google 검색, GitHub Issues 등. 대량 데이터를 페이지 단위로 나누어 탐색하는 UI.',
+ components: [
+ { name: '이전/다음 버튼', required: true },
+ { name: '페이지 번호 (1, 2, 3...)', required: true },
+ { name: '말줄임 (1 ... 5 6 7 ... 20)', required: true },
+ { name: '첫 페이지/마지막 페이지', required: true },
+ { name: '페이지당 표시 수 선택', required: false },
+ { name: '총 결과 수 표시', required: true },
+ ],
+ usedIn: ['Google 검색', 'GitHub', 'AWS Console', 'SAM 목록 페이지'],
+ guidelines: '현재 페이지 파란 배경. 표시 페이지 5~7개. 양 끝에 말줄임(...). 첫/마지막 페이지는 항상 표시. 모바일: 이전/다음만.',
+ },
+ {
+ type: 'pattern', title: '플로팅 액션 버튼 (FAB)', category: 'navigation', rating: 3,
+ tags: ['FAB', '플로팅', '액션', '버튼'],
+ memo: 'Material Design, Gmail, Google Docs 등. 화면 하단에 떠있는 주요 액션 버튼.',
+ components: [
+ { name: '원형 버튼 (고정 위치)', required: true },
+ { name: '아이콘 (+ 기호)', required: true },
+ { name: '확장 메뉴 (클릭 시 다중 액션)', required: false },
+ { name: '스크롤 시 축소/숨기기', required: false },
+ { name: '툴팁 라벨', required: false },
+ ],
+ usedIn: ['Gmail', 'Google Docs', 'Material Design', 'SAM 모바일 빠른 등록'],
+ guidelines: '우하단 고정 (right: 24px, bottom: 24px). 크기 56px (mini: 40px). 그림자 필수. 확장 시 위로 액션 아이콘 나열.',
+ },
+ {
+ type: 'pattern', title: '사이드 탭 (세로 탭)', category: 'navigation', rating: 3,
+ tags: ['세로탭', '사이드탭', '수직탭', '패널'],
+ memo: 'VS Code 사이드바, Slack 좌측, Notion 좌측 등. 좌측에 세로로 배치된 탭으로 콘텐츠를 전환.',
+ components: [
+ { name: '세로 탭 목록 (좌측)', required: true },
+ { name: '활성 탭 하이라이트', required: true },
+ { name: '아이콘 + 라벨 (선택적)', required: true },
+ { name: '콘텐츠 패널 (우측)', required: true },
+ { name: '아이콘만 모드 (축소)', required: false },
+ ],
+ usedIn: ['VS Code', 'Slack', 'Notion', 'SAM 설정 페이지'],
+ guidelines: '탭 너비: 확장 200px, 축소 48px. 활성 탭: 좌측 파란 바 + 배경색. 아이콘: 24px, 라벨: 12~14px. 키보드: ↑↓ 탭 전환.',
+ },
+ // ===== 인증 추가 (3) =====
+ {
+ type: 'pattern', title: '역할/권한 관리 (RBAC)', category: 'auth', rating: 4,
+ tags: ['권한', 'RBAC', '역할', '접근제어'],
+ memo: 'AWS IAM, GitHub Org Settings, Notion Permissions 등. 역할 기반 접근 제어를 관리하는 UI.',
+ components: [
+ { name: '역할 목록 (관리자, 편집자, 뷰어)', required: true },
+ { name: '권한 매트릭스 (역할 × 기능)', required: true },
+ { name: '체크박스/토글 (권한 부여)', required: true },
+ { name: '역할 생성/편집/삭제', required: true },
+ { name: '사용자-역할 배정', required: true },
+ ],
+ usedIn: ['AWS IAM', 'GitHub', 'Notion', 'SAM 부서 권한 관리'],
+ guidelines: '매트릭스: 행=권한, 열=역할. 체크/언체크로 즉시 변경. 관리자 역할은 수정 불가 (잠금 아이콘). 변경 시 확인 다이얼로그.',
+ },
+ {
+ type: 'pattern', title: '세션/디바이스 관리', category: 'auth', rating: 3,
+ tags: ['세션', '디바이스', '보안', '로그아웃'],
+ memo: 'Google 계정, GitHub Sessions, Notion 등. 로그인된 디바이스/세션을 관리하고 원격 로그아웃.',
+ components: [
+ { name: '활성 세션 목록', required: true },
+ { name: '디바이스 정보 (OS, 브라우저, IP)', required: true },
+ { name: '마지막 활동 시간', required: true },
+ { name: '현재 세션 표시 (이 기기)', required: true },
+ { name: '개별/전체 로그아웃 버튼', required: true },
+ ],
+ usedIn: ['Google 계정', 'GitHub', 'Notion', 'SAM 보안 설정'],
+ guidelines: '현재 세션은 "이 기기" 초록 배지. 디바이스 아이콘 (데스크톱/모바일). 로그아웃 시 확인 다이얼로그. 마지막 활동 상대 시간 표시.',
+ },
+ {
+ type: 'pattern', title: 'API 키 관리', category: 'auth', rating: 3,
+ tags: ['API키', '토큰', '인증', '개발자'],
+ memo: 'Stripe API Keys, OpenAI API, GitHub Token 등. API 키를 생성/관리/폐기하는 개발자 설정.',
+ components: [
+ { name: 'API 키 목록 (마스킹)', required: true },
+ { name: '새 키 생성 버튼', required: true },
+ { name: '키 복사 버튼', required: true },
+ { name: '키 폐기/삭제', required: true },
+ { name: '만료일/사용 통계', required: false },
+ { name: '생성 시 한 번만 표시 경고', required: true },
+ ],
+ usedIn: ['Stripe', 'OpenAI', 'GitHub', 'SAM API 키 관리'],
+ guidelines: '키 마스킹: sk-...xxxx (앞 4자 + 뒤 4자만). 복사 시 "복사됨" 토스트. 새 키 생성 시 전체 표시 (한 번만). 테스트/프로덕션 키 구분.',
+ },
+ // ===== 보고서 추가 (4) =====
+ {
+ type: 'pattern', title: '간트 차트 (프로젝트 일정)', category: 'report', rating: 5,
+ tags: ['간트', '일정', '프로젝트', '타임라인'],
+ memo: 'Jira Roadmap, Monday.com, Microsoft Project 등. 작업 일정을 가로 막대로 시각화하는 프로젝트 관리 핵심 도구.',
+ components: [
+ { name: '작업 목록 (좌측 고정)', required: true },
+ { name: '시간축 (상단 헤더, 일/주/월)', required: true },
+ { name: '작업 바 (시작~종료)', required: true },
+ { name: '의존관계 화살표', required: false },
+ { name: '진행률 표시 (바 내부)', required: true },
+ { name: '마일스톤 (다이아몬드 아이콘)', required: false },
+ ],
+ usedIn: ['Jira Roadmap', 'Monday.com', 'MS Project', 'SAM 프로젝트 관리'],
+ guidelines: '작업 바는 드래그로 이동/리사이즈. 오늘 날짜 빨간 세로선. 주말 배경 회색. 크리티컬 패스 빨간 강조.',
+ },
+ {
+ type: 'pattern', title: '조직도 (트리 구조)', category: 'report', rating: 4,
+ tags: ['조직도', '트리', '계층', '구조'],
+ memo: 'SAM 조직도, Lucidchart, OrgChart 등. 부서/직원의 계층 구조를 시각적으로 표현.',
+ components: [
+ { name: '노드 카드 (이름 + 직책)', required: true },
+ { name: '연결선 (부모→자식)', required: true },
+ { name: '확대/축소 컨트롤', required: true },
+ { name: '접기/펼치기 (부서 단위)', required: true },
+ { name: '드래그 팬 (이동)', required: true },
+ ],
+ usedIn: ['SAM 조직도', 'Lucidchart', 'OrgChart', 'HR 시스템'],
+ guidelines: '노드 카드: 이름, 직책, 부서, 아바타. 연결선: 직선 또는 곡선. 수평/수직 레이아웃 전환. 검색 시 해당 노드 하이라이트.',
+ },
+ {
+ type: 'pattern', title: '워터폴 차트 (재무 분석)', category: 'report', rating: 3,
+ tags: ['워터폴', '재무', '증감', '누적'],
+ memo: 'McKinsey, BCG 재무 보고서, Excel 등. 초기 값에서 증가/감소를 순차적으로 보여주는 재무 분석 차트.',
+ components: [
+ { name: '시작 막대 (전체 높이)', required: true },
+ { name: '증가 막대 (초록)', required: true },
+ { name: '감소 막대 (빨강)', required: true },
+ { name: '연결선 (이전 값→현재 시작)', required: true },
+ { name: '최종 합계 막대', required: true },
+ { name: '각 막대 위 수치 라벨', required: true },
+ ],
+ usedIn: ['McKinsey 보고서', 'Excel', 'Power BI', 'SAM 재무 분석'],
+ guidelines: '증가=초록, 감소=빨강, 합계=파랑. 연결선으로 이전 값과 현재 시작점 연결. 막대 위에 절대 값 + 변화량 표시.',
+ },
+ {
+ type: 'pattern', title: '리포트 빌더 (커스텀 보고서)', category: 'report', rating: 4,
+ tags: ['리포트빌더', '커스텀', '보고서', '생성기'],
+ memo: 'Salesforce Reports, HubSpot Reports, Metabase 등. 사용자가 직접 필드/필터/차트를 조합하여 보고서를 생성.',
+ components: [
+ { name: '데이터 소스 선택', required: true },
+ { name: '필드 선택 (드래그 또는 체크)', required: true },
+ { name: '필터 조건 빌더', required: true },
+ { name: '차트 유형 선택', required: true },
+ { name: '미리보기', required: true },
+ { name: '저장/내보내기', required: true },
+ ],
+ usedIn: ['Salesforce', 'HubSpot', 'Metabase', 'SAM 리포트 빌더 (계획)'],
+ guidelines: '좌측: 필드 목록 (드래그). 우측: 미리보기 영역. 필터: AND/OR 조합 UI. 차트 유형 아이콘 선택. 저장된 보고서 목록.',
+ },
+ // ===== 기타 추가 (15) =====
+ {
+ type: 'pattern', title: '댓글/스레드', category: 'etc', rating: 4,
+ tags: ['댓글', '스레드', '답글', '토론'],
+ memo: 'GitHub PR Comments, Notion Comments, Figma Comments 등. 특정 항목에 대한 토론을 스레드로 관리.',
+ components: [
+ { name: '댓글 목록 (시간순)', required: true },
+ { name: '아바타 + 작성자 + 시간', required: true },
+ { name: '답글 (들여쓰기 스레드)', required: true },
+ { name: '편집/삭제 (본인 댓글)', required: true },
+ { name: '이모지 리액션', required: false },
+ { name: '멘션 (@사용자)', required: false },
+ ],
+ usedIn: ['GitHub', 'Notion', 'Figma', 'SAM 게시판/수주 댓글'],
+ guidelines: '답글 들여쓰기 24px. 시간은 상대 표시 (3분 전). 본인 댓글만 편집/삭제 가능. 새 댓글 자동 스크롤.',
+ },
+ {
+ type: 'pattern', title: '에러 페이지 (404/500)', category: 'etc', rating: 3,
+ tags: ['에러', '404', '500', '오류페이지'],
+ memo: 'GitHub 404, Notion 404, Stripe 등. 페이지를 찾을 수 없거나 서버 오류 시 표시되는 안내 페이지.',
+ components: [
+ { name: '에러 코드 (큰 텍스트)', required: true },
+ { name: '안내 메시지', required: true },
+ { name: '일러스트/아이콘', required: false },
+ { name: '홈으로 가기 버튼', required: true },
+ { name: '검색 바 (선택적)', required: false },
+ { name: '이전 페이지로 가기', required: true },
+ ],
+ usedIn: ['GitHub', 'Notion', 'Stripe', 'SAM 에러 페이지'],
+ guidelines: '화면 중앙 배치. 에러 코드 크게 (72~96px). 친근한 메시지. 홈/뒤로 가기 버튼 명확히. 404는 유머 가능, 500은 진지하게.',
+ },
+ {
+ type: 'pattern', title: '비교 테이블 (기능/제품)', category: 'etc', rating: 4,
+ tags: ['비교', '기능비교', '제품', '체크마크'],
+ memo: 'SaaS 가격 페이지, Product Hunt, AWS 서비스 비교 등. 여러 옵션을 기능별로 나란히 비교하는 테이블.',
+ components: [
+ { name: '기능 목록 (좌측 고정)', required: true },
+ { name: '옵션 컬럼 (2~4개)', required: true },
+ { name: '체크/X 아이콘', required: true },
+ { name: '추천 옵션 하이라이트', required: false },
+ { name: '가격 행 (상단 또는 하단)', required: true },
+ { name: '선택/CTA 버튼', required: true },
+ ],
+ usedIn: ['SaaS 가격 페이지', 'Product Hunt', 'AWS', 'SAM 요금제 비교'],
+ guidelines: '기능 행 zebra striping. 추천 열 파란 테두리 + 배지. 체크=초록, X=빨강, 하이픈=회색. 모바일: 좌우 스크롤.',
+ },
+ {
+ type: 'pattern', title: '캐러셀/슬라이더', category: 'etc', rating: 3,
+ tags: ['캐러셀', '슬라이더', '갤러리', '스와이프'],
+ memo: 'Amazon 상품 이미지, Netflix 콘텐츠 행, Instagram 다중 이미지 등. 좌우로 넘기는 콘텐츠 슬라이더.',
+ components: [
+ { name: '슬라이드 컨테이너', required: true },
+ { name: '좌/우 네비게이션 화살표', required: true },
+ { name: '페이지 인디케이터 (점)', required: true },
+ { name: '자동 재생 (선택적)', required: false },
+ { name: '스와이프 제스처 (모바일)', required: true },
+ ],
+ usedIn: ['Amazon', 'Netflix', 'Instagram', 'SAM 제품 이미지'],
+ guidelines: '한 번에 1~3개 표시. 인디케이터 5개 이하. 자동 재생 시 정지 버튼. 마지막 슬라이드 후 첫 번째로 순환. 스와이프 threshold 50px.',
+ },
+ {
+ type: 'pattern', title: '아코디언/FAQ', category: 'etc', rating: 4,
+ tags: ['아코디언', 'FAQ', '접기', '펼치기'],
+ memo: 'Apple FAQ, Stripe Help, Bootstrap Accordion 등. 질문/답변을 접기/펼치기로 관리하는 UI.',
+ components: [
+ { name: '질문/제목 (클릭 영역)', required: true },
+ { name: '펼치기/접기 아이콘 (+ 또는 ▾)', required: true },
+ { name: '답변/내용 (슬라이드 펼침)', required: true },
+ { name: '하나만 열기 모드 (선택적)', required: false },
+ { name: '전체 펼치기/접기 버튼', required: false },
+ ],
+ usedIn: ['Apple FAQ', 'Stripe', 'Bootstrap', 'SAM FAQ/도움말'],
+ guidelines: '기본 모두 접힌 상태. 클릭 영역은 전체 행. 아이콘 회전 애니메이션 (180도). 펼침 시 슬라이드 다운 200ms.',
+ },
+ {
+ type: 'pattern', title: '툴팁/팝오버', category: 'etc', rating: 3,
+ tags: ['툴팁', '팝오버', '도움말', 'hover'],
+ memo: 'GitHub 아이콘 hover, Notion 블록 메뉴, AWS 설명 등. 요소에 마우스를 올리면 추가 정보를 표시.',
+ components: [
+ { name: '트리거 요소 (hover/click)', required: true },
+ { name: '팝업 컨테이너 (말풍선)', required: true },
+ { name: '화살표 (연결 포인터)', required: true },
+ { name: '텍스트 내용', required: true },
+ { name: '닫기 버튼 (팝오버)', required: false },
+ ],
+ usedIn: ['GitHub', 'Notion', 'AWS', 'SAM 아이콘 도움말'],
+ guidelines: '툴팁: hover 후 300ms 지연 표시. 팝오버: 클릭 트리거 + 닫기. 위치: 자동 조정 (화면 밖 방지). 최대 너비 250px.',
+ },
+ {
+ type: 'pattern', title: '프로그레스 트래커 (배송/처리)', category: 'etc', rating: 4,
+ tags: ['프로그레스', '배송', '처리상태', '추적'],
+ memo: 'Amazon 배송 추적, Coupang, DHL 등. 주문/처리 단계별 진행 상황을 시각화.',
+ components: [
+ { name: '단계 노드 (원/체크)', required: true },
+ { name: '연결선 (완료/진행/대기)', required: true },
+ { name: '단계 라벨 + 시간', required: true },
+ { name: '현재 단계 강조', required: true },
+ { name: '상세 정보 (각 단계 설명)', required: false },
+ ],
+ usedIn: ['Amazon', 'Coupang', 'DHL', 'SAM 수주 상태 추적'],
+ guidelines: '완료=초록 체크, 현재=파란 점+애니메이션, 대기=회색. 수평 또는 수직 배치. 각 단계에 시간/날짜 표시.',
+ },
+ {
+ type: 'pattern', title: '데이터 임포트 위자드', category: 'etc', rating: 4,
+ tags: ['임포트', '가져오기', 'CSV', '엑셀'],
+ memo: 'Airtable Import, HubSpot Import, Notion Import 등. CSV/엑셀 파일을 업로드하고 필드를 매핑하는 3단계 플로우.',
+ components: [
+ { name: '파일 업로드 (드래그 앤 드롭)', required: true },
+ { name: '미리보기 (첫 5행)', required: true },
+ { name: '필드 매핑 (소스→대상)', required: true },
+ { name: '유효성 검사 결과', required: true },
+ { name: '임포트 진행률', required: true },
+ { name: '결과 요약 (성공/실패 건수)', required: true },
+ ],
+ usedIn: ['Airtable', 'HubSpot', 'Notion', 'SAM 데이터 마이그레이션'],
+ guidelines: '3단계: 업로드→매핑→확인. 미리보기에서 문제 행 빨간 강조. 매핑: 드롭다운으로 대상 필드 선택. 자동 감지 (컬럼명 유사도).',
+ },
+ {
+ type: 'pattern', title: '랜딩 페이지 히어로 섹션', category: 'etc', rating: 4,
+ tags: ['랜딩', '히어로', 'CTA', '메인배너'],
+ memo: 'Stripe, Linear, Vercel 등 SaaS. 메인 페이지 첫 화면. 헤드라인 + 서브텍스트 + CTA 버튼의 표준 구조.',
+ components: [
+ { name: '헤드라인 (큰 텍스트)', required: true },
+ { name: '서브 텍스트 (설명)', required: true },
+ { name: 'CTA 버튼 (1~2개)', required: true },
+ { name: '히어로 이미지/영상/일러스트', required: false },
+ { name: '소셜 프루프 (고객 로고/통계)', required: false },
+ ],
+ usedIn: ['Stripe', 'Linear', 'Vercel', 'SAM 소개 페이지'],
+ guidelines: '헤드라인: 32~56px, 한 줄 권장. CTA 버튼: 명확한 액션 (예: "무료로 시작하기"). 서브 텍스트: 18~20px, 2줄 이내.',
+ },
+ {
+ type: 'pattern', title: '코드 에디터/뷰어', category: 'etc', rating: 3,
+ tags: ['코드', '에디터', '구문강조', '개발'],
+ memo: 'VS Code, GitHub Gist, CodePen 등. 코드를 구문 강조하여 보여주거나 편집하는 UI.',
+ components: [
+ { name: '코드 영역 (모노스페이스 폰트)', required: true },
+ { name: '줄 번호', required: true },
+ { name: '구문 강조 (Syntax Highlighting)', required: true },
+ { name: '복사 버튼', required: true },
+ { name: '언어 선택 드롭다운', required: false },
+ { name: '다크/라이트 테마', required: false },
+ ],
+ usedIn: ['VS Code', 'GitHub', 'CodePen', 'SAM API 문서'],
+ guidelines: '폰트: JetBrains Mono 또는 Fira Code. 다크 배경 (#1e1e1e). 복사 시 "복사됨" 피드백. 줄 번호 회색, 코드 색상은 테마에 따름.',
+ },
+ {
+ type: 'pattern', title: '키보드 단축키 도움말', category: 'etc', rating: 3,
+ tags: ['단축키', '키보드', '도움말', '핫키'],
+ memo: 'GitHub (? 키), Notion (/), Gmail (?) 등. 키보드 단축키 목록을 보여주는 오버레이.',
+ components: [
+ { name: '키 조합 표시 (Kbd 스타일)', required: true },
+ { name: '액션 설명', required: true },
+ { name: '카테고리 그룹핑', required: true },
+ { name: '검색/필터', required: false },
+ { name: 'ESC로 닫기', required: true },
+ ],
+ usedIn: ['GitHub', 'Notion', 'Gmail', 'SAM 디자인 인사이트'],
+ guidelines: 'Kbd 스타일: 회색 배경 + 테두리 + 라운드. 그룹별 섹션 분리. 2~3열 레이아웃. ?키로 열기 관례.',
+ },
+ {
+ type: 'pattern', title: '다크 모드 전환', category: 'etc', rating: 3,
+ tags: ['다크모드', '테마', '라이트', '전환'],
+ memo: 'macOS, Tailwind, GitHub, VS Code 등. 라이트/다크 테마를 전환하는 UI + 실제 적용.',
+ components: [
+ { name: '토글 스위치/버튼', required: true },
+ { name: '해/달 아이콘', required: true },
+ { name: '시스템 설정 연동', required: false },
+ { name: '전환 애니메이션', required: false },
+ { name: 'CSS 변수 기반 테마', required: true },
+ ],
+ usedIn: ['macOS', 'GitHub', 'Tailwind Docs', 'SAM (계획)'],
+ guidelines: '3옵션: 라이트/다크/시스템. 전환 시 부드러운 트랜지션 (200ms). prefers-color-scheme 미디어 쿼리. localStorage에 선호 저장.',
+ },
+ {
+ type: 'pattern', title: '알림 설정 패널', category: 'etc', rating: 3,
+ tags: ['알림설정', '구독', '채널', '선호'],
+ memo: 'GitHub Notifications, Slack Preferences, Notion Settings 등. 알림 채널별/유형별 수신 여부를 설정.',
+ components: [
+ { name: '알림 유형 목록 (수주, 승인 등)', required: true },
+ { name: '채널별 토글 (이메일/푸시/슬랙)', required: true },
+ { name: '방해 금지 시간 설정', required: false },
+ { name: '전체 켜기/끄기', required: true },
+ { name: '미리보기 (알림 샘플)', required: false },
+ ],
+ usedIn: ['GitHub', 'Slack', 'Notion', 'SAM 알림 설정'],
+ guidelines: '매트릭스: 행=알림 유형, 열=채널. 토글 ON/OFF. 변경 즉시 저장. 필수 알림(보안)은 비활성화 불가.',
+ },
+ {
+ type: 'pattern', title: '파일 매니저/탐색기', category: 'etc', rating: 4,
+ tags: ['파일', '탐색기', '폴더', '관리'],
+ memo: 'Google Drive, Dropbox, macOS Finder 등. 폴더/파일을 계층적으로 탐색하고 관리하는 UI.',
+ components: [
+ { name: '폴더 트리 (좌측)', required: true },
+ { name: '파일 목록 (우측, 그리드/리스트)', required: true },
+ { name: '경로 표시 (브레드크럼)', required: true },
+ { name: '업로드/새 폴더 버튼', required: true },
+ { name: '파일 미리보기', required: false },
+ { name: '검색/정렬/필터', required: true },
+ ],
+ usedIn: ['Google Drive', 'Dropbox', 'macOS Finder', 'SAM 문서 관리'],
+ guidelines: '더블클릭으로 폴더 진입. 파일 유형별 아이콘. 드래그 앤 드롭으로 이동. 우클릭 컨텍스트 메뉴. 다중 선택 (Ctrl+클릭).',
+ },
+ {
+ type: 'pattern', title: '소셜 공유 버튼', category: 'etc', rating: 3,
+ tags: ['공유', '소셜', 'SNS', '링크'],
+ memo: 'Medium, Product Hunt, 뉴스 사이트 등. 콘텐츠를 SNS에 공유하는 버튼 세트.',
+ components: [
+ { name: '소셜 미디어 아이콘 (Twitter, LinkedIn 등)', required: true },
+ { name: '링크 복사 버튼', required: true },
+ { name: '공유 수 카운터', required: false },
+ { name: '이메일 공유', required: false },
+ { name: '플로팅/고정 위치 선택', required: true },
+ ],
+ usedIn: ['Medium', 'Product Hunt', '뉴스 사이트', 'SAM 공유 기능'],
+ guidelines: '아이콘: 각 플랫폼 브랜드 컬러. 링크 복사 시 "복사됨" 토스트. 플로팅: 좌측 고정, 스크롤 따라감. 인라인: 콘텐츠 상/하단.',
+ },
];
const cards = presets.map(p => ({
@@ -4553,7 +6213,7 @@ function designInsight() {
this.currentProject.cards = [...cards, ...this.currentProject.cards];
this.saveProject();
this.categoryFilter = 'pattern';
- this.toast('인기 UI 패턴 50종이 추가되었습니다');
+ this.toast('인기 UI 패턴 100종이 추가되었습니다');
},
};
}