개요
코드팩토리 채널에서 Hyperframe과 AI를 활용해 얼굴 없이 모션 애니메이션 영상을 제작하는 과정을 시연한다. 단순한 도구 사용법이 아니라 AI와 협업할 때의 핵심 원칙—컨텍스트 동기화, 자기 검증 루프, 루프 클로징—을 실전 예시로 보여준다. 에이전틱 AI 워크플로우를 처음 구축할 때 겪는 시행착오를 어떻게 문서화하여 다음 반복에서 한 번에 성공하도록 만드는지가 핵심 메시지다.
핵심 IDEAS
- 에이전틱 AI는 목표 분해 → 도구 사용 → 자기 검증 → 장기 기억의 4단계 사이클로 작동한다.
- Hyperframe은 HeyGen이 만든 오픈소스 HTML 기반 영상 편집 도구로, 코드로 모션 그래픽을 생성한다.
- Remotion과 Hyperframe은 동일한 용도(코드형 영상 편집)의 대표 도구이며, 얼굴 없는 AI테크 채널이 급증한 배경이다.
- AI 작업 시작 전 반드시 Plan 모드를 사용하고, 내가 결정할 것과 AI에게 위임할 것을 명확히 구분해야 한다.
- 영상 작업에서 AI에게 FPS 단위 영상 자체를 던지는 것은 비효율적이며, SRT 자막 파일로 변환하여 제공하는 것이 올바른 컨텍스트 제공법이다.
- SRT(자막 파일)는 영상의 특정 초에 어떤 발화가 있는지를 시간 동기화하여 담고 있어 AI가 영상 문맥을 정확히 파악하게 해준다.
- Whisper는 오픈소스 음성 인식 프로젝트로, Hyperframe과 통합하면 음성-자막 동기화 자동화가 가능하다.
- AI Experience(AX)는 AI가 프롬프트를 받고 작업하기 편한 환경을 설계하는 개념으로, Developer Experience(DX)의 AI 버전이다.
- 프레임워크 선택 기준은 DX에서 AX로 전환되었다—에이전틱 루프를 방해하지 않는 기술 스택을 골라야 한다.
- AI가 코드를 작성한 후 직접 서버를 실행하고 결과를 확인하여 스스로 수정하도록 자기 검증 루프를 구성해야 한다.
- Playwright MCP는 AI가 웹 결과물을 시각적으로 확인하고 이터레이션하게 하는 핵심 도구다.
- AI의 수정 결과와 실제 결과물 사이의 갭은 당연하며, 불평이 아닌 자기 검증 루프 설계로 해결해야 한다.
- 첫 번째 에이전틱 루프 클로징 후, 작업 중 발생한 에러와 해결 과정을 전부 rules/memory 파일로 문서화해야 한다.
- 문서화된 실패 경험을 다음 세션 시작 시 AI에게 주입하면 두 번째 작업은 한 번에 원하는 결과물이 나온다.
- 에이전틱 루프 관리는 주니어 개발자를 온보딩하는 것과 동일한 방식—원하는 방향으로 AI를 점진적으로 셰이핑한다.
- 멀티 프로젝트 관리를 위한 폴더 구조는 AI에게 위임하여 스스로 설계하게 하는 것이 효율적이다.
- 웹사이트 개발 시 Playwright로 스크린샷을 찍어 AI에게 재주입하면 UI 이터레이션 루프가 자동화된다.
INSIGHTS
- AX(AI Experience) 설계가 생산성의 핵심 변수다: AI에게 음성 파일을 그냥 던지는 것과 SRT로 변환해 주는 것의 차이는, 개발자에게 좋은 IDE와 메모장을 주는 것의 차이와 같다. 도구 선택이 AI 협업 품질을 결정한다.
- 첫 루프 클로징 비용은 투자다: 첫 번째 에이전틱 루프를 닫는 데 시간이 오래 걸리지만, 그 과정의 실패 경험을 문서화하면 두 번째부터는 초기 비용 없이 반복 가능한 파이프라인이 된다. 학습 곡선을 자산화하는 전략이다.
- AI의 자기 검증 루프를 외부에서 설계해야 한다: AI는 스스로 검증 루프를 만들지 않는다. Human이 “코드 작성 → 서버 실행 → 결과 확인 → 재수정” 사이클을 명시적으로 설계해줘야 AI가 그 안에서 자율적으로 동작한다.
- 컨텍스트 동기화는 협업의 전제 조건이다: 사람이 보고 듣는 것과 AI가 처리하는 데이터가 다르면 협업이 불가능하다. 영상→SRT, 이미지→스크린샷, 소리→텍스트처럼 AI가 처리 가능한 형태로 변환하는 것이 협업의 출발점이다.
- 에이전틱 AI 도입은 조직 학습 곡선 관리 문제다: 가트너 예측(2028년 기업 의사결정 15% 자동화)이 실현되려면 도구 도입이 아닌 워크플로우 재설계가 필요하다. 코드팩토리가 보여주는 것은 도구 소개가 아니라 워크플로우 설계 방법론이다.
인용구
“AI한테 시키면 알아서 끝낼 때까지 해주는 시대. 이게 바로 에이전틱 AI입니다.”
“여러분이 결정하고 싶은 거는 꼭 정확히 말을 해 주고요. 그리고 만약에 여러분이 결정하지 않고서 AI가 결정을 했으면 하는 요소들은 그건 네가 결정해라고 말을 해 주는게 제일 좋습니다.”
“AI가 수정한 것과 이 결과물에 갭이 생기는 건 당연한 겁니다. 불평할게 아니라 AI가 스스로 검증할 수 있는 루프를 여러분이 직접 만들어 줘야 된다는 거죠.”
“제가 옛날에는 DX를 중요시 하라고 했는데 요즘은 AX를 중요시 하라고 합니다. AI가 우리 프롬프트를 듣고서 작업하기 편한 환경, 그거를 제공해 줄 수 있는 기술을 여러분이 꼭 사용해 주셔야 됩니다.”
“한 번 이 루프를 클로징을 하고 나면은 우리가 그 루프가 무한하게 돌도록 만들어 낼 수가 있다라는 겁니다.”
언급된 도구/기술
- Hyperframe: HeyGen 제작 오픈소스 HTML 기반 영상 편집 프레임워크
- Remotion: Hyperframe과 유사한 코드형 영상 편집 도구
- Whisper: OpenAI 오픈소스 음성 인식 → SRT 자막 생성
- SRT(SubRip Text): 시간 동기화 자막 파일 형식
- Playwright MCP: AI 브라우저 자동화, 시각적 검증 루프용
- Claude Code (Plan 모드): 에이전틱 작업 계획 수립 모드
- HeyGen: AI 아바타 제작 회사 (Hyperframe 개발사)
FACTS
- 가트너: 2028년까지 기업 의사결정의 **15%**를 AI 에이전트가 자동 처리할 것으로 예측
- AI 에이전트 시장 규모: 2030년까지 연평균 45% 성장 전망
- 영상 길이: 22분 36초 (1,356초)
- Plan 모드 계획 생성 소요 시간: 약 5분
실천 권고
- Plan 모드 먼저: 에이전틱 작업 시작 전 항상 Plan 모드로 구조를 잡고, 내가 결정할 것 vs AI가 결정할 것을 명시적으로 분리한다.
- 미디어→텍스트 변환 습관화: 영상은 SRT, 이미지는 스크린샷, 소리는 전사본으로 변환하여 AI에게 제공한다.
- 자기 검증 루프 설계: AI에게 “코드 작성 후 직접 실행해서 결과를 확인하고 수정하라”는 루프를 명시적으로 지시한다.
- 루프 클로징 후 즉시 문서화: 첫 번째 에이전틱 루프 완료 직후 “어려웠던 점, 문제점, 해결 방법”을 AI에게 정리하게 하여 rules/memory 파일로 저장한다.
- AX 관점에서 기술 스택 선택: 새 프레임워크 도입 시 “이 도구가 AI 에이전틱 루프를 방해하지 않는가?”를 선택 기준에 포함시킨다.