2025년 4월 회고: Remotion과 현실 사이에서 깨달은 자동화의 진실

2025년 4월 회고: Remotion과 현실

프롤로그: 자동화라는 달콤한 유혹

4월 초, 나는 확신에 차 있었다. 이번 달은 진짜 뭔가 대단한 걸 만들어보자. Remotion으로 비디오 자동화 마스터하고, Keyframe Timeline으로 작업 영상 만들고…

그런데 4월이 끝난 지금, 키보드 앞에 앉아 회고를 쓰면서 드는 생각은…

“자동화가 이렇게 수동적인 작업이었나?”

4월의 여정 맵 ├── Remotion 마스터리 (꿈 vs 현실) ├── Keyframe Timeline (시간과의 전쟁) ├── Chart.js 통합 (예상치 못한 복잡성) ├── 윤석열 탄핵 & 데이식스 공연 (현실 도피)

시간 투자

4월 개발 시간 분포

실제 코딩: ████████░░ (40%)
디버깅: ██████████ (50%) 
문서화: ███░░░░░░░ (15%)

React로 비디오 만들기? 쉽겠네!

Remotion을 처음 접했을 때의 흥분을 아직도 기억한다. “UX 개발자로 수년간 쌓아온 React 경험이 드디어 비디오 제작에 쓰일 때가 왔구나!”

// 4월 초의 나
const MyVideo = () => {
  return <div>Hello Video!</div>
}

// 4월 말의 나  
const MyVideo = () => {
  const { fps, durationInFrames } = useVideoConfig();
  const frame = useCurrentFrame();
  
  return (
    <Sequence from={0} durationInFrames={durationInFrames}>
      <ChartWrapper 
        data={chartData}
        animationProgress={interpolate(frame, [0, 60], [0, 1])}
        onLoadComplete={() => console.log('Chart rendered!')}
      />
    </Sequence>
  );
}

비디오 제작은 단순한 컴포넌트 렌더링이 아니라 시간축 기반의 복잡한 오케스트레이션이다.

Keyframe Timeline: 시간이라는 차원과의 조우

웹 개발에서는 x, y, z축만 신경 쓰면 됐다. 그런데 비디오에는 시간축이라는 괴물이 있었다.

// 이론상 완벽한 애니메이션
const PerfectAnimation = () => {
  const frame = useCurrentFrame();
  // 0-60프레임: 왼쪽에서 등장
  const x1 = interpolate(frame, [0, 60], [-100, 0]);
  // 60-120프레임: 가운데서 회전
  const rotation = interpolate(frame, [60, 120], [0, 360]);
  // 120-180프레임: 오른쪽으로 퇴장
  const x2 = interpolate(frame, [120, 180], [0, 100]);
  
  return (
    <div style={{
      transform: `translateX(${x1 + x2}px) rotate(${rotation}deg)`
    }}>
      나는 완벽한 애니메이션
    </div>
  );
};

// 현실: 프레임 계산 지옥
// "어? 180프레임이 몇 초지?"
// "fps가 30이면... 계산기 어디 있지?"
// "아, 이거 겹치면 어떻게 되지?"

Chart.js와 Remotion의 기묘한 동거

가장 도전적인 과제는 Chart.js를 Remotion에 통합하는 것이었다. 공식 문서에선 “D3 쓰세요”라고 했지만… 이미 Chart.js로 짠 타임라인 페이지가 있는데 뭣땀시.

interface ChartWrapperProps {
  data: ChartData;
  type: 'doughnut' | 'bar' | 'line';
  animationProgress: number;
}

const ChartWrapper: React.FC<ChartWrapperProps> = ({ 
  data, 
  type, 
  animationProgress 
}) => {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  
  useEffect(() => {
    if (!canvasRef.current) return;
    
    const chart = new Chart(canvasRef.current, {
      type,
      data: {
        ...data,
        datasets: data.datasets.map(dataset => ({
          ...dataset,
          // Remotion 프레임에 맞춰 애니메이션 진행도 조절
          circumference: 360 * animationProgress,
        }))
      },
      options: {
        animation: false, // Remotion이 애니메이션 제어
        responsive: false,
        maintainAspectRatio: false,
      }
    });
    
    return () => chart.destroy();
  }, [data, type, animationProgress]);
  
  return <canvas ref={canvasRef} width={800} height={600} />;
};

도넛 차트는 완벽하게 작동했다.
다른 차트들은… 아직 숙제다.
“일부 성공도 성공이다”라는 말, 이럴 때 쓰는 거다.

현실 도피의 다양한 형태들

윤석열 탄핵에 대한 나의 분노와 창의적 표출

4월 중순, 정치적 상황이 답답해질 때마다 나는 코딩으로 도피했다. 특히 윤석열 탄핵 관련 뉴스를 볼 때마다…

graph LR
    A[정치 뉴스 시청] --> B[분노 게이지 상승]
    B --> C[Remotion 프로젝트 열기]
    C --> D[정치적 메시지 애니메이션 제작]
    D --> E[트위터 업로드]
    E --> F[일시적 카타르시스]
    F --> A

데이식스 공연: 현실과의 접촉점

4월의 하이라이트 중 하나는 데이식스 공연이었다. 간만에 리프레쉬 된 경험이었다.

AI 코딩의 양면성: LLM의 환각과 데이터 유출

GitHub Copilot과 ChatGPT를 활용하면서 LLM AI Agent와 협업하는 코딩의 명암을 체험했다.

장점

• 보일러플레이트 코드 생성 속도
• 생소한 API 빠른 학습
• 창의적 아이디어 브레인스토밍

함정

• “그럴듯하지만 틀린” 코드
• 근본적 이해 없이 복사-붙여넣기
• 디버깅 능력 저하

코드 리뷰를 하다 AI가 클래스 이름을 멋대로 바꿔놔 몇 시간을 디버깅에 허비했던 경험은 진짜 피가 거꾸로 솟는 일이었다.
AI가 생성한 코드는 ‘짝퉁 명품 가방’과 같아서, 겉은 번지르르해도 실제 프로덕션에 배포했다가 시스템이 다운될 수도 있다.

// AI가 생성한 그럴듯한 코드
const optimizeRendering = (videoConfig) => {
  return {
    ...videoConfig,
    optimized: true,
    performance: "enhanced"
  };
};

// 진짜 최적화 코드 (수동으로 작성)
const optimizeRendering = (videoConfig) => {
  return {
    ...videoConfig,
    pixelFormat: 'yuv420p',
    crf: 23,
    preset: 'medium'
  };
};

디지털 가든으로의 대이동

드래프트 파일들의 새로운 보금자리

4월 말, 흩어져 있던 여러 드래프트 파일들을 디지털 가든으로 옮기는 대작업을 시작했다. 이건 단순한 파일 이동이 아니라 사고 체계의 재구성이었다.

Before

/drafts ├── random_idea_1.md ├── half_finished_post.md ├── important_but_where.md └── 왜_만들었는지_기억_안남.md

After

/digital-garden ├── seedlings (아이디어 단계) ├── growing (진행 중) ├── evergreen (완성된 생각) └── archived (역사적 의미)

정보 아키텍처의 재발견

파일을 정리하면서 깨달은 것은 좋은 정보 아키텍처의 중요성

LLM AI Gen을 활용한 코딩의 양면성

GitHub Copilot과 ChatGPT를 활용하면서 LLM AI Agent와 협업하는 코딩의 명암을 체험했다.

장점

• 보일러플레이트 코드 생성 속도
• 생소한 API 빠른 학습
• 창의적 아이디어 브레인스토밍

함정

• “그럴듯하지만 틀린” 코드
• 근본적 이해 없이 복사-붙여넣기
• 디버깅 능력 저하

// AI가 생성한 그럴듯한 코드
const optimizeRendering = (videoConfig) => {
  // 복잡해 보이는 최적화 로직
  return {
    ...videoConfig,
    optimized: true, // 실제로는 아무것도 최적화하지 않음
    performance: "enhanced" // 의미 없는 프로퍼티
  };
};

// 진짜 최적화 코드 (수동으로 작성)
const optimizeRendering = (videoConfig) => {
  return {
    ...videoConfig,
    // 실제 성능에 영향을 주는 설정들
    pixelFormat: 'yuv420p',
    crf: 23,
    preset: 'medium'
  };
};

4월의 프로젝트들

Remotion Chart.js 통합

• 완성도: 60%
• 상태: 도넛차트만 완벽 동작
• 계획: 5월에 바 차트, 라인 차트 추가

유튜브 콘텐츠 제작

• 완성도: 10%
• 상태: 기획 단계
• 계획: 스크립트 작성부터 차근차근

UI 전면 개선

• 완성도: 70%
• 상태: 디자인은 완성, 사용성 검증 필요
• 계획: 사용자 테스트 진행

자동화 시스템

• 완성도: 40%
• 상태: 핵심 컴포넌트만 구현
• 계획: 반자동화로 방향 전환

인사이트: 미완성 프로젝트들도 모두 소중한 학습 자산이다.

실패의 가치 재발견

const failureValue = {
  youtube: {
    attempt: "첫 영상 촬영",
    result: "20번 재촬영 후 포기",
    lesson: "콘텐츠 제작은 별개의 기술",
    value: "다음 시도를 위한 경험치"
  },
  
  perfectUI: {
    attempt: "완벽한 인터페이스 구현",
    result: "무한 픽셀 조정",
    lesson: "완벽주의는 진행을 막는다",
    value: "실용주의적 접근법 체득"
  },
  
  fullAutomation: {
    attempt: "완전 자동화 시스템",
    result: "복잡성으로 인한 진행 지연",
    lesson: "자동화도 단계적으로",
    value: "현실적 목표 설정의 중요성"
  }
};

4월은 많은 것을 시도했지만 완성하지 못한 달이었다. 하지만 그 과정에서 진짜 중요한 것들을 발견했다

1. 완벽보다는 진전이 중요하다
2. 기술은 수단이지 목적이 아니다
3. 사용자 경험이 기술적 완성도보다 우선한다
4. 지속 가능한 발전이 빠른 성장보다 가치 있다
5. 인간적 경험을 잊지 말아야 한다

4월의 교훈들

완벽주의와 실용주의 사이의 균형

4월을 관통하는 테마는 완벽주의 vs 실용주의였다.

graph TD
    A[완벽한 계획] --> B[복잡한 구현]
    B --> C[예상치 못한 문제]
    C --> D[무한 디버깅]
    D --> E[번아웃]
    
    F[실용적 접근] --> G[MVP 구현]
    G --> H[빠른 피드백]
    H --> I[점진적 개선]
    I --> J[지속 가능한 발전]

깨달음: 80% 완성도로 배포하고 피드백 받는 것이, 100% 완성도를 추구하다 아무것도 완성하지 못하는 것보다 낫다.

자동화의 역설 기술과 인간 경험의 균형

“자동화”를 목표로 시작했지만, 정작 가장 많은 시간을 투자한 건 수동 작업이었다.

목표: 5분 → 자동화된 비디오 생성
현실: 50시간 → 자동화 시스템 구축 (진행 중)

기술도 결국 인간 경험을 향상시키기 위한 것임을 잊지 말아야 한다.

const lifeBalance = {
  technology: {
    purpose: "문제 해결과 가치 창출",
    warning: "기술을 위한 기술은 의미 없다"
  },
  
  humanExperience: {
    importance: "기술보다 우선",
    examples: ["음악", "사람들과의 만남", "현실 세계 경험"],
    insight: "기술도 결국 인간 경험을 향상시키기 위한 것"
  }
};

데이터로 보는 4월의 성장

기술적 성과 지표

const aprilGrowth = {
  remotion: {
    after: "Chart.js 통합, Keyframe 제어 가능",
    growth: "+400%",
    evidence: "실제 동작하는 애니메이션 차트"
  },
  
  videoProduction: {
    after: "기본 파이프라인 이해",
    growth: "+∞%",
    evidence: "Logic Pro를 사용한 오디오 편집 시도"
  },
  
  uiDesign: {
    after: "사용자 경험 고려",
    growth: "+150%",
    evidence: "메인 페이지 수차례 개선"
  },
  
  contentCreation: {
    after: "구조적 회고록 작성",
    growth: "+200%",
    evidence: "이 포스트 자체"
  }
};

개인적 성장 지표

4월 개인 성장 레이더 차트

        기술력 (7/10)
             /\
            /  \
   창의성(8)    \    (6)문제해결력
         /      \
        /        \
   끈기(5)-------(9)자기성찰
        \        /
         \      /
     (4)소통    \    (7)현실감각
             \  /
              \/
        시간관리 (3/10)

가장 많이 성장한 영역: 자기성찰 (+90%)
가장 개선이 필요한 영역: 시간관리 (-30%)

미완성의 아름다움

“완성되지 않음”을 받아들이기

4월은 많은 것을 시도했지만 완성하지 못한 달이었다.
자동화의 환각, 데이터 유출 위험, 그리고 인간적 경험 사이에서 진짜 중요한 것들을 발견했다.

1. 완벽보다는 진전이 중요하다
2. 기술은 수단이지 목적이 아니다
3. 사용자 경험이 기술적 완성도보다 우선한다
4. 지속 가능한 발전이 빠른 성장보다 가치 있다
5. 인간적 경험을 잊지 말아야 한다

“미완성도 괜찮다. 저항도 가치 있다. 기술은 인간을 위한 것이다.”

5월을 향한 현실적 계획

더 이상 무리하지 않기

1순위: 기존 프로젝트 완성도 높이기

• Remotion Chart.js 통합 완성 (도넛차트 외 다른 차트 타입 안정화)
• GSAP 애니메이션 이미지 로딩 문제 해결
• Whisper 자막 시스템 실제 동작 검증

2순위: 워크플로우 개선

• 디자이너 친화적인 데이터 입력 인터페이스 구축
• 자동화 vs 수동 작업의 적절한 균형점 찾기
• AI 코딩 도구 활용 가이드라인 팀 내 정착

3순위: 새로운 도전 (신중하게)

• 음악 분석 도구 재탐색 (단, 의존성 지옥 피하기)
• 동적 슬라이드 길이 조정 시스템
• 보안을 고려한 YouTube 쇼츠 자동화 완성