Framefields: TypeScript 코드로 영상 만들기

Framefields는 TypeScript 코드로 영상 만들기를 지원하는 오픈소스 라이브러리입니다. 개발자와 코딩 에이전트를 사용하는 제작자가 장면, 애니메이션, 합성 효과를 코드로 구성하고 GPU로 출력할 수 있습니다. 원본이 프로젝트로 남아 수정과 재검토가 가능합니다.

쉽게 설명하면 이 사이트는 무엇을 하는 곳인가요?

사이트는 영상 엔진과 공식 문서를 제공하는 출발점입니다. 제품 소개에서 제목이 들어오고, 차트가 커지고, 입체 물체가 회전하는 장면을 생각해 보세요. 코드로 위치와 시간을 정하면 Framefields가 프레임과 영상 파일을 만듭니다. 직접 작성하거나 에이전트의 도움을 받을 수 있지만 실행 환경과 소재는 준비해야 합니다. 홈페이지 자체가 즉시 완성 영상을 만드는 온라인 편집기는 아닙니다.

움직이는 글자부터 3D와 소리까지

벡터 텍스트, 글자별 애니메이션, 유연한 레이아웃은 타이틀과 설명 화면에 활용할 수 있습니다. 이미지 및 영상 레이어에는 색상 조정, 블러, 그레인, LUT, 마스크와 전환 효과를 적용할 수 있습니다. 카메라, 조명, 재질과 가져온 3D 모델도 2D 요소와 같은 장면에서 다룹니다.

차트, Lottie 파일, 오디오 트랙과 절차적 효과음도 지원합니다. 오디오 신호로 시각 속성을 움직일 수 있어 제품 데모나 데이터 설명에 사용할 수 있습니다. 이런 기능은 구성 요소를 제공하는 것이므로 소재 선택과 장면 설계, 타이밍을 검토하는 과정은 필요합니다.

첫 MP4를 만드는 확인 순서

1. 공식 시작 문서에 따라 Node.js 22 이상, ES 모듈 프로젝트와 호환 그래픽 환경을 준비합니다. 설치 전에 네이티브 의존성 스크립트의 승인 설정을 확인합니다.
2. 필요하면 에이전트 스킬을 설치하고 문구, 길이, 화면 비율, 제공 파일과 출력 목표를 지정합니다.
3. 테마, 장면 구성과 렌더 스크립트를 분리합니다. 실제 글꼴 파일을 등록하고 Git LFS 소재를 완전히 내려받습니다.
4. 타입 검사, 선택한 PNG 프레임, 프레임 격자를 순서대로 확인합니다. 로컬 미리보기에서 소리와 움직임을 보고 화면에 수정 메모를 남깁니다.
5. QA를 켜서 MP4를 출력하고 검사 결과를 읽은 뒤 최종 파일을 재생합니다.

미리보기는 시간 이동과 한 프레임씩 보기를 지원합니다. 글자가 잘리거나 전환이 어색한 부분을 전체 렌더 전에 찾는 데 도움이 됩니다.

라이선스와 실제 비용, 데이터 처리

2026년 10월 21일 확인 기준으로 프로젝트는 Apache-2.0을 사용합니다. AI 구독, 컴퓨팅, 저장 공간과 소재 사용권은 별도입니다. 공통으로 적용되는 호스팅 가격이나 월별 무료 렌더 한도는 확인되지 않았습니다.

시각 모델은 처음 사용할 때 내려받고 로컬에 캐시합니다. 공식 스킬은 지침이며 스스로 데이터를 전송하지 않습니다. 이 설명이 외부 코딩 에이전트나 원격 서버의 정책까지 포함하는 것은 아닙니다. 프로젝트 파일을 공유하기 전에 각 처리 환경을 확인해야 합니다.

하드웨어와 시각 분석의 한계

네이티브 WebGPU 출력은 Chromium 화면을 연속 캡처하지 않지만 호환되는 그래픽 백엔드가 필요합니다. 지원 환경에서 소프트웨어 렌더도 가능하나 더 느립니다. 아직 베타이므로 버전을 고정하고 실제 장면으로 시험하는 편이 좋습니다. Git 프로젝트를 처리하는 워커를 자체 인프라에 배포하는 방법도 있습니다.

로컬 ONNX 모델은 객체 탐지, 분할, 자세 추정을 제공해 대상에 따라 움직이는 라벨이나 피사체 분리에 활용할 수 있습니다. withVision은 이전에 렌더한 프레임을 사용하며 0번 프레임에는 결과가 없습니다. 간격이 큰 격자 대신 연속 프레임이나 완성 영상을 확인하세요. 시각 처리 가이드에서 동작 차이를 설명합니다.

자주 묻는 질문

코드를 모두 직접 작성해야 하나요?

에이전트가 공식 스킬을 참고해 TypeScript를 작성하고 수정할 수 있습니다. 환경 준비, 소재 제공과 최종 영상 검사는 여전히 필요합니다.

어떤 결과물을 확인할 수 있나요?

문서에는 PNG, 프레임 격자, 로컬 미리보기와 MP4 출력이 안내되어 있습니다. 최종 파일의 글자와 소리도 직접 확인하세요.

오픈소스이면 제작 비용이 없나요?

AI 서비스, 장비, 서버, 글꼴과 음악의 사용권은 별개입니다. 라이브러리 라이선스만으로 전체 비용을 판단할 수 없습니다.

공식 자료와 커뮤니티

• 에이전트 스킬 안내: 설치와 작업 순서.
• GitHub 소스와 예제: 구현 확인과 문제 보고.
• 공식 Discord: 커뮤니티 토론.
• Gatewai YouTube: 참고 영상.