CSS만으로 만든 애니메이션: div 요소 10개, CSS 약 40줄, JavaScript는 없어요. 30초짜리 끊김 없는 루프. AI와 대화 한 번으로 만들었어요.

프레임워크도, 라이브러리도 아니에요. 수십 년 동안 모든 브라우저에 들어 있던 평범한 HTML과 CSS예요. CSS 사용자 지정 속성 하나(--i)를 calc() 식에 넣어서, 애니메이션 규칙 하나로 열 가지 속도를 만들어 내요. 기법은 AI가 찾아냈고, 사람은 보고 싶은 걸 설명했을 뿐이에요.

p5.js나 Three.js 같은 도구를 살펴보기 전에 이 점을 기억해 두세요. 아주 적은 코드로도 많은 걸 할 수 있어요.

텍스트-투-비디오 너머: AI에게 영상을 만드는 코드를 맡기기

지난 글 AI로 공연 영상 만들기에서는 Sora, Veo, Runway처럼 글로 쓴 프롬프트로 영상 클립을 생성하는 텍스트-투-비디오 도구를 살펴봤어요. 몽환적인 풍경, 추상적인 액체 세계, 우주를 가로지르는 비행처럼 영화 같고 사실적인 콘텐츠를 만들기에 훌륭한 도구예요. 그런데 그만큼 강력하고 어쩌면 더 재미있는 방법이 하나 더 있어요. AI에게 영상을 만들어 내는 코드를 쓰게 하는 거예요.

코딩을 몰라도 돼요. 그 부분은 AI가 맡아요. 무엇을 보고 싶은지만 알면 돼요. 이런 방식을 “바이브 코딩”이라고 부르기도 해요. 머릿속 그림을 평범한 말로 설명하고 구현은 AI에게 맡기는 거죠. AI 도구의 가장 인기 있는 활용법 중 하나가 됐는데, 알고 보니 영상 만들기에 딱 맞아요.

영상을 설명하고 AI가 렌더링하기를 기다리는 대신, 대화로 애니메이션을 설명하면 AI가 그걸 그려 내는 프로그램을 작성해요. 브라우저 안에서, 실시간으로요. 결과물은 알고리즘적이고 기하학적이며 얼마든지 바꿀 수 있어요. 맥동하는 격자, 소용돌이치는 파티클, 모양이 바뀌는 도형, 제너레이티브 패턴, 옵아트 스타일의 착시를 떠올려 보세요. AI와 함께하는 크리에이티브 코딩이고, 저희 Op Art 비디오 팩도 이렇게 만들었어요.

왜 AI가 생성한 코드로 영상을 만들까요?

도구를 살펴보기 전에, 텍스트-투-비디오 대신 이 방식을 고를 만한 이유부터 짚어 볼게요.

완벽한 루프. 코드 기반 애니메이션은 처음부터 끊김 없이 반복되도록 설계할 수 있어요. 크로스페이드 꼼수도 필요 없어요. 수학이 알아서 맞춰 줘요.
무한한 변형. 색, 속도, 모양, 파라미터 하나만 바꿔도 완전히 다른 영상이 나와요. 프롬프트 하나에서 개성 있는 루프가 수십 개씩 나오기도 해요.
중독성이 있어요. 진짜예요. “이제 소용돌이치게 해 줘”라고 말하고 AI가 실시간으로 코드를 고치는 걸 보기 시작하면 오후 한나절이 금방 사라져요.

코드 생성 vs. 텍스트-투-비디오 AI: 언제 무엇을 쓸까

AI 생성 영상에 관한 지난 글을 읽었다면 언제 어느 방식을 써야 할지 궁금할 거예요. 간단히 비교해 볼게요.

텍스트-투-비디오 AI (Sora, Runway, Veo)

AI 코드 생성 (이 글)

잘 맞는 용도

영화 같고 유기적이며 사실적인 이미지

기하학적, 알고리즘적, 패턴 기반 영상

루프

편집 기술이나 별도 도구가 필요

설계부터 수학적으로 끊김 없음

수정

매번 처음부터 다시 생성

파라미터 하나만 바꾸면 새 변형 완성

파일 크기

큼 (복잡한 영상 데이터)

작음 (깔끔하고 압축이 잘 되는 움직임)

준비물

클라우드 서비스 계정 + 크레딧

브라우저에서 쓰는 무료 AI 챗봇

스타일

몽환적, 초현실적, 사진 같은 느낌

정밀함, 기하학, 옵아트

영상 코드를 짜 주는 AI 도구

주요 AI 챗봇에는 이제 코드를 실시간으로 미리 보는 기능이 있어요. 바이브 코딩을 가능하게 하는 도구죠. 원하는 걸 입력하면 HTML, CSS, JavaScript를 만들어 주고, 돌아가는 모습을 바로 볼 수 있어요. 어떤 도구가 있는지 살펴볼게요.

Claude (Artifacts)

Anthropic의 Claude에는 대화 옆에 사이드 패널을 여는 Artifacts라는 기능이 있어요. Claude에게 영상 코드를 부탁하면 결과를 그 자리에서 렌더링해서, 코드 옆에서 직접 조작해 볼 수 있는 실시간 미리보기를 보여 줘요. “색을 더 따뜻하게”, “회전을 느리게”, “파티클을 더 많이”처럼 수정을 요청하면 미리보기가 바로 바뀌어요.

Claude는 깔끔하고 구조가 잘 잡힌 코드를 쓰는 편이고, 크리에이티브 코딩 프롬프트를 특히 잘 다뤄요. p5.js, Three.js, Canvas API, CSS 애니메이션과 잘 맞고, 모두 HTML 파일 하나 안에서 CDN 링크로 불러와요.

무료와 유료 요금제 모두 Artifacts를 지원해요. claude.ai에서 쓸 수 있어요.

ChatGPT (Canvas)

OpenAI의 ChatGPT에는 Canvas가 있어요. HTML과 JavaScript를 실시간으로 렌더링하는 비슷한 사이드 패널 작업 공간이에요. p5.js 스케치, Three.js 장면, 순수 JavaScript 애니메이션을 만들어 달라고 하면 Canvas가 결과를 실시간으로 보여 줘요. Claude와 마찬가지로 대화하면서 다듬어 가면 돼요.

Canvas는 샌드박스 환경에서 돌아가고 CDN으로 외부 라이브러리를 불러올 수 있어요. ChatGPT 무료와 유료 요금제 모두 포함돼 있지만, 유료 사용자는 복잡한 코드 생성에 더 뛰어난 모델을 쓸 수 있어요. chatgpt.com에서 쓸 수 있어요.

Google Gemini (Canvas & AI Studio)

Google의 Gemini에도 사이드 패널에서 코드를 생성하고 미리 보여 주는 Canvas 기능이 있어요. Claude Artifacts나 ChatGPT Canvas와 비슷한 기능이에요. 모든 Gemini 사용자가 무료로 쓸 수 있고, HTML, CSS, JavaScript를 실시간 미리보기로 지원해요.

더 큰 작업을 하고 싶다면 Google AI Studio의 “Build Mode”가 있어요. 자연어 설명만으로 완성된 웹 앱을 만들고, 실시간 미리보기와 원클릭 배포까지 지원해요. 간단한 애니메이션 루프에는 과하지만, 인터랙티브한 영상 악기나 제너레이티브 아트 갤러리를 만들고 싶다면 한번 살펴볼 만해요. gemini.google.com과 aistudio.google.com에서 쓸 수 있어요.

그 밖의 선택지

더 본격적인 작업을 원한다면 Cursor와 Windsurf 같은 AI 코드 편집기가 AI를 내장한 완전한 개발 환경을 제공해요. v0, Bolt.new, p5js.ai 같은 웹 기반 도구도 실시간 미리보기와 함께 영상 코드를 만들어 줘요.

크리에이티브 코딩 라이브러리: p5.js, Three.js 등

깊이 이해할 필요는 없어요. 코드는 AI가 써 줘요. 다만 무엇을 요청하면 되는지 알아 두면 도움이 돼요.

순수 HTML & CSS: 브라우저 자체의 애니메이션 기능을 얕보지 마세요. 위의 예제도 이걸로 만들었어요. CSS @keyframes, 사용자 지정 속성, calc()만으로도 JavaScript 없이 복잡한 기하학 애니메이션을 만들 수 있어요. 라이브러리를 찾기 전에 AI에게 “CSS만으로 만든 애니메이션”부터 요청해 보세요. 라이브러리가 필요 없을 수도 있어요.
p5.js: 웹 크리에이티브 코딩의 대표 라이브러리예요. 원래 아티스트와 디자이너를 위해 만들어졌고, 파티클 시스템, 플로 필드, 기하학 패턴, 노이즈 기반 영상 같은 2D 제너레이티브 아트에 딱이에요. 잘 모르겠다면 AI에게 p5.js 스케치를 요청하세요. 아름다운 결과물로 가는 가장 쉬운 길이에요.
Three.js: 웹 3D의 표준이에요. 회전하는 3D 오브젝트, 볼류메트릭 조명, 카메라 플라이스루처럼 깊이감이 있는 걸 원한다면 Three.js를 요청하세요. 모든 AI 챗봇 샌드박스에서 CDN으로 불러와 쓸 수 있어요.
그 밖의 선택지: 브라우저에 내장된 Canvas API와 CSS/SVG 애니메이션은 라이브러리 없이 동작해요. GSAP는 타임라인 기반 시퀀싱에 좋아요. GPU 가속을 쓰는 고급 효과(Shadertoy를 떠올려 보세요)를 원한다면 AI에게 GLSL 프래그먼트 셰이더를 요청하세요. 코드는 더 복잡하지만 결과물은 놀라워요.

시작하기: 첫 AI 생성 영상 루프 만들기

실제로 따라 해 볼게요. 앞에서 소개한 AI 챗봇 중 아무거나 열고 이런 프롬프트를 입력해 보세요.

천천히 맥동하며 회전하는 동심원 p5.js 스케치를 만들어 줘. 어두운 배경에 밝고 채도 높은 색을 쓰고, 끊김 없이 루프되게 해 줘.

몇 초 만에 애니메이션 실시간 미리보기가 나와요. 여기서부터 다듬어 가면 돼요.

“원을 더 가늘게 하고 개수를 늘려 줘”
“딥 퍼플, 일렉트릭 블루, 핫 핑크 색상 팔레트를 써 줘”
“회전에 살짝 흔들림을 넣어 줘”
“조금만 더 빠르게 해 줘”
“이번엔 원 대신 사각형으로 변형을 만들어 줘”

수정 하나에 몇 초면 충분해요. 15분이면 개성 있는 루프를 열두 개쯤 만들 수 있어요.

사전 지시문: AI를 제대로 준비시키기

AI 챗봇은 범용 도구예요. 그냥 두면 캔버스를 작게 만들거나, 필요 없는 UI 컨트롤을 넣거나, 깔끔하게 루프되지 않는 애니메이션을 만들 수도 있어요. 첫 프롬프트 앞에 원하는 결과물이 어떤 건지 알려 주는 몇 줄을 넣어 두면 이런 문제는 대부분 피할 수 있어요.

영상 생성 대화를 시작할 때 붙여 넣을 수 있는 사전 지시문이에요.

라이브 공연용 루프 영상 애니메이션을 만들고 싶어. 모든 영상은 다음 규칙을 따라 줘.

HTML 파일 하나에 p5.js를 CDN으로 불러와서 사용

캔버스가 브라우저 창 전체를 채우고 창 크기에 맞춰 반응형으로 조절되게

어둡거나 검은 배경 사용

모든 움직임은 프레임 수 계산이 아니라 시간 기반 수학(sin, cos, modulo)으로 끊김 없이 루프되게

UI 컨트롤, 텍스트 오버레이, 버튼, 슬라이더는 넣지 말고 영상만

60fps로 부드럽게 유지

따로 말하지 않으면 강렬하고 채도 높은 색 사용

그다음부터는 대화 속 프롬프트를 짧고 창의적으로 써도 돼요. 원하는 형식은 AI가 이미 알고 있으니까요. “무지개 꼬리를 그리며 소용돌이치는 육각형”이라고만 말하면 전체 화면에, 루프되고, 바로 녹화할 수 있는 결과물이 그대로 나와요.

사전 지시문은 취향대로 고쳐 쓰세요. p5.js 대신 Three.js를 쓰고 싶다면 바꾸면 돼요. 흰 배경이 좋다면 그 줄을 고치면 되고요. 핵심은 규칙을 한 번 정해 두고 매번 반복하지 않는 거예요.

팁: Claude를 쓴다면 이 사전 지시문을 “프로젝트” 지침으로 저장해 두세요. 모든 대화에 자동으로 포함돼요. ChatGPT에도 설정에 비슷한 “맞춤형 지침” 기능이 있어요. 이렇게 해 두면 새 채팅을 열자마자 바로 영상 프롬프트를 입력할 수 있어요.

AI 크리에이티브 코딩 프롬프트 팁

기술적인 설정은 사전 지시문이 맡으니, 창작 프롬프트는 보고 싶은 것에만 집중하면 돼요.

모양만 말고 움직임을 설명하세요. “회전하는 육각형”도 괜찮아요. “천천히 회전하면서 숨 쉬듯 커졌다 작아지고, 잔상이 남는 육각형”이 훨씬 좋아요.
분위기를 말하세요. “최면적인”, “미니멀한”, “사이키델릭한”, “차분한”, “공격적인” 같은 단어가 색, 속도, 복잡도를 결정해 줘요.
실제 사물에 빗대세요. “만화경처럼”, “현미경으로 본 세포처럼”, “창문에 떨어지는 빗방울처럼” 같은 비유는 추상적인 설명보다 AI에게 훨씬 분명한 시각적 목표를 줘요.
색상 팔레트를 지정하세요. 지정하지 않으면 AI가 색을 고르지만 대개 뻔해요. “검은 배경에 시안과 마젠타만” 또는 “따뜻한 노을 톤”처럼 말하면 개성 있는 결과가 나와요.
조금씩 다듬으세요. 완벽한 영상을 프롬프트 하나로 설명하려 하지 마세요. 단순하게 시작해서 다듬어 가는 편이 더 빠르고 재미있어요.
변형을 요청하세요. 마음에 드는 게 나오면 “색상 팔레트를 바꿔서 변형 3개 만들어 줘”나 “더 미니멀한 버전으로 만들어 줘”라고 해 보세요. 영상 라이브러리를 가장 빨리 늘리는 방법 중 하나예요.
대화 중간에 기술을 바꿔 보세요. p5.js 스케치로 원하는 느낌이 안 나면 “이 콘셉트를 3D 원근감이 있는 Three.js로 다시 만들어 줘”라고 해 보세요. 렌더링 방식을 바꾸면 결과가 확 달라지기도 해요.

바로 써 보는 프롬프트

어디서 시작할지 모르겠다면, 꾸준히 좋은 결과를 내는 프롬프트를 모아 봤어요. 사전 지시문을 먼저 붙여 넣고 아래 중 아무거나 써 보세요.

옵아트 & 기하학

“검은색과 흰색 조각이 번갈아 있는 동심원 고리가 회전하면서 모아레 간섭 무늬를 만들어 내게 해 줘”
“동심 다각형이 번갈아 커졌다 작아지고, 각각 바로 옆 다각형과 위상이 살짝 어긋나게 해 줘”

파티클 & 흐름

“작은 파티클 수백 개가 산들바람에 날리는 연기처럼 보이지 않는 곡선을 따라 흐르게 해 줘. 파티클은 서서히 나타났다 사라져야 해.”
“우주를 날아가는 것처럼 천천히 앞으로 흘러가는 별 무리. 별마다 크기와 밝기가 달라야 해.”

유기적 & 자연

“초록과 보라 색조가 변하면서 오로라처럼 화면을 가로질러 흐르는 겹친 사인파”
“잔잔한 물에 떨어지는 빗방울처럼 무작위 지점에서 바깥으로 퍼져 나가는 동심원 물결”

3D & 원근감 (이 프롬프트는 Three.js로 요청하세요)

“검은 배경 위에서 가장자리가 빛나며 천천히 회전하는 와이어프레임 토러스 매듭, Three.js로 렌더링”
“회전하는 기하학 도형으로 이뤄진 터널을 카메라가 천천히 통과하게 해 줘. Three.js.”

추상 & 사이키델릭

“부드러운 노이즈로 형태가 일렁이며 무지갯빛으로 색이 바뀌는 블롭”
“반투명한 도형 여러 겹이 흘러가며 겹치고, 겹치는 부분에서 새로운 색이 생기게 해 줘”

AI 생성 영상을 동영상 파일로 저장하는 법

브라우저에서 마음에 드는 걸 만들었다면, Visibox(또는 다른 어디서든)에서 쓸 수 있게 동영상 파일로 저장해야 해요. 방법은 여러 가지예요.

화면 녹화

가장 간단한 방법이에요. 브라우저에서 애니메이션을 전체 화면으로 띄우고(대부분의 브라우저에서 F11) 화면을 녹화하세요.

Mac: 빠르게 녹화하려면 내장 화면 기록(Cmd+Shift+5)을, 프레임 레이트, 포맷, 인코딩까지 제대로 조절하려면 OBS Studio(무료)를 쓰세요.
Windows: 빠르게 녹화하려면 Xbox Game Bar(Win+G)를, 60fps와 포맷 옵션이 필요한 본격적인 작업에는 OBS Studio를 쓰세요.

브라우저 안에서 캡처하기 (고수의 방법)

화면 녹화 특유의 잡티 없이 픽셀 단위로 완벽한 결과물을 원한다면 브라우저의 canvas 요소에서 프레임을 직접 캡처할 수 있어요. 좀 더 기술적이지만 설정은 AI가 도와줄 수 있어요.

CCapture.js: 애니메이션 루프에 연결해서, 실제 렌더링 속도가 빠르든 느리든 모든 프레임을 고정된 프레임 레이트로 캡처하는 JavaScript 라이브러리예요. 복잡한 장면에서도 버터처럼 부드러운 결과물을 얻을 수 있어요. AI에게 이렇게 요청하세요. “이 스케치에 CCapture.js를 추가해서 60fps WebM 동영상으로 내보내게 해 줘.”
MediaRecorder API: canvas 요소의 출력을 직접 녹화할 수 있는 브라우저 내장 API예요. AI에게 이렇게 요청하세요. “이 canvas 애니메이션을 WebM 파일로 저장하는 녹화 버튼을 추가해 줘.”

깔끔하게 녹화하는 팁

재생 시스템이 지원한다면 60fps로 녹화하세요. 알고리즘 영상은 움직임이 부드러울수록 차이가 커요.
목표 해상도에 맞추세요. 1080p 프로젝터로 출력한다면 녹화 전에 브라우저 창 크기(또는 캔버스 크기)를 1920x1080으로 맞추세요.
필요한 것보다 길게 녹화하세요. 루프가 10초뿐이라도 30~60초를 녹화하세요. 영상 편집기에서 잘라 내며 가장 깔끔한 구간을 고를 수 있어요.
녹화하는 동안 프레임 드롭을 막으려면 다른 앱을 닫아 두세요.
최종 파일은 H.264로 인코딩하세요. 어디서나 호환되고, Visibox(와 대부분의 재생 소프트웨어)가 가장 잘 다루는 코덱이에요. OBS는 H.264/MP4로 바로 녹화할 수 있어요.

AI 생성 루프를 Visibox에서 쓰기

루프를 동영상 파일로 저장했다면 Visibox로 가져오는 건 쉬워요. 끌어다 놓기만 하면 돼요. 몇 가지만 기억해 두세요.

루프를 테스트하세요. Visibox에서 반복 재생을 켜고 이음매 부분을 지켜보세요. 코드로 만든 영상은 대개 AI 생성 동영상보다 깔끔하게 루프되지만, 그래도 확인해 볼 가치가 있어요.
Visibox 효과를 활용하세요. 저희 Op Art 비디오 팩에는 루프 24개가 들어 있지만, Visibox에 내장된 색상 필터, 뒤집기, 회전 효과를 더하면 수백 가지 변형이 돼요. AI로 만든 콘텐츠에도 같은 방법이 통해요.
라이브러리를 쌓으세요. 프롬프트 세션 한 번이면 개성 있는 루프가 몇 개씩 나와요. 시간이 지나면 온전히 나만의 영상 라이브러리가 생겨요.

마무리

이 방식의 가장 좋은 점은 “AI가 만들었다”기보다 “아주 빠른 조수와 함께 내가 디자인했다”는 느낌이 든다는 거예요. 무료 Op Art 비디오 팩을 내려받아 어떤 게 가능한지 확인한 다음, Claude, ChatGPT, Gemini를 열고 직접 만들어 보세요. 그리고 이 영상으로 공연할 준비가 되면 Visibox가 쉽게 만들어 줘요.

자주 묻는 질문

코딩을 알아야 하나요? 아니요. 그게 핵심이에요. 코드는 AI가 쓰고, 보고 싶은 건 평범한 말로 설명하면 돼요. 그러다 보면 (“p5.js”나 “Three.js”를 요청할 줄 아는 것처럼) 용어 몇 개는 자연스럽게 익히게 되지만, 코드를 직접 고칠 일은 없어요.

영상 코드를 만들기에 가장 좋은 AI 챗봇은 뭔가요? 세 가지 주요 챗봇인 Claude, ChatGPT, Gemini 모두 실시간 미리보기와 함께 영상 코드를 만들 수 있어요. Claude가 크리에이티브 코딩 결과물을 특히 깔끔하게 내는 편이지만, ChatGPT와 Gemini도 충분히 뛰어나요. 셋 다 써 보고 내 작업 방식에 맞는 걸 고르세요. 모두 무료로 시작할 수 있어요.

이 영상을 상업적으로 써도 되나요? 대체로 그래요. 이 AI 도구들이 만드는 코드는 독창적이고(기존 코드를 베끼지 않아요), 영상 결과물은 학습된 이미지가 아니라 수학 함수로 정해져요. 자세한 내용은 각 도구의 이용 약관을 확인하세요. 하지만 실제로는 결과물을 소유하고 공연, 비디오 팩 등 어디에든 쓸 수 있어요.

어떤 해상도로 녹화해야 하나요? 대부분의 라이브 공연 환경에서는 1080p(1920x1080)가 가장 적당해요. 이 해상도를 넘지 않는 프로젝터와 LED 월이 많고, 파일 크기도 부담이 없어요. 4K가 필요하다면 녹화 전에 캔버스 크기를 그에 맞게 설정하세요.

코딩 몰라도 된다: AI가 짠 코드로 루프 영상 만드는 법