HeyGen 프로 템플릿 4종을 클로드코드로 리브랜드한 기록 — 모션 무수정, 바뀐 건 일곱 군데

직접 짠 오버레이는 세 개에 저녁 하나가 들었고 전부 반려했습니다. 템플릿을 갈아끼운 쪽은 완성 다섯 편에 저녁 하나가 들었고 전부 채널에 올릴 수 있는 상태였습니다.

같은 사람, 같은 도구(클로드코드), 같은 저녁이었습니다. 갈린 건 실력이 아니라 출발점이었어요.

클로드코드와 Node 18 이상, ffmpeg가 필요합니다. 첫 편 기준 30분이 걸리고, 그중 20분은 아래 네 지점에서 씁니다.

왜 프롬프트로 만든 모션그래픽은 "PPT 같다"는 소리를 듣나

프롬프트 생성물이 아마추어처럼 보이는 원인은 도구가 아니라 이징 곡선의 불일치입니다. 제가 반려한 오버레이 세 개를 다시 열어 보니 등장 곡선이 back, elastic, bounce, expo 네 종류가 섞여 있었습니다.

HeyGen의 템플릿 README는 "expensive"하게 보이는 이유를 두 줄로 적어 둡니다. 하나, 들어오는 요소는 전부 같은 곡선을 쓰고 나가는 요소는 그 거울상을 쓴다. 둘, 컷 앞에서 어떤 씬도 멈추지 않고 컷 뒤에서 어떤 씬도 정지 상태에서 시작하지 않는다.

"그건 디자이너 감각 아닌가요"라고 물을 수 있는데, 두 규칙 다 감각이 아니라 코드에 박힌 상수입니다. EO, EI 두 함수와 프레임 번호 표가 전부예요.

그래서 판정은 이렇습니다. 움직임의 급은 만드는 사람이 아니라 폴더에 이미 들어 있고, 내가 할 일은 그 폴더에서 바꿔도 되는 곳을 세는 것입니다.

템플릿 4종은 어디까지 바꿔도 되나

README가 허용하는 변경 범위는 카피·팔레트·마크·서체·아이콘 경로·카드 내부 구성과 일곱 비트의 이야기입니다. 금지는 프레임 번호, 이징 함수, 스탬프된 배열, 씬 래퍼의 변환입니다.

저는 그중 이번 편에서 손댈 곳을 일곱 군데로 정했습니다.

손댈 곳	개수	예
로고 그림	1	assets/ai-mark.png
색	4	바탕 #070A11 · 강조 #22D3EE · 카드 #0F1524 · 글자 #FFFFFF
채널 이름	1	내 채널 이름
화면 문구	1묶음	자료실 · 자료 받기 · 톡방 입장 · 메뉴 다섯 줄

표에서 볼 건 개수 열입니다. 파일은 수백 줄인데 사람이 정하는 값은 일곱 개라는 게 이 방법의 전부예요.

이 표를 brand.md라는 양식으로 저장해 두면 다음 폴더에서도 같은 문장 하나로 재현됩니다. "이 양식대로 교체해줘. 애니메이션은 그대로 둬."

렌더 시간은 정말 10초인가

10.8초짜리 가로 시작 화면이 제 PC(RTX 5080)에서 10.3초 만에 나왔습니다. 세로 릴 11.8초는 19.6초, 톡 화면 12.8초는 11.8초였습니다.

프롬프트 생성형 도구와 비교하면 차이가 큽니다. 같은 소재를 다룬 해외 리뷰 한 편은 클립 하나에 "약 10분"이 걸렸고, 그것도 재생성을 세 번 거쳤습니다.

빠른 이유는 생성이 아니라 결정론 렌더이기 때문입니다. HyperFrames는 HTML 한 파일을 프레임 단위로 캡처하므로 같은 입력이면 같은 영상이 나오고, 다시 뽑을 때 결과가 달라질 일이 없습니다.

렌더 시간이 짧다는 건 곧 "깨진 걸 보고 고치고 다시 뽑는" 루프를 한 편에 대여섯 번 돌려도 부담이 없다는 뜻입니다. 아래 네 지점은 전부 그 루프에서 잡았습니다.

지점 1 — 로고 뒤 검은 네모는 왜 남았나

첫 렌더에서 로고 주변에 검은 사각형이 남았습니다. 원인은 렌더러가 아니라 PNG였어요. AI로 생성한 로고 파일에 검은 배경이 깔려 있었고, CSS mix-blend-mode: screen으로 가리려 했지만 HyperFrames 렌더 경로에서는 적용되지 않았습니다.

처방은 알파 키잉이었습니다. 검은 픽셀을 투명으로 바꾼 PNG로 교체하니 사라졌고, 클로드코드에는 "로고 그림의 검은 배경을 투명하게 해서 다시 넣어줘" 한 줄이면 됩니다.

이건 제 로고 파일 하나의 사례입니다. AI 생성 로고가 전부 그렇다고 일반화하진 않겠지만, 배경이 붙어 오는 경우가 있으니 첫 렌더에서 확인하는 항목으로 두는 게 맞습니다.

지점 2 — 한글이 깨지는 원인은 서체가 아니라 라이선스였다

번들 서체 TT Norms Pro에는 한글 글리프가 없습니다. 여기까지는 예상 범위였는데, 진짜 문제는 그 서체가 상용이라는 점이었습니다.

README 원문은 이렇습니다. "A licence to use it does not automatically cover redistributing the files." 쓸 권리가 있어도 파일을 나눠 줄 권리는 따로라는 뜻입니다.

그래서 처방이 두 겹입니다. 한글이 나오게 하려면 NotoSansKR을 @font-face로 등록해야 하고, 폴더를 남에게 배포하려면 TT Norms Pro 파일을 아예 빼야 합니다. 저는 둘을 한 문장으로 시켰습니다. "이 서체로 바꾸고 유료 서체는 폴더에서 빼줘."

판정: 한글 서체 교체는 기능 문제가 아니라 배포 조건 문제로 보는 게 정확합니다.

지점 3 — 사람이 손으로 하는 일은 정말 하나뿐인가

네, 글자 폭입니다. 템플릿은 텍스트 폭을 런타임에 재지 않고 상수로 박아 둡니다. 브라우저에서 재면 폰트 로딩과 경쟁해 대체 서체 값을 돌려주기 때문이라고 README가 밝히고 있어요.

그래서 한글로 라벨을 바꾸면 하이라이트 띠나 선택 바탕이 영어 기준 폭으로 남습니다. 01번 폴더는 메뉴 세 줄의 w·pw 값 세 쌍, 04번 폴더는 밴드 폭 BAND_W 하나(274→296)가 그 지점이었습니다.

02번 폴더는 재야 할 값이 여덟 개라 README가 tools/fit-type.py를 돌리라고 하는데, 그 파일이 저장소에 없습니다. 저는 클로드코드에 "글씨체 파일을 직접 읽어서 글자 폭을 재고 채워줘"라고 시켰고, PIL로 잰 값이 첫 렌더에 맞았습니다.

판정: 이 절차에서 사람에게 남은 손일은 렌더 프레임을 보고 글자 끝 위치를 읽어 숫자로 적는 것 하나이며, 그마저도 도구가 없을 때 에이전트가 대신 잴 수 있습니다.

지점 4 — 검사기가 틀렸다고 하는 걸 왜 안 고쳤나

세로 릴을 처음 검사하니 8 error(s)가 떴습니다. 전부 content_occluded, 폴더 속 카드 세 장이 서로 겹쳐 글자가 가려졌다는 판정이었습니다.

그 화면은 원래 카드가 겹쳐서 튀어나오는 연출입니다. 겹침이 의도라는 걸 검사기만 모르는 상태였어요.

처방은 고치는 게 아니라 표시하는 것이었습니다. 카드 요소에 속성 data-layout-allow-occlusion 한 줄을 붙이자 에러가 0건이 됐습니다.

"검사기가 경고하면 무조건 고쳐야 하는 것 아닌가"라는 반론이 있을 텐데, 여기서 고쳤다면 카드가 겹치지 않는 다른 화면이 됐을 겁니다. 의도된 겹침은 의도라고 선언하는 게 맞는 처방입니다.

다섯 편에서 걸린 건 결국 네 종류였다

폴더	캔버스	새로 걸린 것
01 시작 화면	720² · 10.8s	로고 배경, 한글 서체, 메뉴 폭 상수 3
01b 구독 화면	720² · 10.8s	없음(같은 폴더, 문구만 유튜브 어휘로)
04 세로 릴	720×1280 · 11.8s	밴드 폭 274→296 · 검사기 오탐 8건
02 통통 화면	1080² · 12.1s	글자 폭 8개, 측정 도구 부재
03 톡 화면	720² · 12.8s	없음(사진 슬롯에 채널 캡처 3장)

표에서 볼 건 마지막 열이 뒤로 갈수록 비어 간다는 점입니다. 걸리는 지점은 로고 배경, 한글 서체, 글자 폭, 검사기 표시의 넷으로 수렴했고, 그중 사람이 눈으로 잰 건 글자 폭 하나였습니다.

하지만 첫 시도는 반려했다

처음엔 "클로드코드로 모션그래픽을 만든다"는 영상을 찍으려 했습니다. 카운트업·콜아웃·비트 자막 오버레이 세 개를 직접 저작했고 렌더도 됐어요.

결과를 보고 반려했습니다. 원인은 하나였습니다. 요소마다 이징을 다르게 골라서 화면이 한 사람이 만든 것처럼 보이지 않았어요.

그 하나가 셋으로 갈립니다. 곡선을 통일하지 않았고, 컷 앞뒤의 속도를 맞추지 않았고, 배경·그레인·카메라 이동 같은 마감층이 없었습니다.

거기서 방향을 틀었습니다. 움직임을 짓는 게 아니라, 이미 지어진 움직임에 브랜드를 얹는 쪽으로요.

비용과 배포 조건

렌더는 제 PC에서 돌아가므로 편당 비용은 0원입니다. 코드는 Apache 2.0이라 상업적 사용과 재배포가 허용됩니다.

Remotion과 같은 조건으로 놓고 보면, Remotion은 4인 이상 영리기업부터 유료(Creators 월 25달러/시트)입니다. 개인 채널이면 둘 다 무료지만, 완성 폴더를 남에게 나눠 줄 계획이면 조건이 없는 쪽이 단순합니다.

다만 Apache 2.0은 코드에만 적용됩니다. NOTICE 파일은 번들 미디어·브랜드 자산·서체·서드파티 소프트웨어를 명시적으로 제외하고 있어서, 제가 배포하는 폴더에서는 TT Norms Pro 파일과 HeyGen 데모 영상·사진을 뺐습니다. 2026-09 시점의 조건입니다.

지금 폴더를 열면 30분 뒤에 뭐가 있나

하는 일	문장
폴더 받기	"hyperframes-launches 의 01-ui-sting 을 복사해줘"
바꿀 곳 세기	"손댈 곳을 표로 만들어줘: 로고·색·채널명·문구"
바꾸기	"표대로 교체해줘. 애니메이션은 그대로 둬"
로고 배경	"로고 검은 배경 투명하게 해서 다시 넣어줘"
한글 서체	"이 서체로 바꾸고 유료 서체는 폴더에서 빼줘"
글자 폭	프레임에서 글자 끝을 읽고 숫자 적기 → "검사하고 다시 뽑아줘"

여섯 줄이 이번 편에서 제가 친 문장의 전부입니다. 30분 뒤에는 내 로고와 내 채널 이름이 앉은 10.8초짜리 시작 화면이 있습니다.

지금 채널 첫 화면이 검은 맨 화면이라면, 어느 문장에서 막히는지 보고 그 지점의 원인부터 읽으면 됩니다. 완성 폴더 다섯 개와 brand.md 양식은 오픈톡 방구석모각코에서 받을 수 있습니다.