Kiratuu/Video-Wrapper-Skills

인터뷰 영상 프로세서

Python + Playwright + MoviePy 기반의 영상 효과 처리 도구로, HTML/CSS/Anime.js를 사용하여 고품질 시각 효과를 렌더링합니다.

작업 흐름

1단계: 자막 내용 분석

사용자가 영상과 자막 파일을 제공하면, 자막 내용을 분석하여 효과 제안을 생성합니다:

1. 자막 파일(.srt)을 읽습니다.
2. 내용을 분석하여 다음을 식별합니다:
   • 게스트 정보 (인물 정보바용)
   • 주제 전환 지점 (챕터 제목용)
   • 키워드 및 용어 (자막 강조용)
   • 전문 용어 (용어 카드용)
   • 인상 깊은 의견 (명언 카드용)
   • 숫자 데이터 (데이터 애니메이션용)
   • 핵심 요점 (요점 목록용)
3. 제안 목록을 생성하여 사용자에게 검토를 위해 표시합니다.

2단계: 사용자 검토

제안을 Markdown 형식으로 사용자에게 표시합니다:

## 시각 효과 제안

**테마**: notion

### 1. 인물 정보바 (Lower Third)
- **이름**: Dario Amodei
- **직책**: CEO
- **회사**: Anthropic
- **시작 시간**: 1000ms

### 2. 자막 강조 (Fancy Text)
1. **범용 인공지능** (emphasis)
   시간: 2630ms - 5500ms
   이유: 핵심 개념 첫 언급

...

사용자는 다음을 할 수 있습니다:

• 모든 제안 승인
• 일부 제안 수정
• 불필요한 구성 요소 삭제
• 새 구성 요소 추가

3단계: 설정 생성 및 렌더링

사용자 승인 후 제안을 바탕으로 config.json을 생성하고 영상을 렌더링합니다.

사용 가능한 구성 요소

구성 요소	용도	설정 필드
인물 정보바 (lower_third)	게스트 정보 표시	name, role, company, startMs, durationMs
챕터 제목 (chapter_title)	주제 전환 제목	number, title, subtitle, startMs, durationMs
자막 강조 (fancy_text)	현재 의견 요약	text, style, startMs, endMs, position
용어 카드 (term_card)	용어 설명	chinese, english, description, firstAppearanceMs
명언 카드 (quote_callout)	인상적인 의견 강조	text, author, startMs, durationMs, position
데이터 애니메이션 (animated_stats)	숫자 데이터 표시	prefix, number, unit, label, startMs
요점 목록 (bullet_points)	핵심 요점 요약	title, points[], startMs, durationMs
소셜 미디어 바 (social_bar)	팔로우 유도	platform, label, handle, startMs, durationMs

자막 강조 사용 규칙

⚠️ 중요: 자막 강조는 다음 규칙을 따라야 합니다:

1. 구문이어야 함: 화자의 당시 의견을 짧은 문장으로 요약합니다.

   • ✅ 올바른 예: 「AI 발전은 완만한 곡선이다」「지능의 성장은 무어의 법칙과 유사하다」
   • ❌ 잘못된 예: 「인공지능」「무어의 법칙」(이것들은 단어이므로 용어 카드를 사용해야 합니다)

2. 용어 카드와 보완적:

   • 자막 강조: 의견 요약 (예: 「지능이 매년 두 배로 증가한다」)
   • 용어 카드: 용어 설명 (예: 「무어의 법칙: 집적 회로 트랜지스터 수가 18-24개월마다 두 배가 된다」)

3. 위쪽에 배치: 기본적으로 화면 위쪽 영역(자막 위)에 표시되어 얼굴을 가리지 않습니다.

소셜 미디어 바 사용 규칙

• 기본 표시 시간: 8초 (다른 구성 요소보다 길며, 사용자가 기억할 충분한 시간을 제공)
• 일반적으로 영상 끝에 나타남
• 지원 플랫폼: twitter, weibo, youtube

테마 시스템

4가지 시각적 테마를 지원합니다:

테마	스타일	적용 시나리오
notion	따뜻한 지식 스타일	교육, 지식 공유
cyberpunk	네온 미래 스타일	기술, 최신 주제
apple	미니멀하고 우아함	비즈니스, 전문 인터뷰
aurora	그라데이션 플로우	창의적, 예술 콘텐츠

설정 파일 형식

{
  "theme": "notion",
  "lowerThirds": [
    {
      "name": "Dario Amodei",
      "role": "CEO",
      "company": "Anthropic",
      "startMs": 1000,
      "durationMs": 5000
    }
  ],
  "chapterTitles": [
    {
      "number": "Part 1",
      "title": "지수 성장의 본질",
      "subtitle": "The Nature of Exponential Growth",
      "startMs": 0,
      "durationMs": 4000
    }
  ],
  "keyPhrases": [
    {
      "text": "범용 인공지능",
      "style": "emphasis",
      "startMs": 2630,
      "endMs": 5500
    }
  ],
  "termDefinitions": [
    {
      "chinese": "摩尔定律",
      "english": "Moore's Law",
      "description": "집적 회로 트랜지스터 수가 18-24개월마다 두 배가 된다",
      "firstAppearanceMs": 37550,
      "displayDurationSeconds": 6
    }
  ],
  "quotes": [
    {
      "text": "AI의 발전은 매우 완만한 지수 곡선이다",
      "author": "— Dario Amodei",
      "startMs": 30000,
      "durationMs": 5000
    }
  ],
  "stats": [
    {
      "prefix": "성장률 ",
      "number": 240,
      "unit": "%",
      "label": "연간 컴퓨팅 성장률",
      "startMs": 45000,
      "durationMs": 4000
    }
  ],
  "bulletPoints": [
    {
      "title": "핵심 의견",
      "points": [
        "AI 발전은 완만한 지수 곡선이다",
        "무어의 법칙과 유사한 지능 성장",
        "갑작스러운 특이점은 없다"
      ],
      "startMs": 50000,
      "durationMs": 6000
    }
  ]
}

의존성 설치

# 가상 환경 진입
cd ~/.claude/skills/video-wrapper
source venv/bin/activate

# 의존성 설치
pip install -r requirements.txt

# Playwright 브라우저 설치
playwright install chromium

명령줄 사용

# 브라우저 렌더러 사용 (권장)
python src/video_processor.py video.mp4 subs.srt config.json output.mp4

# 렌더러 지정
python src/video_processor.py video.mp4 subs.srt config.json -r browser
python src/video_processor.py video.mp4 subs.srt config.json -r pil

기술 구현

• 시각 렌더링: HTML + CSS + Anime.js (Playwright 스크린샷을 통해)
• 영상 합성: MoviePy
• 애니메이션 엔진: Anime.js (Spring 물리 애니메이션)
• 대체 렌더링: Python PIL

파일 구조

~/.claude/skills/video-wrapper/
├── src/
│   ├── video_processor.py    # 메인 처리 스크립트
│   ├── browser_renderer.py   # Playwright 렌더러
│   ├── content_analyzer.py   # 내용 분석기
│   ├── fancy_text.py         # PIL 자막 강조 (대체)
│   └── term_card.py          # PIL 용어 카드 (대체)
├── templates/
│   ├── fancy-text.html       # 자막 강조 템플릿
│   ├── term-card.html        # 용어 카드 템플릿
│   ├── lower-third.html      # 인물 정보바 템플릿
│   ├── chapter-title.html    # 챕터 제목 템플릿
│   ├── quote-callout.html    # 명언 카드 템플릿
│   ├── animated-stats.html   # 데이터 애니메이션 템플릿
│   └── bullet-points.html    # 요점 목록 템플릿
├── static/
│   ├── css/
│   │   ├── effects.css       # 기본 효과
│   │   ├── theme-notion.css  # Notion 테마
│   │   ├── theme-cyberpunk.css
│   │   ├── theme-apple.css
│   │   └── theme-aurora.css
│   └── js/
│       └── anime.min.js      # Anime.js
└── requirements.txt

주의 사항

• 영상 처리에는 시간이 다소 소요되니 기다려 주세요.
• 출력 영상을 저장할 충분한 디스크 공간이 있는지 확인하세요.
• Playwright 렌더링 효과가 더 좋지만 Chromium을 설치해야 합니다.
• Playwright를 사용할 수 없는 경우 자동으로 PIL 렌더링으로 대체됩니다.