After Effects 없이도 웹 애니메이션 만들기: JSON 파싱부터 Remotion까지

– ArtXTech

문제 상황

프로젝트에서 갑자기 After Effects 사용이 어렵게 되었다. 라이선스 문제든 뭐든, 어쨌든 못 쓰게 됐다는 거다. 그러나 매일 똑같은 텍스트 애니메이션을 수십 개씩 만들어야 하는 상황이었다. “CHAOTIC” 텍스트가 Y축으로 찌그러졌다 늘어났다 하는 그런 키네틱 타이포들을.

솔직히 이런 반복 작업을 사람이 계속 하는 게 말이 되나? 그래서 결심했다. After Effects JSON 데이터를 분석해서 똑같은 애니메이션을 코드로 구현해보자고.

JSON 분석: After Effects 들여다보기

먼저 Bodymovin 플러그인으로 export한 JSON 파일을 뜯어봤다. 구조가 생각보다 복잡하더라.

{
  "v": "5.7.4",
  "fr": 30,
  "ip": 0,
  "op": 90,
  "w": 1920,
  "h": 1080,
  "layers": [
    {
      "ddd": 0,
      "ind": 1,
      "ty": 5,
      "nm": "CHAOTIC",
      "ks": {
        "s": {
          "a": 1,
          "k": [
            {"t": 0, "s": [100, 100, 100]},
            {"t": 30, "s": [100, 50, 100]},
            {"t": 60, "s": [100, 100, 100]}
          ]
        }
      }
    }
  ]
}

핵심은 ks.s.k 배열이었다. 여기에 스케일 애니메이션의 키프레임 데이터가 들어있더라. t는 시간(프레임), s는 스케일 값이고. Y축 스케일이 100 → 50 → 100으로 변하는 게 바로 그 “찌그러지는” 효과였다.

Remotion + p5.js: 웹에서 키네틱 애니메이션 구현하기

기존에 만들어둔 Day36, Day41 컴포넌트를 참고해서 새로운 애니메이션을 구현했다. 핵심 아이디어는 이거다:

  1. Remotion의 useCurrentFrame()으로 정확한 타이밍 제어
  2. p5.js로 Canvas 기반 렌더링
  3. JSON 데이터의 키프레임을 코드로 재현
// dayChaoticText/Index.tsx
import { useCurrentFrame, useVideoConfig } from "remotion";
import { P5CanvasComponent } from "@remotion/p5";

export const DayChaoticText: React.FC = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
  
  // JSON에서 추출한 키프레임 데이터
  const keyframes = [
    { frame: 0, scaleY: 1.0 },
    { frame: 30, scaleY: 0.5 },
    { frame: 60, scaleY: 1.0 }
  ];
  
  // 현재 프레임에서의 Y 스케일 계산
  const currentScaleY = interpolateKeyframes(frame, keyframes);
  
  return (
    <P5CanvasComponent
      sketch={(p5) => {
        p5.setup = () => {
          p5.createCanvas(1920, 1080);
        };
        
        p5.draw = () => {
          p5.background(0);
          p5.fill(255);
          p5.textAlign(p5.CENTER, p5.CENTER);
          p5.textSize(120);
          
          // Y축 스케일 적용
          p5.push();
          p5.scale(1, currentScaleY);
          p5.text("CHAOTIC", p5.width/2, p5.height/2);
          p5.pop();
        };
      }}
    />
  );
};

프로젝트 구조: 체계적인 워크플로우 구축

VideoEditPlayground/
├── src/remotion/100DaysOfMotion1/
│   ├── day36/                    # 참조 템플릿
│   │   ├── Index.tsx            # P5 + Remotion 조합
│   │   └── day36.module.scss    # 스타일 모듈
│   ├── day41/                   # 참조 템플릿
│   │   └── Index.tsx            # 레이어 기반 애니메이션
│   └── dayChaoticText/          # 새로 구현한 컴포넌트
│       ├── Index.tsx            # 메인 애니메이션 로직
│       └── dayChaoticText.module.scss
└── public/aftereffect/
    └── pre-comp-01-1.json       # AE 소스 데이터

데이터 흐름을 도식화하면 이렇다

graph TD
    A[After Effects JSON] --> B[JSON Parser/Analyzer]
    B --> C[Animation Config]
    C --> D[Remotion Component]
    D --> E[P5.js Sketch]
    D --> F[GSAP Timeline]
    D --> G[SCSS Styles]
    
    H[useCurrentFrame] --> D
    I[useVideoConfig] --> D
    
    E --> J[Canvas Rendering]
    F --> K[DOM Animation]
    G --> L[CSS Styling]
    
    J --> M[Final Animation Output]
    K --> M
    L --> M
    
    style A fill:#ff9999
    style M fill:#99ff99

AE JSON → Frame Analysis → Layer Config → Remotion Timeline → P5 Rendering → Canvas Output

해결된 문제들과 그 효과

1. 정책적 제약 → 오픈소스 스택 활용

After Effects 대신 Remotion + p5.js + GSAP 조합으로 일부 대체를 시작했다. 오히려 웹 네이티브라 어떤 경우엔 확장성 측면에서 더 유용했다.

2. 반복 작업 → 코드 자동화

기존에 수작업으로 키프레임 찍던 걸 프로그래밍 로직으로 자동화했다.

3. 웹 호환성 → 네이티브 웹 기술

Canvas 기반 렌더링이라 브라우저에서 바로 재생 가능하다. 별도 플레이어도 필요 없고.

성능과 품질

AE렌더링 결과보다 텍스트 렌더링 품질이 웹에서 더 선명하게 나온다.

// 키프레임 보간 함수
function interpolateKeyframes(currentFrame, keyframes) {
  // 현재 프레임이 어느 키프레임 구간에 있는지 찾기
  for (let i = 0; i < keyframes.length - 1; i++) {
    const start = keyframes[i];
    const end = keyframes[i + 1];
    
    if (currentFrame >= start.frame && currentFrame <= end.frame) {
      // 선형 보간으로 중간값 계산
      const progress = (currentFrame - start.frame) / (end.frame - start.frame);
      return start.scaleY + (end.scaleY - start.scaleY) * progress;
    }
  }
  
  return keyframes[keyframes.length - 1].scaleY;
}

향후 계획: 더 넓은 확장성

After Effects나 다빈치 리졸브를 완전히 대체할 순 없겠지만 어느 일정 작업들부터는 충분히 고품질 애니메이션을 만들 수 있다는 걸 이번 변환작업을 통해 가능성을 보았다.

앞으로 계획하고 있는 것들:

  1. 더 복잡한 애니메이션 패턴 지원 - 회전, 위치 이동, 투명도 등
  2. 일괄 변환 도구 개발 - JSON을 드래그하면 Remotion 컴포넌트 자동 생성
  3. 템플릿 라이브러리 구축 - 자주 쓰는 애니메이션 패턴들을 미리 코드화

결론

코드 기반 애니메이션의 장점을 새삼 깨달았다:

  • 버전 관리: Git으로 애니메이션 히스토리 추적 가능
  • 재사용성: 컴포넌트로 만들어서 언제든 재활용
  • 자동화: 반복 작업을 완전히 없앨 수 있음
  • 웹 호환성: 별도 변환 없이 바로 브라우저에서 실행

솔직히 처음엔 “이거 진짜 될까?” 싶었는데, 막상 해보니 생각보다 어렵지 않았다. JSON 구조만 이해하면 꽤 상당부분 AE로 구성한 키네틱 타이포 애니메이션을 코드로 재현할 수 있을 것 같다.

이로서 꽤 많은 워크플로우에 제한적이던 반복 작업에서 해방되고, 더 유연한 애니메이션 시스템을 갖게 됐다.

다른 리모션 포스팅을 보고 싶다면

2025-01-16-implementing-canvas-animation-to-remotion-kr
2025-03-18-making-my-own-video-editor-in-progress
KR-no-more-adobe-starting-remotion-kr
KR-remotion-gsap
KR-making-chart-data-journalism-storytelling-motion-setup-with-remotion
KR-figma-to-jitter-and-remotion
KR-how-i-make-a-youtube-series-with-remotion-dynamic-srt-script-setup-exp-likejennie
KR-how-i-made-podcast-interview-with-ai-virtual-idol
KR-remotion-and-shader
KR-thepain-of-animation-debugging