화수 모션 (huashu-motion)

제품 홍보 영상·런치 필름·해설 영상을 HTML+GSAP 코드로 연출부터 렌더링까지 만들어주는 모션그래픽 감독 스킬.

이미지·영상고급★ 2,522⑂ 255AI 점수 9/10마지막 업데이트: 2026. 10. 22.

무엇을 해주나

index.html 하나를 '필름'으로 삼아 HTML + GSAP 기반 모션그래픽을 코드로 제작합니다. 프레임 단위 렌더링으로 MP4/MOV/GIF/WebM 내보내기까지 이어집니다.
제품의 실제 소재부터 수집합니다. om grab으로 프로젝트 폴더나 웹사이트에서 스크린샷·로고·이미지·실제 색상과 폰트를 가져와 가짜 플레이스홀더 없이 구성합니다.
연출 절차가 규율화되어 있습니다: 사전 학습(om learn) → 3가지 방향 시안(키프레임 + 팔레트 카드) → 트리트먼트(리듬 시트·비트맵) → 가장 어려운 샷부터 제작 → 검수(om check/om still/om qa) → 사운드(ABC 악보 작곡, 효과음) → 스튜디오 인계 → 렌더 → 공유용 GIF·포스트.
로컬 스튜디오(127.0.0.1) 프리뷰에서 사용자가 화면의 특정 지점을 클릭해 코멘트하면, om inbox/om look으로 그 프레임과 클릭 위치를 확인하고 해당 부분만 최소 수정합니다.
제목·숫자·색상·대기 시간 등은 '컴포지션 변수'로 노출되어 사용자가 직접 수정할 수 있고, 모든 버전은 .om/history에 보관돼 om undo가 가능합니다.

이런 분께 추천

자기 제품·오픈소스 프로젝트의 런치 영상이나 README용 루프 GIF가 필요한 개발자·1인 창업자
디자이너 없이도 '슬라이드 같지 않은' 홍보 영상을 만들고 싶은 인디 메이커
UI 데모, 체인지로그 영상, 제품 해설 영상을 반복 제작해야 하는 프로덕트/마케팅 담당자
전제: 로컬에 Chrome이 설치되어 있고 로컬 서버 실행이 가능해야 하며, Node(npx) 환경이 필요합니다. 샌드박스가 브라우저·서버 실행을 막으면 시각 검수 단계를 밖에서 돌려야 합니다.

활용 예시

"내 프로젝트 홍보 영상 만들어줘" 한 줄 요청 → 스킬이 저장소와 사이트에서 소재를 모으고, 포맷(X용 30초 16:9 / 숏폼 15초 9:16 / README 루프 GIF), 에너지, 내레이션 여부를 기본값과 함께 한 번에 제안한 뒤 3가지 방향 시안을 제시.
프리뷰에서 "이 카드 멈추는 시간 좀 더 길게" 코멘트 → 해당 프레임과 클릭 지점 캡처를 확인하고 변수 값만 바꿔 "1.2s → 2.0s, 이후 0.8s 순연" 식으로 보고.
런치 필름에 맞춰 직접 ABC 악보를 작곡하고 착지 모션마다 효과음(OM.sfx('thud', t))을 붙인 뒤, 모션 블러를 켜고 최종 MP4와 10MB 이하 공유용 GIF·게시글 초안까지 생성.

· · · 설치 가이드 · · ·

설치 없이 지금 한 번 써보기

아래를 Claude에 붙여넣으면 설치하지 않고도 이 스킬을 그대로 씁니다.

이 파일의 지시를 읽고 그대로 따라서 나를 도와줘:
https://raw.githubusercontent.com/alchaincyf/huashu-motion/HEAD/skills/huashu-motion/SKILL.md

내가 원하는 것: (여기에 하고 싶은 일을 쓰세요)

Claude가 링크를 열지 못하면, 링크를 직접 열어 내용을 복사해 붙여넣으세요.

↓ 쓸 만하면 아래에서 ZIP을 받아 설치하세요. 그러면 매번 붙여넣지 않아도 알아서 작동합니다.

Claude 앱에 설치 (터미널 필요 없음)

아래 버튼으로 ZIP 파일을 받으세요.
Claude 설정 → Capabilities에서 '코드 실행 및 파일 생성'을 켭니다. (한 번만)
Claude에서 Customize → Skills → + → '스킬 업로드'를 누르고 받은 ZIP을 올립니다.

↓ ZIP 내려받기

Claude Code에 설치

Claude에게 맡기기 — 아래 문장을 Claude Code에 붙여넣으세요

AI 스킬마트에서 찾은 스킬을 설치해줘.
GitHub 저장소 alchaincyf/huashu-motion 의 skills/huashu-motion 폴더를 내 ~/.claude/skills/huashu-motion/ 에 그대로 복사해줘.
설치가 끝나면 이 스킬로 무엇을 할 수 있는지 한 줄로 알려줘.

직접 명령으로 설치하기

git clone https://github.com/alchaincyf/huashu-motion.git /tmp/huashu-motion && mkdir -p ~/.claude/skills && cp -r /tmp/huashu-motion/skills/huashu-motion ~/.claude/skills/

⚠ 제3자가 만든 스킬입니다. 설치 전 원본 저장소를 한 번 확인하세요.

터미널을 열고 저장소를 클론합니다: git clone https://github.com/alchaincyf/huashu-motion.git /tmp/huashu-motion
스킬 폴더를 만듭니다: mkdir -p ~/.claude/skills
스킬을 복사합니다: cp -r /tmp/huashu-motion/skills/huashu-motion ~/.claude/skills/
사전 준비물을 확인합니다 — 데스크톱용 Chrome 설치, Node.js(npx 사용 가능), 사운드 점검용 ffmpeg(선택).
Claude Code를 재시작한 뒤 "내 프로젝트 홍보 영상 만들어줘"처럼 요청하면 스킬이 발동합니다.
처음 실행 시 npx huashu-motion doctor 또는 <스킬폴더>/bin/om doctor로 환경을 점검하세요.
미리보기는 om studio <프로젝트> 실행 후 출력되는 127.0.0.1 주소를 브라우저에서 열면 됩니다. 로컬 서버/브라우저 실행 권한을 허용해야 시각 검수가 정상 동작합니다.

GitHub에서 원본 보기 ↗라이선스: MIT