"Vibe Coded After Effects 복제품을 써보고 느낀 점" — 바이브 코딩 시대의 명암과 아키텍처의 진실

GitHub Issue 리뷰 — vibe-ae-clone 직접 설치해서 굴려본 후기입니다. 시연 영상만 보고 넘어가지 마시고, 실제로 써보면서 뻗은 곳을 솔직하게 적습니다.

최근 유튜브(FUTC 채널)를 통해 '바이브 코딩(Vibe coding)으로 만든 애프터 이펙트(After Effects) 클론' 시연 영상을 흥미롭게 살펴보았습니다. 복잡한 타임라인, 이펙트 렌더링, 레이어 컴포지팅이 들어가는 거대한 데스크톱 소프트웨어를 AI 에이전트와 대화 몇 마디만으로 구현해 내는 모습을 보면, 개발 패러다임이 완전히 바뀌고 있다는 것을 실감하게 됩니다.

하지만 현장에서 직접 AI 에이전트를 활용해 코드를 찍어내고 '바이브 코딩'을 실천해 보는 개발자라면, 이 찬란한 시연 뒤에 숨겨진 구조적 현실을 뼈저리게 공감할 것입니다. 영상과 실제 개발 경험을 바탕으로, 바이브 코딩으로 복잡한 소프트웨어를 찍어낼 때 마주하는 현실과 우리가 지켜야 할 아키텍처 원칙을 정리해 봅니다.

사용 환경

한 줄 요약: 시연 화면만큼은 훌륭한데, 그 화면 바깥은 아직 프로토타입 수준입니다. UI와 파이프라인은 진짜 빠르고, 실전 기능 한 개 붙이는 순간 구조가 버티지 못합니다.

잘 되는 것

프로토타이핑 속도는 정말 현실입니다. 며칠씩 걸리던 UI 레이아웃이랑 기본 렌더링 루프가 몇 시간 만에 나옵니다. 레이어 패널 드래그, 타임라인 스크럽, 키프레임 인터페이스가 "작동한다"는 수준까지는 올라옵니다. 이 부분은 시연이 과장이 아니었습니다.

렌더링 파이프라인 초안도 유용합니다. WebGL/WebCodecs로 합성 흐름을 잡아주는 것까지만 해도 발품을 만드는 시간이 크게 줄어듭니다. 제가 제일 많이 참고한 부분이 여기였습니다.

발견한 문제

1. 모놀리식 스파게티 (치명적)

소스를 열어보면 AI가 맥락이 길어질수록 코드를 한 파일에 거대하게 뭉쳐놓거나, 함수 간 의존성을 꼬아놓기 쉽습니다. 이 프로젝트도 예외가 아니었습니다.

재현 조건: 컴포넌트 10개 정도 넘어가면 간헐적으로 빌드 실패. 처음엔 "설정 문제인가" 했는데 알고 보니 renderer.ts 하나가 2,400줄이었고, 상태와 렌더 로직이 뒤섞여 있었습니다.

2. 상태 관리 붕괴 (치명적)

이펙트와 타임라인 레이어가 얽히는 순간, 생성된 코드는 사소한 수정에도 사이드 이펙트를 뿜어내며 전체 렌더링 루프를 망가뜨립니다.

제가 실제로 겪은 재현 절차:

1. 레이어 5개 생성
2. 두 번째 레이어에 키프레임 추가
3. 첫 번째 레이어의 굵기 값 변경 → 2~3번 레이어의 렌더가 silent하게 깨짐
4. 콘솔 에러 없이 화면만 이상해짐. 이게 가장 무서운 부분입니다.

3. 실전 기능 확장 시 벽 (높음)

기본 데모는 되는데 대용량 미디어 처리, 메모리 최적화, 정밀한 키프레임 인터랙션을 붙이려 하면 즉각 한계에 부딪힙니다. 1080p 10초 영상을 10개 레이어로 겹치면 프레임 드롭이 심해지고, 어디가 병목인지 추적이 안 됩니다.

요약하면: 만든 것과 운영할 수 있는 것 사이에 좁고 깊은 간극이 있습니다.

아키텍처 원칙 (그래도 진짜 쓸모 있습니다)

이 한계를 극복하려고 시도해 보고 어쨌든 규모를 늘린 부분을 공유합니다. 제 결론은 꽤 명확합니다.

엄격한 블록 단위 모듈화 (Strict Block-Level Modularity)

이게 유일하게 실제로 먹힌 해법이었습니다.

철저한 책임 분리 (Separation of Concerns)

"애프터 이펙트를 만들어줘" 하고 광범위하게 던지면 반드시 실패합니다. 대신 아래처럼 쪼개고 각 모듈의 인터페이스(I/O)만 명확히 지시하는 방식으로 바꿨더니 성공률이 눈에 띄게 올랐습니다.

src/
├── core/         # 상태 머신. 렌더링 알림 없음
├── render/       # WebGL. 상태 변경 불가, 읽기만
├── io/           # 파일 로드/저장. core 상태만 변경
├── ui/           # 순수 표시. 부수효과 없음
└── effects/      # 이펙트 정의. 순수 함수

핵심 규칙은 딱 두 줄입니다:

• render/는 core/를 직접 수정하지 않는다. 이벤트를 쏠 뿐.
• effects/는 순수 함수. 들어온 값에 대한 반환만 한다.

에이전트의 시야 제한 (Context Scope Control)

전체 소스코드를 한 번에 에이전트에게 먹이면 AI의 집중력이 흐트러지고 캐시 효율도 떨어집니다. 수정이 필요한 특정 모듈 블록만 발췌해서 넘기는 구조가 필수입니다.

제 실제 루틴: 에이전트에게 "core/ 안에서만 일하라. render/ 와 ui/ 는 import 금지"라고 붙여 넣습니다. 이미 어긴 흔적이 있으면 그걸 먼저 정리하고 나서 지시를 줍니다.

총평

바이브 코딩으로 만든 애프터 이펙트 클론 같은 프로젝트는 기술이 얼마나 발전했는지를 보여주는 동시에, "결국 단단한 뼈대(아키텍처)와 모듈 설계 능력이 없는 개발은 금방 무너진다"는 역설적인 교훈을 남깁니다.

개발자의 역할이 키보드로 세부 문법을 치는 사람이 아니라, AI 에이전트가 올바른 궤도로 코드를 찍어내도록 가이드라인을 치고 아키텍처를 통제하는 오케스트레이터가 된 것이 이 프로젝트에서 확인된 가장 확실한 변화입니다.

다시 쓰게 될 것 같다. 다만 블록 구조를 먼저 깬 다음 시작해야 합니다. 순서가 반대라면 시연 영상만큼은 만들어지고 그 다음부터 무너집니다.

같은 후기를 남깁니다. 도움되는 내용이 있으면 댓글로 알려주세요.

type CoreEvent = {
  v: 1
  type: 'layer.mutated'
  id: LayerId
  patch: Partial<Layer>
}