본문으로 건너뛰기

Sonnet 5.5로 내 모션 영상 만들기: 스킬 설치부터 프롬프트·저장까지

· 약 8분
박수진
AI builder

스킬을 설치하고 아래 프롬프트를 복사하면, 내 지역·문구·브랜드가 들어간 모션 영상을 만들어볼 수 있습니다. 노을 비행, 도시 스노우볼, 종이 브랜드 모션 중 하나를 고르고 브라우저에서 확인한 뒤 영상으로 저장하세요.

1. Claude Code와 작업 폴더를 준비하세요​

노트북에서 Claude Code를 실행할 수 있는 계정과 Chrome을 준비합니다. AI 이용 요금은 별도입니다. Claude Code 공식 설치 안내를 따라 설치한 뒤, 새 작업 폴더를 열고 Claude Code를 실행하세요. 폴더 이름은 my-motion처럼 정하면 됩니다.

이 글의 원본 영상은 Claude 웹의 Sonnet 5.5로 만들었습니다. 아래는 예제 파일을 가져와 수정하는 Claude Code용 가이드입니다. 일반 Claude 채팅창에서는 아래 플러그인 명령을 실행할 수 없습니다.

Claude Code에서 /model을 입력하고 Sonnet 5.5를 선택하세요. 모델 목록에 없다면 계정에서 사용 가능한지 먼저 확인하세요. 스킬이 모델을 자동으로 선택해주지는 않습니다.

2. DataPopcorn 플러그인을 설치하세요​

아래 두 줄을 Claude Code 대화창에 한 줄씩 입력하세요. 첫 줄은 배포 목록을 등록하고, 둘째 줄은 스킬 묶음을 설치합니다.

/plugin marketplace add team-datapopcorn/datapopcorn-skills-shared
/plugin install datapopcorn@datapopcorn

설치 후 Claude Code를 다시 시작하세요. /datapopcorn:을 입력했을 때 아래 스킬이 보이는지 확인합니다.

스킬만드는 것
/datapopcorn:snowball원하는 지역의 스노우볼
/datapopcorn:sunset-flight내 문구를 담은 노을 비행
/datapopcorn:paper-motion내 이름과 슬로건을 담은 종이 모션

공개 저장소에는 스킬 지침과 실행 HTML 예제가 함께 있습니다. DataPopcorn 플러그인은 콘텐츠 제작과 업무 자동화 스킬을 모은 패키지이며, 여기서는 영상 스킬 세 가지를 사용합니다.

3. 원하는 예제를 고르고 프롬프트를 복사하세요​

내 브랜드를 넣는 종이 모션​

처음이라면 이 예제부터 시작하세요. 아래의 브랜드명과 슬로건만 내 것으로 바꾸면 됩니다.

/datapopcorn:paper-motion
포함된 예제로 종이 브랜드 모션을 만들어줘.
브랜드명: Mellow Studio
슬로건: Small moments, made special.
기존 종이 질감과 움직임은 유지해줘.
새 작업 폴더에 만들고 Chrome에서 미리보기를 열어줘.
원본 예제는 보존하고, 글자가 잘리거나 겹치지 않는지 확인해줘.

완료되면 브랜드명과 슬로건이 보이는 장면까지 재생해보세요. 입력란에서도 문구를 바꿀 수 있습니다. 이름이 길면 다음처럼 수정합니다.

브랜드명이 길어서 잘려. 현재 스타일은 유지하고
글자 크기와 줄바꿈을 조정해 끝까지 읽히게 해줘.
영상 마지막 화면도 확인해줘.

처음부터 만들어보고 싶다면 아래 프롬프트를 사용하세요. 원본 제작 지시를 이 예제만 따로 만들 수 있도록 정리한 것으로, 결과는 달라질 수 있습니다.

종이 모션을 새로 만드는 프롬프트
실제 실행 가능한 단일 HTML로 10초 종이 질감 브랜드 모션을 만들어줘.
크림 종이, 차콜 타이포, 핑크 한 가지 포인트.
광택 구슬과 도트 격자 대신 종이 섬유와 입체 접힘 그림자를 사용해줘.

0–2초: 핑크 종이가 펼쳐지며 브랜드 글자의 일부가 드러남.
2–5초: 접힌 면이 부채처럼 연속 펼쳐지고 종이 포스터로 연결.
5–8초: 종이 띠가 화면을 덮으며 차콜 브랜드명이 드러남.
8–10초: 브랜드명과 슬로건이 또렷하게 보이고 처음으로 연결.

단순한 사각형 슬라이드가 아니라 접힘 축·앞뒷면·접촉 그림자를 구현해줘.
브랜드명 DataPopcorn, 슬로건 AI, made useful. 입력으로 수정 가능하게.
코드만 사용하는 단독 HTML, 세로 9:16, WebM 720×1280 저장.
여러 시점과 문구 교체, 모바일 크기, 내보내기를 확인해줘.

원하는 지역을 담는 스노우볼​

서울·파리·도쿄·뉴욕은 기본 예제입니다. 먼저 기존 도시로 시작하려면 이렇게 요청하세요.

/datapopcorn:snowball
포함된 파리 예제로 스노우볼을 만들어줘.
각인 문구는 OUR PARIS로 해줘.
기존 유리구슬, 눈, 조명과 카메라 움직임은 유지하고
새 작업 폴더에 만들어 Chrome에서 보여줘.

새 지역은 이름만 바꾸는 대신 건물과 풍경을 새로 만듭니다. 지역과 넣고 싶은 랜드마크를 함께 알려주세요.

/datapopcorn:snowball
부산 스노우볼을 만들어줘.
광안대교와 바다, 해안 풍경을 넣고 각인은 BUSAN으로 해줘.
공식 관광 자료로 지역 특징을 확인하고
기존 도시의 이름만 바꾸지 말고 부산 장면을 새로 만들어줘.
기존 스노우볼의 유리, 눈, 조명과 움직임은 유지해줘.
부산이 처음 선택되게 하고, 다른 도시로 전환했다가 돌아와도
정상적으로 보이는지 Chrome에서 확인해줘.

위 부산은 Sonnet 5.5에 스킬 지침을 전달해 만든 추가 예시입니다. 부산관광공사 자료를 참고한 미니어처이며 정확한 축척 지도가 아닙니다. 새 지역은 AI가 코드를 작성하므로 결과를 보고 수정할 수 있습니다.

광안대교가 너무 작아. 구슬 안에서 다리의 실루엣이 더 잘 보이게
크기와 카메라 구도를 조정해줘. 바다도 가리지 않게 해줘.
처음, 중간, 마지막 화면을 비교해서 보여줘.

처음부터 만들어보고 싶다면 아래 프롬프트를 사용하세요. 원본 제작 지시를 이 예제만 따로 만들 수 있도록 정리한 것으로, 결과는 달라질 수 있습니다.

서울 스노우볼을 새로 만드는 프롬프트
실제 실행 가능한 단일 HTML로 8초 서울 스노우볼 3D 애니메이션을 만들어줘.
Remotion, 외부 사진·영상·3D 모델 없이 코드로만 만들고 Three.js CDN은 허용해.
세로 9:16, 컨트롤은 영상 바깥, 첫 화면부터 완성된 장면이 보여야 해.

따뜻하고 어두운 스튜디오, 투명 유리구슬과 무광 크림 받침대.
안에는 남산타워·언덕·한옥 지붕·소나무·따뜻한 창문.
눈이 소용돌이치다 떨어지고 카메라는 부드럽게 공전해줘.
각인 SEOUL 수정과 눈 흔들기 버튼을 넣어줘.

재생·정지·다시재생·진행바·문구 입력란·WebM 720×1280 저장을 제공해줘.
여러 시점을 실제 렌더링하고 문구 변경과 저장을 확인한 뒤 완성 HTML을 제공해줘.

짧은 메시지를 담는 노을 비행​

/datapopcorn:sunset-flight
포함된 노을 비행 예제로 만들어줘.
영상 속 문구는 TAKE A BREAK로 바꿔줘.
비행기, 구름, 바다와 카메라 움직임은 유지해줘.
새 작업 폴더에 만들고 Chrome에서 미리보기를 열어줘.
문구가 실제 저장 영상에도 포함되는지 확인해줘.

사진을 넣는 템플릿은 아닙니다. 먼저 문구만 바꿔 확인하고, 색감을 바꾸고 싶으면 다음처럼 요청하세요.

움직임과 문구는 유지하고 노을을 조금 더 분홍빛으로 바꿔줘.
기체가 배경에 묻히지 않게 해줘. 수정 전 파일도 남겨줘.

처음부터 만들어보고 싶다면 아래 프롬프트를 사용하세요. 원본 제작 지시를 이 예제만 따로 만들 수 있도록 정리한 것으로, 결과는 달라질 수 있습니다.

노을 비행을 새로 만드는 프롬프트
실제 실행 가능한 단일 HTML로 10초 노을 비행 3D 애니메이션을 만들어줘.
Remotion, 외부 사진·영상·3D 모델 없이 코드로만 만들고 Three.js CDN은 허용해.
세로 9:16, 컨트롤은 영상 바깥, 첫 화면부터 완성된 장면이 보여야 해.

노을이 반사되는 바다 위를 나는 크림색·코랄 복엽기.
날개·기둥·꼬리·회전 프로펠러를 모델링하고
카메라가 뒤쪽에서 옆으로 돌아 기체와 수평선이 드러나게 해줘.
라일락·복숭아 구름, 바다 잔물결과 태양 반사.
TAKE A BREATH 문구는 입력란에서 바꿀 수 있게 해줘.

재생·정지·다시재생·진행바·문구 입력란·WebM 720×1280 저장을 제공해줘.
여러 시점을 실제 렌더링하고 문구 변경과 저장을 확인한 뒤 완성 HTML을 제공해줘.

4. 마음에 들면 영상으로 저장하세요​

미리보기의 WebM 저장 버튼을 누릅니다. 한 번의 반복 구간을 녹화하는 동안 해당 탭을 화면에 보이는 상태로 두세요. 저장이 끝나면 파일을 열어 문구와 움직임을 확인합니다. 기본 영상은 세로 720×1280이고 소리는 없습니다. 위 블로그 영상은 빠르게 보기 위한 축소본입니다.

Instagram용 MP4가 필요하면 다음을 요청하세요.

방금 저장한 WebM을 MP4로 변환해줘.
FFmpeg가 설치되어 있는지 먼저 확인하고, 없으면 설치 방법을 알려줘.
세로 비율과 문구를 유지하고 원본 WebM도 남겨줘.
변환된 MP4가 정상적으로 재생되는지 확인하고 파일 위치를 알려줘.

5. 다음에도 같은 스타일로 쓰세요​

영상만 남기지 말고 HTML이 들어 있는 작업 폴더도 보관하세요. 다음에는 이 폴더를 Claude Code에서 열어 요청하면 됩니다.

지난번 승인한 종이 모션을 복사해서 새 버전을 만들어줘.
브랜드명만 Sunday Market으로 바꾸고 색과 움직임은 유지해줘.
기존 파일은 덮어쓰지 말아줘.

잘 안 될 때 확인할 것​

상황이렇게 해보세요
스킬 이름이 안 보여요/plugin에서 설치 상태를 확인하고 Claude Code를 다시 시작하세요.
화면이 비어 있어요Chrome과 인터넷 연결을 확인하고, AI에게 브라우저 오류를 확인해달라고 요청하세요. 3D 라이브러리와 글꼴을 외부에서 불러옵니다.
지역 이름만 바뀌었어요각인 입력은 글자만 바꿉니다. 새 지역 프롬프트로 랜드마크 제작을 요청하세요.
저장 영상이 멈추거나 끊겨요녹화 중 탭을 보이게 두고 다시 저장하세요. 계속되면 AI에게 저장 파일의 길이와 프레임을 점검해달라고 요청하세요.
소리가 안 나요이 예제는 무음입니다. 음악과 효과음은 별도 편집 단계에서 추가하세요.

사용 환경 안내​

이 작업은 Mac과 Chrome에서 진행했습니다.

영감을 받은 영상​

노을 비행과 스노우볼은 Skillry에서 발견한 아래 사례를 참고했습니다. 참고 사례는 Opus 5.5로 소개되어 있으며, 이 글의 예제는 Sonnet 5.5로 새로 제작했습니다.