Claude Opus 5 출시 영상을 제작하며
요약
Anthropic의 Claude Opus 5 출시를 기념하여 제작된 비공식 광고 영상의 스토리보드와 제작 과정을 상세히 다룹니다. 브랜드 아이덴티티를 유지하기 위한 미세한 디자인 디테일과 시각적 연출 기법을 설명합니다.
핵심 포인트
- 브랜드 일관성을 위한 정교한 색상 및 타이포그래피 관리
- 스토리보드 단계별 시각적 연출 및 비트 매칭 전략
- 제품의 성능(Frontier-Bench)과 가격 경쟁력을 시각화하는 방법
Anthropic이 오늘 Claude Opus 5를 출시했습니다. 아무도 우리에게 영상을 요청하지 않았지만, 우리는 어쨌든 하나를 만들었습니다. 55초의 길이, 12개의 비트, 그리고 화면에 등장하는 모든 주장은 출시 포스트 자체에서 가져왔습니다. 이것은 비공식 광고(unofficial spot)로서 가장 다루기 어려운 종류입니다. 이 브랜드는 대부분의 사람들이 매일 지켜보는 브랜드이기에, 색상이 미세하게 다르거나 세리프(serif)가 정확하지 않으면 즉시 눈에 띕니다. 여기 있는 그 어떤 것도 눈대중으로 작업하지 않았습니다.
스토리보드 (The storyboard)
- 트레이드오프 (The tradeoff) — "Frontier intelligence"가 따뜻한 종이 질감 위에 홀로 나타나고, 그 아래로 "Or a price you can run every day"가 교체되어 나타납니다. 그 후 두 문구 모두 어두워졌다가 다시 떠오르며 선택의 이름을 명시하는 문구를 위한 공간을 만듭니다: "Until today, you picked one."
- 이름 (The name) — 검은색 무대, 회전이 멈추며 실제 Claude 스파크(spark)가 확장되어 나타나고, 그 아래로 "Claude Opus 5"가 내려옵니다. 이때 "Opus 5"는 "Claude"보다 한 비트 늦게 나타납니다. 그 후 카드는 1.5초 동안 완전히 정지 상태를 유지합니다.
- 약속 (The promise) — 단 한 문장으로 된 논제(thesis)가 등장하며, 음성에 맞춰 "half the price"가 점토(clay) 질감으로 나타나고, 그 아래로 가용성(availability) 문구가 밑줄과 함께 등장합니다.
- Frontier-Bench — 비대칭 그래프에서 두 개의 막대가 자라납니다: 차분한 회색의 Opus 4.8, 그리고 그 높이의 두 배를 넘어서는 점토 색상의 Opus 5. 음성에서 "double"이 나올 때 숫자가 올라가며 멈추고, 그 옆으로 비용(cost) 라인이 떨어집니다.
- 보드 (The board) — 네 개의 벤치마크(benchmark) 행이 오른쪽에서 하나씩 큐(cue)에 맞춰 도착합니다. 각 행은 이름 → 비율(ratio) 쌍으로 구성되며, 비율은 레이블 뒤를 따라 나타납니다. 하나의 벤치마크는 스윕(sweep) 효과로 전환됩니다.
- 메커니즘 (The mechanism) — 어두운 무대 위로 에이전트(agent)의 트랜스크립트(transcript)가 스스로 작성됩니다: FreeCAD 요청이 입력되고, 세 단계가 올리브 색상으로 체크되며, 세리프(serif)체로 영수증이 나타납니다 — "No competing model solved it in five attempts."
- 외부의 목소리 (The outside voice) — Framer의 문구가 짧은 점토색 구분선 아래에 인용구로 설정되어 거의 정지된 상태로 유지됩니다.
- 청구서 (The bill) — 오트(oat) 색상 배경 위에 세 개의 효율성 카운터가 나타나며, 가장 큰 숫자가 마지막에 점토 색상으로 등장하고, 그 아래로 출처(attribution)가 밑줄과 함께 나타납니다.
- 정렬 (Alignment) — 하나의 주장, 하나의 숫자, 그리고 유지되는 프레임. 엔딩 전의 휴식 구간입니다.
가격 (The price) — $5와 $25가 한 쌍으로 등장하며, 이 쌍은 하락을 예상하며 내려갔다가 "Opus 4.8과 동일한 가격"을 위한 공간을 만들기 위해 다시 올라갑니다. 그 후 claude-opus-5가 clay 색상으로 등장합니다.
11. 스스로를 삼키는 엔딩 카드 (The end card that eats itself) — 실제 Claude 로고(lockup)가 유지되고, 스파크(spark)가 반대 방향으로 회전하며 힘을 모으더니, 오른쪽으로 발사되어 화면 밖으로 나가는 과정에서 워드마크(wordmark)를 글자 하나하나 삼키며 자신의 속도 속으로 흐릿하게 사라집니다.
12. 스팅 (The sting) — 검은 화면. 영상이 끝났어야 할 시점으로부터 꼬박 1초 동안 아무것도 나타나지 않습니다. 그 후 "Available today."가 화면 정중앙에 서서히 나타나며 움직이지 않고 유지됩니다.
감독의 노트 (Director's notes)
브랜드는 woff2 폰트 파일에 이르기까지 Claude 자체의 것입니다. 팔레트는 claude.com의 라이브 스타일시트(stylesheet)에서 읽어옵니다. 단계별 그레이 램프(gray ramp), 검증된 항목을 위한 --color-oat, --color-olive, 그리고 단 하나의 강조색인 --color-clay #d97757를 사용하며, 이는 보상(payoff) 단어, 승리의 바(winning bar), 그리고 스파크에만 사용됩니다. 타이포그래피는 사이트에서 실제로 제공하는 세 가지 페이스(faces)를 사용하며, 프레임이 교체 도중 폴백(fallback) 폰트를 포착하지 않도록 delayRender 뒤에 배치되어 공급(vendored) 및 제한(gated)되었으며, 사이트 자체 스케일에 맞춰 설정되었습니다. 스파크, 워드마크, 그리고 "By Anthropic" 마크는 배포된 SVG 경로(paths)입니다. 아웃트로(outro)를 위해 워드마크는 서브패스(subpath) 경계에서 6개의 글리프(glyphs)로 분리되며, 각 글리프는 자신의 카운터(counter)를 유지합니다. 따라서 C-l-a-u-d-e는 Anthropic 고유의 글자 형태를 유지하면서도 각각 독립적으로 애니메이션됩니다. 분해는 하되, 다시 그리지는 않습니다.
전환(Transitions)은 다양성이 아니라 톤(tone)에 의해 선택됩니다. 세 가지 문법이 영화 전체를 관통합니다: 측면 슬라이드(lateral slide, 나가는 장면은 왼쪽으로 밀려나고 들어오는 장면은 오른쪽에서 튀어나옴), 수직 상승(vertical rise), 그리고 세틀(settle, 나가는 장면이 하나의 그룹으로 축소되며 사라지고, 한 프레임의 빈 간격(gap frame)을 거친 뒤, 들어오는 요소들이 위에서 1배 스케일로 착지함)). 슬라이드는 콘텐츠가 여전히 이동 중인 상태에서 무대를 넘겨주기 때문에, 슬라이드 창이 지나가는 동안 무대 색상이 크로스페이드(crossfade)되어야 합니다. 이는 동일한 톤의 세계에 있는 두 장면 사이에서는 아주 아름답게 표현되지만, 종이 질감이 거의 검은색에 가까운 색으로 녹아들 때는 6프레임 동안 평평한 중간 회색(mid-grey)이 나타납니다. 따라서 모든 큰 톤의 변화에는 세틀(settle)을 사용하며, 색상 변화는 빈 간격 프레임 안에서 일어나 즉각적으로 착지합니다. 측면 이동(lateral moves)은 이미 동일한 톤을 공유하는 쌍들을 따라 움직입니다. 12개의 장면, 하나의 연속된 캔버스, 슬라이드쇼는 없습니다.
어떤 장면도 빈 상태로 도착해서는 안 됩니다. 깔끔한 인계(hand-off)의 이면을 보면: 슬라이드는 들어오는 장면에게 텅 빈 무대를 제공하므로, 로컬 프레임 0에서 첫 노출이 시작되는 장면은 빈 카드처럼 들어오게 됩니다. 이는 컷(cut)이 존재함으로써 피하고자 했던 바로 그 슬라이드쇼의 느낌입니다. 모든 슬라이딩 장면은 자신의 타이밍을 12에서 20프레임 정도 미리 실행(pre-roll)하여, 도착할 때 첫 번째 요소가 이미 화면에 나타나 움직이고 있는 상태로 만듭니다. 반면 나머지 요소들의 노출은 여전히 음성 신호(spoken cues)에 맞춰 착지합니다.
한 요소의 두 가지 속성은 결코 동일한 커브(curve)를 공유하지 않습니다. 불투명도(Opacity)는 짧은 2차 함수 램프(quad ramp)를 따르고, 변형(transform)은 그 길이의 약 3배에 달하는 긴 지수 함수(exponential) 또는 감쇠 스프링(damped spring)을 따릅니다. 스태거(Stagger)는 행진하기보다는 압축됩니다 — 결정론적인 1~2프레임의 지터(jitter)를 포함한 pow(i, 0.8) × base 방식을 사용하며, 자식 요소들은 이를 따라옵니다. 자식 요소는 부모 행보다 몇 프레임 뒤에 더 느슨한 감쇠(damping)로 착지하도록 체크됩니다. 이것이 페이드 인(fade in)된 슬라이드와 무언가가 실제로 '도착'하는 것 사이의 차이입니다.
아웃트로(outro)는 프레임(frames)이 아닌 위치(position)에 의해 구동됩니다. 불꽃(spark)의 이동은 하나의 끊기지 않는 곡선입니다. 준비 동작을 위한 짧은 반대 움직임, 선을 따라 가속하며 훑고 지나가는 움직임, 그리고 기울기가 여전히 높은 상태에서 장면 밖으로 계속 가속하며 이어지는 핸드오프(hand-off)로 구성됩니다. 각 글리프(glyph)의 운명은 해당 마크가 어떤 프레임에 있는가가 아니라, 마크가 현재 '어디에' 있는지에 대한 함수입니다. 따라서 곡선이 어떻게 움직이든 상관없이, 불꽃이 지나가는 순간에 항상 정확하게 맞물려 들어갑니다. 회전(spin)은 발사부터 마지막 블러(blurred) 처리된 프레임까지 하나의 일정한 속도로 유지됩니다. 마크에 에일리어싱(alias)을 일으킬 회전 대칭성(rotational symmetry)이 없기 때문에 그 속도를 유지할 수 있습니다.
프롬프트 (The prompt)
발행 전 깨끗한 프로젝트와 remocn skill을 기준으로 검증된 프롬프트 형태의 브리프(brief)는 다음과 같습니다:
remocn (remocn.dev)을 사용하여 Remotion 프로젝트에서
Claude Opus 5 (anthropic.com/news/claude-opus-5)의 비공식 출시 영상을 제작하고 있습니다.
필요한 것은 무엇이든 `npx shadcn add @remocn/<name>`으로 설치하세요.
...
당신의 제품을 위한 제작 방법
일반적인 레시피는 Launch video이며, 에이전트(agent)가 사이트 자체의 토큰(tokens)을 가리키게 하여 특정 영상이 마치 회사 내부에서 제작된 것처럼 느껴지게 만드는 부분은 Your brand를 참고하세요.
AI 자동 생성 콘텐츠
본 콘텐츠는 Dev.to AI tag의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기