@kood/claude-code 0.3.14 → 0.3.16

package/templates/.claude/skills/korea-uiux-design/references/accessibility.md

@@ -0,0 +1,298 @@
+# 접근성
+
+<legal_basis>
+
+**법적 근거:** 지능정보화기본법 제47조, 시행규칙 제5조
+**국가표준:** KWCAG 2.2 (한국형 웹 콘텐츠 접근성 지침)
+**국제표준:** WCAG 2.1/2.2
+**인증:** 한국디지털접근성진흥원
+
+</legal_basis>
+
+---
+
+<contrast>
+
+**WCAG AA (필수):** 일반 텍스트 4.5:1+ | 큰 텍스트 3:1+ (18pt/24px+ 또는 14pt/18.66px+ Bold)
+**WCAG AAA (권장):** 일반 텍스트 7:1+ | 큰 텍스트 4.5:1+
+**척도:** 1:1 (구분 불가) ~ 21:1 (최대 대비)
+
+```tsx
+{/* ✅ AA 충족 (4.5:1+) */}
+<p className="text-gray-900 bg-white">일반 텍스트</p>
+
+{/* ✅ 큰 텍스트 (3:1+) */}
+<h1 className="text-2xl font-bold text-gray-700 bg-white">제목</h1>
+
+{/* ❌ 대비 부족 (2:1) */}
+<p className="text-gray-400 bg-white">읽기 어려움</p>
+```
+
+**도구:** [Contrast Finder](https://app.contrast-finder.org/), Chrome DevTools
+
+</contrast>
+
+---
+
+<keyboard>
+
+**Tab 순서:** 논리적 순서 유지, tabindex 명시 금지
+
+| 키 | 동작 |
+|------|------|
+| Tab | 다음 요소 |
+| Shift+Tab | 이전 요소 |
+| Enter | 버튼/링크 활성화 |
+| Space | 버튼 활성화, 체크박스 토글 |
+| Esc | 모달/드롭다운 닫기 |
+| Arrow | 라디오, 탭 이동 |
+
+```tsx
+{/* ✅ 명확한 포커스 */}
+<button className="focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2">
+  버튼
+</button>
+
+{/* ❌ 포커스 스타일 제거 금지 */}
+<button className="focus:outline-none">버튼</button>
+```
+
+</keyboard>
+
+---
+
+<semantic_html>
+
+```tsx
+{/* ✅ Semantic HTML */}
+<header>
+  <nav><ul><li><a href="/">홈</a></li></ul></nav>
+</header>
+<main><article><h1>제목</h1><p>본문</p></article></main>
+<footer><p>© 2026 회사명</p></footer>
+
+{/* ❌ Div만 사용 */}
+<div className="header"><div className="nav"><div>홈</div></div></div>
+```
+
+</semantic_html>
+
+---
+
+<aria>
+
+```tsx
+{/* aria-label */}
+<button aria-label="메뉴 열기"><svg className="w-6 h-6" /></button>
+
+{/* aria-labelledby */}
+<div aria-labelledby="dialog-title">
+  <h2 id="dialog-title">확인</h2>
+</div>
+
+{/* aria-describedby */}
+<input aria-describedby="email-hint" />
+<span id="email-hint">example@email.com 형식</span>
+
+{/* aria-hidden */}
+<svg aria-hidden="true" className="w-5 h-5" />
+
+{/* 상태 표시 */}
+<button aria-expanded={isOpen} aria-controls="menu">메뉴</button>
+<div role="tab" aria-selected={isActive}>탭</div>
+<div role="checkbox" aria-checked={isChecked}>옵션</div>
+
+{/* Live Regions */}
+<div role="status" aria-live="polite" aria-atomic="true" className="sr-only">
+  {message}
+</div>
+```
+
+**aria-live:** polite (사용자 작업 후) | assertive (즉시) | off (없음)
+
+</aria>
+
+---
+
+<screen_reader>
+
+```tsx
+{/* 스크린 리더 전용 텍스트 */}
+<span className="sr-only">현재 페이지: 홈</span>
+
+/* Tailwind CSS */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+{/* 의미있는 아이콘 */}
+<button aria-label="검색"><svg aria-hidden="true" className="w-5 h-5" /></button>
+
+{/* 장식용 아이콘 */}
+<button><svg aria-hidden="true" className="w-5 h-5" /><span>검색</span></button>
+```
+
+</screen_reader>
+
+---
+
+<forms>
+
+```tsx
+{/* ✅ label + input 연결 */}
+<div>
+  <label htmlFor="email" className="block text-sm font-medium mb-2">이메일</label>
+  <input id="email" type="email" className="w-full h-11 px-3 border rounded-lg" />
+</div>
+
+{/* 필수 필드 */}
+<div>
+  <label htmlFor="name">
+    이름 <span className="text-red-500" aria-label="필수">*</span>
+  </label>
+  <input id="name" required aria-required="true" />
+</div>
+
+{/* 에러 메시지 */}
+<div>
+  <label htmlFor="password">비밀번호</label>
+  <input
+    id="password"
+    aria-invalid={hasError}
+    aria-describedby="password-error"
+    className={hasError ? 'border-red-500' : 'border-gray-300'}
+  />
+  {hasError && (
+    <p id="password-error" className="text-sm text-red-600 mt-1" role="alert">
+      비밀번호는 8자 이상이어야 합니다
+    </p>
+  )}
+</div>
+```
+
+</forms>
+
+---
+
+<color_independence>
+
+```tsx
+{/* ❌ 색상만 */}
+<span className="text-red-500">오류</span>
+
+{/* ✅ 아이콘 + 텍스트 */}
+<div className="flex items-center gap-2 text-red-500">
+  <svg className="w-5 h-5" aria-hidden="true" />
+  <span>오류가 발생했습니다</span>
+</div>
+
+{/* ✅ 패턴/모양 추가 */}
+<button className="border-2 border-dashed border-primary-500">선택됨</button>
+```
+
+</color_independence>
+
+---
+
+<images>
+
+```tsx
+{/* ✅ 의미있는 이미지 */}
+<img src="/logo.png" alt="회사 로고" />
+
+{/* ✅ 정보 전달 */}
+<img src="/graph.png" alt="2026년 1월 매출 15% 증가를 보여주는 그래프" />
+
+{/* ✅ 장식용 */}
+<img src="/decoration.png" alt="" role="presentation" />
+
+{/* ❌ 불명확 */}
+<img src="/photo.png" alt="이미지" />
+```
+
+</images>
+
+---
+
+<modal>
+
+```tsx
+<div
+  role="dialog"
+  aria-modal="true"
+  aria-labelledby="modal-title"
+  className="fixed inset-0 z-50"
+>
+  <div className="fixed inset-0 bg-black/50" onClick={onClose} aria-hidden="true" />
+  <div className="fixed inset-0 flex items-center justify-center p-4">
+    <div className="bg-white rounded-2xl max-w-md w-full p-6">
+      <h2 id="modal-title" className="text-xl font-semibold">제목</h2>
+      <div>{children}</div>
+      <button onClick={onClose} aria-label="모달 닫기" className="absolute top-4 right-4">
+        ✕
+      </button>
+    </div>
+  </div>
+</div>
+```
+
+</modal>
+
+---
+
+<responsive_text>
+
+```tsx
+{/* ✅ 상대 단위 (rem, em) */}
+<p className="text-base">{/* 1rem = 16px */}본문</p>
+
+{/* ❌ 고정 픽셀 */}
+<p style={{ fontSize: '14px' }}>본문</p>
+```
+
+</responsive_text>
+
+---
+
+<checklist>
+
+### 필수
+
+- [ ] 명암 대비 4.5:1+ (AA)
+- [ ] 키보드 모든 기능 접근
+- [ ] 포커스 스타일 명확
+- [ ] Semantic HTML
+- [ ] 모든 이미지 alt
+- [ ] 폼 레이블 + input 연결
+- [ ] 색상만 정보 전달 금지
+- [ ] 스크린 리더 테스트
+
+### 권장
+
+- [ ] 명암 대비 7:1+ (AAA)
+- [ ] ARIA 적절 사용
+- [ ] Skip to content 링크
+- [ ] 반응형 텍스트 (rem)
+- [ ] 키보드 단축키
+
+</checklist>
+
+---
+
+<sources>
+
+- [WCAG 2.2 한국어](https://a11ykr.github.io/wcag22/)
+- [한국디지털접근성진흥원](http://www.kwacc.or.kr/)
+- [WCAG 2.1 Korean Translation](http://www.kwacc.or.kr/WAI/wcag21/)
+- [MDN - 웹 접근성](https://developer.mozilla.org/ko/docs/Web/Accessibility/Guides/Understanding_WCAG)
+- [Contrast Finder](https://app.contrast-finder.org/)
+
+</sources>

package/templates/.claude/skills/korea-uiux-design/references/checklist.md

@@ -0,0 +1,107 @@
+# 화면별 체크리스트
+
+<all_screens>
+
+- [ ] 페이지 제목 명확
+- [ ] 주요 액션 눈에 띔
+- [ ] 로딩/에러/빈 상태 디자인
+- [ ] 모바일 터치 44px+
+- [ ] 헤더/네비게이션 스크롤 처리
+
+</all_screens>
+
+---
+
+<forms>
+
+- [ ] 레이블 명확
+- [ ] 필수/선택 구분
+- [ ] 에러 메시지 인풋 근처
+- [ ] 키보드 타입 적절
+- [ ] 제출 버튼 항상 보임
+- [ ] 비활성 상태 명확
+
+</forms>
+
+---
+
+<lists>
+
+- [ ] 아이템 간 시각적 구분
+- [ ] 빈 상태 메시지
+- [ ] 무한 스크롤/페이지네이션
+- [ ] 검색/필터
+- [ ] 스켈레톤 UI
+- [ ] 클릭 영역 충분
+
+</lists>
+
+---
+
+<detail>
+
+- [ ] 뒤로가기 명확
+- [ ] 핵심 정보 상단
+- [ ] 액션 버튼 접근 용이
+- [ ] 관련 정보 네비게이션
+- [ ] 부가 액션 (공유/즐겨찾기)
+
+</detail>
+
+---
+
+<dashboard>
+
+- [ ] 중요 지표 상단
+- [ ] 섹션별 명확 구분
+- [ ] 빠른 액션 버튼
+- [ ] 최근 활동/알림
+- [ ] 반응형 그리드 변환
+
+</dashboard>
+
+---
+
+<settings>
+
+- [ ] 섹션별 그룹핑
+- [ ] 항목 설명 명확
+- [ ] 토글/스위치 터치 용이
+- [ ] 위험 액션 구분
+- [ ] 자동 저장 여부 명시
+
+</settings>
+
+---
+
+<modal>
+
+- [ ] 닫기 버튼 명확
+- [ ] 외부 클릭 시 닫힘
+- [ ] ESC 키 닫힘
+- [ ] 모바일 스와이프 닫기
+- [ ] 백드롭 적절한 투명도
+
+</modal>
+
+---
+
+<error_state>
+
+- [ ] 에러 메시지 이해 쉬움
+- [ ] 해결 방법 제시
+- [ ] 재시도 버튼
+- [ ] 에러 아이콘
+
+</error_state>
+
+---
+
+<empty_state>
+
+- [ ] 빈 상태 메시지 친근
+- [ ] 액션 버튼 제공
+- [ ] 일러스트/아이콘
+- [ ] 다음 단계 명확
+
+</empty_state>

package/templates/.claude/skills/korea-uiux-design/references/color-system.md

@@ -0,0 +1,156 @@
+# 색상 시스템
+
+<color_structure>
+
+| 색상 | 용도 | 비율 |
+|------|------|------|
+| **Primary** | 버튼, 링크, 활성 상태 | 10% |
+| **Secondary** | 필터, 칩, 보조 버튼 | 30% |
+| **Background** | 배경 | 60% |
+| **Semantic** | Success/Error/Warning/Info | 필요시 |
+
+**60-30-10 규칙:** Background 60% | Secondary 30% | Primary 10%
+
+</color_structure>
+
+---
+
+<semantic_colors>
+
+| 용도 | 색상 | 용례 |
+|------|------|------|
+| Success | Green | 성공 메시지, 완료 상태 |
+| Error | Red | 에러 메시지, 위험 경고 |
+| Warning | Yellow/Orange | 주의 알림, 중요 정보 |
+| Info | Blue | 일반 정보, 도움말 |
+
+</semantic_colors>
+
+---
+
+<krds>
+
+**한국 정부 표준 (KRDS):** 240개 색상 (24개 × 10단계), 50이 기본, WCAG AA
+
+```css
+/* Primary Blue */
+--primary-50: #2196F3;  /* 기본 */
+--primary-500: #2196F3;
+--primary-600: #1E88E5;
+
+/* Grayscale */
+--gray-50: #9E9E9E;
+--gray-600: #757575;
+--gray-900: #212121;
+```
+
+</krds>
+
+---
+
+<service_colors>
+
+| 서비스 | Primary | Secondary | 특징 |
+|--------|---------|-----------|------|
+| **토스** | Blue #3182F6 | Gray | 신뢰감, 단순 명확, 강한 파란색 |
+| **카카오** | Yellow #FEE500 | Brown #3C1E1E | 친근함, 말풍선, radius 12px |
+| **배민** | Teal #2AC1BC | Coral/Pink | 신선함, 손글씨 폰트, 일러스트 |
+
+</service_colors>
+
+---
+
+<tailwind_config>
+
+```js
+// tailwind.config.js
+colors: {
+  primary: {
+    DEFAULT: '#2196F3',
+    50: '#E3F2FD',
+    500: '#2196F3',
+    600: '#1E88E5',
+  },
+  success: { DEFAULT: '#4CAF50', light: '#81C784', dark: '#388E3C' },
+  error: { DEFAULT: '#F44336', light: '#E57373', dark: '#D32F2F' },
+  warning: { DEFAULT: '#FF9800', light: '#FFB74D', dark: '#F57C00' },
+  info: { DEFAULT: '#2196F3', light: '#64B5F6', dark: '#1976D2' },
+}
+```
+
+</tailwind_config>
+
+---
+
+<dark_mode>
+
+| 모드 | 배경 | 텍스트 |
+|------|------|--------|
+| **Light** | #FFFFFF, #F5F5F5 | #212121, #757575 |
+| **Dark** | #121212, #1E1E1E | #FFFFFF, #B0B0B0 |
+
+**특징:** 순수 검정(#000) 지양 → #121212, Primary 약간 밝게
+
+</dark_mode>
+
+---
+
+<accessibility>
+
+**WCAG AA:** 일반 텍스트 4.5:1+ | 큰 텍스트 3:1+
+**WCAG AAA:** 일반 텍스트 7:1+ | 큰 텍스트 4.5:1+
+
+```tsx
+{/* ❌ 색상만 */}
+<span className="text-red-500">오류</span>
+
+{/* ✅ 아이콘 + 텍스트 */}
+<div className="flex items-center gap-2 text-red-500">
+  <svg className="w-5 h-5" />
+  <span>오류가 발생했습니다</span>
+</div>
+```
+
+**색약 고려:** 빨강-초록 색맹, 파랑-노랑 구분, 형태/아이콘 추가
+
+</accessibility>
+
+---
+
+<examples>
+
+```tsx
+{/* Primary Button */}
+<button className="bg-primary-500 hover:bg-primary-600 text-white">저장하기</button>
+
+{/* Secondary Button */}
+<button className="bg-secondary-200 hover:bg-secondary-300 text-secondary-900">취소</button>
+
+{/* Success State */}
+<div className="bg-success-light/10 border border-success text-success-dark p-3 rounded-lg">
+  <div className="flex items-center gap-2">
+    <svg className="w-5 h-5" />
+    <span>성공적으로 저장되었습니다</span>
+  </div>
+</div>
+
+{/* Error State */}
+<div className="bg-error-light/10 border border-error text-error-dark p-3 rounded-lg">
+  <div className="flex items-center gap-2">
+    <svg className="w-5 h-5" />
+    <span>오류가 발생했습니다</span>
+  </div>
+</div>
+```
+
+</examples>
+
+---
+
+<sources>
+
+- [KRDS 색상 가이드](https://www.krds.go.kr/html/site/style/style_02.html)
+- [Gmarket Design System - Colors](https://gds.gmarket.co.kr/foundation/color)
+- [리메인 - 브랜드 컬러](https://www.remain.co.kr/page/designsystem/brand-color.php)
+
+</sources>

package/templates/.claude/skills/korea-uiux-design/references/design-philosophy.md

@@ -0,0 +1,25 @@
+# 디자인 철학
+
+<principles>
+
+| 원칙 | 적용 |
+|------|------|
+| **정보 밀도** | 계층 구분, 한 화면에 핵심만, 상세는 펼침/모달 |
+| **미니멀리즘** | 불필요한 장식 제거, 미세한 보더로 구분 |
+| **곡선** | border-radius 8-16px, pill 형태는 태그/뱃지만 |
+| **UX 라이팅** | "입력하세요" → "어떤 이름으로 불러드릴까요?" |
+
+</principles>
+
+---
+
+<avoid>
+
+| 분류 | 금지 |
+|------|------|
+| **레이아웃** | 1400px+ 콘텐츠, 좁은 여백, 불규칙 정렬, 모바일 가로 스크롤 |
+| **스타일** | 강한 그림자, 화려한 그라데이션, rounded-full 남발, 순수 검정(#000) |
+| **타이포** | 12px 미만, 3+ 폰트 웨이트, 모든 텍스트 중앙 정렬 |
+| **인터랙션** | 300ms+ 애니메이션, 강한 바운스, 자동 재생, 호버 상태 없음 |
+
+</avoid>