diff --git a/README.ko.md b/README.ko.md index 1d8579f..9ceb29f 100644 --- a/README.ko.md +++ b/README.ko.md @@ -47,90 +47,81 @@ v2.0의 핵심 기능은 **디자인 시스템 생성기**입니다. AI 기반 추론 엔진이 프로젝트 요구 사항을 분석하고 몇 초 만에 완전한 맞춤형 디자인 시스템을 생성합니다. ``` -+----------------------------------------------------------------------------------------+ -| 대상: Serenity Spa - 권장 디자인 시스템 | -+----------------------------------------------------------------------------------------+ -| | -| 패턴: 히어로 중심 + 사회적 증거 | -| 전환: 신뢰 요소를 활용한 감성 중심 설계 | -| CTA: 첫 화면에 배치하고 후기 다음에 반복 | -| 섹션: | -| 1. 히어로 | -| 2. 서비스 | -| 3. 고객 후기 | -| 4. 예약 | -| 5. 연락처 | -| | -| 스타일: Soft UI Evolution | -| 키워드: 부드러운 그림자, 은은한 깊이, 편안함, 고급스러움, 유기적 형태 | -| 추천 대상: 웰니스, 뷰티, 라이프스타일 브랜드, 프리미엄 서비스 | -| 성능: cost:low | 접근성: risk:conditional; 요구 사항 확인 필요 | -| | -| 색상: | -| 기본: #E8B4B8 (연한 분홍색) | -| 보조: #A8D5BA (세이지 그린) | -| CTA: #D4AF37 (금색) | -| 배경: #FFF5F5 (따뜻한 흰색) | -| 텍스트: #2D3436 (차콜) | -| 참고: 차분한 팔레트에 금색 포인트를 더해 고급스러운 분위기 연출 | -| | -| 타이포그래피: Cormorant Garamond / Montserrat | -| 분위기: 우아함, 차분함, 세련됨 | -| 추천 대상: 명품 브랜드, 웰니스, 뷰티, 에디토리얼 | -| Google Fonts: https://fonts.google.com/share?selection.family=... | -| | -| 핵심 효과: | -| 부드러운 그림자 + 맥락에 맞는 전환 + 은은한 호버 상태 | -| | -| 피해야 할 요소(안티패턴): | -| 밝은 네온 색상 + 과한 애니메이션 + 다크 모드 + AI 스타일 보라/분홍 그라디언트 | -| | -| 전달 전 체크리스트: | -| [ ] 이모지를 아이콘으로 사용하지 않음(SVG: Heroicons/Lucide 사용) | -| [ ] 클릭 가능한 모든 요소에 cursor-pointer 적용 | -| [ ] 플랫폼, 컴포넌트, 사용자 환경설정에 맞는 상호작용 타이밍 적용 | -| [ ] 라이트 모드: 텍스트 명암비 최소 4.5:1 | -| [ ] 키보드 탐색 시 포커스 상태 표시 | -| [ ] prefers-reduced-motion 준수 | -| [ ] 텍스트, 칩, 배지가 잘리거나 깨지지 않고 재배치 | -| [ ] 반응형: 375px, 768px, 1024px, 1440px | -| | -+----------------------------------------------------------------------------------------+ +대상: Serenity Spa - 권장 디자인 시스템 + +패턴: 히어로 중심 + 사회적 증거 + 전환: 신뢰 요소를 활용한 감성 중심 설계 + CTA: 첫 화면에 배치하고 후기 다음에 반복 + 섹션: + 1. 히어로 + 2. 서비스 + 3. 고객 후기 + 4. 예약 + 5. 연락처 + +스타일: Soft UI Evolution + 키워드: 부드러운 그림자, 은은한 깊이, 편안함, 고급스러움, 유기적 형태 + 추천 대상: 웰니스, 뷰티, 라이프스타일 브랜드, 프리미엄 서비스 + 성능: cost:low | 접근성: risk:conditional; 요구 사항 확인 필요 + +색상: + 기본: #E8B4B8 (연한 분홍색) + 보조: #A8D5BA (세이지 그린) + CTA: #D4AF37 (금색) + 배경: #FFF5F5 (따뜻한 흰색) + 텍스트: #2D3436 (차콜) + 참고: 차분한 팔레트에 금색 포인트를 더해 고급스러운 분위기 연출 + +타이포그래피: Cormorant Garamond / Montserrat + 분위기: 우아함, 차분함, 세련됨 + 추천 대상: 명품 브랜드, 웰니스, 뷰티, 에디토리얼 + Google Fonts: https://fonts.google.com/share?selection.family=... + +핵심 효과: + 부드러운 그림자 + 맥락에 맞는 전환 + 은은한 호버 상태 + +피해야 할 요소(안티패턴): + 밝은 네온 색상 + 과한 애니메이션 + 다크 모드 + AI 스타일 보라/분홍 그라디언트 + +전달 전 체크리스트: + [ ] 이모지를 아이콘으로 사용하지 않음(SVG: Heroicons/Lucide 사용) + [ ] 클릭 가능한 모든 요소에 cursor-pointer 적용 + [ ] 플랫폼, 컴포넌트, 사용자 환경설정에 맞는 상호작용 타이밍 적용 + [ ] 라이트 모드: 텍스트 명암비 최소 4.5:1 + [ ] 키보드 탐색 시 포커스 상태 표시 + [ ] prefers-reduced-motion 준수 + [ ] 텍스트, 칩, 배지가 잘리거나 깨지지 않고 재배치 + [ ] 반응형: 375px, 768px, 1024px, 1440px ``` ### 디자인 시스템 생성 방식 ``` -┌─────────────────────────────────────────────────────────────────┐ -│ 1. 사용자 요청 │ -│ "내 뷰티 스파의 랜딩 페이지를 만들어 줘" │ -└─────────────────────────────────────────────────────────────────┘ - │ - ▼ -┌─────────────────────────────────────────────────────────────────┐ -│ 2. 다중 도메인 검색(5개 병렬 검색) │ -│ • 제품 유형 매칭(192개 분야) │ -│ • 스타일 추천(검색 가능 79개, 활성 50개) │ -│ • 색상 팔레트 선택(192개 팔레트) │ -│ • 랜딩 페이지 패턴(34개 패턴) │ -│ • 타이포그래피 조합(74개 글꼴 조합) │ -└─────────────────────────────────────────────────────────────────┘ - │ - ▼ -┌─────────────────────────────────────────────────────────────────┐ -│ 3. 추론 엔진 │ -│ • 제품 → UI 분야 규칙 매칭 │ -│ • 스타일 우선순위 적용(BM25 순위) │ -│ • 산업별 안티패턴 필터링 │ -│ • 의사결정 규칙 처리(JSON 조건) │ -└─────────────────────────────────────────────────────────────────┘ - │ - ▼ -┌─────────────────────────────────────────────────────────────────┐ -│ 4. 완전한 디자인 시스템 출력 │ -│ 패턴 + 스타일 + 색상 + 타이포그래피 + 효과 │ -│ + 피해야 할 안티패턴 + 전달 전 체크리스트 │ -└─────────────────────────────────────────────────────────────────┘ +1. 사용자 요청 + "내 뷰티 스파의 랜딩 페이지를 만들어 줘" + + ↓ + +2. 다중 도메인 검색(5개 병렬 검색) + • 제품 유형 매칭(192개 분야) + • 스타일 추천(검색 가능 79개, 활성 50개) + • 색상 팔레트 선택(192개 팔레트) + • 랜딩 페이지 패턴(34개 패턴) + • 타이포그래피 조합(74개 글꼴 조합) + + ↓ + +3. 추론 엔진 + • 제품 → UI 분야 규칙 매칭 + • 스타일 우선순위 적용(BM25 순위) + • 산업별 안티패턴 필터링 + • 의사결정 규칙 처리(JSON 조건) + + ↓ + +4. 완전한 디자인 시스템 출력 + 패턴 + 스타일 + 색상 + 타이포그래피 + 효과 + + 피해야 할 안티패턴 + 전달 전 체크리스트 ``` ### 192개의 산업별 추론 규칙