Communitygithub.com

자막 생성 (대본 기반)

영상으로부터 정확하고 적절한 타이밍의 자막 파일(SRT 또는 WebVTT)을 생성합니다.

자막 생성 (대본 기반)란 무엇인가요?

이 스킬은 영상 편집 및 콘텐츠 제작 과정에서 정확한 자막을 생성하는 데 특화되어 있습니다. 접근성 향상과 음소거 상태의 시청자 유지를 위해 필수적이며, 특히 튜토리얼 영상에서 정확한 UI 용어 전달을 보장합니다. 작업 흐름은 먼저 나레이션 스크립트가 있다면 이를 기준 텍스트로 사용하고, 없다면 Whisper 같은 ASR(자동 음성 인식)을 이용해 전사한 후 영상과 대조하여 제품명, 코드, 약어 등의 오류를 수정합니다. 지원하는 자막 형식은 SRT(범용)와 WebVTT(HTML5 웹 플레이어)이며, 각 형식의 타임스탬프 문법과 구조를 정확히 준수합니다. 자막 큐는 음성에 맞춰 1~7초 길이로 조정되고, 1~2줄, 줄당 32~42자, 읽기 속도 17자/초 이하를 준수하며, 문장 경계에서 줄바꿈합니다. 튜토리얼의 경우 'um'이나 'uh' 같은 군말은 제거하지만 기술 용어와 UI 레이블은 그대로 보존합니다. 최종 자막 파일은 `social-video-formatter` 또는 웹 플레이어로 전달되어 스타일링 및 표시에 사용됩니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/SkillMedev/tutorial-video-studio/tree/main/skills/captions-from-transcript

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

대본 기반 자막 생성

자막은 선택적인 장식이 아닙니다. 접근성이며, 음소거 상태에서도 시청자를 유지하고, 튜토리얼에서는 정확한 UI 용어를 강조합니다. 이 스킬은 깔끔하고 정확한 타이밍의 자막 파일을 생성합니다. 스타일링과 영상 내 임베드는 이후 과정에서 처리합니다.

가장 정확한 텍스트 먼저 확보

정확성은 시작점에서 결정됩니다:

  • 나레이션 스크립트가 있다면 그것을 기준 텍스트로 사용하십시오. 기술 용어와 UI 레이블에 대해 이미 정확합니다. 처음부터 다시 전사하는 대신 스크립트를 오디오에 맞춰 정렬하십시오.
  • 그렇지 않다면 오디오를 전사(Whisper, 플랫폼 자동 자막, 또는 다른 ASR)한 다음 영상과 대조하여 수정하십시오. ASR은 제품명, 코드, 약어를 확실히 잘못 인식합니다. 화면에 나오는 것과 정확히 일치하도록 모든 오류를 수정하십시오.

가공되지 않은 ASR 출력물을 절대 그대로 사용하지 마십시오. 오류는 항상 가장 중요한 단어들에서 발생합니다.

큐를 음성에 맞춰 타이밍 조정

  • 각 큐는 해당 대사가 말해질 때 나타나고 끝날 때 사라집니다. 임의의 간격이 아닌 음성에 맞춰 정렬하십시오.
  • 화면에 최소 약 1초(짧은 큐의 경우에도), 최대 약 7초 동안 표시됩니다. 더 긴 것은 분할하십시오.
  • 문장 중간에 간격이 없어야 합니다. 문장 사이의 작은 간격은 괜찮으며 가독성을 높입니다.

줄 및 읽기 규칙

  • 큐당 1-2줄, 절대 3줄을 넘지 마십시오.
  • 줄당 약 32-42자. 그 이상이면 화면을 어지럽히고 안전 영역을 벗어납니다.
  • 읽기 속도 ≤ 약 17자/초 (≈160-180 wpm). 큐가 이를 초과하면 단어가 너무 빨리 지나가므로 큐를 분할하거나 지속 시간을 늘리십시오.
  • 구절 경계에서 줄을 바꾸고, 구 중간에서 바꾸지 마십시오. "설정 페이지로"를 함께 유지하고 "그"를 한 줄에 따로 두지 마십시오.

형식 선택

  • SRT - 범용, 인덱스 + HH:MM:SS,mmm --> HH:MM:SS,mmm + 텍스트. 대부분의 플랫폼과 편집기에 업로드할 때 사용하십시오.
  • WebVTT (.vtt) - WEBVTT 헤더, HH:MM:SS.mmm 타임스탬프, 위치/스타일 큐 지원. HTML5 <track> 및 웹 플레이어에 사용하십시오.

유효하고 파싱 가능한 출력을 생성하십시오. 올바른 타임스탬프 구두점(SRT는 밀리초 앞에 쉼표, VTT는 마침표), 큐 사이의 빈 줄, 후행 공백 없음.

깔끔 vs. 원문 그대로

튜토리얼의 경우 깔끔한 자막을 사용하십시오. 군말("um", "uh", 잘못된 시작)은 제거하고 의미는 그대로 유지하십시오. 기술 용어, 코드, UI 레이블은 정확히 보존하십시오. 사용자가 명시적으로 필요로 하는 경우(법률, 연구, 정확한 인용 맥락)에만 엄격한 원문 그대로를 사용하십시오.

동기화 품질 검사

실제 영상과 함께 시작, 중간, 끝 지점에서 대조 점검하십시오. 드리프트가 누적될 수 있습니다. 큐가 해당 대사에 정확히 위치하고 다음 큐가 시작되기 전에 사라지는지 확인하십시오. 잘못된 장면 위에 남아 있는 자막을 수정하십시오.

인계

완성된 .srt / .vtt 파일은 social-video-formatter에 전달되어 영상 내 임베드 및 플랫폼 스타일링을 하거나, 웹 플레이어의 <track> 요소에 직접 제공됩니다. 색상, 글꼴, 위치, 애니메이션은 해당 단계에 맡기십시오. 이 스킬은 정확하고 적절한 타이밍의 텍스트만을 출력하며 그 이상은 하지 않습니다.

하지 말 것

  • 자막을 스타일링, 색상 지정, 위치 조정, 또는 영상 프레임에 임베드하지 마십시오. 이는 social-video-formatter의 역할입니다.
  • 단어를 한 글자씩 애니메이션하지 마십시오. 이는 kinetic-typography의 역할입니다.
  • 수정되지 않은 ASR 출력을 내보내지 마십시오. 오류는 항상 중요한 용어들에 집중됩니다.
  • 읽기 속도 예산을 초과하거나 3줄을 채우지 않기 위해 큐 분할을 피하지 마십시오. 분할하십시오.

Individual skills in this repo

This repo contains 11 individual skills — each has its own dedicated page.

Kinetic Typography

Put text in motion the right way - title cards, animated captions, lower-thirds, callouts, and word-by-word reveals - with a reading-time-per-word budget so copy holds long enough to read, plus enter/exit timing, weight and size transitions, and type hierarchy in motion. Use when someone asks to

Motion Design Principles

The craft layer for motion: pick the right easing (ease-in / ease-out / ease-in-out / spring), get timing and spacing right, build the anticipation→action→follow-through arc, and apply Disney

Narration Script

Write the spoken voiceover for a tutorial or demo - the actual words, phrased for the ear and synced one-instruction-per-action to what is on screen, with a pacing budget and a confident, jargon-checked tone. Use when someone says

Product Demo Director

Direct the craft of putting a real software UI on screen - cursor choreography, zoom/pan/callout language, screen-recording vs recreated-UI, and making state changes legible with highlights, focus pulls, and slow-downs. Use when filming or recreating an app for a product demo, feature walkthrough, onboarding clip, or release reel and asking

Remotion Compose

Turns a natural-language video brief into a complete, ready-to-preview Remotion composition - extracts duration, scenes, brand colors, aspect ratio, and real copy; plans the frame budget; and writes data-driven React/TypeScript using useCurrentFrame, interpolate, spring, AbsoluteFill, and Sequence, registered in Root.tsx. Use when someone says

Remotion Render

Renders a Remotion composition to MP4 and runs the edit-and-re-render loop - CLI render commands, 1080p/4K/9:16 presets, concurrency tuning, codec selection, batch variants from a JSON data file, and Lambda for cloud rendering. Use when someone says

Remotion Setup

Scaffolds a new Remotion video project wired for Claude Code Agent Skills - Node check, create-video scaffold, skills install, folder conventions, Google Fonts, and a smoke-test render. Use whenever someone wants to start making videos with Remotion and Claude, even just

Screencast Capture

Capture clean raw screen and camera footage for a tutorial or product demo - choosing the recorder (macOS Screenshot toolbar, QuickTime, OBS, Windows Game Bar), setting resolution / frame-rate / cursor / microphone, prepping a distraction-free stage, and recording in retakeable segments. Use when someone says

SkillMedev/tutorial-video-studio

Plan a product demo, feature announcement, or launch video as a beat sheet and shot list BEFORE animating - hook in the first 3s, problem, reveal, proof, CTA - with target duration and pacing per scene type, output as a JSON scene plan that remotion-compose consumes directly. Use when someone says

Social Video Formatter

Reframe and export a finished video for social platforms - 9:16 ↔ 16:9 cropping, burned-in captions, a platform-native first frame, loop design, and per-platform specs (aspect, length, safe areas) for TikTok, Reels, Shorts, X, and LinkedIn. Use when someone says

Sound and Music Sync

Score a video like an editor: beat-match cuts to the music, land SFX on transitions, pace the voiceover so it breathes, source royalty-free tracks safely, and duck the music so the VO sits clearly on top. Use when adding music, sound effects, or voiceover to a video, when asked to

관련 스킬