클로드로 만드는 애니메이션 스타일 10가지, 프롬프트 모음
장면 하나를 정해 두고 그리는 방식만 바꾸면 픽셀 아트부터 시네마틱 3D까지 10가지 애니메이션이 나옵니다. 그림 도구 없이 클로드가 코드로 그리고, 결과는 화면 녹화로 영상이 됩니다.
이 글에 담긴 것STEP 12개 · 따라 하는 데 30분
바쁘면 이것만
- 설정 → Capabilities에서 'Code execution and file creation'(새 화면에서는 'Create and edit files')이 켜져 있는지 확인합니다.
- STEP 1 프롬프트로 기본 장면을 만들고, 같은 대화에서 스타일 프롬프트를 하나씩 이어서 붙여 넣습니다.
- 마음에 드는 스타일을 HTML 파일로 받아 크롬에서 크게 띄우고 화면 녹화한 뒤 MP4로 올립니다.
통째로 맡기는 프롬프트Claude에 붙여 넣으면 이 글의 단계를 대신 진행합니다
역할: 너는 세로 숏폼 영상용 모션 그래픽을 코드로 만드는 디자이너야.
맥락: 같은 장면을 스타일 10가지로 바꿔 보여 주는 16초 비교 영상을 만들려고 해.
입력: 장면 = [빨간 버스 한 대가 아침 도시를 지나간다. 바퀴가 돌고 뒤로 건물이 흘러간다.]
작업:
1) HTML 파일 하나, 캔버스 1080×1920에 장면을 '장면'과 '그리기'로 나눠 만든다.
2) 그리기를 10가지로 만든다: 픽셀 아트, 칠판 분필, 네온 스케치, 레트로 3D, 만화 컷, 플랫 일러스트, 미니멀 흰 선, 시네마틱 3D, 장난감 블록, 3D 설명 영상.
3) 화면 위에 제목 [클로드로 만드는 애니메이션 스타일 10], 왼쪽에 01~10 번호 목록, 오른쪽에 휴대폰 모양 틀을 둔다. 1.25초마다 다음 스타일로 바뀌고 목록의 현재 번호가 강조된다.
4) 마지막 3.5초는 10개를 5×2 격자로 한꺼번에 보여 준다.
제약: 외부 이미지·라이브러리 없이 코드로만. 실존 캐릭터·브랜드 로고는 그리지 않는다. 아래쪽 300px은 SNS 화면 버튼에 가려지니 비워 둔다.
출력: 바로 재생되는 아티팩트 하나와 같은 내용의 HTML 파일.
검증: 스타일 10개가 모두 같은 장면·같은 움직임인지, 글자가 틀 밖으로 넘치지 않는지 스스로 확인하고 고친 뒤 보여 줘.
필요한 것클로드 계정(무료 요금제도 가능), 크롬 같은 브라우저, 화면 녹화 기능
걸리는 시간30분
왜 필요한가요요즘 릴스에서 같은 장면을 스타일만 바꿔 보여 주는 영상이 많이 보입니다. 영상 생성 AI가 아니어도 클로드의 아티팩트만으로 비슷한 결과를 만들 수 있고 장면이 코드라서 색·속도·문구를 말로 고칠 수 있습니다.
이 글의 방법은 그림을 생성하는 것이 아니라 클로드가 HTML 캔버스 코드를 짜서 장면을 그리게 하는 것이라서, 같은 장면을 몇 번이고 똑같이 다시 그릴 수 있고 스타일만 바꾸는 일도 어렵지 않습니다. 먼저 플랫 일러스트로 기본 장면을 만들고 스타일 프롬프트 10개를 하나씩 붙여 넣은 뒤 마음에 드는 것을 영상으로 녹화합니다. SHIFT 릴스 '클로드 애니메이션 스타일 10'의 장면도 같은 방식(장면 하나를 두고 그리기만 바꾸기)으로 클로드와 만들었습니다.
STEP 1장면 하나 정하고 기본 애니메이션 만들기5분
스타일을 바꾸기 전에 모든 스타일에서 똑같이 움직일 장면 하나부터 정합니다.
클로드(claude.ai) 새 대화를 열고 아래 프롬프트를 붙여 넣습니다. 대괄호 안의 장면만 내 주제로 바꿉니다. 버스·종이비행기·커피잔처럼 모양이 단순한 사물이 잘 나옵니다. 사람 얼굴이나 손처럼 복잡한 대상은 코드로 그리면 어색해지기 쉽습니다.
설정 → Capabilities의 'Code execution and file creation'(새 설정 화면에서는 'Create and edit files')이 켜져 있어야 아티팩트가 만들어집니다. 앤트로픽 도움말 기준으로 무료·프로·맥스 요금제는 처음부터 켜져 있으니, 결과가 코드 글자로만 나오면 이 설정을 확인합니다.
장면과 그리기를 나눠 달라고 하는 부분이 가장 중요합니다. 이렇게 나눠 두면 다음 단계부터 스타일 프롬프트 한 번에 그리는 방식만 바뀌고 움직임은 그대로 남습니다.
복사해서 쓰는 프롬프트
HTML 파일 하나로 9:16 세로 애니메이션을 만들어 줘.
- 캔버스 1080×1920, 12초 동안 끊김 없이 반복 재생
- 장면: [빨간 버스 한 대가 아침 도시를 지나간다. 버스는 화면 가운데에 있고 바퀴가 돈다. 뒤로 건물이 천천히 흘러가고 길 위 차선이 지나간다.]
- 외부 이미지·라이브러리·글꼴 없이 코드로만 그려 줘
- 처음 스타일은 깔끔한 플랫 일러스트로 해 줘
- 코드를 '장면(무엇이 어디서 어떻게 움직이는지)'과 '그리기(어떻게 보이는지)' 두 부분으로 나눠서, 나중에 그리기 부분만 바꿔도 같은 움직임이 나오게 해 줘
- 어떤 창 크기에서도 9:16 비율 그대로 가운데에 꽉 차게 보여 줘
- 아티팩트로 바로 재생되게 보여 주고, 같은 내용을 HTML 파일로도 내려받을 수 있게 해 줘
STEP 2픽셀 아트 스타일2분
옛 게임기 화면처럼 네모난 점이 보이는 그림입니다. 작게 그린 뒤 크게 키우는 것이 핵심입니다.
점이 너무 잘면 그냥 흐린 그림처럼 보입니다. 작은 캔버스 너비를 60~120px 사이에서 바꿔 보며 맞춥니다.
복사해서 쓰는 프롬프트
앞에서 만든 애니메이션의 장면과 움직임은 그대로 두고, 그리는 방식만 '픽셀 아트' 스타일로 바꿔 줘.
- 가로 90px 정도의 작은 캔버스에 먼저 그린 뒤 화면 크기로 확대해 줘
- 확대할 때 imageSmoothingEnabled 를 꺼서 점이 뭉개지지 않게 해 줘
- 색은 16개 이하로 줄여 줘
- 외부 이미지·라이브러리 없이 코드로만 그려 줘
- 다 되면 아티팩트로 바로 재생되게 보여 줘
STEP 3칠판 분필 스타일2분
초록 칠판에 분필로 그린 수업 시간 그림입니다. 선이 매 프레임 조금씩 떨리면 손으로 그린 느낌이 납니다.
떨림이 너무 크면 어지러우니 떨림 폭을 2~4px로 적어 두면 무난합니다.
복사해서 쓰는 프롬프트
앞에서 만든 애니메이션의 장면과 움직임은 그대로 두고, 그리는 방식만 '칠판 분필' 스타일로 바꿔 줘.
- 짙은 초록 칠판 바탕에 나무 테두리를 둘러 줘
- 면은 칠하지 말고 흰색·연한 노랑·연한 분홍 분필 선으로만 그려 줘
- 선은 살짝 삐뚤고 군데군데 끊기게, 1초에 열 번쯤 모양이 조금씩 바뀌게 해 줘
- 왼쪽 위에 손글씨 메모 한 줄을 넣어 줘: [출근길 = 버스]
- 외부 이미지·라이브러리 없이 코드로만 그려 줘
- 다 되면 아티팩트로 바로 재생되게 보여 줘
STEP 4네온 스케치 스타일2분
어두운 밤에 빛나는 선으로만 그린 그림으로, 선에 빛 번짐을 주는 것이 전부입니다.
빛 번짐은 무거운 효과라 휴대폰에서 끊길 수 있습니다. 끊기면 번짐 세기를 줄여 달라고 합니다.
복사해서 쓰는 프롬프트
앞에서 만든 애니메이션의 장면과 움직임은 그대로 두고, 그리는 방식만 '네온 스케치' 스타일로 바꿔 줘.
- 거의 검은 남색 바탕에, 면을 칠하지 않고 선으로만 그려 줘
- 선 색은 청록·분홍·보라 세 가지만 쓰고 shadowBlur 로 빛이 번지게 해 줘
- 선이 아주 살짝 일렁이게 하고, 길 아래 바닥에 분홍빛 반사를 넣어 줘
- 외부 이미지·라이브러리 없이 코드로만 그려 줘
- 다 되면 아티팩트로 바로 재생되게 보여 줘
STEP 5레트로 3D 스타일2분
2000년대 초 게임기에서 보던 각진 3D 화면입니다. 면 몇 개짜리 상자와 낮은 해상도가 그 느낌을 만듭니다.
실제 3D 엔진을 쓰지 않고 상자를 비스듬히 그려 입체처럼 보이게 하는 방식입니다. 그래서 카메라를 돌리는 장면은 어렵습니다.
복사해서 쓰는 프롬프트
앞에서 만든 애니메이션의 장면과 움직임은 그대로 두고, 그리는 방식만 '레트로 3D' 스타일로 바꿔 줘.
- 건물과 버스를 앞면·옆면·윗면 세 면짜리 상자로 그리고 면마다 명암을 다르게 해 줘
- 바퀴와 해는 둥근 원 대신 팔각형으로 그려 줘
- 하늘은 노을색 띠 여섯 줄로 나누고, 화면 전체를 절반 해상도로 그린 뒤 확대해 줘
- 화면 위에 게임 점수판(STAGE 1-1, SCORE)과 가는 가로줄(주사선)을 얹어 줘
- 외부 이미지·라이브러리 없이 코드로만 그려 줘
- 다 되면 아티팩트로 바로 재생되게 보여 줘
STEP 6만화 컷 스타일2분
미국 만화책 한 컷처럼 굵은 외곽선과 원색, 망점을 씁니다. 효과음 글자가 들어가면 확 살아납니다.
말풍선 글자를 한국어로 넣으면 글꼴이 기본 글꼴로 나옵니다. 굵게(900) 지정해 달라고 하면 만화 느낌이 납니다.
복사해서 쓰는 프롬프트
앞에서 만든 애니메이션의 장면과 움직임은 그대로 두고, 그리는 방식만 '만화 컷' 스타일로 바꿔 줘.
- 모든 물체에 굵은 검은 외곽선을 두르고 원색으로 납작하게 칠해 줘
- 하늘에는 아래로 갈수록 커지는 점무늬(망점)를 깔아 줘
- 버스 뒤에 가로 속도선을, 앞쪽에 노란 별 모양 말풍선과 '부릉!' 글자를 넣어 줘
- 화면 가장자리에 굵은 검은 컷 테두리를 그려 줘
- 외부 이미지·라이브러리 없이 코드로만 그려 줘
- 다 되면 아티팩트로 바로 재생되게 보여 줘
STEP 7플랫 일러스트 스타일2분
외곽선 없이 색면으로만 그린 깔끔한 그림입니다. 설명 영상이나 서비스 소개에 가장 무난합니다.
가장 단순한 스타일이라 처음 장면을 만들 때 이 스타일로 시작하면 다른 스타일로 바꾸기가 쉽습니다.
복사해서 쓰는 프롬프트
앞에서 만든 애니메이션의 장면과 움직임은 그대로 두고, 그리는 방식만 '플랫 일러스트' 스타일로 바꿔 줘.
- 외곽선 없이 파스텔 색면으로만 그려 줘
- 건물 모서리는 둥글게, 창문은 반투명 흰색 네모로 해 줘
- 버스 아래에 옅은 그림자 하나만 넣고 나머지 효과는 빼 줘
- 외부 이미지·라이브러리 없이 코드로만 그려 줘
- 다 되면 아티팩트로 바로 재생되게 보여 줘
STEP 8미니멀 흰 선 스타일2분
검은 바탕에 흰 선 몇 개만 남긴 그림입니다. 문장 한 줄과 함께 쓰면 동기 부여 영상 느낌이 납니다.
줄일수록 좋아지는 스타일입니다. 어색하면 '요소를 절반으로 줄여 줘'라고 하면 대부분 나아집니다.
복사해서 쓰는 프롬프트
앞에서 만든 애니메이션의 장면과 움직임은 그대로 두고, 그리는 방식만 '미니멀 흰 선' 스타일로 바꿔 줘.
- 검은 바탕에 같은 굵기의 흰 선 하나로만 그려 줘
- 건물은 흐린 선 몇 개로 윤곽만, 해는 빈 원 하나로 해 줘
- 빈 공간을 넉넉히 두고, 위쪽 가운데에 짧은 문장 두 줄을 넣어 줘: [매일 같은 길도, / 다르게 볼 수 있다.]
- 외부 이미지·라이브러리 없이 코드로만 그려 줘
- 다 되면 아티팩트로 바로 재생되게 보여 줘
STEP 9시네마틱 3D 스타일2분
영화 한 장면처럼 빛과 색으로 분위기를 만드는 방식입니다. 효과를 여러 겹 쌓는 대신 처리 시간이 깁니다.
필름 그레인을 프레임마다 새로 만들면 느려집니다. 노이즈 그림을 한 번만 만들고 위치만 옮기라고 덧붙입니다.
복사해서 쓰는 프롬프트
앞에서 만든 애니메이션의 장면과 움직임은 그대로 두고, 그리는 방식만 '시네마틱 3D' 스타일로 바꿔 줘.
- 하늘은 짙은 남색에서 주황으로 바뀌는 노을 그라디언트, 지평선 근처에 큰 햇빛 번짐을 넣어 줘
- 건물은 어두운 실루엣에 따뜻한 창문 불빛을 군데군데 켜 줘
- 버스는 위가 밝고 아래가 어두운 그라디언트에 옆면 반사광, 앞쪽 전조등 빛줄기를 넣어 줘
- 화면 가장자리를 어둡게(비네트), 필름 그레인, 위아래 검은 띠를 넣어 줘
- 외부 이미지·라이브러리 없이 코드로만 그려 줘
- 다 되면 아티팩트로 바로 재생되게 보여 줘
STEP 10장난감 블록 스타일2분
모든 것을 조립 블록으로 쌓아 만든 장면입니다. 블록 위쪽 돌기만 있어도 장난감처럼 보입니다.
실제 장난감 회사의 이름을 프롬프트에 넣으면 상표 문제가 생길 수 있습니다. 모양으로만 설명하는 편이 안전합니다.
복사해서 쓰는 프롬프트
앞에서 만든 애니메이션의 장면과 움직임은 그대로 두고, 그리는 방식만 '장난감 블록' 스타일로 바꿔 줘.
- 건물·버스·땅을 모두 직사각형 블록을 쌓아서 만들어 줘
- 블록마다 윗면에 작은 돌기, 아래·오른쪽에 어두운 면, 위쪽에 밝은 줄을 넣어 줘
- 땅은 초록 판에 돌기가 줄지어 있게, 버스는 빨간 블록과 흰 블록 줄로 쌓아 줘
- 특정 회사의 로고나 제품 이름은 넣지 말아 줘
- 외부 이미지·라이브러리 없이 코드로만 그려 줘
- 다 되면 아티팩트로 바로 재생되게 보여 줘
STEP 113D 설명 영상 스타일2분
'이건 어떻게 움직일까?'를 보여 주는 과학 설명 영상 스타일입니다. 물체 일부를 투명하게 잘라 속을 보여 줍니다.
라벨 내용은 내가 보여 주고 싶은 설명으로 바꿉니다. 사실 설명이 들어가는 만큼 라벨 문장은 직접 확인합니다.
복사해서 쓰는 프롬프트
앞에서 만든 애니메이션의 장면과 움직임은 그대로 두고, 그리는 방식만 '3D 설명 영상' 스타일로 바꿔 줘.
- 밝은 회청색 스튜디오 바탕에, 점토처럼 부드러운 그라디언트 명암으로 그려 줘
- 버스 뒤쪽 일부를 투명하게 잘라서 안에 엔진과 돌아가는 톱니바퀴가 보이게 해 줘
- 가는 선과 흰 말풍선 라벨로 [엔진], [바퀴]를 가리키고, 라벨은 천천히 나타나게 해 줘
- 왼쪽 위에 질문 제목을 넣어 줘: [버스는 어떻게 갈까?]
- 외부 이미지·라이브러리 없이 코드로만 그려 줘
- 다 되면 아티팩트로 바로 재생되게 보여 줘
STEP 12영상 파일로 받기5분
아티팩트는 브라우저 속 애니메이션이라 릴스·쇼츠에 올리려면 영상 파일로 한 번 바꾸는 과정이 필요합니다.
가장 확실한 방법은 화면 녹화입니다. 클로드가 준 HTML 파일을 내려받아 크롬에서 열고 F11(맥은 Control+Command+F)로 전체 화면을 만든 뒤 녹화합니다. 윈도우는 Win+Alt+R(Xbox Game Bar), 맥은 Command+Shift+5를 씁니다. 휴대폰이라면 아이폰은 제어 센터, 안드로이드는 빠른 설정의 화면 녹화를 씁니다. 녹화한 뒤 편집 앱에서 세로 9:16으로 잘라 MP4로 저장합니다.
캔버스를 바로 영상 파일로 저장하는 버튼을 붙여 달라고 할 수도 있습니다. 이 방법은 내려받은 HTML 파일을 크롬에서 열었을 때 쓰는 것이 확실합니다.
인스타그램 릴스는 MP4·MOV 파일만 올라갑니다. 녹화 버튼이 WebM 파일을 만들었다면 편집 앱이나 변환 도구로 MP4로 바꾼 뒤 올립니다.
여러 스타일을 한 영상에 이어 붙이고 싶다면 글 위쪽 '통째로 맡기는 프롬프트'를 펼쳐서 씁니다.
복사해서 쓰는 프롬프트
이 애니메이션에 '녹화' 버튼을 붙여 줘. 누르면 캔버스를 captureStream 과 MediaRecorder 로 12초 동안 녹화하고, 끝나면 파일로 내려받게 해 줘. MediaRecorder.isTypeSupported 로 확인해서 브라우저가 MP4 를 지원하면 MP4 로, 안 되면 WebM 으로 저장해 줘. 녹화하는 동안에는 버튼을 숨겨 줘.
보너스 · 스타일이 마음에 안 들 때
- 한 번에 하나만 고칩니다. '색은 두고 선만 더 굵게'처럼 바꿀 것 하나를 말하면 잘 고쳐집니다.
- 대화가 길어져 코드가 꼬이면 마지막으로 잘 되던 코드를 새 대화에 붙여 넣고 다시 시작합니다.
- 스타일 이름보다 눈에 보이는 특징(선 굵기, 색 수, 바탕색, 빛 번짐)을 적을수록 결과가 비슷하게 나옵니다.
- 움직임이 버벅이면 '효과를 줄여서 휴대폰에서도 부드럽게'라고 덧붙입니다.
솔직히 한계
- 코드로 그리는 방식이라 사람 얼굴, 동물 털처럼 복잡한 대상은 어색하게 나옵니다. 모양이 단순한 사물을 주인공으로 고르는 편이 좋습니다.
- 같은 프롬프트라도 대화마다 결과가 조금씩 다릅니다. 마음에 드는 결과가 나오면 그 코드를 따로 저장해 둡니다.
- 긴 애니메이션 코드를 여러 번 고치면 사용 한도를 빨리 씁니다. 한도가 걱정되면 스타일마다 새 대화를 열고, STEP 1에서 만든 코드를 먼저 붙여 넣은 뒤 스타일 프롬프트를 씁니다.
- 유명 캐릭터나 특정 크리에이터·브랜드의 화풍을 이름으로 따라 그리게 하면 저작권·상표 문제가 생길 수 있습니다. 이 글의 프롬프트는 일부러 이름 대신 특징으로 적었습니다.
공식 자료Create and edit files with Claude (Claude 도움말) · https://support.claude.com/en/articles/12111783-create-and-edit-files-with-claudeWhat are artifacts and how do I use them? (Claude 도움말) · https://support.claude.com/en/articles/9487310-what-are-artifacts-and-how-do-i-use-themHTMLCanvasElement.captureStream() (MDN) · https://developer.mozilla.org/docs/Web/API/HTMLCanvasElement/captureStreamMediaRecorder (MDN) · https://developer.mozilla.org/docs/Web/API/MediaRecorder
SHIFT 팔로우
영상으로 보고, 기사로 자세히 읽기
30초 영상은 인스타그램과 유튜브 쇼츠에, 그날 나온 소식은 스레드에 가장 먼저 올립니다.
