Insights
AI가 자동으로 큐레이션·번역·정리하는 기술 동향 피드입니다.
Claude Opus 5.5를 활용하여 코드로 애니메이션을 생성하는 방법을 소개합니다. 이 방식은 Canvas, SVG, CSS 등 웹 기술을 사용하여 단일 HTML 파일을 작성하고 헤드리스 브라우저로 렌더링한 후 영상으로 합치는 과정을 거칩니다. 이를 통해 높은 색상 정확도와 쉬운 수정이 가능하지만, 사실적인 영상 제작에는 한계가 있습니다.
AI 자동 생성 콘텐츠
본 콘텐츠는 Qiita AI의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기본 기사에서 말하는 'Opus 5.5 영상'은 Claude Opus 5.5가 애니메이션을 코드로 작성하고, 브라우저가 이를 프레임별로 그려 MP4 파일로 저장한 것을 의미한다. 출력이 코드이기 때문에 완성도 높은 사례는 모션 디자인처럼 보인다. 윤곽이 선명한 글자, 지정된 색상, UI 목업(mockup), 그래프, 또는 특정 도형이 다음 도형으로 변하는 트랜지션 등이 이에 해당한다.
공개된 Opus 5.5 영상 475개를 살펴보면, 약 60%가 모션 그래픽스이며, 이 중 4개는 16:9의 가로 비율이고, 길이의 중앙값은 30초이다.
Veo, Kling, Seedance와 같은 영상 생성 모델은 픽셀을 직접 생성한다. 하지만 Opus 5.5는 그렇지 않고, Canvas, SVG, CSS, GSAP(JavaScript 애니메이션 라이브러리), Three.js 중 하나를 사용한 단일 HTML 파일을 작성한다. 이 파일을 헤드리스 브라우저가 프레임별로 렌더링하고, 마지막으로 ffmpeg이 하나의 영상으로 합친다 (Hugging Face의 절차 설명, Claude Video 인덱스). 이 475개에서 사용된 그리기 수단 중 Canvas가 가장 많아 336개였고, 그다음이 SVG가 193개, Three.js가 141개였다. Opus 5.5 발표 페이지에는 영상에 대한 설명이 없으며, 이 활용 방식은 크리에이터 측에서 발견한 것이다.
영상을 코드로 작성하는 방식에는 실무적으로 세 가지 장점이 있다.
같은 프롬프트를 Opus 5.5로 실행한 결과 (15초, 450프레임)
Stephan의 리일(Reel)이 이징 커브와 타일 패턴을 축으로 했다면, 여기는 튀어 오르는 공이 터지면서 'MOTION'이라는 단어가 되는 장면에서 시작하여, 2,304개의 점으로 이루어진 파동, 원에서 사각형으로, 그리고 별로 형태를 바꾸는 점의 고리(ring)로 진행된다.
Deedy Das による架空のスタートアップ「muda」のローンチ動画から 3 フレーム：稼働率 94% の GPU クラスタのグリッド、無駄を意味する日本語「muda」、最後のロゴ
Deedy Das의 게시물 (좋아요 3,264개, 26초)
make a modern slick and punchy video for a modern startup that works on inference
Deedy가 회사명을 지정하지 않았기 때문에, Opus가 이름을 고안했다. 이름은 'muda'(일본어의 '무다')이다. 초반부에는 사용자가 답변을 기다리는 2.81초 장면이 이어지고, 이어서 GPU 클러스터의 가동률이 94%까지 올라가고, 마지막에 로고가 나온다. 각 장면에 강연(keynote)의 챕터 같은 작은 번호 라벨이 붙는다. '과제', '제품', '근거', '이름'이라는 전개는 프롬프트에서 요구하지 않았음에도 나타났다. 제작에는 약 1시간이 걸렸고, 비용은 대략 $2이다.
제품, 수치, 이름 모두 가상의 것이다. 실제 발표에 사용할 경우, 이것들은 이용자 측에서 준비하여 제공해야 한다.
Moritz Kremb による Notion を題材にした SaaS ローンチ動画から 3 フレーム：アプリアイコンと「Docs here. Chats there. Tasks everywhere.」の文、プロジェクトボードの画面、「Get answers, instantly. With citations.」の文
Moritz Kremb의 게시물 (좋아요 418개, 46초)
Moritz는 잘 알려진 제품 하나를 선택하고, 실제 소재를 가져오도록 Opus에게 지시했다.
I want you to create a highly professional SaaS product launch video. Go and find some SaaS, preferably just one that people know, so it's easier to identify with it. Pick that, and then make sure to get actual assets and images and all of that stuff from the internet.
Opus는 Notion을 선택하여 런칭 영상에서 익숙한 흐름에 따라 구성했다. 떠다니는 앱 아이콘 위에 'Docs here. Chats there. Tasks everywhere.'라는 문구, 재현된 프로젝트 보드, 그래프가 첨부된 기능 소개 한 줄, 고객사 로고 목록, 그리고 커서가 신청 버튼을 클릭하는 엔드 카드가 이어진다. 구체적인 인상을 주는 것은 실존 제품의 정보이다. 자사 제품으로 만들 경우, 스크린샷, 제목, 기능 목록을 프롬프트에 붙여 넣어야 한다. 이번 예시의 브랜드와 로고는 Notion 것이며, 자사의 소재로 재활용할 수 없으므로 데모로 간주한다.
zero による写真プリントアプリ「develop」のローンチ映像から 3 フレーム：ガラス風スライダーで風景写真の光をゴールデンアワーに変える場面、同じ写真を表示するスマートフォンとノート PC のウィンドウ、実際の壁に掛けられた額装プリント
zero의 게시물 (좋아요 2,103개, 29초, 1:1)
이 프롬프트는 수천 자에 달하며, <inputs>, <direction>, <structure>, <build>, <gotchas>, <start> 각 블록으로 나뉘어 있다. direction 블록의 시작은 다음과 같다.
An Apple-keynote launch film, 2D only, one continuous take. Every scene is made out of the previous one: nothing fades, blurs or cuts. [...] Banned: crossfades, blur-ins, brightness
지금까지의 3개 런칭 영상은 후크, 제품, 몇 가지 기능, 엔드 카드의 동일한 흐름을 따르고 있습니다. opus6.video의 앱 런칭 비디오 템플릿은 이 구성을 전제로 하며, 제목, 3가지 기능, 마무리 URL을 입력하여 사용하는 형식입니다.
zero による UI モーション動画から 3 フレーム：黒い音量スライダー、Day/Week/Month の切り替えが付いたグラフカード、「frame」を検索しているコマンドパレット
zero의 게시물 (12,044 좋아요, 14초, 1:1)
드리블(Dribbble) 수준의 UI 모션. 하나의 모양이 끊어지지 않고 모든 상태에서 크기, 반지름, 색상이 변형되고 콘텐츠가 짧은 블러와 함께 교체됩니다. 커서가 실제 클릭과 드래그로 모든 변화를 이끌어갑니다.
하나의 검은색 요소가 버튼, 체크 표시, 음악 플레이어, 볼륨 슬라이더, 토글, 탭, 그래프, ⌘K 명령어 팔레트, 트ースト(toast)로 변했다가 마지막에 다시 버튼으로 돌아옵니다. 커서가 120 BPM의 음악에 맞춰 각 변화를 일으키고, 마지막 프레임이 첫 번째 프레임과 일치하기 때문에 끊김 없이 루프됩니다.
이 영상을 완성한 것은 두 가지 선택입니다. 하나는 연속된 하나의 오브젝트를 화면에 계속 배치하여 14초 동안 시선을 붙잡아 두는 것입니다. 다른 하나는 프롬프트가 템포를 고정하고 있다는 점(
짧은 브랜드 영상 제작을 위해, opus6.video는 9:16 및 1:1 비율의 포맷과 로고 공개(Logo reveal) 템플릿을 제공합니다. 해당 서비스의 이펙트 라이브러리에는 위에서 언급된 모션 스타일(letter drop, decode scramble, stretch slide-in)이 프로ンプ트에 그대로 붙여넣을 수 있는 문구와 함께 목록화되어 있습니다.
Rory Flynn による Negroni のレシピアニメーションから 3 フレーム：「1 oz GIN」の工程カードとグラスに注がれるジン、20 秒間ステアされるカクテル、「CIN CIN! 1:1:1」と表示された完成品
Rory Flynn의 게시물 (1,025 좋아요, 30초, 1:1)
우리는 작은 테스트를 해보려고 합니다. javascript나 html(가장 좋다고 생각하는 것을 사용)을 사용하여 레시피 모션 그래픽 애니메이션을 렌더링할 수 있을까요? 시작부터 끝까지 전체 레시피(빈 잔에서 완성된 칵테일까지)를 보여주는 설명 비디오 스타일이어야 합니다. 레시피 재료와 계량이 잔에 들어가는 순서대로 표시되어야 하며, 총 길이는 30초여야 합니다.
Rory가 칵테일 이름을 지정하지 않았기 때문에, Opus는 Negroni(네그로니)를 선택했습니다. 손으로 그린 듯한 잔이 레이어별로 채워지고, 측면에는 분량 눈금이 표시됩니다. 과정 카드에는 '1 oz GIN'이나 '20 SEC STIR'가 표시되며, 화면 하단의 6단계 트래커는 진행에 맞춰 얼음, 진, 캠파리, 베르무트, 스터(stir), 필(peel)을 체크합니다.
다른 영상에 활용하려면 이 트래커 부분이 유용합니다. 절차를 따라가는 영상은 시청자가 현재 과정의 어느 단계에 있는지 확인할 수 있어 이해하기 쉽습니다. 특정 레시피나 제품을 다루고 싶다면, 그 이름을 프롬프트로 지정해야 합니다. 지정하지 않으면 모델이 스스로 선택하게 됩니다.
Ethan Mollick による再帰の解説動画から 3 フレーム：シダの葉を映す自然ドキュメンタリー風の場面、子ども向け番組風のキャラクターが「the TINIEST doll!」と言う場面、「STILL CONFUSED?」の下で動画が自分自身の中で再生される最後の画面
Ethan Mollick의 게시물 (554 좋아요, 75초)
재귀(recursion)를 설명하는 비디오입니다. 재귀에 대한 모든 설명은 근본적으로 다른 영상 스타일을 가져야 하며, 이로 인해 자기 참조적이고 영리하며 빠르게 전개되어야 합니다.
각 설명이 이전 설명을 내부에 중첩시키고, 그럴 때마다 장르가 바뀝니다. 기업의 설명 비디오, 자연 다큐멘터리, 영화 예고편, 아동용 프로그램 같은 장르입니다. 화면 상단의 'call stack' 바는 층이 깊어질수록 길어지고, 마지막에는 'STILL CONFUSED?'라는 문구 아래에서 영상이 자기 자신 안에서 재생됩니다.
klöss による AI の歴史動画から 3 フレーム：1943 と記された人工ニューロンの図、1966 年のチャットボット ELIZA、タイトルカード「The Machine That Learned」
klöss의 게시물 (192 좋아요, 2분 52초)
AI 역사의 주요 순간들을 강조하는 비디오를 만들어 주세요.
이 단 한 줄만으로 Opus는 주황색을 악센트로 사용한 어두운 색감의 타임라인을 번호가 매겨진 챕터로 구성했습니다. 1943년의 인공 뉴런은 논리 회로도로 그려지고, 1966년 ELIZA의 대화는 터미널에 입력되며, 2012년 ImageNet의 결과는 막대 그래프로 표시됩니다. 화면 하단의 캡션 줄이 내레이션 역할을 맡고, 마지막 카드에서는 모션 디자인, 사운드 디자인, 코드 크레딧이 Claude로 되어 있습니다. 연표는 각 시점을 문자, 숫자, 간단한 그림으로 표현할 수 있어 코드를 이용한 애니메이션과 궁합이 좋습니다.
날짜와 숫자는 모두 Opus가 직접 작성했기 때문에, 이러한 종류의 설명 비디오는 공개 전에 사실 확인(fact-check)이 필요합니다.
이 세 가지 사례처럼, 텍스트, 숫자, 그림으로 구성된 설명 영상은 코드를 이용한 애니메이션이 능숙하게 다룰 수 있는 범위에 속합니다. opus6.video에는 이러한 종류의 비디오를 위해 Explainer, Data story, Recipe & how-to 템플릿이 있습니다. 해당 서비스는 한 편당 최대 30초이기 때문에, #9나 #10과 같은 긴 설명 영상은 여러 개로 분할해야 합니다.
songkeys による折り紙風アニメーションから 3 フレーム：日の出の丘に立つ 1 人の人物、光るアイコンがつながって覆う夜の地球、鉛筆が小さな生き物を描いているスケッチブックのページ
songkeys의 게시물 (423 좋아요, 1분 48초)
인류의 탄생부터 현재까지의 발전과 진보, 그리고 궁극적으로 AI의 부화 과정을 보여주는 짧은 오리가미 또는 낙서(doodle) 스타일 애니메이션을 제작해 주세요. [...] 스타일: 낙서 같고, 귀엽고, 따뜻하며, 서사성이 강하고, 음성 언어는 사용하지 않음 (간단한 텍스트는 괜찮지만, 설명적이거나 서술적인 텍스트가 너무 많으면 안 됩니다. 왜냐하면 다양한 문명이 그것을 이해할 수 있어야 하기 때문입니다), 시적이고, 감동적이며, 고품질이어야 합니다.