mirror of
https://github.com/nextlevelbuilder/ui-ux-pro-max-skill.git
synced 2026-09-01 09:39:23 +00:00
fix(docs): avoid Hangul diagram misalignment
GitHub renders Hangul with fallback font metrics that differ from ASCII spacing. Replace right-bordered diagrams with borderless layouts so alignment no longer depends on browser-specific font rendering.
This commit is contained in:
yongveloper
parent
5f2b160e3b
commit
e9bd28180f
149
README.ko.md
149
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개의 산업별 추론 규칙
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user