Opus 5.5 코드 영상, 여기까지 왔습니다: 놀라운 사례 5개와 프롬프트
Opus 5.5 코드 영상의 프레임별 렌더링과 사운드 제작 원리를 설명합니다. 픽셀 마법사, UI 변형, 게임 역사, 댄스, AI 역사 다섯 사례와 각 사례의 설정을 유지한 복사 가능한 프롬프트를 담았습니다.
Opus 5.5로 영상을 만들 때는 애니메이션 코드를 작성합니다. 코드로 화면을 그리고 장면과 소리를 배치한 뒤 MP4로 렌더링합니다. 픽셀 마법사, 소프트웨어 UI 모션, 게임 발전사, 댄스 영상 연출도 이 방식으로 만들 수 있습니다.
원리: 프레임을 하나씩 그린 뒤 영상으로 합치기
코드로 그리는 플립북이라고 생각하면 이해하기 쉽습니다. 코드는 특정 시각에 어떤 요소가 있고, 어디에 있으며, 어떻게 변하는지 정합니다. 렌더링 도구가 이 화면을 순서대로 가져와 인코딩하면 영상이 됩니다.
웹페이지를 프레임별로 그리는 방식에서는 페이지에 render(t) 또는 seek(t)를 제공할 수 있습니다. 시간을 넣으면 해당 프레임을 그립니다. 예를 들어 30fps에서 n번째 프레임은 t = n / 30에 해당합니다. Playwright는 페이지를 열고 시간을 지정해 화면을 캡처하며, FFmpeg는 프레임 시퀀스와 음원을 MP4로 합칩니다. Remotion, HyperFrames 같은 프레임워크는 각각 시간이나 프레임을 제어하는 방식을 제공합니다.
화면은 시간을 기준으로 재현할 수 있어야 합니다. 무작위 효과는 시드를 고정하고 캡처 전에 글꼴 로딩을 기다립니다. 타이머에만 의존해 계속 진행되는 애니메이션은 피해야 합니다. 그렇지 않으면 특정 장면만 다시 렌더링할 때 다른 결과가 나올 수 있습니다.
소리도 코드로 만들 수 있습니다. Python의 numpy와 scipy로 음표와 드럼의 파형을 계산하고, 시간에 맞춰 겹쳐 음악과 효과음을 만듭니다. 기존 음악이 있다면 먼저 박자를 찾고 동작을 배치합니다. 내레이션은 음성 모델을 사용해 화면과 같은 시간축에 맞출 수 있습니다.
일곱 가지 코드와 어울리는 화면
| 방식 | 주요 용도 |
|---|---|
| JavaScript＋Canvas 2D | 픽셀, 2D 도형, 일러스트 |
| HTML／CSS／SVG | UI, 글자, 소프트웨어 제품 모션 |
| WebGL 셰이더 | 주사선, 입자 질감, 반사, 파티클 |
| Three.js | 3D 물체, 공간, 카메라 움직임 |
| p5.js＋p5.brush | 색연필, 수채화, 종이 위 붓 자국 |
| HyperFrames／Remotion | 타임라인, 장면, 전체 영상 렌더링 구성 |
| Manim | 수식, 기하, 수학 설명 |
여러 방식을 함께 사용할 수 있습니다. Canvas로 게임 화면을 그리고 셰이더로 오래된 TV 질감을 더한 뒤 Three.js로 3D 장면에 들어갈 수 있습니다. 실물을 정확하게 보여 주려면 기존 3D 모델을 제공할 수도 있습니다.
1. 픽셀 마법사: 작은 캔버스와 완결된 동작 루프
이 마법 애니메이션은 대기, 지팡이를 들어 힘 모으기, 마법 발사, 마무리 순서로 진행됩니다. 캐릭터를 먼저 128×96의 작은 캔버스에 그린 뒤 정수 배율로 확대합니다. 자세는 초당 약 8–12회 바꾸고 불꽃과 투사체는 프레임마다 움직여 픽셀 애니메이션 특유의 끊어지는 리듬을 남깁니다.
아래 프롬프트는 사례의 설정과 제작 제약을 유지하면서 간결하게 정리한 것으로, 그대로 복사해 사용할 수 있습니다.
외부 라이브러리, 이미지, 네트워크 소재를 쓰지 않는 독립형 HTML을 만들고, 기본 JavaScript와 Canvas 2D로 픽셀 마법사의 주문 시전을 표현해 주세요.
논리 캔버스는 128×96으로 하고 중앙에서 정수 배율로 확대해 주세요. 이미지 스무딩을 끄고 모든 좌표를 정수 픽셀에 맞춰 주세요. 그라데이션, 안티앨리어싱, 흐린 그림자는 사용하지 마세요. 전체에 약 24색을 사용하고, 배경은 짙은 파랑과 보라색, 캐릭터는 따뜻한 색, 마법에는 소량의 밝은 강조색을 남겨 주세요.
픽셀 사각형으로 약 24×32 크기의 마법사를 구성해 주세요. 휘어진 모자, 수염, 두 가지 색의 로브, 보석 지팡이를 포함합니다. 머리, 팔, 지팡이, 옷자락을 제어 가능한 자세 파라미터로 만드세요.60fps로 실행하되 자세 변화는 초당 8–12회로 양자화하고 입자는 계속 움직이게 해 주세요.
동작은 대기 중 흔들림, 지팡이를 들어 힘 모으기, 보석으로 불꽃 모으기, 빛의 고리와 투사체 방출, 원위치 복귀 순서입니다. 마법을 쓸 때 1–2픽셀의 흔들림을 넣어 주세요. 입자는 미리 할당해 재사용하고 루프 안에서 새 객체를 만들지 마세요.
배경에 달, 소수의 별, 돌바닥을 남겨 주세요. 보석의 빛으로 캐릭터 윤곽을 강조하고 처음과 마지막 동작이 자연스럽게 이어지게 해 주세요. 창 크기가 달라져도 픽셀이 선명해야 합니다.
2. UI 변형: 하나의 모양이 여러 구성 요소로 이어지기
흑백 모양이 버튼에서 로딩 상태, 플레이어, 슬라이더, 차트로 바뀝니다. 같은 요소가 연속해서 변형되고 마우스 클릭과 드래그가 동작을 진행합니다.
HTML／CSS／SVG로 UI를 구성하고 스프링 계산으로 되돌아오는 움직임을 표현합니다. 음악 박자에 맞춰 동작을 배치하고 프레임마다 서브프레임 네 개를 섞어 모션 블러를 만듭니다.
먼저 저에게 8–12개의 UI 상태, 흑백 또는 단일 강조색 구성, 사용 가능한 약 120 BPM 음악을 요청해 주세요. 상태와 박자의 대응을 정리하고 확인 후 제작을 시작해 주세요.
1440×1440 HTML UI 애니메이션을 만들어 주세요. 따뜻한 연회색 배경, 흑백 구성 요소, Geist 글꼴을 사용합니다. 전체에 하나의 주체를 유지하고 크기, 모서리 반경, 내부 콘텐츠의 변화로 전환하세요. 장면을 잘라 구성 요소를 바꾸지 마세요. 커서가 실제로 클릭하거나 드래그해야 합니다.
120 BPM,7마디로 버튼→로딩→완료 체크→Dynamic Island→플레이어→진행률 표시줄→음량 슬라이더→스위치→탭→차트→명령 패널→알림→버튼 순서를 배치해 주세요. 박자마다 동작을 배정하고 카메라 확대와 축소가 주체를 따라가게 해 주세요.
모든 상태는 seek(t)로 계산하고 CSS transition, 타이머, 이전 프레임의 누적 상태를 사용하지 마세요. 해석적 스프링을 사용하고 표시 막대 양 끝의 스프링을 따로 계산해 늘어남을 표현해 주세요. 드래그 중에는 커서 위치로 값을 정하고 손을 놓은 뒤 되돌아오게 해 주세요.
Python으로 음악 박자를 분석하고 동작과 효과음을 박자에 맞춰 주세요. Playwright로 프레임마다 4회 샘플링하고 FFmpeg로 섞어 모션 블러를 만든 뒤 60fps로 출력해 주세요. 전체 렌더링 전에 각 박자의 정지 프레임을 확인해 주세요.
입자 폭발, 발광, 그라데이션, 불필요한 튀는 움직임을 피하세요. 이전 글자와 새 글자의 등장·퇴장 시간을 각각 제어해 겹치지 않게 해 주세요. 확대되거나 글자를 포함한 요소에는 will-change를 넣지 마세요. 처음과 마지막은 커서 위치와 속도까지 이어져야 합니다.
3. 게임 발전사: 시대에 따라 화면 스타일 바꾸기
2분짜리 게임 발전사는 Canvas 픽셀 그림, WebGL의 오래된 TV 효과, Three.js의 3D 장면을 한 영상에 담고, 음악은 Python으로 합성합니다. 초기 게임을 픽셀과 주사선으로 표현한 뒤 복도, 성, 블록 세계로 들어갑니다.
감정의 기복과 장대한 분위기를 담은 다큐멘터리 예고편 스타일로 120초짜리 게임 발전사 영상을 만들어 주세요.
규격은 1920×1080,60fps입니다. 모든 화면을 코드로 그리고 외부 이미지나 영상을 가져오지 마세요. 직접 작곡하고 코드로 음악을 합성해 주세요. 샘플, 음원 소재, 가상 악기를 사용하지 말고 음악 리듬으로 화면 전환을 구성해 주세요.
완성 후 화면과 음악을 MP4로 합쳐 제가 지정한 출력 디렉터리에 저장해 주세요.
4. 스위트 쿨 댄스: 인물과 모션의 역할 나누기
먼저 영상 모델로 15초짜리 그린 스크린 댄스를 만든 뒤 Opus로 녹색 배경을 제거합니다. 큰 글자, 테이프, 화면 분할, 배경 전환,3D로 둘러가는 글자를 넣어 음악에 맞게 연출을 바꿉니다.
인물의 동작은 영상에서, 장면과 모션은 코드에서 가져옵니다. 복잡한 춤을 코드로 다시 그릴 필요는 없습니다. 인물 소재를 유지하고 크로마키, 레이어, 리듬에 집중합니다.
5. AI 발전사: 하나의 시각적 주제로 긴 영상 연결하기
3분짜리 AI 발전사는 Claude Code에서 Remotion으로 제작합니다. 화면은 SVG, Canvas 등의 코드로 그리고, 음성 모델이 내레이션을, Python이 합성 음악을 담당합니다.
전체를 연결하는 주인공은 빛나는 토큰입니다. 어텐션 연결에서 언어 모델, 멀티모달, 추론, 도구 호출까지 각 장이 같은 시각적 단서를 따라갑니다. 긴 영상은 이야기와 스토리보드를 먼저 짠 뒤 장면별로 만드는 것이 핵심입니다.
Remotion으로 180초짜리 AI 발전사 애니메이션을 만들어 주세요.1920×1080,30fps, 총 5400프레임입니다.2017년 어텐션 메커니즘을 중심으로 언어 모델, 멀티모달, 추론, 에이전트와 아직 결론이 나지 않은 AGI 문제까지 다루고, 영화적인 영상 에세이로 표현해 주세요.
빛나는 토큰 “the”를 전체에 등장시켜 주세요. 먼저 STORYBOARD.md를 작성해 각 장면의 시간, 화면, 자막, 전환을 나열하세요. 장면을 각각 구성한 뒤 마지막에 메인 composition으로 연결해 주세요.
0–15초에는 고립된 단어로 시작하고,15–35초에는 어텐션 연결,35–55초에는 언어 모델의 확장,55–80초에는 지시 미세 조정과 ChatGPT를 보여 주세요.80–100초에는 멀티모달,100–125초에는 추론,125–150초에는 도구와 에이전트를 넣고,150–170초에는 AGI 문제를 제기합니다. 마지막 10초에는 토큰과 제목으로 돌아와 주세요.
SVG, Canvas, CSS와 절차적 그래픽을 사용하고 외부 이미지나 기존 영상을 참조하지 마세요. 어두운 바탕과 따뜻한 강조색을 사용하고 스프링과 이징으로 움직임을 제어하세요. 인접 장면의 도형 관계에서 전환이 이어지게 해 주세요.
화면 글자는 짧게 하고 각 문구를 최소 2.5초 유지하세요. 연도, 인명, 논문 제목을 정확히 쓰고 불확실한 내용은 NOTES.md에 기록해 주세요. 한 장면을 완성할 때마다 remotion still로 3–4장의 정지 프레임을 확인하고 글자 겹침과 레이아웃을 고친 뒤 계속하세요.
선택 사항인public/music.mp3 트랙 위치를 남겨 두고, 음원이 없으면 먼저 무음 버전을 출력해도 됩니다. 마지막에 remotion render로out/film.mp4를 내보내고 제작 설명과 NOTES.md를 함께 전달해 주세요.
프롬프트에서 유용한 일곱 가지 정보
role에는 제작 역할, inputs에는 필요한 소재, direction에는 스타일과 금지 효과, structure에는 장면과 리듬, build에는 기술과 내보내기, gotchas에는 흔한 실수, start에는 먼저 볼 것과 확인 시점을 적을 수 있습니다.
특히 원하지 않는 것을 구체적으로 적어 주세요. 화면을 가득 채운 작은 글자, 모든 요소가 동시에 페이드인하는 효과, 가운데 큰 글자와 그라데이션 배경을 반복하는 방식 등을 피하도록 명시합니다. 먼저 스토리보드와 핵심 프레임을 보고, 모션이 중요한 부분은 몇 초짜리 샘플을 확인한 뒤 전체를 렌더링합니다.
납품 전에는 프레임을 추출해 모바일 가독성, 글자 겹침, 동작의 멈춤, 구도, 박자, 영상과 소리의 동기화를 확인해 주세요. 문제 시점을 표시하고 해당 부분만 다시 렌더링합니다. 막연히 "더 고급스럽게"를 반복하는 것보다 확인할 수 있는 조건이 수정에 도움이 됩니다.
