Communitygithub.com

web2clip

사용자가 웹사이트나 대화형 웹 페이지로부터 AI 음성 호스트와 내레이션에 동기화된 화면 효과가 포함된 비디오/클립(소개, 안내, 설명, 워크스루)을 제작하려 할 때 사용합니다. 예: "시스템 소개 클립 제작", "웹사이트에서 비디오 만들기", "AI 음성 클립", "/web2clip". 또한 설정, 시나리오, 음성, 녹화, 최종 클립 편집 등 모든 단계를 재개할 때도 사용합니다.

web2clip란 무엇인가요?

web2clip은 웹사이트나 대화형 웹 페이지를 AI 음성 호스트와 동기화된 화면 효과가 포함된 일련의 짧은 클립(챕터별)과 하나의 종합 클립으로 변환하는 AI 스킬입니다. 이 스킬은 ElevenLabs 음성을 사용하여 자연스러운 내레이션을 제공하고, 실제 웹 페이지를 녹화하여 데이터 정확성을 100% 보장합니다. Claude Code, Cursor, Codex 등 다양한 AI 에이전트 플랫폼에서 사용할 수 있으며, 7단계의 체계적인 프로세스(환경 확인, 아이디어 구상, 시나리오 작성, 음성 선택, 녹화, 편집, 전달)를 통해 사용자가 원하는 품질의 비디오를 제작할 수 있도록 돕습니다. 또한, 사용자 승인을 먼저 받고 비용이 많이 드는 음성 생성을 나중에 하는 '금칙' 규칙과 파일럿 클립을 먼저 제작하여 피드백을 받는 방식을 채택하여 효율성을 높입니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/tmarkTai/web2clip/tree/HEAD/skills/web2clip

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

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

문서

web2clip · 웹사이트를 AI 음성 클립으로 변환

대화형 웹 페이지(가장 이상적)를 챕터별 짧은 클립 시리즈 + 1개의 종합 클립으로 변환합니다. 세로 9:16 또는 가로 16:9 비율로 제작되며, AI 호스트(ElevenLabs 음성), 내레이션에 맞춰 웹 페이지에 적용되는 효과(강조 테두리, 클릭 커서, 스크롤바 드래그, 자막 등)가 포함되며, 실제 페이지를 녹화하므로 데이터가 100% 정확합니다.

하위 명령어 (특정 단계만 필요할 때 사용)

명령어단계
/web2clip-setup1–2 · 연결, 도구, 네트워크 권한, 계정 확인
/web2clip-plan3 · 웹사이트 분석, 아이디어 제안, 시나리오 + 대시보드 작성
/web2clip-voice4–5 · 음성 제안, 각 클립 음성 생성, 파일 다운로드
/web2clip-record4 · 음성에 맞춰 동기화 녹화, 각 클립 내보내기
/web2clip-merge6 · 종합 클립 편집, 이름 지정, 파일 전달, 보관

/web2clip 실행 = 아래 7단계를 순서대로 진행합니다. 단계를 건너뛰지 마십시오.

핵심 규칙 (실제 프로젝트 경험 기반)

  1. 텍스트 먼저 승인, 비용은 나중에: 시나리오는 음성 생성(크레딧 소모) 전에 반드시 승인을 받아야 합니다.
  2. 먼저 1개의 클립을 시범 제작(파일럿)하여 사용자가 음성과 효과 스타일을 승인한 후, 나머지를 대량 제작합니다.
  3. 음성은 내레이터 역할이며, 웹 페이지의 텍스트를 단순히 읽지 않습니다. 역할 이름(예: "철수 씨의 비서, 칩")이 있고, 친근한 호칭을 사용하며, 질문이나 상황 설명으로 시작하여 다음 부분으로 자연스럽게 이어집니다.
  4. 짧은 클립을 챕터별(1-2분)로 나누어 제작한 후 종합 클립으로 편집합니다. 처음부터 긴 클립 하나를 만들지 않습니다.
  5. 화면은 내레이션에 맞춰 움직입니다: 특정 부분을 언급하면 그 부분이 정확히 그 시간에 강조됩니다. 동기화 녹화 도구(scripts/w2c/record.py)를 사용하며, 수동으로 추정하지 않습니다.
  6. 사용자에게 한 번에 최대 1-3개의 질문을 하고, 선택 옵션을 미리 제공합니다. 제한 사항이 있으면 솔직하게 알립니다.

7단계 프로세스

1. 연결 확인 → /web2clip-setup 참조

python -m w2c.check_env 실행(scripts/ 디렉토리에서). 표로 표시: 사용 가능한 도구, 연결 상태(ElevenLabs, Drive, Canva, 브라우저), 누락된 항목은 설치 방법 및 계정 생성 안내를 제안합니다.

2. MCP / API / 권한 준비

네트워크 권한 부족 → 사용자가 올바른 도메인(설정에 목록 있음)을 열도록 안내합니다. ElevenLabs 연결이 없으면 연결을 요청합니다. 도구 권한 요청 창이 나타나면 **"항상 허용"**을 선택하도록 안내합니다.

3. 아이디어 구상 → /web2clip-plan 참조

웹사이트를 읽고, 챕터/섹션을 나열하고, 화면 비율, 길이, 음성, 호스트, 클립 수를 제안합니다. 2열 시나리오(내레이션 · 웹 효과)를 작성합니다. 대시보드(w2c.dashboard)를 생성하고 링크를 보내 사용자가 전체 개요를 파악하고 각 클립을 승인할 수 있도록 합니다.

4. 시나리오 → 음성 → 녹화 → 각 클립 편집

음성: /web2clip-voice. 녹화: /web2clip-record. 각 클립 후 대시보드를 업데이트합니다.

5. 음성 제안

언어, 성별, 연령대, 지역에 따라 음성을 필터링하고, 이유를 포함한 2-3가지 옵션을 제시하며, 기본값은 자연스러운 스토리텔링 음성입니다.

6. 종합 클립 → /web2clip-merge 참조

순서대로 편집하고, 파일 이름을 <프로젝트>_Clip<번호>_<섹션명>.mp4로 지정하며, 종합 클립은 0. ..._TONG-HOP으로 지정하여 디렉토리 맨 위에 오도록 합니다.

7. 100% 만족할 때까지 전달

파일을 보내고 대시보드를 업데이트하며, 보내기 전에 자체적으로 화면을 검토(클립당 4-6 프레임 추출)하고, 자체 발견된 오류를 나열하고, 사용자가 승인할 때까지 수정합니다. 시나리오, 음성, 사양을 저장하여 빠르게 수정할 수 있도록 합니다.

참고 자료

  • references/loi-thuong-gap.md — 과거 오류와 방지 방법(녹화 전 필수 읽기).
  • references/viet-kich-ban.md — 매력적인 내레이션 작성 방법 + 시나리오 템플릿.
  • references/chon-giong.md — 음성 제안 방법, 크레딧 예상, ElevenLabs 요금제.
  • examples/spec_example.json (저장소 루트에 있음) — 시나리오 파일 예시.

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

관련 스킬