@kood/claude-code 0.5.0 → 0.5.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +179 -33
- package/package.json +1 -1
- package/templates/.claude/agents/analyst.md +6 -14
- package/templates/.claude/agents/architect.md +6 -14
- package/templates/.claude/agents/code-reviewer.md +8 -14
- package/templates/.claude/agents/dependency-manager.md +8 -14
- package/templates/.claude/agents/deployment-validator.md +8 -14
- package/templates/.claude/agents/designer.md +8 -0
- package/templates/.claude/agents/document-writer.md +6 -14
- package/templates/.claude/agents/explore.md +8 -3
- package/templates/.claude/agents/git-operator.md +63 -17
- package/templates/.claude/agents/implementation-executor.md +14 -37
- package/templates/.claude/agents/ko-to-en-translator.md +8 -13
- package/templates/.claude/agents/lint-fixer.md +8 -172
- package/templates/.claude/agents/planner.md +6 -14
- package/templates/.claude/agents/refactor-advisor.md +8 -14
- package/templates/.claude/commands/git-all.md +3 -167
- package/templates/.claude/commands/git-session.md +3 -71
- package/templates/.claude/commands/lint-fix.md +119 -82
- package/templates/.claude/commands/lint-init.md +2 -54
- package/templates/.claude/commands/pre-deploy.md +143 -82
- package/templates/.claude/commands/version-update.md +171 -66
- package/templates/.claude/instructions/agent-patterns/agent-coordination.md +208 -0
- package/templates/.claude/instructions/agent-patterns/index.md +264 -0
- package/templates/.claude/instructions/agent-patterns/model-routing.md +167 -0
- package/templates/.claude/instructions/agent-patterns/parallel-execution.md +91 -0
- package/templates/.claude/instructions/agent-patterns/read-parallelization.md +106 -0
- package/templates/.claude/instructions/index.md +350 -0
- package/templates/.claude/instructions/multi-agent/agent-roster.md +811 -0
- package/templates/.claude/{PARALLEL_AGENTS.md → instructions/multi-agent/coordination-guide.md} +27 -336
- package/templates/.claude/instructions/{parallel-agent-execution.md → multi-agent/execution-patterns.md} +127 -438
- package/templates/.claude/instructions/multi-agent/index.md +282 -0
- package/templates/.claude/instructions/multi-agent/performance-optimization.md +456 -0
- package/templates/.claude/instructions/tech-stack/design-standards.md +282 -0
- package/templates/.claude/instructions/tech-stack/index.md +70 -0
- package/templates/.claude/instructions/tech-stack/prisma-patterns.md +352 -0
- package/templates/.claude/instructions/tech-stack/tanstack-patterns.md +275 -0
- package/templates/.claude/instructions/validation/forbidden-patterns.md +281 -0
- package/templates/.claude/instructions/validation/index.md +32 -0
- package/templates/.claude/instructions/validation/required-behaviors.md +331 -0
- package/templates/.claude/instructions/validation/verification-checklist.md +318 -0
- package/templates/.claude/instructions/workflow-patterns/index.md +18 -0
- package/templates/.claude/instructions/workflow-patterns/phase-based-workflow.md +250 -0
- package/templates/.claude/instructions/workflow-patterns/sequential-thinking.md +217 -0
- package/templates/.claude/instructions/workflow-patterns/todowrite-pattern.md +215 -0
- package/templates/.claude/skills/bug-fix/SKILL.md +972 -0
- package/templates/.claude/skills/docs-creator/AGENTS.md +4 -1
- package/templates/.claude/skills/docs-creator/SKILL.md +258 -0
- package/templates/.claude/skills/docs-refactor/AGENTS.md +4 -1
- package/templates/.claude/skills/docs-refactor/SKILL.md +145 -0
- package/templates/.claude/skills/execute/SKILL.md +15 -242
- package/templates/.claude/skills/figma-to-code/AGENTS.md +4 -1
- package/templates/.claude/skills/figma-to-code/SKILL.md +306 -0
- package/templates/.claude/skills/global-uiux-design/AGENTS.md +4 -1
- package/templates/.claude/skills/global-uiux-design/SKILL.md +455 -125
- package/templates/.claude/skills/korea-uiux-design/AGENTS.md +4 -1
- package/templates/.claude/skills/korea-uiux-design/SKILL.md +461 -116
- package/templates/.claude/skills/nextjs-react-best-practices/SKILL.md +177 -0
- package/templates/.claude/skills/plan/SKILL.md +1102 -98
- package/templates/.claude/skills/prd/SKILL.md +367 -66
- package/templates/.claude/skills/ralph/AGENTS.md +4 -1
- package/templates/.claude/skills/ralph/SKILL.md +83 -0
- package/templates/.claude/skills/refactor/SKILL.md +1214 -0
- package/templates/.claude/skills/tanstack-start-react-best-practices/SKILL.md +149 -0
- package/templates/.claude/commands/bug-fix.md +0 -510
- package/templates/.claude/commands/refactor.md +0 -788
|
@@ -1,3 +1,13 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: korea-uiux-design
|
|
3
|
+
description: 한국 사용자 대상 앱/웹 UI/UX 디자인 구현. shadcn/ui 기본 스타일 대신 토스/카카오/배민/플렉스 등 국내 앱 스타일 적용.
|
|
4
|
+
user-invocable: true
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
@../../instructions/agent-patterns/read-parallelization.md
|
|
8
|
+
@../../instructions/validation/forbidden-patterns.md
|
|
9
|
+
@../../instructions/validation/required-behaviors.md
|
|
10
|
+
|
|
1
11
|
# 한국형 앱 UI/UX 디자인
|
|
2
12
|
|
|
3
13
|
<context>
|
|
@@ -16,173 +26,508 @@
|
|
|
16
26
|
|
|
17
27
|
---
|
|
18
28
|
|
|
19
|
-
<
|
|
29
|
+
<parallel_agent_execution>
|
|
30
|
+
|
|
31
|
+
## 한국형 UI/UX 병렬 에이전트 실행
|
|
32
|
+
|
|
33
|
+
### 핵심 원칙
|
|
34
|
+
|
|
35
|
+
| 원칙 | 한국 서비스 적용 | 기대 효과 |
|
|
36
|
+
|------|----------------|----------|
|
|
37
|
+
| **PARALLEL** | 본인인증 + 결제 + 주소입력 동시 구현 | 5-10배 속도 향상 |
|
|
38
|
+
| **LOCALIZED** | 날짜/통화/전화번호 형식 병렬 처리 | 지역화 품질 극대화 |
|
|
39
|
+
| **COMPLIANT** | 법규 검증 병렬 실행 (개인정보보호법/전자금융거래법/웹접근성) | 법적 리스크 사전 차단 |
|
|
40
|
+
|
|
41
|
+
**한국 서비스 특화 병렬 패턴:**
|
|
42
|
+
```typescript
|
|
43
|
+
// ❌ 순차 실행 (느림)
|
|
44
|
+
Task("본인인증 구현") // 60초
|
|
45
|
+
Task("결제 구현") // 60초
|
|
46
|
+
Task("주소입력 구현") // 60초
|
|
47
|
+
// 총 180초
|
|
48
|
+
|
|
49
|
+
// ✅ 병렬 실행 (빠름)
|
|
50
|
+
Task("본인인증 구현") // 단일 메시지에서
|
|
51
|
+
Task("결제 구현") // 동시 호출
|
|
52
|
+
Task("주소입력 구현") // 동시 실행
|
|
53
|
+
// 총 60초 (가장 긴 작업 기준)
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
---
|
|
57
|
+
|
|
58
|
+
### 한국형 UI 병렬 패턴
|
|
59
|
+
|
|
60
|
+
**패턴 1: 본인인증 + KYC 동시 구현**
|
|
61
|
+
|
|
62
|
+
```typescript
|
|
63
|
+
// 이커머스/핀테크 필수 컴포넌트
|
|
64
|
+
Task(subagent_type="designer", model="sonnet",
|
|
65
|
+
prompt=`휴대폰 본인인증 컴포넌트 구현
|
|
66
|
+
- NICE/KCB 인증 모듈 연동
|
|
67
|
+
- 인증번호 입력 UI
|
|
68
|
+
- 타이머 (3분 제한)
|
|
69
|
+
- 한국형 전화번호 형식 (010-XXXX-XXXX)`)
|
|
70
|
+
|
|
71
|
+
Task(subagent_type="designer", model="sonnet",
|
|
72
|
+
prompt=`신분증 인증 컴포넌트 구현
|
|
73
|
+
- 주민등록증/운전면허증 촬영
|
|
74
|
+
- OCR 연동 UI
|
|
75
|
+
- 개인정보 마스킹 (주민등록번호 뒷자리)`)
|
|
76
|
+
|
|
77
|
+
Task(subagent_type="implementation-executor", model="sonnet",
|
|
78
|
+
prompt=`본인인증 Server Functions
|
|
79
|
+
- NICE/KCB API 연동
|
|
80
|
+
- 세션 관리 (인증 상태 저장)
|
|
81
|
+
- 개인정보 암호화 (AES-256)`)
|
|
82
|
+
```
|
|
20
83
|
|
|
21
|
-
|
|
84
|
+
**패턴 2: 결제 시스템 병렬 구현**
|
|
22
85
|
|
|
23
|
-
|
|
86
|
+
```typescript
|
|
87
|
+
// 한국 주요 PG사 통합
|
|
88
|
+
Task(subagent_type="designer", model="sonnet",
|
|
89
|
+
prompt=`결제 수단 선택 UI
|
|
90
|
+
- 카드/계좌이체/간편결제 (토스/카카오페이/네이버페이)
|
|
91
|
+
- 할인/포인트 적용
|
|
92
|
+
- 최종 금액 표시 (원화 3자리 콤마)`)
|
|
24
93
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
94
|
+
Task(subagent_type="implementation-executor", model="sonnet",
|
|
95
|
+
prompt=`PG 연동 Server Functions
|
|
96
|
+
- 토스페이먼츠/KG이니시스 API
|
|
97
|
+
- 결제 승인/취소/환불
|
|
98
|
+
- 전자금융거래법 준수 (거래 로그 7년 보관)`)
|
|
30
99
|
|
|
31
|
-
|
|
100
|
+
Task(subagent_type="code-reviewer", model="opus",
|
|
101
|
+
prompt=`결제 보안 검토
|
|
102
|
+
- PCI-DSS 준수
|
|
103
|
+
- 카드번호 비저장 (토큰 방식)
|
|
104
|
+
- 개인정보 처리방침 확인`)
|
|
105
|
+
```
|
|
32
106
|
|
|
33
|
-
|
|
107
|
+
**패턴 3: 주소/배송 병렬 구현**
|
|
34
108
|
|
|
35
109
|
```typescript
|
|
36
|
-
//
|
|
37
|
-
Task(
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
)
|
|
54
|
-
```
|
|
55
|
-
|
|
56
|
-
|
|
110
|
+
// 한국 주소 시스템
|
|
111
|
+
Task(subagent_type="designer", model="sonnet",
|
|
112
|
+
prompt=`주소 입력 컴포넌트
|
|
113
|
+
- Daum 우편번호 API 연동
|
|
114
|
+
- 도로명주소 + 지번주소
|
|
115
|
+
- 상세주소 입력 (필수)`)
|
|
116
|
+
|
|
117
|
+
Task(subagent_type="designer", model="sonnet",
|
|
118
|
+
prompt=`배송 추적 UI
|
|
119
|
+
- 택배사 연동 (CJ대한통운/우체국/로젠)
|
|
120
|
+
- 실시간 위치 표시
|
|
121
|
+
- 배송 상태 (배송준비/배송중/배송완료)`)
|
|
122
|
+
|
|
123
|
+
Task(subagent_type="implementation-executor", model="sonnet",
|
|
124
|
+
prompt=`배송 Server Functions
|
|
125
|
+
- Daum Postcode API
|
|
126
|
+
- 택배사 API 연동
|
|
127
|
+
- 배송지 변경/반품 로직`)
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
---
|
|
131
|
+
|
|
132
|
+
### 지역화 요소 병렬 처리
|
|
133
|
+
|
|
134
|
+
**패턴: 한국 형식 동시 구현**
|
|
135
|
+
|
|
136
|
+
```typescript
|
|
137
|
+
// 날짜/통화/전화번호/주민등록번호
|
|
138
|
+
Task(subagent_type="implementation-executor", model="sonnet",
|
|
139
|
+
prompt=`날짜 형식 한국화
|
|
140
|
+
- YYYY년 MM월 DD일 (일, 월, 화)
|
|
141
|
+
- 24시간 형식 (HH:mm)
|
|
142
|
+
- day.js 한국어 로케일`)
|
|
143
|
+
|
|
144
|
+
Task(subagent_type="implementation-executor", model="sonnet",
|
|
145
|
+
prompt=`통화 형식 한국화
|
|
146
|
+
- 원화 표시: 15,000원
|
|
147
|
+
- 3자리 콤마 (toLocaleString)
|
|
148
|
+
- 소수점 제거 (정수만)`)
|
|
149
|
+
|
|
150
|
+
Task(subagent_type="implementation-executor", model="sonnet",
|
|
151
|
+
prompt=`전화번호 형식 한국화
|
|
152
|
+
- 010-XXXX-XXXX
|
|
153
|
+
- 02-XXX-XXXX (서울 지역번호)
|
|
154
|
+
- 입력 시 자동 하이픈`)
|
|
155
|
+
|
|
156
|
+
Task(subagent_type="implementation-executor", model="sonnet",
|
|
157
|
+
prompt=`주민등록번호/사업자등록번호 처리
|
|
158
|
+
- 형식: XXXXXX-XXXXXXX / XXX-XX-XXXXX
|
|
159
|
+
- 마스킹: XXXXXX-*******
|
|
160
|
+
- 암호화 저장 (AES-256)`)
|
|
161
|
+
```
|
|
162
|
+
|
|
163
|
+
---
|
|
164
|
+
|
|
165
|
+
### 타이포그래피 병렬 최적화
|
|
166
|
+
|
|
167
|
+
**패턴: 한글 + 영문 폴백 동시 설정**
|
|
168
|
+
|
|
169
|
+
```typescript
|
|
170
|
+
// Pretendard + 영문 폴백
|
|
171
|
+
Task(subagent_type="designer", model="sonnet",
|
|
172
|
+
prompt=`한글 타이포그래피 설정
|
|
173
|
+
- 주 폰트: Pretendard (가변 폰트)
|
|
174
|
+
- 크기: 14px/16px (모바일/데스크톱)
|
|
175
|
+
- 행간: 1.5-1.7 (한글 최적)
|
|
176
|
+
- 자간: -0.02em (밀도 조절)`)
|
|
177
|
+
|
|
178
|
+
Task(subagent_type="designer", model="sonnet",
|
|
179
|
+
prompt=`영문 폴백 설정
|
|
180
|
+
- Inter/SF Pro (영문 전용)
|
|
181
|
+
- font-family: Pretendard, -apple-system, Roboto, sans-serif
|
|
182
|
+
- 숫자: tabular-nums (정렬)`)
|
|
183
|
+
|
|
184
|
+
Task(subagent_type="designer", model="sonnet",
|
|
185
|
+
prompt=`웹폰트 최적화
|
|
186
|
+
- woff2 포맷
|
|
187
|
+
- font-display: swap
|
|
188
|
+
- subset: 한글 2,350자 + 영문/숫자`)
|
|
189
|
+
```
|
|
190
|
+
|
|
191
|
+
---
|
|
192
|
+
|
|
193
|
+
### 법규 준수 병렬 검증
|
|
194
|
+
|
|
195
|
+
**패턴: 개인정보보호법 + 전자금융거래법 + 웹접근성 동시 검증**
|
|
57
196
|
|
|
58
197
|
```typescript
|
|
59
|
-
//
|
|
60
|
-
Task(
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
198
|
+
// 3가지 법규 병렬 검토
|
|
199
|
+
Task(subagent_type="analyst", model="sonnet",
|
|
200
|
+
prompt=`개인정보보호법 요구사항 분석
|
|
201
|
+
- 수집 항목 명시 (최소 수집 원칙)
|
|
202
|
+
- 동의 절차 (필수/선택 구분)
|
|
203
|
+
- 개인정보 처리방침 필수 표시
|
|
204
|
+
- 제3자 제공 동의 별도`)
|
|
205
|
+
|
|
206
|
+
Task(subagent_type="analyst", model="sonnet",
|
|
207
|
+
prompt=`전자금융거래법 요구사항 분석
|
|
208
|
+
- 거래 내역 7년 보관
|
|
209
|
+
- 오류 정정 요구권 안내
|
|
210
|
+
- 이용약관 명시
|
|
211
|
+
- 전자서명/공인인증서`)
|
|
65
212
|
|
|
66
|
-
Task(
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
)
|
|
213
|
+
Task(subagent_type="code-reviewer", model="opus",
|
|
214
|
+
prompt=`웹접근성 (KWCAG 2.2) 검증
|
|
215
|
+
- 키보드 접근성 (Tab 순서)
|
|
216
|
+
- ARIA 레이블 (스크린 리더)
|
|
217
|
+
- 색상 대비 4.5:1 (WCAG AA)
|
|
218
|
+
- 대체 텍스트 (이미지)`)
|
|
71
219
|
|
|
72
|
-
Task(
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
)
|
|
220
|
+
Task(subagent_type="code-reviewer", model="opus",
|
|
221
|
+
prompt=`보안 검증
|
|
222
|
+
- XSS/CSRF 방어
|
|
223
|
+
- SQL Injection 방지 (Prisma)
|
|
224
|
+
- 비밀번호 암호화 (bcrypt)
|
|
225
|
+
- HTTPS 강제`)
|
|
77
226
|
```
|
|
78
227
|
|
|
79
|
-
|
|
228
|
+
---
|
|
229
|
+
|
|
230
|
+
### 반응형 병렬 구현
|
|
231
|
+
|
|
232
|
+
**패턴: 모바일 우선 + 데스크톱 동시 구현**
|
|
80
233
|
|
|
81
234
|
```typescript
|
|
82
|
-
//
|
|
83
|
-
Task(
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
)
|
|
235
|
+
// 한국 모바일 사용률 80%+ 고려
|
|
236
|
+
Task(subagent_type="designer", model="sonnet",
|
|
237
|
+
prompt=`모바일 UI 구현 (우선)
|
|
238
|
+
- 화면: 375px (iPhone SE 기준)
|
|
239
|
+
- 터치 타겟: 44-48px (접근성)
|
|
240
|
+
- 하단 네비게이션 (엄지 영역)
|
|
241
|
+
- Safe Area (iOS 노치)`)
|
|
242
|
+
|
|
243
|
+
Task(subagent_type="designer", model="sonnet",
|
|
244
|
+
prompt=`데스크톱 UI 구현
|
|
245
|
+
- 화면: 1440px
|
|
246
|
+
- 사이드바 네비게이션
|
|
247
|
+
- 마우스 호버 상태
|
|
248
|
+
- 키보드 단축키`)
|
|
88
249
|
|
|
89
|
-
Task(
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
)
|
|
250
|
+
Task(subagent_type="designer", model="sonnet",
|
|
251
|
+
prompt=`반응형 테스트
|
|
252
|
+
- 브레이크포인트: 375/768/1024/1440
|
|
253
|
+
- 크로스 브라우징 (Chrome/Safari/Samsung Internet)
|
|
254
|
+
- 다크모드 대응`)
|
|
94
255
|
```
|
|
95
256
|
|
|
96
|
-
|
|
257
|
+
---
|
|
97
258
|
|
|
98
|
-
|
|
99
|
-
|-------|------|------|----------|
|
|
100
|
-
| **explore** | haiku | 코드베이스 탐색, 패턴 분석 | 프로젝트 시작, 기존 구조 파악 |
|
|
101
|
-
| **designer** | sonnet/opus | UI/UX 디자인 + 구현 | 컴포넌트, 레이아웃, 디자인 시스템 |
|
|
102
|
-
| **implementation-executor** | sonnet | 로직 구현, API 연동 | 비즈니스 로직, Server Functions |
|
|
103
|
-
| **deployment-validator** | sonnet | 배포 전 검증 | 최종 검증 단계 |
|
|
104
|
-
| **code-reviewer** | opus | 코드 품질 리뷰 | 구현 완료 후 |
|
|
259
|
+
### Model Routing (한국 서비스 특화)
|
|
105
260
|
|
|
106
|
-
|
|
261
|
+
| 작업 유형 | 에이전트 | 모델 | 이유 |
|
|
262
|
+
|----------|---------|------|------|
|
|
263
|
+
| **UI 컴포넌트** | designer | sonnet | 일반적인 UI 구현 |
|
|
264
|
+
| **복잡한 디자인 시스템** | designer | opus | 브랜드 아이덴티티 반영 |
|
|
265
|
+
| **법규 요구사항 분석** | analyst | sonnet | 개인정보보호법/전자금융거래법 |
|
|
266
|
+
| **보안 검토** | code-reviewer | opus | XSS/CSRF/SQL Injection |
|
|
267
|
+
| **API 구현** | implementation-executor | sonnet | Server Functions, Prisma |
|
|
268
|
+
| **배포 검증** | deployment-validator | sonnet | typecheck/lint/build |
|
|
107
269
|
|
|
108
|
-
|
|
270
|
+
**모델 선택 예시:**
|
|
109
271
|
|
|
110
272
|
```typescript
|
|
111
|
-
//
|
|
112
|
-
Task(subagent_type="
|
|
113
|
-
prompt="
|
|
114
|
-
Task(subagent_type="explore", model="haiku",
|
|
115
|
-
prompt="프로젝트 기존 컴포넌트 구조 분석")
|
|
273
|
+
// 간단한 UI → sonnet
|
|
274
|
+
Task(subagent_type="designer", model="sonnet",
|
|
275
|
+
prompt="버튼 컴포넌트 구현")
|
|
116
276
|
|
|
117
|
-
//
|
|
277
|
+
// 복잡한 디자인 시스템 → opus
|
|
118
278
|
Task(subagent_type="designer", model="opus",
|
|
119
|
-
prompt="
|
|
279
|
+
prompt="토스 스타일 디자인 시스템 전체 설계")
|
|
280
|
+
|
|
281
|
+
// 법규 분석 → analyst (sonnet)
|
|
282
|
+
Task(subagent_type="analyst", model="sonnet",
|
|
283
|
+
prompt="개인정보보호법 요구사항 분석")
|
|
120
284
|
|
|
121
|
-
//
|
|
122
|
-
Task(subagent_type="
|
|
123
|
-
|
|
124
|
-
Task(subagent_type="designer", model="sonnet", prompt="컴포넌트 라이브러리")
|
|
285
|
+
// 보안 검토 → code-reviewer (opus)
|
|
286
|
+
Task(subagent_type="code-reviewer", model="opus",
|
|
287
|
+
prompt="결제 시스템 보안 검증 (PCI-DSS)")
|
|
125
288
|
```
|
|
126
289
|
|
|
127
|
-
|
|
290
|
+
---
|
|
291
|
+
|
|
292
|
+
### 실전 시나리오
|
|
293
|
+
|
|
294
|
+
#### 시나리오 1: 이커머스 (쿠팡/네이버쇼핑 스타일)
|
|
295
|
+
|
|
296
|
+
**목표:** 상품 구매 플로우 전체 구현 (상품 목록 → 상세 → 결제 → 배송)
|
|
128
297
|
|
|
129
298
|
```typescript
|
|
130
|
-
// 병렬
|
|
299
|
+
// Phase 1: UI 병렬 구현
|
|
300
|
+
Task(subagent_type="designer", model="sonnet",
|
|
301
|
+
prompt=`상품 목록 페이지
|
|
302
|
+
- 그리드 레이아웃 (2열/3열)
|
|
303
|
+
- 상품 카드 (이미지/가격/할인율)
|
|
304
|
+
- 필터/정렬 (가격순/인기순)`)
|
|
305
|
+
|
|
131
306
|
Task(subagent_type="designer", model="sonnet",
|
|
132
|
-
prompt
|
|
307
|
+
prompt=`상품 상세 페이지
|
|
308
|
+
- 이미지 갤러리 (슬라이드)
|
|
309
|
+
- 옵션 선택 (색상/사이즈)
|
|
310
|
+
- 가격 표시 (할인가/원가)
|
|
311
|
+
- 구매/장바구니 버튼`)
|
|
312
|
+
|
|
133
313
|
Task(subagent_type="designer", model="sonnet",
|
|
134
|
-
prompt
|
|
314
|
+
prompt=`결제 페이지
|
|
315
|
+
- 주문 정보 (상품/수량)
|
|
316
|
+
- 주소 입력 (Daum Postcode)
|
|
317
|
+
- 결제 수단 (카드/간편결제)
|
|
318
|
+
- 최종 금액 (배송비 포함)`)
|
|
319
|
+
|
|
320
|
+
// Phase 2: API 병렬 구현
|
|
321
|
+
Task(subagent_type="implementation-executor", model="sonnet",
|
|
322
|
+
prompt=`상품 API Server Functions
|
|
323
|
+
- GET /products: 목록 조회
|
|
324
|
+
- GET /products/:id: 상세 조회
|
|
325
|
+
- Prisma Product 모델 사용`)
|
|
326
|
+
|
|
327
|
+
Task(subagent_type="implementation-executor", model="sonnet",
|
|
328
|
+
prompt=`주문 API Server Functions
|
|
329
|
+
- POST /orders: 주문 생성
|
|
330
|
+
- inputValidator로 Zod 검증
|
|
331
|
+
- 재고 확인 로직`)
|
|
332
|
+
|
|
135
333
|
Task(subagent_type="implementation-executor", model="sonnet",
|
|
136
|
-
prompt
|
|
334
|
+
prompt=`결제 API Server Functions
|
|
335
|
+
- POST /payments: 토스페이먼츠 연동
|
|
336
|
+
- 결제 승인/취소/환불
|
|
337
|
+
- 거래 로그 저장 (전자금융거래법)`)
|
|
338
|
+
|
|
339
|
+
// Phase 3: 법규 병렬 검증
|
|
340
|
+
Task(subagent_type="analyst", model="sonnet",
|
|
341
|
+
prompt=`전자상거래법 요구사항 검증
|
|
342
|
+
- 청약철회권 안내 (7일)
|
|
343
|
+
- 환불 정책 명시
|
|
344
|
+
- 사업자 정보 표시`)
|
|
345
|
+
|
|
346
|
+
Task(subagent_type="code-reviewer", model="opus",
|
|
347
|
+
prompt=`개인정보 보안 검토
|
|
348
|
+
- 결제 정보 암호화
|
|
349
|
+
- 주소 정보 접근 제어
|
|
350
|
+
- XSS/CSRF 방어`)
|
|
137
351
|
```
|
|
138
352
|
|
|
139
|
-
|
|
353
|
+
---
|
|
354
|
+
|
|
355
|
+
#### 시나리오 2: 핀테크 (토스/뱅크샐러드 스타일)
|
|
356
|
+
|
|
357
|
+
**목표:** 금융 계좌 연동 + 자산 관리 대시보드
|
|
140
358
|
|
|
141
359
|
```typescript
|
|
142
|
-
//
|
|
143
|
-
Task(subagent_type="
|
|
144
|
-
prompt
|
|
360
|
+
// Phase 1: KYC + 계좌 인증 병렬
|
|
361
|
+
Task(subagent_type="designer", model="sonnet",
|
|
362
|
+
prompt=`본인인증 플로우
|
|
363
|
+
- 휴대폰 인증 (NICE/KCB)
|
|
364
|
+
- 신분증 촬영 (OCR)
|
|
365
|
+
- 주민등록번호 마스킹`)
|
|
366
|
+
|
|
367
|
+
Task(subagent_type="designer", model="sonnet",
|
|
368
|
+
prompt=`계좌 연동 UI
|
|
369
|
+
- 은행 선택 (KB/신한/우리/하나)
|
|
370
|
+
- 1원 인증
|
|
371
|
+
- 연동 완료 확인`)
|
|
145
372
|
|
|
146
|
-
// Step 2: 디자인 + 구현 병렬
|
|
147
|
-
Task(subagent_type="designer", model="opus",
|
|
148
|
-
prompt="2026 트렌드 기반 리뉴얼 디자인 (키네틱/적응형)")
|
|
149
373
|
Task(subagent_type="implementation-executor", model="sonnet",
|
|
150
|
-
prompt
|
|
374
|
+
prompt=`금융 API 연동
|
|
375
|
+
- 오픈뱅킹 API
|
|
376
|
+
- 계좌 조회/거래내역
|
|
377
|
+
- 이체 실행`)
|
|
378
|
+
|
|
379
|
+
// Phase 2: 대시보드 병렬 구현
|
|
380
|
+
Task(subagent_type="designer", model="sonnet",
|
|
381
|
+
prompt=`자산 대시보드
|
|
382
|
+
- 총 자산 (원화 표시)
|
|
383
|
+
- 계좌별 잔액
|
|
384
|
+
- 지출 분석 차트`)
|
|
385
|
+
|
|
386
|
+
Task(subagent_type="designer", model="sonnet",
|
|
387
|
+
prompt=`거래 내역 리스트
|
|
388
|
+
- 날짜별 그룹화
|
|
389
|
+
- 입금/출금 구분
|
|
390
|
+
- 카테고리 태그`)
|
|
391
|
+
|
|
392
|
+
// Phase 3: 법규 병렬 검증
|
|
393
|
+
Task(subagent_type="analyst", model="sonnet",
|
|
394
|
+
prompt=`전자금융거래법 요구사항
|
|
395
|
+
- 거래 내역 7년 보관
|
|
396
|
+
- 오류 정정 요구권
|
|
397
|
+
- 전자서명/공인인증서`)
|
|
151
398
|
|
|
152
|
-
// Step 3: 검증
|
|
153
399
|
Task(subagent_type="code-reviewer", model="opus",
|
|
154
|
-
prompt
|
|
400
|
+
prompt=`금융 보안 검증
|
|
401
|
+
- 계좌번호 암호화
|
|
402
|
+
- 이체 한도 설정
|
|
403
|
+
- 이상 거래 탐지`)
|
|
155
404
|
```
|
|
156
405
|
|
|
157
|
-
|
|
406
|
+
---
|
|
407
|
+
|
|
408
|
+
#### 시나리오 3: 공공 서비스 (정부24 스타일)
|
|
158
409
|
|
|
159
|
-
|
|
160
|
-
- 2026 트렌드 통합 (AI 기반, 공간 UI, 키네틱 타이포, 적응형 테마, 마이크로 인터랙션)
|
|
161
|
-
- 대담한 미학적 방향 정의 (7가지 톤 중 선택)
|
|
162
|
-
- 성능 + 접근성 우선 (WCAG 2.2 AA, 60fps, 배터리/연결 인식)
|
|
163
|
-
- 한국형 패턴과 조화로운 통합 (토스/카카오/배민)
|
|
410
|
+
**목표:** 민원 신청 시스템
|
|
164
411
|
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
-
|
|
412
|
+
```typescript
|
|
413
|
+
// Phase 1: UI 병렬 구현
|
|
414
|
+
Task(subagent_type="designer", model="sonnet",
|
|
415
|
+
prompt=`민원 신청 폼
|
|
416
|
+
- 다단계 폼 (개인정보 → 신청내용 → 첨부파일)
|
|
417
|
+
- 필수/선택 항목 표시
|
|
418
|
+
- 진행률 표시`)
|
|
170
419
|
|
|
171
|
-
|
|
420
|
+
Task(subagent_type="designer", model="sonnet",
|
|
421
|
+
prompt=`파일 업로드
|
|
422
|
+
- 드래그 앤 드롭
|
|
423
|
+
- 파일 타입 제한 (pdf/hwp/jpg)
|
|
424
|
+
- 용량 제한 (10MB)`)
|
|
172
425
|
|
|
173
|
-
|
|
426
|
+
// Phase 2: 웹접근성 병렬 검증
|
|
427
|
+
Task(subagent_type="code-reviewer", model="opus",
|
|
428
|
+
prompt=`KWCAG 2.2 준수 검증
|
|
429
|
+
- 키보드 접근성 (Tab/Enter)
|
|
430
|
+
- ARIA 레이블 (스크린 리더)
|
|
431
|
+
- 색상 대비 4.5:1
|
|
432
|
+
- 폼 레이블 필수`)
|
|
433
|
+
|
|
434
|
+
Task(subagent_type="analyst", model="sonnet",
|
|
435
|
+
prompt=`공공데이터 API 연동 분석
|
|
436
|
+
- 행정안전부 API
|
|
437
|
+
- 데이터 형식 (JSON/XML)
|
|
438
|
+
- 인증 방식 (API 키)`)
|
|
439
|
+
|
|
440
|
+
// Phase 3: 법규 검증
|
|
441
|
+
Task(subagent_type="analyst", model="sonnet",
|
|
442
|
+
prompt=`개인정보보호법 검증
|
|
443
|
+
- 수집 항목 최소화
|
|
444
|
+
- 동의 절차 명시
|
|
445
|
+
- 개인정보 처리방침`)
|
|
446
|
+
```
|
|
447
|
+
|
|
448
|
+
---
|
|
174
449
|
|
|
175
|
-
|
|
450
|
+
#### 시나리오 4: 커뮤니티 (네이버 카페/디시인사이드 스타일)
|
|
176
451
|
|
|
177
|
-
|
|
178
|
-
- [ ] 코드베이스 탐색 필요? → explore agent (haiku)
|
|
179
|
-
- [ ] 디자인 + 구현 동시? → designer + executor 병렬
|
|
180
|
-
- [ ] 여러 컴포넌트 동시 작업? → 여러 designer 병렬
|
|
181
|
-
- [ ] 복잡한 아키텍처 결정? → opus 모델 사용
|
|
452
|
+
**목표:** 게시판 + 댓글 시스템
|
|
182
453
|
|
|
183
|
-
|
|
454
|
+
```typescript
|
|
455
|
+
// Phase 1: UI 병렬 구현
|
|
456
|
+
Task(subagent_type="designer", model="sonnet",
|
|
457
|
+
prompt=`게시판 리스트
|
|
458
|
+
- 말머리 (공지/일반/질문)
|
|
459
|
+
- 제목/작성자/날짜/조회수
|
|
460
|
+
- 페이지네이션`)
|
|
461
|
+
|
|
462
|
+
Task(subagent_type="designer", model="sonnet",
|
|
463
|
+
prompt=`게시글 상세
|
|
464
|
+
- 제목/작성자/날짜
|
|
465
|
+
- 본문 (Markdown 지원)
|
|
466
|
+
- 좋아요/신고 버튼`)
|
|
467
|
+
|
|
468
|
+
Task(subagent_type="designer", model="sonnet",
|
|
469
|
+
prompt=`댓글 시스템
|
|
470
|
+
- 대댓글 (nested)
|
|
471
|
+
- 좋아요/신고
|
|
472
|
+
- 실시간 업데이트`)
|
|
473
|
+
|
|
474
|
+
// Phase 2: API 병렬 구현
|
|
475
|
+
Task(subagent_type="implementation-executor", model="sonnet",
|
|
476
|
+
prompt=`게시글 CRUD API
|
|
477
|
+
- GET /posts: 목록
|
|
478
|
+
- POST /posts: 작성 (인증 필수)
|
|
479
|
+
- PUT /posts/:id: 수정
|
|
480
|
+
- DELETE /posts/:id: 삭제`)
|
|
481
|
+
|
|
482
|
+
Task(subagent_type="implementation-executor", model="sonnet",
|
|
483
|
+
prompt=`댓글 CRUD API
|
|
484
|
+
- GET /comments: 조회
|
|
485
|
+
- POST /comments: 작성
|
|
486
|
+
- nested 구조 (parent_id)`)
|
|
487
|
+
|
|
488
|
+
// Phase 3: 컨텐츠 정책 검증
|
|
489
|
+
Task(subagent_type="analyst", model="sonnet",
|
|
490
|
+
prompt=`정보통신망법 요구사항
|
|
491
|
+
- 불법 정보 신고 절차
|
|
492
|
+
- 임시조치 (게시 중단)
|
|
493
|
+
- 명예훼손 대응`)
|
|
494
|
+
```
|
|
495
|
+
|
|
496
|
+
---
|
|
497
|
+
|
|
498
|
+
### 체크리스트
|
|
184
499
|
|
|
185
|
-
|
|
500
|
+
#### 작업 전 확인
|
|
501
|
+
|
|
502
|
+
**병렬 실행 가능:**
|
|
503
|
+
- [ ] 본인인증 + 결제 + 주소입력 (독립 컴포넌트)
|
|
504
|
+
- [ ] 모바일 UI + 데스크톱 UI (독립 화면)
|
|
505
|
+
- [ ] 개인정보보호법 + 전자금융거래법 + 웹접근성 (독립 검증)
|
|
506
|
+
- [ ] 여러 페이지/컴포넌트 동시 작업
|
|
507
|
+
|
|
508
|
+
**순차 실행 필요:**
|
|
509
|
+
- [ ] API 구현 → 검증 (의존성)
|
|
510
|
+
- [ ] 디자인 시스템 설계 → 컴포넌트 구현 (순서)
|
|
511
|
+
|
|
512
|
+
**한국 서비스 필수 체크:**
|
|
513
|
+
- [ ] 날짜 형식 (YYYY년 MM월 DD일)
|
|
514
|
+
- [ ] 통화 형식 (15,000원)
|
|
515
|
+
- [ ] 전화번호 형식 (010-XXXX-XXXX)
|
|
516
|
+
- [ ] 주소 입력 (Daum Postcode API)
|
|
517
|
+
- [ ] 본인인증 (NICE/KCB)
|
|
518
|
+
- [ ] 결제 (토스페이먼츠/KG이니시스)
|
|
519
|
+
- [ ] 법규 준수 (개인정보보호법/전자금융거래법/웹접근성)
|
|
520
|
+
|
|
521
|
+
**모델 선택:**
|
|
522
|
+
- [ ] 간단한 UI → designer (sonnet)
|
|
523
|
+
- [ ] 복잡한 디자인 시스템 → designer (opus)
|
|
524
|
+
- [ ] 법규 분석 → analyst (sonnet)
|
|
525
|
+
- [ ] 보안 검토 → code-reviewer (opus)
|
|
526
|
+
- [ ] API 구현 → implementation-executor (sonnet)
|
|
527
|
+
|
|
528
|
+
**적극적으로 병렬 에이전트 활용. 한국 서비스 특화 패턴 적용.**
|
|
529
|
+
|
|
530
|
+
</parallel_agent_execution>
|
|
186
531
|
|
|
187
532
|
---
|
|
188
533
|
|