스킬 쇼케이스

스킬 쇼케이스은(는) 무엇을 하나요?

카테고리별로 애니메이션 처리된 스킬 쇼케이스 비디오(1080×1080, 30fps, ~48초)를 렌더링하고, 각 스킬 클러스터를 구체적인 가치에 매핑하는 7개의 게시글로 구성된 X 스레드를 생성합니다.

빠른 시작

cd skills-showcase
npm install
npx remotion studio          # 브라우저에서 미리보기
npx remotion render SkillsShowcase out/skills-showcase.mp4
npx remotion render SkillsShowcase out/skills-showcase.gif --every-nth-frame=3

출력 아티팩트

• out/skills-showcase.mp4 — 기본 X 업로드용 (H.264, ~4.7 MB)
• out/skills-showcase.gif — 대체/미리보기용 (~7 MB)
• thread.md — 7개 게시글 X 스레드 마크다운

아키텍처

src/
├── index.ts                  # registerRoot 진입점
├── Root.tsx                  # Composition 레지스트리 (1080×1080, 30fps, 1440 프레임)
├── SkillsShowcase.tsx        # <Series>를 사용한 마스터 타임라인
├── data/skills.ts            # 타입화된 데이터셋: 카테고리, 스킬, 파생 집계
├── scenes/
│   ├── Intro.tsx             # 제목 + 부제목 + 통계 표시 (4초)
│   ├── CategorySection.tsx   # 카테고리 레이블 + 계단식 스킬 칩 (각 2.67초)
│   └── Outro.tsx             # 요약 메트릭 + 태그라인 + CTA (4초)
└── components/
    └── SkillChip.tsx         # 스프링 진입 효과가 있는 재사용 가능한 애니메이션 배지

데이터 모델

src/data/skills.ts 파일을 편집하여 스킬을 추가하거나 제거할 수 있습니다. 비디오는 이 데이터셋에서 결정론적으로 다시 렌더링됩니다.

• Category: { id, label, color, order }
• Skill: { slug, categoryId, shortDescription }
• Derived: totalSkills, totalCategories, skillsByCategory

애니메이션 규칙

모든 애니메이션은 Remotion 프레임 기반 패턴만 사용합니다:

• useCurrentFrame() + useVideoConfig() for frame/fps
• spring() for entrances (damping: 200 for smooth, damping: 20 + stiffness: 200 for snappy)
• interpolate() with clamp for opacity and translation
• Zero CSS transitions or Tailwind animation utilities

타임라인 페이싱

장면	프레임	시간
인트로	120	4.0초
15개 카테고리 × 80	1200	40.0초
아웃트로	120	4.0초
합계	1440	48.0초

사용자 정의

• 카테고리 추가: src/data/skills.ts의 categories 배열에 추가하고 Root.tsx의 지속 시간 업데이트
• 색상 변경: 데이터셋의 각 카테고리에 color hex 값 있음
• 페이싱 조정: SkillsShowcase.tsx의 CATEGORY_DURATION 수정
• 스레드 카피: thread.md 파일 직접 편집

스레드 전략

전체 7개 게시글 스레드는 thread.md를 참조하세요. 구조:

1. 후크 + 비디오 첨부
2. 일회성 프롬프트보다 스킬이 나은 이유
3. 의식 및 기억 클러스터
4. 연구 및 분석 클러스터
5. 풀스택 구현 범위
6. 틈새 고신호 전문 스킬
7. CTA 및 토론 유도 질문