작업 방식
chart-animation은 현재 영상 프레임에서 수치와 도형을 계산하는 움직이는 차트를 만듭니다. 데이터를 픽셀로 매핑하는 스케일과 프레임을 변화하는 값으로 매핑하는 보간을 분리합니다. 차트 라이브러리 자체 타이머가 오프라인 렌더러와 어긋날 수 있을 때 중요한 구분입니다.
문서화된 워크플로는 Remotion으로 결과를 렌더링하며 데이터셋을 입력 props에 유지합니다. 커지는 막대, 카운터, 선 그리기, 순위 시퀀스를 다룹니다. 영상을 인코딩하거나 여러 데이터셋에 디자인을 반복 적용하기 전에 렌더링한 스틸에서 정확한 라벨, 단위, 최종 값을 확인합니다.
예상 산출물
- 프레임 기반 Remotion 차트 컴포지션.
- MP4와 재사용 가능한 데이터셋/테마 입력.
- 라벨, 순위, 값을 확인할 대표 스틸 이미지.
브리프에서 검토까지
- 01데이터셋 매핑 검증
시간 필드, 시리즈, 단위, 값의 범위를 확인합니다. 데이터셋과 테마를 분리한 채 입력 스키마 및 기본 props와 함께 Remotion 컴포지션을 등록합니다. 행 수가 영상 길이를 결정한다면 calculateMetadata로 길이를 계산해 데이터셋이 바뀌어도 이전 영상 길이가 남지 않게 합니다.
- 02프레임으로 변화 구동
프레임 시계로 값과 위치를 계산합니다. 충돌하는 차트 라이브러리 애니메이션 루프를 끄고 반올림 후 표시 값을 서식화합니다.
- 03인코딩 전 확인
실제 납품용 props로 시작, 중간, 마지막 스틸을 렌더링합니다. 전체 MP4를 렌더링하기 전에 정확한 수치, 순위 변화, 라벨과 스케일을 확인합니다.