개발 기록 2026-11-06 13~19시: 캐릭터 영상 제작, 코드 기반 모핑 루프 모션, 기술 아티클 5편 발행

이번 기간에는 영상 작업을 많이 했다. 오후에는 Codex로 일러스트 캐릭터를 만들고 움직여 1분짜리 자기소개 영상을 만들었다. 저녁에는 Claude Code로 HTML과 스프링 수식만 써서 모션 그래픽 영상 세 편을 렌더했다. 마지막으로 블로그에 새 기술 아티클 5편을 올렸다.

일러스트 캐릭터를 그리고 달리게 하기 (Codex)

edu-videos 프로젝트에서 먼저 "클로드코드로 캐릭터를 만들고 움직일 수 있나"를 물었다. 답은 이렇다. Claude Code가 코드 작성과 도구 실행을 맡고, 그래픽 도구가 캐릭터를 그리거나 렌더링하면 된다. 2D 캐릭터라면 SVG나 Canvas로 부위를 나눠 제어하는 방식을 쓸 수 있다.

그다음 Codex에게 여성 전신 일러스트를 그리게 했다. 팔과 손이 잘 보이는 자세라서 이후 인사하기·가리키기 동작의 기준 이미지로 쓸 수 있다. 이 시점에는 이미지 한 장이었고, 애니메이션용 부위 분리는 하지 않았다.

이 일러스트로 달리는 GIF를 만들었다. imagegen으로 원본을 참고한 자세 8개를 만들고, FFmpeg로 이어 붙였다. 결과물은 두 개다.

왼쪽에서 오른쪽으로 달려가는 GIF: 3.84초, 무한 반복
투명 배경에서 제자리로 달리는 GIF

브라우저에서 동작과 이동은 확인했다. 다만 프레임마다 외형이 조금씩 다르다. 이미지를 자세마다 새로 생성했기 때문에 생기는 한계다.

이 캐릭터를 뮤직비디오 주인공으로 쓸 수 있는지도 물었다. 제안받은 순서는 네 단계다.

정면·옆면·뒷면과 표정 기준표로 외형을 고정한다.
걷기, 달리기, 춤 같은 동작을 만든다.
전주·벌스·후렴에 맞춰 장면을 설계한다.
합성해서 MP4로 출력한다.

이 단계에서는 구성안만 받았다.

1분 자기소개 영상

캐릭터를 주인공으로 60초 자기소개 영상을 만들었다. 배경 3장을 새로 그렸다. 인사·생각·메모·기쁨·노트북 작업 자세도 추가로 만들었다. 이 동작들을 기존 달리기와 이어서 호기심 → 도전 → 시행착오 → 완성 흐름의 6개 장면으로 구성했다. 캐릭터와 배경이 같은 그림체로 보이도록 크기와 발이 닿는 위치를 맞췄다.

결과는 1080p·30fps·정확히 60초짜리 MP4이고, 용량은 약 31MB다. 최종 파일 전체를 디코딩해 보고, 브라우저에서 끝까지 재생되는 것을 확인했다.

15초 모션 쇼릴 (Claude Code)

여기부터는 Claude Code로 작업했다. 첫 요청은 "이력서용 쇼릴처럼 역동적인 15초 모션 그래픽"이었다. 결과는 1920×1080, 30fps, 15.0초 영상이다.

컨셉은 이렇다. 처음에 떨어진 검은 점 하나가 15초 동안 모양을 바꿔 가며 다음 장면을 연다. 마지막에는 이름 뒤의 마침표로 돌아온다. 장면마다 다른 모션 기술을 하나씩 보여 준다.

시간	장면	기술
0–1.8초	점이 떨어져 찌그러졌다 튀어 올라 MOTION의 O가 되고, 카메라가 O 구멍 안으로 들어감	squash & stretch, zoom-through
1.8–4초	코발트 바탕의 격자가 3D로 뒤집히고, 원으로 바뀌는 대각선 파도가 지나간 뒤 한 줄로 눌림	stagger, 모양 변형
4–6.2초	밑줄 위로 "EVERY"가 솟고, 뒤 단어가 슬롯머신처럼 굴러 "FRAME"에 멈춤	마스크 등장, 키네틱 타입

배경음악은 넣지 못했고 효과음만 들어갔다. 응답에는 HeyGen이 설치돼 있지 않아 음악을 가져오지 못했다고 나온다.

하나의 모양이 UI 상태를 오가는 14초 루프

다음은 꽤 긴 사양 프롬프트였다. 핵심 규칙은 하나의 모양이 버튼 → 로더 → 체크 → 다이나믹 아일랜드 → 음악 플레이어 → 슬라이더 → 토글 → 탭 → 차트 → ⌘K → 토스트 → 버튼으로 컷 없이 변형된다는 것이다. 기술 조건도 함께 줬다.

모든 스타일을 seek(t) 안에서 시간으로 계산하고, CSS 트랜지션은 쓰지 않는다.
스프링은 닫힌 형태의 스텝 응답으로 쓴다.
비트 그리드는 numpy로 분석해서 만든다.
렌더는 Playwright로 하고, 4 서브프레임을 ffmpeg tmix로 섞는다.

프롬프트 끝에 "코드 쓰기 전에 비트 그리드에 상태 리스트를 보여줘"라고 적었다. 그래서 Claude Code는 먼저 곡을 고르고 그리드를 보여 줬다.

곡: Mixkit의 "House Vibes"(Alejandro Magaña). 상업적으로 쓸 수 있고 출처 표기도 필요 없다.
고른 과정: 후보 130곡을 numpy로 쟀다. 120 BPM 근처가 20곡 넘게 나왔고, 그중 이 곡의 비트가 가장 또렷했다(자기상관 0.82).
템포는 120.058 BPM이다. 원곡 31.60초 지점의 다운비트부터 7바(13.99초)를 쓴다.
실제 피크가 그리드보다 평균 14ms 앞서 있어서, 그리드 시작점을 14ms 당겼다.

확인하고 진행시키자 renders/ui-morph-loop.mp4가 나왔다. 1440×1440, 60fps, 840프레임이고, 음성을 포함해 정확히 14.000초다. 구현 포인트는 네 가지다.

하나의 모양: #shape 요소 하나가 크기·반경·색을 바꾼다. 안의 콘텐츠는 레이어마다 진입·퇴장 시점을 따로 둔다.
스프링: 감쇠비 0.86을 써서 오버슈트가 약 0.5%다. 목표가 바뀔 때마다 스프링을 하나씩 더하고, 직전 주기의 꼬리도 더한다. 그래서 모든 값이 14초 주기로 반복된다.
두 가장자리 스프링: 토글 노브와 탭 인디케이터는 앞쪽 가장자리가 빠른 스프링, 뒤쪽 가장자리가 느린 스프링을 탄다. 그래서 움직일 때 늘어나 보인다.
드래그: 잡고 있는 동안에는 값을 커서 위치로 계산한다. 볼륨은 최대치를 넘기면 고무줄처럼 늘어나고, 놓으면 놓은 자리에서 스프링으로 돌아간다.

루프 이음새는 픽셀 단위로 확인했다.

프롬프트를 템플릿으로 바꿔 물의 순환 영상 만들기

결과가 좋아서 "내 주제로 만들려면 프롬프트를 어떻게 써야 하나"를 물었다. 답은 프롬프트의 6칸 구조(<inputs>, <direction>, <structure>, <build>, <gotchas>, <start>)를 유지하라는 것이었다. 주제가 바뀌면 <direction>과 <structure>는 꼭 고치고, <inputs>는 주제에 맞게 고친다. 나머지 세 칸은 거의 그대로 둔다. 잘 나온 이유로는 세 가지를 꼽았다.

"모양 하나, 컷 없음" 같은 하나의 규칙
화살표로 이은 비트 단위 순서
템플릿 같은 결과를 막는 금지 목록

이 구조로 교과서 일러스트 주제를 넣었다. 같은 물방울 하나가 수증기·구름·빗방울·강으로 변했다가 다시 물방울로 돌아오는 6바짜리 루프다. 곡은 Mixkit의 "Winter Breeze"(Arulo)로 정했다. 템포는 120.065 BPM이고, 102.67초 지점의 다운비트부터 6바를 썼다.

결과는 water-cycle-loop/renders/water-cycle-loop.mp4다. 1440×1440, 60fps, 720프레임, 소리 포함 정확히 12.000초이고 음량은 -14 LUFS다. 모양은 SVG 경로 하나를 점 128개로 샘플링해서 모든 상태를 같은 방식으로 표현했다. 이번에도 화면 루프 이음새는 픽셀 단위로 확인했다.

Apple 키노트 스타일 런치 필름 (입력 대기)

또 하나의 긴 사양도 보냈다. 워드마크·사진·글라스 UI·폰·맥 창·주문 흐름까지 54비트를 하나의 연속 테이크로 잇는 필름이다. Claude Code는 시작 전에 네 가지를 요청했다. 브랜드 이름(동사, 4~~6글자 권장), 고해상도 사진 9~~12장(같은 구도의 낮/골든 아워 사진 2장 포함), 곡, 벽 그림자 스톡 클립이다. 입력을 받으면 비트 맵과 스틸 4장을 먼저 보여 주겠다고 했다.

기술 블로그 아티클 5편 발행

/blog-tech-article 스킬로 기존 글 85편과 겹치지 않는 주제 5개를 골라 글을 쓰고 발행했다.

Rate Limiting 알고리즘 비교와 분산 환경 구현
Java Virtual Thread 도입 시 Pinning과 자원 고갈 함정
Kafka Consumer Group Rebalancing과 Consumer Lag 대응
Expand-Contract 관련 글
Structured Output 관련 글

공개 확인 스크립트 check_live.py에서 5편 모두 PASS가 나왔다. 확인한 항목은 세 가지다. 페이지가 200으로 열리는지, /articles 목록에 있는지, 이미지가 모두 200인지다. 이미지는 chore: 기술 아티클 Rate Limiting·Virtual Thread·Kafka·Expand-Contract·Structured Output 이미지 추가 커밋으로 올라갔다.

남은 것

UI 모핑 루프와 물의 순환 루프는 실시간으로 재생해 보지 않았고, 소리도 직접 들어 보지 않았다. 다운비트도 킥 에너지로 찾았을 뿐 귀로 확인하지 않았다.
물의 순환 곡은 루프 이음새의 음량 차이가 10.5%다. 지난 곡(4%)보다 커서 귀로 확인해야 한다.
15초 쇼릴에는 배경음악이 없다.
달리기 GIF는 프레임마다 외형이 조금씩 다르다.
키노트 런치 필름은 브랜드 이름·사진·곡·클립을 아직 주지 않아 시작하지 못했다.
캐릭터 뮤직비디오는 구성안만 받았다.