Repolode
제출하기
OneMoh

OneMoh/html-explainer

HTML을 로컬에서 렌더링해 내레이션, 하드 자막, 커버 이미지가 포함된 설명 영상을 만드는 Agent Skill입니다.

대체할 수 있는 제품:SynthesiaLumen5

GitHub에서 보기
스타
174
포크
20
열린 이슈
2
마지막 커밋
5일 전

어떤 프로젝트인가요?

html-explainer는 설명 영상을 제작하는 agent skill입니다. 에이전트에 주제를 입력하면 조사, 내레이션 대본 작성, 텍스트 음성 변환(TTS), 자막 및 장면 전환 타이밍 설정, 장면 HTML 작성, 프레임 렌더링과 ffmpeg 인코딩, 커버 이미지 제작 순으로 파이프라인을 실행합니다. 장면은 HTML/CSS/GSAP로 작성하며, 브라우저 화면을 녹화하는 대신 애니메이션을 정확한 타임스탬프로 이동해 프레임마다 렌더링하므로 실행할 때마다 동일한 프레임을 얻을 수 있습니다.

기본 설정에서는 무료 edge-tts 엔진을 사용하고, API 키를 로컬 env 파일에 저장하면 Volcano Engine speech synthesis 2.0도 사용할 수 있습니다. 자막 타이밍은 TTS 엔진이 반환하는 단어 단위 타임스탬프를 기준으로 하며, 장면 애니메이션은 하드코딩된 프레임 번호 대신 자막 텍스트에 맞춰 동기화됩니다. 따라서 내레이션을 편집하면 영상 타이밍도 자동으로 조정됩니다. 시각 스타일 23종 카탈로그와 약 40개의 모션 프리미티브 라이브러리가 포함되어 있습니다.

이 skill은 Claude Code, OpenAI Codex, WorkBuddy를 비롯해 SKILL.md 파일을 불러오는 에이전트 도구에서 사용할 수 있습니다. 1080p 또는 4K 해상도, 30 또는 60fps 렌더링을 지원하며, 모션 블러와 멀티프로세스 워커를 선택적으로 사용할 수 있습니다. 기본 렌더링에는 Python 3.9 이상, Node 18 이상, Chrome 또는 Edge, ffmpeg가 필요합니다.

핵심 기능

  • 01애니메이션을 정확한 타임스탬프로 이동해 장면을 결정론적으로 렌더링하므로 녹화 타이밍 문제를 피할 수 있습니다.
  • 02기본 무료 edge-tts와 API 키가 필요한 Volcano Engine TTS, 두 가지 음성 엔진을 제공합니다.
  • 03단어 단위 TTS 타임스탬프를 기준으로 자막 타이밍을 설정하고, 애니메이션을 자막 텍스트에 맞춰 동기화합니다.
  • 04시각 스타일 템플릿 23종과 약 40개의 모션 프리미티브 라이브러리를 제공합니다.
  • 05MP4, SRT, VTT 파일과 함께 16:9, 3:4 및 선택 사항인 9:16 비율의 커버 이미지를 생성합니다.
  • 061080p 및 4K 해상도에서 30 또는 60fps 출력을 지원하며, 모션 블러와 병렬 렌더링을 선택적으로 사용할 수 있습니다.

활용 사례

  • 기사나 문서 페이지를 내레이션이 포함된 설명 영상으로 만들기.
  • AI 코딩 에이전트로 음성과 자막이 일관된 주제별 영상 시리즈 제작하기.
  • 기본 edge-tts 음성을 사용해 영상별 API 요금 없이 오프라인으로 영상 생성하기.
  • 파이프라인을 다시 실행해도 프레임이 동일하게 렌더링되는 재현 가능한 설명 영상 제작하기.

토픽

#agent-skill#video-generation#text-to-speech#html-to-video#claude-code#tts#subtitles#agent-skills#claude-code-skill#claude-code-skills

자주 묻는 질문

html-explainer은(는) 무엇인가요?
HTML을 로컬에서 렌더링해 내레이션, 하드 자막, 커버 이미지가 포함된 설명 영상을 만드는 Agent Skill입니다. html-explainer는 설명 영상을 제작하는 agent skill입니다. 에이전트에 주제를 입력하면 조사, 내레이션 대본 작성, 텍스트 음성 변환(TTS), 자막 및 장면 전환 타이밍 설정, 장면 HTML 작성, 프레임 렌더링과 ffmpeg 인코딩, 커버 이미지 제작 순으로 파이프라인을 실행합니다. 장면은 HTML/CSS/GSAP로 작성하며, 브라우저 화면을 녹화하는 대신 애니메이션을 정확한 타임스탬프로 이동해 프레임마다 렌더링하므로 실행할 때마다 동일한 프레임을 얻을 수 있습니다.
html-explainer은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?
html-explainer은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.
html-explainer은(는) 아직 유지보수되고 있나요?
활발히 유지보수 중. html-explainer의 마지막 커밋은 2026년 10월 14일입니다.
html-explainer은(는) 어디에 사용할 수 있나요?
기사나 문서 페이지를 내레이션이 포함된 설명 영상으로 만들기. AI 코딩 에이전트로 음성과 자막이 일관된 주제별 영상 시리즈 제작하기. 기본 edge-tts 음성을 사용해 영상별 API 요금 없이 오프라인으로 영상 생성하기. 파이프라인을 다시 실행해도 프레임이 동일하게 렌더링되는 재현 가능한 설명 영상 제작하기.
html-explainer은(는) 어디서 받을 수 있나요?
소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/OneMoh/html-explainer

요약은 프로젝트 README를 바탕으로 AI가 작성했습니다. GitHub 통계는 매일 갱신됩니다.

관련 프로젝트