timelabs 0.1.0 → 0.1.1

package/skills/web-design/claude-code/defs/video-motions/05-pattern-composition.md

@@ -0,0 +1,61 @@
+# 5. 컴포지션 패턴
+
+
+### Stagger (순차 등장)
+
+```tsx
+const items = ["Item 1", "Item 2", "Item 3"];
+const STAGGER_DELAY = 10; // 프레임 단위
+
+return (
+  <AbsoluteFill>
+    {items.map((item, i) => (
+      <Sequence key={item} from={i * STAGGER_DELAY}>
+        <FadeIn>
+          <div>{item}</div>
+        </FadeIn>
+      </Sequence>
+    ))}
+  </AbsoluteFill>
+);
+```
+
+### Sequence 기반 장면 전환
+
+```tsx
+const INTRO = 90;    // 3초
+const CONTENT = 300; // 10초
+const OUTRO = 90;    // 3초
+
+return (
+  <AbsoluteFill>
+    <Sequence from={0} durationInFrames={INTRO} name="Intro">
+      <Intro />
+    </Sequence>
+    <Sequence from={INTRO} durationInFrames={CONTENT} name="Content">
+      <Content />
+    </Sequence>
+    <Sequence from={INTRO + CONTENT} durationInFrames={OUTRO} name="Outro">
+      <Outro />
+    </Sequence>
+  </AbsoluteFill>
+);
+```
+
+### 프레임 기반 조건부 렌더링
+
+```tsx
+const frame = useCurrentFrame();
+const { durationInFrames } = useVideoConfig();
+
+// 마지막 30프레임에서 페이드 아웃
+const fadeOutStart = durationInFrames - 30;
+const opacity = frame >= fadeOutStart
+  ? interpolate(frame, [fadeOutStart, durationInFrames], [1, 0], {
+      extrapolateRight: "clamp",
+    })
+  : 1;
+```
+
+---
+

package/skills/web-design/claude-code/defs/video-motions/06-transition-effects.md

@@ -0,0 +1,49 @@
+# 6. 전환 효과 (@remotion/transitions)
+
+
+> 조건: `config.type_detail.video_features`에 `transitions` 포함 시
+
+### CrossFade
+
+```tsx
+import { linearTiming, TransitionSeries } from "@remotion/transitions";
+import { fade } from "@remotion/transitions/fade";
+
+<TransitionSeries>
+  <TransitionSeries.Sequence durationInFrames={90}>
+    <Scene1 />
+  </TransitionSeries.Sequence>
+  <TransitionSeries.Transition
+    presentation={fade()}
+    timing={linearTiming({ durationInFrames: 30 })}
+  />
+  <TransitionSeries.Sequence durationInFrames={90}>
+    <Scene2 />
+  </TransitionSeries.Sequence>
+</TransitionSeries>
+```
+
+### Slide Wipe
+
+```tsx
+import { slide } from "@remotion/transitions/slide";
+
+<TransitionSeries.Transition
+  presentation={slide({ direction: "from-left" })}
+  timing={linearTiming({ durationInFrames: 20 })}
+/>
+```
+
+### 사용 가능 전환 목록
+
+| 전환 | import | 설명 |
+|------|--------|------|
+| fade | `@remotion/transitions/fade` | 크로스페이드 |
+| slide | `@remotion/transitions/slide` | 슬라이드 (4방향) |
+| wipe | `@remotion/transitions/wipe` | 와이프 (4방향) |
+| flip | `@remotion/transitions/flip` | 3D 플립 |
+| clockWipe | `@remotion/transitions/clock-wipe` | 시계 방향 와이프 |
+| none | `@remotion/transitions/none` | 전환 없음 (컷) |
+
+---
+

package/skills/web-design/claude-code/defs/video-motions/07-audio-sync.md

@@ -0,0 +1,29 @@
+# 7. 오디오 동기화
+
+
+> 조건: `config.type_detail.video_features`에 `audio` 포함 시
+
+### 볼륨 페이드
+
+```tsx
+import { Audio, interpolate, useCurrentFrame } from "remotion";
+import { staticFile } from "remotion";
+
+const frame = useCurrentFrame();
+const volume = interpolate(frame, [0, 30, 270, 300], [0, 0.8, 0.8, 0], {
+  extrapolateLeft: "clamp",
+  extrapolateRight: "clamp",
+});
+
+return <Audio src={staticFile("bgm.mp3")} volume={volume} />;
+```
+
+### 비트 싱크
+
+```tsx
+import { getAudioDurationInSeconds } from "@remotion/media-utils";
+
+// calculateMetadata에서 오디오 길이 기반 duration 계산
+const audioDuration = await getAudioDurationInSeconds(audioSrc);
+const durationInFrames = Math.ceil(audioDuration * fps);
+```

package/skills/web-design/claude-code/defs/video-motions.md

@@ -0,0 +1,55 @@
+# Remotion 애니메이션 패턴
+
+> 참조: `stages/stage2-video.md`, `gen/gen-video.md`
+> Dependencies: `defs/conventions/remotion.md`
+
+## 개요
+
+Remotion 비디오에서 사용하는 애니메이션 패턴을 정의합니다.
+웹 프로젝트의 `web-motions.md`에 대응하는 비디오 버전입니다.
+
+> **핵심 원칙**: CSS transitions/animations 금지. `useCurrentFrame()` + `interpolate()` / `spring()` 기반만 허용.
+
+---
+
+## 1. 기본 애니메이션 (interpolate)
+
+> 상세: `defs/video-motions/01-animation-basic.md` 참조
+
+const frame = useCurrentFrame();
+## 2. 스프링 애니메이션 (spring)
+
+> 상세: `defs/video-motions/02-animation.md` 참조
+
+const frame = useCurrentFrame();
+## 3. Easing 함수 레퍼런스
+
+> 상세: `defs/video-motions/03-reference.md` 참조
+
+## 4. Spring Config 프리셋
+
+| 프리셋 | damping | stiffness | mass | 용도 |
+|--------|---------|-----------|------|------|
+| Gentle | 20 | 120 | 1 | 텍스트 등장 |
+| Bouncy | 8 | 200 | 0.5 | 아이콘/버튼 팝 |
+| Stiff | 30 | 300 | 1 | 빠른 전환 |
+| Slow | 25 | 60 | 2 | 느린 부유 효과 |
+| Wobbly | 10 | 150 | 1 | 장난스러운 움직임 |
+
+---
+
+## 5. 컴포지션 패턴
+
+> 상세: `defs/video-motions/05-pattern-composition.md` 참조
+
+const items = ["Item 1", "Item 2", "Item 3"];
+## 6. 전환 효과 (@remotion/transitions)
+
+> 상세: `defs/video-motions/06-transition-effects.md` 참조
+
+import { linearTiming, TransitionSeries } from "@remotion/transitions";
+## 7. 오디오 동기화
+
+> 상세: `defs/video-motions/07-audio-sync.md` 참조
+
+import { Audio, interpolate, useCurrentFrame } from "remotion";

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

@@ -0,0 +1,101 @@
+# 랜딩페이지 (`landing`) 전용 레이아웃
+
+
+### [L1] 📜 클래식 스크롤 (Classic Scroll)
+- **구조**: Hero → 섹션 순차 스크롤
+- **적합**: 프로모션, 제품 소개, 서비스 랜딩
+- **특징**: 풀 와이드 섹션, CTA 반복 배치
+```
+┌─────────────────────────────┐
+│         Navigation           │
+├─────────────────────────────┤
+│                             │
+│       HERO (Full Width)     │
+│       [CTA Button]          │
+│                             │
+├─────────────────────────────┤
+│       Features Section      │
+│   ┌───┐  ┌───┐  ┌───┐     │
+│   │ 1 │  │ 2 │  │ 3 │     │
+│   └───┘  └───┘  └───┘     │
+├─────────────────────────────┤
+│       Social Proof          │
+├─────────────────────────────┤
+│       Pricing               │
+├─────────────────────────────┤
+│       CTA (Repeat)          │
+├─────────────────────────────┤
+│         Footer              │
+└─────────────────────────────┘
+```
+
+### [L2] 📸 풀스크린 섹션 (Fullscreen Snap)
+- **구조**: 풀스크린 섹션 단위 스냅 스크롤
+- **적합**: 브랜드 스토리텔링, 제품 런칭, 이벤트
+- **특징**: scroll-snap, 몰입감, 시네마틱
+```
+┌─────────────────────────────┐
+│  Section 1 (100vh)          │
+│  ┌───────────────────────┐  │
+│  │    Hero + Video BG    │  │
+│  └───────────────────────┘  │
+│              ↓ snap         │
+├─────────────────────────────┤
+│  Section 2 (100vh)          │
+│  ┌───────────────────────┐  │
+│  │  Feature Showcase     │  │
+│  └───────────────────────┘  │
+│              ↓ snap         │
+├─────────────────────────────┤
+│  Section 3 (100vh)          │
+│  ┌───────────────────────┐  │
+│  │     CTA + Form        │  │
+│  └───────────────────────┘  │
+└─────────────────────────────┘
+```
+
+### [L3] ↔️ 스플릿 레이아웃 (Split Layout)
+- **구조**: 좌우 분할 (이미지 | 텍스트) 교차
+- **적합**: 앱 소개, 기능 비교, 스타트업
+- **특징**: 좌우 교차 배치, 시각적 리듬
+```
+┌─────────────────────────────┐
+│         Navigation           │
+├──────────────┬──────────────┤
+│              │              │
+│   Image      │  Text + CTA  │
+│              │              │
+├──────────────┼──────────────┤
+│              │              │
+│  Text + CTA  │   Image      │
+│              │              │
+├──────────────┼──────────────┤
+│              │              │
+│   Image      │  Text + CTA  │
+│              │              │
+├──────────────┴──────────────┤
+│         Footer              │
+└─────────────────────────────┘
+```
+
+### [L4] 🎬 비디오 중심 (Video Hero)
+- **구조**: 비디오 백그라운드 Hero + 하단 섹션
+- **적합**: SaaS 데모, 게임, 크리에이티브 서비스
+- **특징**: 자동재생 비디오 배경, 오버레이 텍스트
+```
+┌─────────────────────────────┐
+│  ┌───────────────────────┐  │
+│  │  ▶ Video Background   │  │
+│  │  Overlay Text + CTA   │  │
+│  └───────────────────────┘  │
+├─────────────────────────────┤
+│    Features / Content       │
+├─────────────────────────────┤
+│    Testimonials             │
+├─────────────────────────────┤
+│    Footer                   │
+└─────────────────────────────┘
+```
+
+---
+

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

@@ -0,0 +1,85 @@
+# 대시보드 (`dashboard`) 전용 레이아웃
+
+
+### [D1] 📊 사이드바 + 콘텐츠 (Classic Admin)
+- **구조**: 좌측 고정 사이드바 + 우측 메인 영역
+- **적합**: 관리자 패널, CMS, 모니터링
+- **특징**: 사이드바 네비게이션, 브레드크럼, 상단 바
+```
+┌────┬────────────────────────┐
+│    │  Top Bar / Breadcrumb  │
+│ S  ├────────────────────────┤
+│ I  │                        │
+│ D  │  ┌────┐ ┌────┐ ┌────┐│
+│ E  │  │Card│ │Card│ │Card││
+│ B  │  └────┘ └────┘ └────┘│
+│ A  │                        │
+│ R  │  ┌───────────────────┐│
+│    │  │   Data Table      ││
+│ N  │  │                   ││
+│ A  │  └───────────────────┘│
+│ V  │                        │
+└────┴────────────────────────┘
+```
+
+### [D2] 📱 탑 네비 + 그리드 카드 (Card Grid)
+- **구조**: 상단 네비게이션 + 카드 그리드 메인
+- **적합**: 분석 대시보드, 개요 화면, 리포트
+- **특징**: 사이드바 없이 넓은 콘텐츠 영역
+```
+┌─────────────────────────────┐
+│  Logo  │ Nav │ Search │ 👤  │
+├─────────────────────────────┤
+│  ┌──────┐  ┌──────┐        │
+│  │ KPI  │  │ KPI  │        │
+│  │ Card │  │ Card │        │
+│  └──────┘  └──────┘        │
+│  ┌──────┐  ┌──────┐        │
+│  │Chart │  │Chart │        │
+│  │ Card │  │ Card │        │
+│  └──────┘  └──────┘        │
+│  ┌─────────────────┐       │
+│  │  Activity Feed  │       │
+│  └─────────────────┘       │
+└─────────────────────────────┘
+```
+
+### [D3] 📂 접이식 사이드바 + 테이블 (Data Heavy)
+- **구조**: 접이식 사이드바 + 필터 + 데이터 테이블 중심
+- **적합**: CRUD 관리, 데이터 관리, 재고 시스템
+- **특징**: 아이콘 모드 전환 가능, 복잡한 필터링
+```
+┌──┬──────────────────────────┐
+│  │  Breadcrumb + Actions    │
+│☰ ├──────────────────────────┤
+│  │  [Filter] [Search] [+Add]│
+│📊├──────────────────────────┤
+│📋│  ☐ │ Name │ Date │ Stat │
+│👥│  ☐ │ ...  │ ...  │ ...  │
+│⚙ │  ☐ │ ...  │ ...  │ ...  │
+│  │  ☐ │ ...  │ ...  │ ...  │
+│  ├──────────────────────────┤
+│  │  ← 1 2 3 ... 10 →       │
+└──┴──────────────────────────┘
+```
+
+### [D4] 📈 대시보드 + 디테일 (Master-Detail)
+- **구조**: 좌측 목록/차트 + 우측 상세 패널
+- **적합**: CRM, 이메일 클라이언트, 프로젝트 관리
+- **특징**: 3단 레이아웃, 클릭 시 우측 상세 열림
+```
+┌────┬──────────┬─────────────┐
+│    │  List    │  Detail     │
+│ N  │  ┌────┐ │  Name: ...  │
+│ A  │  │Item│ │  Status: ...│
+│ V  │  ├────┤ │             │
+│    │  │Item│ │  ┌─────────┐│
+│    │  ├────┤ │  │  Chart  ││
+│    │  │Item│ │  └─────────┘│
+│    │  ├────┤ │             │
+│    │  │Item│ │  Actions... │
+└────┴──────────┴─────────────┘
+```
+
+---
+

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

@@ -0,0 +1,73 @@
+# 이커머스 (`ecommerce`) 전용 레이아웃
+
+
+### [EC1] 🛍️ 그리드 + 사이드 필터 (Catalog Grid)
+- **구조**: 좌측 필터 사이드바 + 상품 그리드
+- **적합**: 종합 쇼핑몰, 마켓플레이스, 패션
+- **특징**: 정렬/필터, 무한 스크롤 또는 페이지네이션
+```
+┌─────────────────────────────┐
+│  Logo │ Search │ Cart │ 👤  │
+│  [카테고리 메가메뉴]         │
+├────────┬────────────────────┤
+│        │  Sort ▼ │ View ▦▤ │
+│ Filter │  ┌───┐ ┌───┐     │
+│ ☐ 브랜드│  │ 📦│ │ 📦│     │
+│ ☐ 가격 │  └───┘ └───┘     │
+│ ☐ 색상 │  ┌───┐ ┌───┐     │
+│ ☐ 사이즈│  │ 📦│ │ 📦│     │
+│        │  └───┘ └───┘     │
+├────────┴────────────────────┤
+│         Footer              │
+└─────────────────────────────┘
+```
+
+### [EC2] 🎠 캐러셀 + 그리드 (Homepage Shop)
+- **구조**: 메인 배너 캐러셀 + 카테고리 + 추천 상품
+- **적합**: 홈 화면 중심 쇼핑몰, 큐레이션
+- **특징**: 프로모션 배너, 카테고리 아이콘, 섹션별 상품
+```
+┌─────────────────────────────┐
+│  Logo │ Search │ Cart │ 👤  │
+├─────────────────────────────┤
+│  ◀ [  Banner Carousel  ] ▶ │
+├─────────────────────────────┤
+│  🥗  👕  📱  🏠  📚  🎮    │  ← 카테고리
+├─────────────────────────────┤
+│  🔥 인기 상품                │
+│  ┌───┐ ┌───┐ ┌───┐ ┌───┐  │
+│  │ 📦│ │ 📦│ │ 📦│ │ 📦│  │
+│  └───┘ └───┘ └───┘ └───┘  │
+├─────────────────────────────┤
+│  ⭐ 추천 상품               │
+│  ┌───┐ ┌───┐ ┌───┐ ┌───┐  │
+│  └───┘ └───┘ └───┘ └───┘  │
+├─────────────────────────────┤
+│         Footer              │
+└─────────────────────────────┘
+```
+
+### [EC3] 📰 매거진 스타일 (Magazine Shop)
+- **구조**: 에디토리얼 레이아웃 + 상품 연동
+- **적합**: 럭셔리, 패션, 라이프스타일
+- **특징**: 비정형 그리드, 콘텐츠와 상품 혼합
+```
+┌─────────────────────────────┐
+│  Logo │ Nav │ Search │ Cart │
+├─────────────┬───────────────┤
+│             │               │
+│  Featured   │   Side        │
+│  Product    │   Story       │
+│  (Large)    │               │
+│             │               │
+├──────┬──────┴───────────────┤
+│ Edit │  ┌───┐ ┌───┐ ┌───┐ │
+│ Pick │  │ 📦│ │ 📦│ │ 📦│ │
+│      │  └───┘ └───┘ └───┘ │
+├──────┴──────────────────────┤
+│         Footer              │
+└─────────────────────────────┘
+```
+
+---
+

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

@@ -0,0 +1,69 @@
+# 블로그/콘텐츠 (`blog`) 전용 레이아웃
+
+
+### [B1] 📝 클래식 블로그 (Classic Blog)
+- **구조**: 메인 콘텐츠 + 우측 사이드바
+- **적합**: 기술 블로그, 뉴스, 미디어
+- **특징**: 사이드바 위젯, 카테고리, 태그
+```
+┌─────────────────────────────┐
+│  Logo │ Nav │ Search        │
+├───────────────────┬─────────┤
+│                   │ About   │
+│  📝 Post Title    │ Popular │
+│  Content...       │ Tags    │
+│                   │ Archive │
+│  📝 Post Title    │ Ad      │
+│  Content...       │         │
+│                   │         │
+├───────────────────┴─────────┤
+│         Footer              │
+└─────────────────────────────┘
+```
+
+### [B2] 📰 매거진 그리드 (Magazine Grid)
+- **구조**: 피처드 포스트 + 카드 그리드
+- **적합**: 미디어, 뉴스 포털, 콘텐츠 허브
+- **특징**: 비정형 그리드, 카테고리별 섹션
+```
+┌─────────────────────────────┐
+│  Logo │ Categories │ Search │
+├─────────────┬───────────────┤
+│             │  ┌──────────┐│
+│  Featured   │  │ Post 2   ││
+│  Post 1     │  ├──────────┤│
+│  (Hero)     │  │ Post 3   ││
+│             │  └──────────┘│
+├──────┬──────┬───────┬───────┤
+│Post 4│Post 5│Post 6│Post 7│
+├──────┴──────┴───────┴───────┤
+│         Footer              │
+└─────────────────────────────┘
+```
+
+### [B3] 📄 미니멀 싱글 컬럼 (Minimal Single)
+- **구조**: 중앙 정렬 단일 컬럼
+- **적합**: 개인 블로그, 에세이, 기술 문서
+- **특징**: 타이포그래피 중심, 넓은 여백
+```
+┌─────────────────────────────┐
+│        Logo │ Nav            │
+├─────────────────────────────┤
+│                             │
+│      📝 Post Title          │
+│      Author · Date          │
+│                             │
+│      Content paragraph...   │
+│      Content paragraph...   │
+│                             │
+│      ---                    │
+│                             │
+│      📝 Next Post           │
+│                             │
+├─────────────────────────────┤
+│         Footer              │
+└─────────────────────────────┘
+```
+
+---
+

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

@@ -0,0 +1,83 @@
+# SaaS/웹앱 (`saas`) 전용 레이아웃
+
+
+### [SA1] 📊 사이드바 네비 + 메인 (App Shell)
+- **구조**: 좌측 사이드바 네비 + 메인 콘텐츠 영역
+- **적합**: 프로젝트 관리, CRM, 복잡한 SaaS
+- **특징**: 멀티 레벨 네비, 모달/드로어 활용
+```
+┌────┬────────────────────────┐
+│ 📌 │  Page Title    [+ New] │
+│ L  ├────────────────────────┤
+│ O  │  Tab1 │ Tab2 │ Tab3   │
+│ G  ├────────────────────────┤
+│ O  │                        │
+│    │   Main Content Area   │
+│ 🏠 │                        │
+│ 📋 │                        │
+│ 👥 │   ┌────────────────┐  │
+│ 📊 │   │  Component     │  │
+│ ⚙  │   └────────────────┘  │
+└────┴────────────────────────┘
+```
+
+### [SA2] 🗂️ 탑 네비 + 탭 패널 (Tab App)
+- **구조**: 상단 네비 + 탭 기반 콘텐츠 전환
+- **적합**: 설정 패널, 간단한 SaaS, 도구형
+- **특징**: 플랫 네비게이션, 탭으로 기능 분리
+```
+┌─────────────────────────────┐
+│  Logo │ Nav Items │ 👤 Menu │
+├─────────────────────────────┤
+│  Tab 1 │ Tab 2 │ Tab 3     │
+├─────────────────────────────┤
+│                             │
+│   Tab Panel Content         │
+│                             │
+│   ┌──────┐  ┌──────┐      │
+│   │ Card │  │ Card │      │
+│   └──────┘  └──────┘      │
+│                             │
+│   [Action Button]           │
+│                             │
+└─────────────────────────────┘
+```
+
+### [SA3] 📋 칸반/보드 (Kanban Board)
+- **구조**: 수평 스크롤 칸반 컬럼
+- **적합**: 프로젝트 보드, 태스크 관리, 파이프라인
+- **특징**: 드래그 앤 드롭, 카드 기반, 수평 스크롤
+```
+┌─────────────────────────────────────┐
+│  Logo │ Board Name │ Filter │ 👤    │
+├─────────────────────────────────────┤
+│  Todo    │ In Progress │ Done      │
+│ ┌──────┐ │ ┌──────┐    │ ┌──────┐ │
+│ │ Card │ │ │ Card │    │ │ Card │ │
+│ └──────┘ │ └──────┘    │ └──────┘ │
+│ ┌──────┐ │ ┌──────┐    │ ┌──────┐ │
+│ │ Card │ │ │ Card │    │ │ Card │ │
+│ └──────┘ │ └──────┘    │ └──────┘ │
+│ [+ Add]  │ [+ Add]     │          │
+└──────────┴─────────────┴──────────┘
+```
+
+### [SA4] 📬 인박스/피드 (Inbox Layout)
+- **구조**: 좌측 목록 + 우측 상세 (이메일 스타일)
+- **적합**: 메시지, 알림, 이메일 클라이언트, 고객 지원
+- **특징**: 목록-상세 분할, 읽음/안읽음, 액션
+```
+┌────┬──────────┬─────────────┐
+│    │ 📬 Inbox  │  Message    │
+│ N  │ ┌──────┐ │  From: ...  │
+│ A  │ │▪ Msg1│ │  Date: ...  │
+│ V  │ ├──────┤ │             │
+│    │ │  Msg2│ │  Content... │
+│    │ ├──────┤ │  Content... │
+│    │ │  Msg3│ │             │
+│    │ └──────┘ │  [Reply]    │
+└────┴──────────┴─────────────┘
+```
+
+---
+

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

@@ -0,0 +1,62 @@
+# 포트폴리오 (`portfolio`) 전용 레이아웃
+
+
+### [P1] 🖼️ 갤러리 그리드 (Gallery Grid)
+- **구조**: 프로젝트 썸네일 그리드 + 라이트박스
+- **적합**: 사진작가, 디자이너, 아티스트
+- **특징**: Masonry 그리드, 호버 효과, 필터
+```
+┌─────────────────────────────┐
+│  Name │ Work │ About │ 연락 │
+├─────────────────────────────┤
+│  [All] [Web] [App] [Brand] │
+├──────┬──────┬───────────────┤
+│  📸  │  📸  │     📸       │
+│      │      │    (tall)    │
+├──────┼──────┤              │
+│  📸  │  📸  │              │
+│(wide)│      ├───────────────┤
+│      │      │     📸       │
+├──────┴──────┴───────────────┤
+│         Footer              │
+└─────────────────────────────┘
+```
+
+### [P2] 📖 케이스 스터디 (Case Study Flow)
+- **구조**: 프로젝트 목록 → 상세 케이스 스터디
+- **적합**: UX 디자이너, 에이전시, 컨설팅
+- **특징**: 스토리텔링, 프로세스 설명, Before/After
+```
+┌─────────────────────────────┐
+│  Name │ Work │ About │ 연락 │
+├─────────────────────────────┤
+│  ┌─────────────────────┐   │
+│  │ Project 1 (Hero)    │   │
+│  │ Title + Description │   │
+│  └─────────────────────┘   │
+│  ┌─────────────────────┐   │
+│  │ Project 2           │   │
+│  └─────────────────────┘   │
+│  ┌─────────────────────┐   │
+│  │ Project 3           │   │
+│  └─────────────────────┘   │
+├─────────────────────────────┤
+│         Footer              │
+└─────────────────────────────┘
+```
+
+### [P3] ↔️ 수평 스크롤 (Horizontal Scroll)
+- **구조**: 수평으로 스크롤하는 프로젝트 쇼케이스
+- **적합**: 크리에이티브, 실험적, 인터랙티브
+- **특징**: 수평 스크롤, 인터랙션, 독특한 UX
+```
+┌─────────────────────────────────────────────────┐
+│  Name                                    About  │
+├────────────┬────────────┬────────────┬──────────┤
+│            │            │            │          │
+│ Project 1  │ Project 2  │ Project 3  │ Contact  │
+│ (100vw)    │ (100vw)    │ (100vw)    │ (100vw)  │
+│            │            │            │          │
+│     ← scroll →                                  │
+└────────────┴────────────┴────────────┴──────────┘
+```