코드를 몰라도 3D 애니메이션을 만들 수 있을까? Remotion Skill + Three.js

코드를 몰라도 3D 애니메이션을 만들 수 있을까? Remotion Skill + Three.js 전체 과정 가이드

3D 애니메이션을 만들려면 예전에는 무엇이 필요했을까요?

먼저 Blender나 Maya를 배워야 했습니다. 모델링, 텍스처, 조명, 본 리깅, 애니메이션 곡선 조정, 렌더링 설정까지 익히려면 몇 달은 걸렸죠. 코드로 만드는 방법은 더 복잡합니다. WebGL 파이프라인, GLSL 셰이더, 행렬 변환, 수십 개의 Three.js API까지 알아야 하니까요. 회전하는 큐브 하나를 만들려 해도 200줄의 코드를 작성해야 합니다.

그렇다면 지금은 어떨까요?

도구를 설치하고 프롬프트 한 줄만 입력하면 AI가 입체적인 장면을 만들어 줍니다. Studio에서 실시간으로 미리 보고, 마음에 들 때까지 조정한 다음 스크린샷을 찍거나 내보내서 공유하면 됩니다.

이 글에서는 전체 과정을 알려드립니다. 코드 한 줄도 작성할 필요가 없습니다.

1. 이 "마법"을 가능하게 한 세 가지

Remotion Skill: 말로 설명하면 코드를 작성해 줍니다

Remotion은 React로 동영상을 만드는 오픈 소스 프레임워크입니다(GitHub 45K+ Star). 하지만 여러분에게 정말 중요한 것은 Agent Skill입니다. 2026년 1월에 출시된 AI 플러그인으로, 첫 주에만 25K+회 설치되었습니다.

설치한 뒤 Claude Code에서 원하는 애니메이션을 자연어로 설명하면 AI가 자동으로 코드를 작성합니다. 왼쪽에는 실시간 미리보기 창이 표시되어 결과를 바로 확인하고 언제든 수정할 수 있습니다.

Three.js / WebGL: 브라우저 안의 3D 엔진

Three.js는 WebGL의 복잡한 부분을 감싸 줍니다. 정점 버퍼나 셰이더 컴파일이 무엇인지 알 필요가 없습니다. "스포트라이트 아래에서 금속 구체가 회전하게 해 줘"라고 말하기만 하면 Three.js가 화면에 그려 줍니다.

@remotion/three: 3D를 동영상에 넣기

Remotion 팀은 이를 위한 브리지 패키지를 별도로 만들었습니다. Three.js의 3D 장면을 Remotion의 동영상 타임라인과 동기화해 줍니다. 각 프레임에 렌더링된 결과가 그대로 MP4로 내보내집니다.

이 세 가지를 결합하면 AI에게 한마디만 해도 3D 애니메이션 동영상을 만들어 줍니다.

2. 무엇을 준비해야 할까? 5분이면 충분합니다

필요한 것은 매우 간단합니다.

1. Node.js 설치

nodejs.org에서 다운로드한 뒤 "다음"을 계속 클릭하면 됩니다. Remotion을 실행하기 위한 기본 환경입니다.

2. Remotion 프로젝트 생성

터미널을 열고(Windows에서는 "명령 프롬프트" 또는 PowerShell) 다음을 입력합니다.

npx create-video@latest

프로젝트 이름을 묻고 기본 템플릿을 선택하게 됩니다. 1분이면 끝납니다.

3. Remotion Skill과 3D 지원 설치

npx skills add remotion-dev/skills 

npm i three @react-three/fiber @remotion/three @types/three

두 줄의 명령어를 복사해 붙여넣고 Enter를 누르면 됩니다. 이후 Claude Code에서 Remotion과 관련된 말을 하면 AI가 자동으로 "3D 애니메이션 도우미" 모드를 활성화합니다.

4. 미리보기 실행

npx remotion studio

브라우저 창이 자동으로 열립니다. 이제 생성하는 모든 3D 장면이 이 창에 실시간으로 표시됩니다.

3. 진짜 문제: 머릿속 장면을 어떻게 "말로" 표현할까?

환경을 구축하는 데는 5분밖에 걸리지 않습니다. 진짜 어려운 부분은 여기서 시작됩니다. AI에게 "멋진 3D 애니메이션을 만들고 싶어"라고 말했을 때, AI의 이해와 여러분이 머릿속으로 그린 장면 사이에는 큰 간극이 있습니다.

문자는 본질적으로 3D를 전달하는 수단이 아닙니다. 여러분의 잘못이 아닙니다.

아래의 네 가지 방법이 이 간극을 뛰어넘는 데 도움을 줍니다. 기술적 배경지식은 필요하지 않습니다. 필요한 것은 소통 능력입니다.

방법 1: 참고 이미지 던지기(가장 효과적)

원하는 결과와 비슷한 이미지를 찾아보세요. 콘셉트 디자인, 영화 스크린샷, 다른 사람의 작품 스크린샷 모두 괜찮습니다. 이미지를 Claude Code 대화창으로 바로 끌어다 놓으세요.

"Remotion + Three.js로 이런 느낌을 만들어 줘. 금색은 파란색으로 바꾸고, 구체 표면은 조금 더 매끄럽게 해 줘."

이미지 한 장만으로도 금속 질감의 반사 정도, 입자 밀도, 빛의 강도, 색감, 구도의 중심 등 많은 정보를 순간적으로 전달할 수 있습니다. 이런 내용은 글로 수백 자를 써도 명확하게 설명하기 어렵습니다.

방법 2: 여러 차례에 나누어 반복하고, 한 번에 모두 말하지 않기

초보자가 가장 자주 하는 실수는 모든 요구 사항을 하나의 프롬프트에 넣는 것입니다. 결과는 대개 전체적인 붕괴로 이어집니다.

올바른 방법은 매 차례 한 가지 요소만 조정하는 것입니다.

첫 번째 문장: "구체를 하나 만들고 Y축을 중심으로 천천히 회전하게 해 줘."  (Studio에서 구체가 회전하는 것을 확인 → 계속.)  두 번째 문장: "구체를 투명한 유리 질감으로 바꿔 줘. 왼쪽 위에서 빛이 들어오도록 광원을 추가해 줘."  (유리 구체가 완성됨 → 계속.)  세 번째 문장: "주변에 별 고리처럼 구체를 둘러싸는 작은 입자들을 추가해 줘. 빛나게 해 줘."  네 번째 문장: "처음 2초 동안 입자가 천천히 나타나고, 중간 1초 동안 갑자기 빨라졌다가, 마지막에는 흩어지게 해 줘."

네 차례의 대화에 걸린 시간은 총 10분입니다. 단계마다 결과를 바로 확인할 수 있어 어느 단계에서 문제가 생겼는지도 즉시 알 수 있습니다. 완벽한 설명을 한 번에 짜내고 버그를 반나절 동안 수정하는 것보다 훨씬 빠릅니다.

방법 3: 효과 키워드 빠른 참고표

3D 소프트웨어나 셰이더 언어를 배울 필요는 없습니다. 하지만 몇 가지 "효과 키워드"를 익히면 소통 효율을 세 배로 높일 수 있습니다.

• 원하는 느낌｜이렇게 말하면 됩니다

• 금속성, 반사, 날카로운 하이라이트｜"금속 질감으로 만들고 표면을 아주 매끄럽게 해 줘"

• 유리, 투명, 굴절｜"유리 구체 같은 느낌으로 만들고 빛이 통과할 때 굴절되게 해 줘"

• 네온사인처럼 빛나기｜"네온사인처럼 빛나는 효과를 추가해 줘"

• 별가루, 입자들이 흩날리기｜"주변에 우주 속 먼지처럼 입자를 추가해 줘"

• 빛의 잔상｜"움직이는 궤적에 빛의 잔상 효과를 추가해 줘"

• 표면이 흐르고 변형되기｜"표면에 물처럼 물결치는 움직임을 넣어 줘"

• 복슬복슬함, 무광｜"서리 낀 듯한 무광 질감으로 만들어 줘"

• 배경 흐림, 피사계 심도｜"배경을 약간 흐리게 해서 앞쪽 물체를 강조해 줘"

• 어두운 스포트라이트 분위기｜"스포트라이트를 위에서 비추고 주변 환경은 조금 어둡게 해 줘"

• 카툰 플랫 스타일｜"카툰 렌더링 느낌으로 만들어 줘"

meshPhysicalMaterial이나 transmission 같은 용어를 말할 필요는 없습니다. "투명한 유리 구체"라고만 말하면 AI가 어떻게 만들지 알고 있습니다.

방법 4: AI가 반대로 질문하게 하기

아무런 아이디어가 없다면 이렇게 말해 보세요.

"Remotion + Three.js로 3D 장면을 만들고 싶은데 어떤 매개변수를 써야 할지 모르겠어. 먼저 몇 가지 질문을 해 줘. 내가 객관식으로 선택할게."

AI가 물어볼 것입니다. 물체는 몇 개인가요? 광원은 따뜻한 색인가요, 차가운 색인가요? 빠른 템포인가요, 느긋한 템포인가요? 어떤 재질 느낌을 원하나요? 빈칸을 채우는 것보다 객관식에서 고르는 것이 항상 더 쉽습니다.

4. 3D 애니메이션 프롬프트 템플릿—그대로 복사하세요

아래 프롬프트는 실제로 검증된 것입니다. 복사한 뒤 몇 글자만 바꾸면 바로 사용할 수 있습니다. 각 항목에는 적합한 장면도 표시했습니다.

템플릿 1: 제품 전시 스타일(가장 간단함)

Remotion + Three.js로 제품 전시 애니메이션을 만들어 줘.  화면 정중앙에 [물체 예: 휴대폰/시계/구체] 하나를 배치하고, 재질은 [재질: 금속/유리/무광], 색상은 [색상]으로 해 줘. Y축을 중심으로 천천히 회전하게 해 줘. 너무 빠르지 않고 우아한 속도로 해 줘. 왼쪽 위에서 점광원이 비추어 부드러운 그림자가 생기게 해 줘. 배경은 단색으로 하고 [배경색]으로 해 줘. 전체 애니메이션은 [길이 예: 6초] 동안 지속되게 해 줘.

적합한 용도: 로고 전시, 제품 외관, 브랜드 애니메이션.

템플릿 2: 입자 우주 스타일

Remotion + Three.js로 입자 장면을 만들어 줘.  화면 중앙에 [물체]를 배치하고, 주변에는 아주 작은 빛나는 입자들이 물체를 둘러싸게 해 줘. 입자의 색상은 [색상]으로 하고, 나선형 궤도를 따라 중앙의 물체에 천천히 다가오게 해 줘. 배경은 어두운 우주 느낌으로 해 줘. 약간의 글로우 효과도 추가해 줘. [길이 예: 8초] 동안 지속되게 해 줘.

적합한 용도: 미래적인 오프닝, 데이터 시각화, 발표회 배경.

템플릿 3: 빛과 재질 스타일

Remotion + Three.js로 빛과 재질을 보여 주는 장면을 만들어 줘.  [기하 도형: 구체/큐브/토러스] 하나를 [재질]로 만들고, [재질 효과: 투명 굴절/금속 반사/네온 발광]을 적용해 줘. 한 줄기 빛이 왼쪽에서 오른쪽으로 표면을 쓸고 지나가게 해 줘. 빛의 [색상]이 물체 표면에 [효과]를 만들어 내게 해 줘. 카메라는 물체 주위를 천천히 돌면서 재질의 디테일을 보여 줘. [길이] 동안 지속되게 해 줘.

적합한 용도: 재질 연구, 디자인 영감, 콘셉트 전시.

템플릿 4: 텍스트를 3D로 만들기

텍스트를 3D 효과로 만들어 줘.  텍스트 내용은 [원하는 텍스트]로 하고, 3D 글꼴로 렌더링해 두께가 확실히 보이게 해 줘. 텍스트가 관객을 향해 떠오르게 하고, [효과: 발광/금속/유리]를 약간 추가해 줘. 배경은 [단색/그라데이션/별이 빛나는 하늘]로 해 줘. [길이] 동안 지속되게 해 줘.

적합한 용도: 제목 애니메이션, 포스터, 소셜 미디어 카드.

템플릿 5: 추상 기하학 아트

추상적인 기하학 애니메이션을 만들어 줘.  여러 [기하 도형 유형]을 공간에 무작위로 배치하고, 각각의 크기와 회전 각도를 다르게 해 줘. 재질은 [통일된 재질 스타일]로 하고, 색상 구성은 [색상 1] + [색상 2] + [색상 3]으로 해 줘. 모든 물체가 천천히 [움직임: 부유/회전/맥동]하게 해서 역동적인 조각 작품처럼 보이게 해 줘. 부드러운 조명과 약간의 피사계 심도 효과도 추가해 줘. [길이] 동안 지속되게 해 줘.

적합한 용도: 예술 창작, 배경화면, 콘셉트 영상.

이런 "양념"도 추가할 수 있습니다

어떤 템플릿 뒤에든 다음의 짧은 문구를 추가해 효과를 정밀하게 조절할 수 있습니다.

• 이 문장을 추가하세요｜효과

• "약한 Bloom 후처리를 한 겹 추가해 줘"｜빛나는 물체에 빛 번짐이 생겨 더욱 몽환적으로 보임

• "카메라가 물체 주위를 천천히 돌게 해 줘"｜고정된 시점보다 카메라 움직임이 있어 영화적인 느낌을 줌

• "배경을 단색 대신 그라데이션으로 해 줘"｜단조로움을 피함

• "피사계 심도 효과를 추가하고 배경을 약간 흐리게 해 줘"｜주요 대상이 더 돋보임

• "애니메이션 시작 부분에 ease-in을 넣고 끝부분에 ease-out을 넣어 줘"｜리듬이 더 자연스럽고 갑작스럽지 않음

• "3초에서 5초 사이에 물체가 커졌다가 다시 작아지게 해 줘"｜애니메이션에 "호흡"하는 리듬을 더함

5. 프롬프트부터 스크린샷까지—전체 작업 흐름

좋습니다. 이제 프롬프트를 하나 작성했거나 위 템플릿에서 하나를 골랐습니다. 다음에는 어떻게 하면 될까요?

Step 1: Claude Code에 프롬프트 보내기

Remotion 프로젝트 디렉터리를 열고 Claude Code에 프롬프트를 붙여넣습니다. Remotion Skill이 설치되어 있다면 Claude가 자동으로 "애니메이션 모드"로 전환합니다.

Step 2: 미리보기

AI가 코드를 생성한 뒤 다음을 실행합니다.

npx remotion studio

브라우저에 실시간 미리보기가 나타납니다. 타임라인을 드래그하면 각 프레임의 결과를 확인할 수 있습니다.

Step 3: 반복 수정

미리보기를 보면서 마음에 들지 않는 부분을 AI에게 알려 주세요.

"배경이 너무 어두워. 조금 밝게 조정해 줘." "입자가 너무 많아. 절반으로 줄여 줘." "회전 속도가 너무 빨라. 30% 느리게 해 줘."

수정할 때마다 Studio가 자동으로 새로 고칩니다. 만족할 때까지 반복해서 조정하세요.

Step 4: 스크린샷

조정이 끝났다면 스크린샷을 찍습니다.

방법 A——단일 프레임 캡처(추천, 가장 빠름):

npx remotion still <컴포넌트명> 출력 파일명.png --frame=프레임 번호

예를 들어 3초 시점(60fps에서는 180번째 프레임)의 화면을 캡처하려면:

npx remotion still My3DScene screenshot.png --frame=180

몇 초만 기다리면 1080p 스크린샷이 완성됩니다. 프레임 번호를 바꿔서 다시 캡처할 수도 있습니다. 이런 "단일 프레임 캡처"는 전체 영상을 렌더링하는 것보다 훨씬 빠릅니다.

방법 B——전체 영상을 내보낸 다음 프레임 캡처:

npx remotion render My3DScene out.mp4

렌더링이 끝나면 아무 플레이어에서나 일시 정지한 뒤 스크린샷을 찍으세요. 느리지만 완성도는 높습니다. 여러 장의 연속 스크린샷이 필요할 때 적합합니다.

방법 C——Studio에서 바로 스크린샷:

Studio 미리보기 창에서 원하는 프레임으로 이동한 뒤, 마우스 오른쪽 버튼을 클릭 → 스크린샷 저장을 선택하세요. 가장 직관적이며 명령줄이 전혀 필요하지 않습니다.

Step 5: 공식 계정 / 소셜 미디어에 사용

캡처한 이미지는 표준 PNG 형식이며 1080p 해상도입니다. 공식 계정 편집기에 바로 끌어다 놓거나 친구들에게 공유하면 됩니다.

여러 장의 이미지가 필요하다면 프롬프트의 매개변수(색상/재질/각도)를 바꾸고 Step 1~4를 반복하세요. 다섯 가지 변형을 10분이면 완성할 수 있습니다.

6. 솔직히 말해 이 방식으로 할 수 없는 것

앞에서는 이 방식으로 할 수 있는 일을 설명했습니다. 이제는 할 수 없는 일과 언제 이 방식을 포기하고 다른 도구로 바꿔야 하는지 이야기해 보겠습니다.

WebGL의 본질적인 한계

WebGL은 브라우저에서 실행됩니다. 브라우저는 전문 3D 렌더러가 아니라, 기본적으로 웹 엔진이 GPU 파이프라인을 흉내 내는 구조입니다. 이는 다음을 의미합니다.

화질에는 한계가 있습니다. Blender의 Cycles 레이 트레이싱, Octane의 스펙트럼 렌더링은 WebGL로 구현할 수 없습니다. 진정한 전역 조명이나 레이 트레이싱이 없고, 재질도 단순화된 버전입니다. 화면은 "깔끔"하지만 동시에 "가짜"처럼 보이며, 실제 렌더러의 섬세한 간접 조명과 재질 디테일이 부족합니다.

장면의 복잡도가 제한됩니다. 수만 개의 삼각형까지는 부드럽게 실행되지만, 백만 개를 넘으면 프레임이 떨어지기 시작합니다. 파티클이 만 개를 넘으면 버벅이기 시작합니다. 반면 전문 3D 소프트웨어에서는 캐릭터 모델 하나에 수백만 개의 면이 들어가는 것이 일반적입니다.

물리 시뮬레이션이 없습니다. 천의 움직임, 유체의 튀김, 강체 충돌은 Blender에서는 몇 번 클릭하면 되지만 WebGL에서는 직접 처음부터 구축해야 하며, 그렇게 만들어도 단순화된 버전일 뿐입니다.

렌더링이 느립니다. 복잡한 3D 장면으로 30초 분량을 렌더링하는 데 몇 시간이 걸릴 수 있습니다. 같은 장면을 Blender에서 GPU로 렌더링하면 몇 분이면 끝날 수도 있습니다.

WebGPU는 아직 발전 중입니다

WebGPU는 WebGL보다 빠른 차세대 표준입니다. 하지만 2025년 중반부터 브라우저에서 초기 지원이 시작되었을 뿐입니다. Firefox와 Safari는 아직 따라잡는 중이고, Three.js의 WebGPU 지원도 여전히 실험적이며 API가 바뀔 가능성이 있습니다. 지금 실제 프로젝트에 사용하는 것은 도박에 가깝습니다.

AI가 작성한 코드에도 함정이 있습니다

한 문장으로 3D 애니메이션을 만드는 일은 정말 놀랍지만, AI가 생성한 코드가 "보기에는 맞지만 실행하면 틀리는" 경우도 적지 않습니다.

• 간단한 장면(하나의 물체, 하나의 광원, 회전 애니메이션): 80%는 한 번에 실행됨

• 중간 정도의 복잡도(여러 물체, 여러 재질, 파티클 시스템): 버그를 2~3번 수정해야 함

• 복잡한 장면(커스텀 셰이더, 후처리 파이프라인): AI가 생성한 코드는 대부분 사용할 수 없음

언제 도구를 바꿔야 할까요?

• 요구 사항｜사용해야 할 도구

• 로고 / 제품 / 데이터 시각화 애니메이션 제작｜Remotion + Three.js ✅

• 콘셉트 이미지, 소셜 미디어용 이미지 제작｜Remotion + Three.js ✅

• 캐릭터와 장면이 있는 단편 영상 제작｜Blender

• 사진과 같은 사실감을 추구｜Unreal Engine / Blender Cycles

• 렌더링 속도가 절대적으로 중요｜Blender GPU 렌더링

간단히 말해 Remotion + Three.js는 "멋진 화면을 빠르게 만들어 내는 도구"이지, "영화급 렌더링 엔진"은 아닙니다. 스크린샷을 찍고, 콘셉트를 만들고, 비주얼을 탐색하는 데 사용하세요. 매우 빠르고 가볍습니다. 하지만 이것으로 《듄》의 VFX를 만들 수 있다고 기대해서는 안 됩니다.

7. 최고의 자료를 한곳에

Remotion 관련

• 자료｜설명

• 공식 문서｜매우 잘 작성되어 있으므로 우선 여기서 시작하세요

• remotion-template-three｜바로 사용할 수 있는 공식 3D 입문 템플릿

• Remotion Workshop｜창립자가 직접 진행하는 52분 무료 튜토리얼

• Make Video With Code｜1.5시간 무료 실습 강좌

• ByteGrad: Remotion + Claude Code｜AI를 활용해 Remotion을 작성하는 실습 데모

• Claude-Code-Video-Toolkit｜컴포넌트 + 전환 효과 + 테마 시스템을 포함한 완성형 툴킷

• remotion-best-practices 3D 가이드｜3D에서 겪기 쉬운 문제를 총정리한 실전 안내서

Three.js / WebGL

• 자료｜설명

• Three.js 공식 문서｜실행 가능한 예제 300개 이상

• WebGL2 & GLSL Primer｜GLSL을 기초부터 마스터하고 원리를 체계적으로 익히기

• Three.js Bootcamp｜3D 게임 프로젝트를 포함한 20시간 강좌(2026.6 업데이트)

• Three.js Journey｜Bruno Simon의 클래식 강좌

• WebGL+Three.js 입문 및 실전｜18장으로 구성된 중국어 체계적 강좌

오픈 소스 프로젝트——직접 배우기

• 프로젝트｜추천 이유

• aimees-papercraft-world.com｜소스 코드와 Blender 모델이 모두 공개되어 있어 최고의 학습 자료

• card-3d-animation｜Remotion + 3D의 최소 예제, 처음 시작하기에 적합

• iMoss｜50만 개의 풀잎 + 커스텀 셰이더로 놀라운 효과 구현

• siri-glsl｜셰이더만으로 Apple 디자인 언어 재현

영감을 얻을 수 있는 웹사이트——한계가 어디인지 확인하기

• 작품｜키워드

• bruno-simon.com｜Three.js 인터랙티브 작품의 업계 기준

• samsy.ninja｜WebGPU 사이버펑크

• jordan-breton.com｜3D 플로팅 아일랜드, FWA Site of the Day

• bilal.show｜스크롤 기반 3D 내러티브

정리

방금 읽은 글을 한 문장으로 요약하면 다음과 같습니다.

과거에는 3D 애니메이션을 만들려면 Blender, 렌더링, 프로그래밍을 배워야 했습니다. 이제는 Node.js 하나와 프롬프트 한 문장, 참고 이미지 한 장만 있으면 됩니다.

먼저 마음에 드는 3D 참고 이미지를 찾고, 템플릿에서 프롬프트 한 문장을 골라 조금 수정한 뒤 Claude Code에 전달하세요. Studio에서 결과를 확인하고 스크린샷을 저장하면 됩니다. 10분 후면 자신이 "말로 만들어 낸" 3D 화면을 하나 갖게 됩니다.