timelabs 0.1.0 → 0.1.1

package/skills/web-design/claude-code/defs/image-strategies/01-landing.md

@@ -0,0 +1,76 @@
+# 1. 랜딩페이지 (`landing`)
+
+
+### L-I1. Hero Optimized (히어로 최적화)
+
+```
+기법: Hero 영역 고품질 이미지 + below-fold 지연 로딩
+방식: srcset+picture | gradient overlay | LQIP blur-up
+
+┌─────────────────────────────┐
+│  <picture>                  │
+│    <source srcset="hero.avif" type="image/avif">
+│    <source srcset="hero.webp" type="image/webp">
+│    <img src="hero.jpg" fetchpriority="high">
+│  </picture>                 │
+│  ┌───────────────────────┐  │
+│  │  Gradient Overlay     │  │
+│  │  + Hero Text          │  │
+│  └───────────────────────┘  │
+└─────────────────────────────┘
+  above-fold: eager | below-fold: lazy
+
+적합: 프로모션, 제품 런칭, 브랜드 랜딩
+CSS: object-fit: cover; aspect-ratio: 16/9
+라이브러리: next/image, @unpic/astro
+```
+
+### L-I2. Visual Storytelling (비주얼 스토리텔링)
+
+```
+기법: 풀블리드 배경 이미지 + 패럴랙스 + 스크롤 리빌
+방식: parallax BG | fullbleed section | fade-in reveal
+
+┌─────────────────────────────┐
+│  BG Image (fixed/parallax)  │ ← background-attachment
+│  ┌─────────────────────┐    │
+│  │  Section Content     │    │
+│  │  (scroll reveal)     │    │
+│  └─────────────────────┘    │
+│                             │
+│  ┌─────────────────────┐    │
+│  │  Next Section        │    │ ← fade-in on scroll
+│  └─────────────────────┘    │
+└─────────────────────────────┘
+
+적합: 브랜드 스토리, 크리에이티브 에이전시
+CSS: background-attachment: fixed; background-size: cover
+라이브러리: GSAP ScrollTrigger, Framer Motion
+```
+
+### L-I3. Performance First (성능 우선)
+
+```
+기법: SVG 일러스트 중심 + 최소 래스터, 네이티브 lazy
+방식: native lazy | SVG illustration | skeleton placeholder
+
+┌─────────────────────────────┐
+│  Hero: SVG Illustration     │ ← 벡터, 무한 확장
+│  (인라인 SVG, 애니메이션)    │
+├─────────────────────────────┤
+│  Section: 텍스트 중심        │
+│  [SVG icon] Feature 1       │
+│  [SVG icon] Feature 2       │ ← 래스터 이미지 최소화
+│  [SVG icon] Feature 3       │
+├─────────────────────────────┤
+│  <img loading="lazy">       │ ← 필요 시 native lazy
+│  skeleton → loaded           │
+└─────────────────────────────┘
+
+적합: SaaS, 기술 서비스, 성능 중시 프로젝트
+CSS: content-visibility: auto
+라이브러리: SVGR, Lottie (애니메이션 SVG)
+```
+
+---
+

package/skills/web-design/claude-code/defs/image-strategies/02-dashboard.md

@@ -0,0 +1,51 @@
+# 2. 대시보드 (`dashboard`)
+
+
+### D-I1. Data Focused (데이터 중심)
+
+```
+기법: 아바타 시스템 + SVG 상태 아이콘 + 테이블 이미지 lazy
+방식: avatar+initials fallback | SVG status icon | lazy table image
+
+┌──────┬───────────────────────┐
+│ Nav  │  ┌─────────────────┐  │
+│      │  │ 👤 Avatar       │  │ ← 이미지 실패 시 이니셜
+│      │  │ (fallback: JK)  │  │
+│      │  └─────────────────┘  │
+│      │  ┌─────────────────┐  │
+│ SVG  │  │ Table           │  │
+│icons │  │ [lazy thumb] 행1│  │ ← 테이블 내 썸네일 lazy
+│      │  │ [lazy thumb] 행2│  │
+│      │  └─────────────────┘  │
+└──────┴───────────────────────┘
+
+적합: 관리자 패널, CRM, 데이터 관리
+CSS: border-radius: 50%; object-fit: cover
+라이브러리: Boring Avatars, DiceBear
+```
+
+### D-I2. Media Manager (미디어 매니저)
+
+```
+기법: 썸네일 그리드 + 업로드 미리보기 + CDN 최적화
+방식: thumbnail grid | upload preview | CDN resize
+
+┌──────┬───────────────────────┐
+│ Nav  │  ┌──┬──┬──┬──┐       │
+│      │  │📷│📷│📷│📷│       │ ← 썸네일 그리드
+│      │  ├──┼──┼──┼──┤       │   (lazy + shimmer)
+│      │  │📷│📷│📷│📷│       │
+│      │  └──┴──┴──┴──┘       │
+│      │  ┌─────────────────┐  │
+│      │  │ ⬆ Upload Zone   │  │ ← 드래그 앤 드롭
+│      │  │ [preview thumb] │  │   업로드 미리보기
+│      │  └─────────────────┘  │
+└──────┴───────────────────────┘
+
+적합: CMS 미디어 라이브러리, 파일 관리
+CSS: aspect-ratio: 1; object-fit: cover
+라이브러리: react-dropzone, Cloudinary SDK
+```
+
+---
+

package/skills/web-design/claude-code/defs/image-strategies/03-ecommerce.md

@@ -0,0 +1,47 @@
+# 3. 이커머스 (`ecommerce`)
+
+
+### E-I1. Product Showcase (상품 쇼케이스)
+
+```
+기법: 멀티앵글 줌 갤러리 + 호버 줌 + 차세대 포맷
+방식: multi-angle gallery | hover zoom | WebP/AVIF srcset
+
+┌─────────────────────────────┐
+│  ┌───────────────┐ ┌─────┐ │
+│  │               │ │thumb│ │
+│  │  Main Image   │ │─────│ │ ← 메인 이미지 교체
+│  │  (hover zoom) │ │thumb│ │   마우스 오버 줌
+│  │    🔍         │ │─────│ │
+│  │               │ │thumb│ │ ← 썸네일 갤러리
+│  └───────────────┘ └─────┘ │
+│  ● ○ ○ ○  (indicator)      │
+└─────────────────────────────┘
+
+적합: 상품 상세, 제품 쇼케이스
+CSS: transform: scale(2); transform-origin: var(--mouse-x) var(--mouse-y)
+라이브러리: react-zoom-pan-pinch, Drift
+```
+
+### E-I2. Catalog Grid (카탈로그 그리드)
+
+```
+기법: 상품 목록 lazy 그리드 + shimmer 플레이스홀더 + srcset
+방식: lazy grid | shimmer placeholder | responsive srcset
+
+┌──┬──┬──┬──┐      ┌──┬──┬──┬──┐
+│░░│░░│░░│░░│  →   │📷│📷│📷│📷│
+│░░│░░│░░│░░│      │명│명│명│명│ ← shimmer → 실제 이미지
+│₩░│₩░│₩░│₩░│      │₩₩│₩₩│₩₩│₩₩│
+├──┼──┼──┼──┤      ├──┼──┼──┼──┤
+│░░│░░│░░│░░│      │📷│📷│📷│📷│ ← Intersection Observer
+│░░│░░│░░│░░│      │명│명│명│명│   스크롤 시 순차 로딩
+└──┴──┴──┴──┘      └──┴──┴──┴──┘
+
+적합: 상품 목록, 카테고리 페이지
+CSS: aspect-ratio: 3/4; object-fit: cover
+라이브러리: next/image, @unpic/react
+```
+
+---
+

package/skills/web-design/claude-code/defs/image-strategies/04-blog.md

@@ -0,0 +1,58 @@
+# 4. 블로그/콘텐츠 (`blog`)
+
+
+### B-I1. Editorial Rich (에디토리얼 리치)
+
+```
+기법: 피처드 이미지 + 본문 반응형 이미지 + OG/소셜 최적화
+방식: featured hero | inline responsive | OG image auto-gen
+
+┌─────────────────────────────┐
+│  Featured Image             │ ← 16:9, srcset, eager load
+│  (hero, above-fold)         │
+├─────────────────────────────┤
+│  ## Article Title            │
+│                             │
+│  본문 텍스트...              │
+│  ┌─────────────────────┐    │
+│  │  Inline Image        │   │ ← lazy, figure+figcaption
+│  │  <figcaption>설명    │   │   반응형 srcset
+│  └─────────────────────┘    │
+│  본문 계속...                │
+├─────────────────────────────┤
+│  OG: og:image 1200x630      │ ← 소셜 공유 최적화
+└─────────────────────────────┘
+
+적합: 기술 블로그, 뉴스, 매거진
+CSS: max-width: 100%; height: auto
+라이브러리: next/og, @vercel/og (OG 자동 생성)
+```
+
+### B-I2. Minimal Content (미니멀 콘텐츠)
+
+```
+기법: SVG 일러스트 중심 + 최소 사진 + 성능 최적화
+방식: SVG illustration | minimal photos | performance-first
+
+┌─────────────────────────────┐
+│  ## Article Title            │
+│  ┌─────────┐                │
+│  │  SVG    │ ← 커스텀 일러스트│
+│  │  Hero   │   (인라인 SVG)  │
+│  └─────────┘                │
+│                             │
+│  본문 텍스트 중심...          │
+│  (이미지 최소화)              │
+│                             │
+│  [SVG divider]              │ ← 장식용 SVG 구분선
+│                             │
+│  본문 계속...                │
+└─────────────────────────────┘
+
+적합: 개인 블로그, 에세이, 기술 문서
+CSS: max-inline-size: 65ch (가독성)
+라이브러리: unDraw, Storyset (무료 SVG)
+```
+
+---
+

package/skills/web-design/claude-code/defs/image-strategies/05-saas.md

@@ -0,0 +1,56 @@
+# 5. SaaS/웹앱 (`saas`)
+
+
+### S-I1. App Interface (앱 인터페이스)
+
+```
+기법: 아바타 시스템 + 빈 상태 SVG + 파일 미리보기
+방식: avatar system | empty state SVG | file preview thumb
+
+┌──────┬───────────────────────┐
+│ Nav  │  ┌─────────────────┐  │
+│      │  │ 👤 JK  홍길동    │  │ ← 아바타 (fallback 지원)
+│ [📷] │  └─────────────────┘  │
+│ logo │  ┌─────────────────┐  │
+│      │  │  Empty State     │  │
+│      │  │  ┌─────┐        │  │ ← 빈 상태 SVG 일러스트
+│      │  │  │ SVG │        │  │
+│      │  │  └─────┘        │  │
+│      │  │  데이터 없음      │  │
+│      │  └─────────────────┘  │
+│      │  ┌──┬──┬──┐          │
+│      │  │📄│📷│📊│          │ ← 파일 미리보기 썸네일
+│      │  └──┴──┴──┘          │
+└──────┴───────────────────────┘
+
+적합: 프로젝트 관리, CRM, 협업 도구
+CSS: width: 32px; height: 32px; border-radius: 50%
+라이브러리: Boring Avatars, undraw (empty state)
+```
+
+### S-I2. Marketing Hybrid (마케팅 하이브리드)
+
+```
+기법: 마케팅 랜딩 + 앱 스크린샷 + 그래디언트 오버레이
+방식: hero+screenshot | gradient overlay | responsive srcset
+
+┌─────────────────────────────┐
+│  Hero Section               │
+│  ┌─────────────────────┐    │
+│  │  Gradient Overlay    │   │ ← 그래디언트 + 텍스트
+│  │  ┌───────────────┐  │   │
+│  │  │  App Screenshot│  │   │ ← 반응형 스크린샷
+│  │  │  (mockup)     │  │   │   srcset으로 해상도 대응
+│  │  └───────────────┘  │   │
+│  └─────────────────────┘    │
+├─────────────────────────────┤
+│  Features (SVG icons)       │ ← SVG 아이콘 + 텍스트
+└─────────────────────────────┘
+
+적합: SaaS 마케팅 사이트, 제품 소개
+CSS: object-fit: contain; border-radius: 12px
+라이브러리: next/image, Cloudinary
+```
+
+---
+

package/skills/web-design/claude-code/defs/image-strategies/06-portfolio.md

@@ -0,0 +1,62 @@
+# 6. 포트폴리오 (`portfolio`)
+
+
+### P-I1. Gallery Showcase (갤러리 쇼케이스)
+
+```
+기법: Masonry 그리드 + 라이트박스 + LQIP blur-up + 고해상도
+방식: masonry layout | lightbox zoom | LQIP blur-up | HQ responsive
+
+┌──┬─────┬──┐
+│  │     │  │
+│📷│ 📷  │📷│ ← Masonry 그리드
+│  │     │  │   (다양한 aspect-ratio)
+├──┤     ├──┤
+│📷│     │📷│ ← LQIP: 블러 → 선명
+├──┼─────┼──┤
+│  │ 📷  │  │
+│📷│     │📷│ ← 클릭 → 라이트박스
+│  │     │  │
+└──┴─────┴──┘
+
+  click → ┌─────────────────┐
+          │                 │
+          │  Full-size HQ   │ ← 고해상도 원본
+          │  ← → navigate  │   srcset 2x/3x
+          │                 │
+          └─────────────────┘
+
+적합: 사진작가, 디자이너, 아티스트
+CSS: columns: 3; break-inside: avoid (또는 CSS Grid masonry)
+라이브러리: Photoswipe, GLightbox, Masonry.js
+```
+
+### P-I2. Minimal Elegant (미니멀 엘레건트)
+
+```
+기법: 엄선된 히어로 이미지 + aspect-ratio 정밀 제어 + 페이드 인
+방식: curated hero | aspect-ratio control | fade-in reveal
+
+┌─────────────────────────────┐
+│                             │
+│  Curated Hero Image         │ ← 엄선된 대표 이미지
+│  (aspect-ratio: 21/9)       │   와이드 시네마틱
+│                             │
+├─────────────────────────────┤
+│  ┌─────────┐  ┌─────────┐  │
+│  │ Project │  │ Project │  │ ← 균일한 aspect-ratio
+│  │ (4:3)   │  │ (4:3)   │  │   fade-in on scroll
+│  └─────────┘  └─────────┘  │
+│  ┌─────────┐  ┌─────────┐  │
+│  │ Project │  │ Project │  │ ← 미니멀 그리드
+│  │ (4:3)   │  │ (4:3)   │  │
+│  └─────────┘  └─────────┘  │
+└─────────────────────────────┘
+
+적합: 미니멀리스트, 건축, 브랜딩 포트폴리오
+CSS: aspect-ratio: 4/3; object-fit: cover; opacity 전환
+라이브러리: Framer Motion (fade-in), GSAP
+```
+
+---
+

package/skills/web-design/claude-code/defs/image-strategies/08-strategy-common-image.md

@@ -0,0 +1,57 @@
+# 공통 이미지 전략
+
+
+### 포맷 전략
+
+| 포맷 | 용도 | 압축 | 브라우저 지원 | 우선순위 |
+|------|------|------|-------------|---------|
+| **AVIF** | 사진, 복잡한 이미지 | 최고 (50% < WebP) | Chrome 85+, Firefox 93+ | 1순위 |
+| **WebP** | 사진, 일러스트 | 좋음 (25-35% < JPEG) | 모든 모던 브라우저 | 2순위 (폴백) |
+| **SVG** | 아이콘, 로고, 일러스트 | 벡터 (무한 확장) | 전체 | 벡터 전용 |
+| **PNG** | 투명 필요, 스크린샷 | 무손실 | 전체 | 투명 폴백 |
+| **JPEG** | 사진 폴백 | 보통 | 전체 | 최종 폴백 |
+
+**`<picture>` 폴백 패턴:**
+
+```html
+<picture>
+  <source srcset="image.avif" type="image/avif">
+  <source srcset="image.webp" type="image/webp">
+  <img src="image.jpg" alt="설명" loading="lazy">
+</picture>
+```
+
+### Favicon & OG 이미지 스펙
+
+| 항목 | 크기 | 포맷 | 용도 |
+|------|------|------|------|
+| **favicon.ico** | 32x32 | ICO | 브라우저 탭 |
+| **favicon.svg** | any | SVG | 모던 브라우저 (다크모드 대응) |
+| **apple-touch-icon** | 180x180 | PNG | iOS 홈 화면 |
+| **og:image** | 1200x630 | PNG/JPEG | 소셜 미리보기 (Facebook, LinkedIn) |
+| **twitter:image** | 1200x600 | PNG/JPEG | Twitter/X 카드 |
+| **manifest icon** | 192x192, 512x512 | PNG | PWA 아이콘 |
+
+### 접근성 규칙
+
+| 규칙 | 구현 | 설명 |
+|------|------|------|
+| **alt 텍스트 필수** | `<img alt="구체적 설명">` | 정보성 이미지는 내용 설명 |
+| **장식 이미지** | `<img alt="" role="presentation">` | 장식용은 빈 alt + role |
+| **복잡한 이미지** | `aria-describedby` + 별도 설명 | 차트, 인포그래픽 등 |
+| **prefers-reduced-motion** | `@media (prefers-reduced-motion: reduce)` | 패럴랙스, 페이드 비활성화 |
+| **prefers-color-scheme** | `<picture>` media 속성 | 다크모드 대응 이미지 교체 |
+| **고대비 모드** | `forced-colors` 미디어 쿼리 | 윈도우 고대비 대응 |
+
+### 고급 기법
+
+| 기법 | CSS | 용도 |
+|------|-----|------|
+| **clip-path** | `clip-path: polygon(...)` | 비정형 이미지 마스킹 |
+| **mask-image** | `mask-image: linear-gradient(...)` | 그래디언트 마스크, 페이드 아웃 |
+| **mix-blend-mode** | `mix-blend-mode: multiply` | 이미지 블렌딩, 오버레이 효과 |
+| **filter** | `filter: blur() brightness() contrast()` | 실시간 이미지 필터 |
+| **aspect-ratio** | `aspect-ratio: 16/9` | CLS 방지, 레이아웃 안정화 |
+| **object-fit** | `object-fit: cover / contain` | 컨테이너 내 이미지 맞춤 |
+| **image-rendering** | `image-rendering: crisp-edges` | 픽셀아트, 로고 선명도 |
+| **content-visibility** | `content-visibility: auto` | 화면 밖 이미지 렌더링 최적화 |

package/skills/web-design/claude-code/defs/image-strategies.md

@@ -0,0 +1,58 @@
+# 웹 이미지 전략 패턴 정의
+
+> 참조 위치: `stages/stage2-web.md`에서 분기 사용
+> web_type별 추천 이미지 전략 패턴 정의
+> Dependencies: 없음 (독립 참조 데이터)
+
+---
+
+## 공통 이미지 카테고리
+
+| 카테고리 | 설명 |
+|----------|------|
+| **Responsive Image** | srcset, sizes, `<picture>` 기반 반응형 이미지 |
+| **Lazy Loading** | native lazy, Intersection Observer 기반 지연 로딩 |
+| **Placeholder** | LQIP blur-up, skeleton, dominant-color 플레이스홀더 |
+| **Format Optimization** | WebP, AVIF, SVG 최적 포맷 전략 |
+| **Gallery & Zoom** | 라이트박스, 줌, 캐러셀 등 갤러리 인터랙션 |
+| **OG & Favicon** | 소셜 미리보기(Open Graph) 및 파비콘 설정 |
+| **SVG System** | 아이콘, 일러스트, 장식용 SVG 관리 |
+| **Accessibility** | alt 텍스트, 장식 이미지, reduced-motion 대응 |
+
+---
+
+## 1. 랜딩페이지 (`landing`)
+
+> 상세: `defs/image-strategies/01-landing.md` 참조
+
+기법: Hero 영역 고품질 이미지 + below-fold 지연 로딩
+## 2. 대시보드 (`dashboard`)
+
+> 상세: `defs/image-strategies/02-dashboard.md` 참조
+
+기법: 아바타 시스템 + SVG 상태 아이콘 + 테이블 이미지 lazy
+## 3. 이커머스 (`ecommerce`)
+
+> 상세: `defs/image-strategies/03-ecommerce.md` 참조
+
+기법: 멀티앵글 줌 갤러리 + 호버 줌 + 차세대 포맷
+## 4. 블로그/콘텐츠 (`blog`)
+
+> 상세: `defs/image-strategies/04-blog.md` 참조
+
+기법: 피처드 이미지 + 본문 반응형 이미지 + OG/소셜 최적화
+## 5. SaaS/웹앱 (`saas`)
+
+> 상세: `defs/image-strategies/05-saas.md` 참조
+
+기법: 아바타 시스템 + 빈 상태 SVG + 파일 미리보기
+## 6. 포트폴리오 (`portfolio`)
+
+> 상세: `defs/image-strategies/06-portfolio.md` 참조
+
+기법: Masonry 그리드 + 라이트박스 + LQIP blur-up + 고해상도
+## 공통 이미지 전략
+
+> 상세: `defs/image-strategies/08-strategy-common-image.md` 참조
+
+**`<picture>` 폴백 패턴:**

package/skills/web-design/claude-code/defs/seo-guide.md

@@ -0,0 +1,79 @@
+# SEO 전략 가이드
+
+> Dependencies: `defs/config-schema.md` (seo_level 필드), `defs/styles.md` (OG 이미지 색상)
+> 참조원: `gen/gen-design-guide.md` (섹션 4j), `gen/gen-docs.md` (23-seo-strategy.md), `gen/gen-structure.md` (SEO 파일 스캐폴딩)
+> 조건: `config.project_type == "web"` && `config.type_detail.seo_level != "none"`
+
+## 1. Google SEO
+
+> 상세: `defs/seo-guide/01-google-seo.md` 참조
+
+<!-- 필수 meta -->
+## 2. Naver SEO
+
+> 상세: `defs/seo-guide/02-naver-seo.md` 참조
+
+1. [Naver Search Advisor](https://searchadvisor.naver.com/) 접속
+## 3. Daum SEO
+
+### 3.1 다음 검색등록
+
+1. [Daum 검색등록](https://register.search.daum.net/index.daum) 접속
+2. 사이트 URL 등록
+3. 핑 서비스로 색인 요청 가능
+
+### 3.2 다음봇 대응
+
+```
+# robots.txt - Daum 전용 규칙
+User-agent: Daum
+Allow: /
+Disallow: /api/
+Disallow: /admin/
+```
+
+### 3.3 다음 웹마스터 도구
+
+- RSS/Atom 피드 제출로 콘텐츠 색인 촉진
+- `og:` 태그를 통한 카카오톡 미리보기 최적화 (카카오 = 다음)
+
+---
+
+## 4. Open Graph / Twitter Card 전체 스펙
+
+> 상세: `defs/seo-guide/04-all.md` 참조
+
+<!-- 필수 -->
+## 5. 프레임워크별 구현 패턴
+
+> 상세: `defs/seo-guide/05-pattern-framework.md` 참조
+
+// app/layout.tsx - 전역 메타데이터
+## 6. 웹 유형별 SEO 전략
+
+> 상세: `defs/seo-guide/06-strategy.md` 참조
+
+## 7. 페이지별 Meta 템플릿
+
+> 상세: `defs/seo-guide/07-meta.md` 참조
+
+page_meta:
+## 8. SEO 레벨별 생성 범위
+
+| 항목 | basic | advanced |
+|------|-------|----------|
+| meta tags (title, description) | O | O |
+| canonical URL | O | O |
+| robots.txt | O | O |
+| sitemap.xml (기본) | O | O |
+| Open Graph 기본 | O | O |
+| Twitter Card | X | O |
+| JSON-LD / Schema.org | X | O |
+| OG 이미지 자동 생성 가이드 | X | O |
+| 자동 sitemap (빌드 시) | X | O |
+| Naver 서치어드바이저 가이드 | O | O |
+| Naver 신디케이션 | X | O |
+| Daum 검색등록 가이드 | X | O |
+| 페이지별 meta 매트릭스 | X | O |
+| Core Web Vitals 체크리스트 | X | O |
+| SSR/SSG 전략 가이드 | X | O |