편집 가능한 AI 모션 그래픽: 테스트한 두 워크플로
Canvas 루프와 인터랙티브 SVG 설명 자료를 제작·검사·다운로드합니다.
Published · Aixio
편집 가능한 AI 모션을 만드는 실용적인 방법은 납작한 영상 한 개가 아니라 작은 브라우저 프로젝트를 요청하는 것입니다. 서로 다른 두 Aixio Website 워크스페이스에서 Canvas/Web Audio 앰비언트 루프와 인터랙티브 SVG 수업을 만들고, 데스크톱과 모바일에서 정확한 타임라인 프레임을 검사한 뒤 소스를 내보냈습니다. 실행 가능한 두 ZIP을 아래에서 받을 수 있습니다.
왜 브라우저 소스로 모션을 만들까?
영상은 게시하기 쉽지만 문구, 타이밍, 곡선, 레이아웃을 바꾸려면 다시 생성해야 하는 경우가 많습니다. 브라우저 네이티브 애니메이션은 결정을 HTML, CSS, JavaScript에 남깁니다. 편집자는 파일을 고치고, 개발자는 타임라인을 검사하며, 발표자는 상호작용을 유지할 수 있습니다.
공통 제작 계약은 원본 입력, 고정 문구, 명시한 길이, 재생 컨트롤, 가장 어려운 프레임, 결정론적 seek(seconds) 검토, 오프라인 동작, 소스 ZIP이었습니다. Aixio는 브리프, 작업 파일, Website 미리보기를 한 프로젝트에 보관했습니다. 다른 코딩 환경도 이 기술을 구현할 수 있습니다. 여기서 검증한 장점은 독점 렌더러가 아니라 제작과 검토가 이어지는 작업 흐름입니다.
워크플로 1: Tideglass 앰비언트 루프
대상과 작업. 소셜 또는 사운드 편집자가 원본 절차적 사운드를 포함한 24초 정사각형 비주얼 베드를 필요로 합니다.
입력 준비. 가상의 Tideglass 이름, 네 구간 이름, 네 가지 색상 팔레트를 제공했습니다. 참조 이미지나 외부 오디오는 없었습니다. 연속적인 생성 소재에는 Canvas2D가 적합했고, Web Audio는 사운드를 편집 가능한 상태로 유지하면서 외부 샘플 라이선스를 피했습니다.
프롬프트와 실행. 첫 브리프는 1080 정사각형, 정확한 24초 타임라인, 모션 감소, 보이는 컨트롤, 오프라인 동작, window.motionReview.seek(seconds)를 지정했습니다. 에이전트가 잘못 이미지 생성 도구를 실행해 중단했고, 허용된 한 번의 수정을 사용했습니다. 코드만 작성하고 미디어·검색 도구를 사용하지 않으며 index.html, styles.css, script.js, README.md만 만들도록 했습니다.
검수와 전달. 수정하지 않은 내보내기는 정확히 16.00초에 BLOOM / 03을 표시했고 브라우저 경고와 오류가 없었습니다. 390×844에서 문서 폭은 뷰포트와 같았고 Canvas가 넘치지 않았습니다. 소스, 검토 컨트롤, 절차적 오디오, 녹화 메모가 포함된 오프라인 실행 프로젝트입니다.
Tideglass 소스 ZIP 다운로드. SHA-256은 다운로드 체크섬 목록에 있습니다.
한계. 오디오 레벨, 픽셀 단위 루프 이음새, 강제 모션 감소, 영상 내보내기는 확인하지 않았습니다. Aixio의 조립된 about:srcdoc 미리보기는 DOM 대상이 생기기 전에 외부 defer 스크립트를 실행했습니다. 변경하지 않은 내보내기는 정상 동작했으며 미리보기 결함은 해결되지 않았습니다.
워크플로 2: 인터랙티브 3차 베지어 설명
대상과 작업. 교육자나 개발자 애드보킷이 발표, 글, 모바일 링크에서 쓸 수 있는 인터랙티브 설명 자료를 필요로 합니다.
입력 준비. 원본 5단계 수업 개요와 표준 3차 베지어 공식을 제공했습니다. 포인트, 라벨, 포커스, 드래그, 반응형 텍스트를 주소 지정하고 편집해야 하므로 Canvas보다 SVG/DOM이 적합했습니다.
프롬프트와 실행. 별도의 새 Website 워크스페이스에 35초 코드 전용 브리프를 보냈습니다. 드래그 가능한 제어점, 키보드 조정, 구성선, 접선 단계, 반응형 레이아웃, 같은 검토 API를 지정했고 한 번에 index.html, styles.css, app.js, README.md가 만들어졌습니다.
검수와 전달. 수정하지 않은 내보내기는 정확히 21.00초에 구성선, 접선, t = 0.60, B(0.60), 좌표와 공식을 표시했고 경고와 오류가 없었습니다. 390×844에서 공식 상자와 SVG가 뷰포트 안에 유지됐습니다. 편집 가능한 SVG 소스, 결정론적 타임라인, 발표용 컨트롤을 가진 반응형 오프라인 수업입니다.
베지어 소스 ZIP 다운로드. SHA-256은 다운로드 체크섬 목록에 있습니다.
한계. 실제 포인터 드래그, 키보드 포인트 조정, 강제 모션 감소, 영상 내보내기는 확인하지 않았습니다. 조립 미리보기에는 같은 스크립트 순서 문제가 있었지만 내보낸 소스는 정상 렌더링됐습니다.
달라진 것과 재사용된 것
작업에 따라 렌더러가 달랐습니다. 앰비언트 소재에는 Canvas와 Web Audio, 접근 가능한 설명에는 SVG와 DOM을 사용했습니다. 길이, 비율, 가장 어려운 프레임, 검사 기준도 달랐습니다.
재사용된 부분은 제작 계약입니다. 원본 자산을 준비하고, 문구와 길이를 고정하고, 순수 시간 컨트롤을 노출하고, 어려운 프레임을 지정해 반복 탐색하며, 데스크톱과 모바일을 검사한 뒤 소스 ZIP을 전달합니다. 서로 뚜렷이 다른 두 브리프에서 이전됐지만 모델 전체 신뢰성, 원클릭 배치, 공개 저장 Skill을 증명하지는 않습니다.
비용, 실패, 정직한 범위
Tideglass는 중단된 시도와 수정에 0.9805크레딧, 베지어는 29.4821크레딧이 들었습니다. 두 번째 실행 완료 시 UI에는 28.4688이 보였으나 지연 정산 뒤 총액은 30.4626으로 올라 승인된 30크레딧 상한을 0.4626 초과했습니다. 이후 유료 실행은 없었습니다.
이것은 테스트한 수동 레시피이며 저장된 Aixio Skill이나 자동 파이프라인이 아닙니다. 원래 계획한 세 번째 반응형 런치 스토리는 상한 소진 뒤 제출하지 않았습니다. 두 다운로드는 실제 결과이며 숨겨진 세 번째 출력이나 완성 영상은 없습니다.
정확한 레시피 재사용하기
- 워크스페이스를 열기 전에 대상, 최종 용도, 길이, 비율, 고정 문구를 정합니다.
- 연속 소재는 Canvas, 라벨이 있는 기하는 SVG/DOM, 레이아웃 중심 모션은 CSS/DOM을 선택합니다.
- 오프라인 파일, 재생 컨트롤, 모션 감소,
window.motionReview.seek(seconds)를 요구합니다. - 어려운 검토 시점과 반드시 보여야 할 요소를 지정합니다.
- 내보낸 파일을 변경 없이 제공하고 콜드 로드와 다른 시점 뒤에 같은 프레임을 다시 찾습니다.
- 데스크톱과 390px 모바일을 확인한 뒤 소스 ZIP을 내보냅니다.
정확한 프롬프트와 설정 · 워크플로 레시피 · Aixio에서 Website 시작
다른 증거 기반 모션 사례로 단일 이미지 카메라 오빗 실험도 비교해 보세요.
출처
주목받은 영감은 제작자의 Riso Window Seat, 필름 노트, 도구 계약입니다. 구성, 브랜딩, 공개되지 않은 원본 프롬프트가 아니라 결정론적 검토 기법을 적용했습니다. Bang Motion도 스타일 브리프, 짧은 문구, 키프레임 검토를 권하지만 그 Skill은 Aixio에 설치하거나 테스트하지 않았습니다. 접근성은 W3C 애니메이션 지침과 모션 감소 기법 C39를 따랐습니다.
자주 묻는 질문
이 AI 모션 그래픽을 영상으로 내보낼 수 있나요?
완성 프로젝트는 우선 편집 가능한 브라우저 결과물입니다. 화면 녹화나 Canvas 스트림은 후속 단계가 될 수 있지만 이번에는 테스트하지 않았고 소스 ZIP을 대체하지 않습니다.
긴 시네마틱 프롬프트 하나면 안 되나요?
브리프가 작업, 타임라인, 어려운 프레임, 컨트롤, 전달물을 먼저 고정하면 결함을 관찰하고 구체적으로 수정할 수 있습니다. 보기 좋은 실시간 재생 인상에만 의존하지 않습니다.
Aixio Skill인가요?
아닙니다. 두 프로젝트에서 시험한 수동 레시피입니다. 저장된 Skill이나 자동 파이프라인을 사용하지 않았으므로 원클릭 재사용을 주장하지 않습니다.