X Motion
특정한 것을 전달하는 모션을 만드세요. 취향은 맥락에 따라 다릅니다. 조용한 기술 시연과 활기찬 음악 아이덴트는 서로 다른 결정이 필요합니다. 뛰어난 렌더러가 좋은 디자인을 보장하지는 않습니다. 작업의 품질은 아트 디렉션, 실행, 관찰, 그리고 수정을 통해 얻어집니다.
이것은 LangChain의 글에서 논의된 디자인 에이전트에 영감을 받은 독창적이고 이식 가능한 모션 디자인 방법입니다. LangChain 코드나 서비스에 의존하지 않으며, 제휴 관계를 암시하지 않습니다.
작업 계약
- 호스트 프로젝트의 지침과 사용자의 실제 범위를 따르세요. 이 스킬은 게시, 지출, 모델 호출, 자격 증명 획득, 또는 라이선스 없는 에셋 사용에 대한 권한을 부여하지 않습니다.
- 주어진 순간에 하나의 시각적 테제(Visual Thesis)와 하나의 지배적인 초점(Focal Point)을 사용하세요. 복잡성은 테제를 지원할 수 있지만, 실수로 테제와 경쟁해서는 안 됩니다.
- 유형, 간격, 이미지 처리, 모션, 사운드를 하나의 시스템으로 디자인하세요. 약한 아이디어를 겉보기 정교함으로 장식하지 마세요.
- 작업과 사용 가능한 환경에 맞는 도구를 선택하세요. 특정 모델, 프레임워크 또는 렌더링 엔진이 필요하지 않습니다.
- 기술적 증거와 미적 판단을 분리하세요. 취향 점수, 관객 반응 또는 승인을 절대 지어내지 마세요. 비디오의 스틸 컷만 검사했는데 비디오를 시청했다고 절대 주장하지 마세요.
- 에셋을 로컬에 두고 출처를 명시적으로 밝히세요. 의존성을 고정(Pin)하세요. 프로젝트에서 의도적으로 요구하지 않는 한 생성된 렌더를 버전 관리에 포함시키지 마세요.
가장 작은 유용한 프로세스를 선택하세요
작은 편집: 복사 수정, 타이밍 조정, 에셋 교체, 또는 고립된 이징(Easing) 수정은 새로운 브리프, 스토리보드, 애니매틱을 우회할 수 있습니다. 승인된 방향을 유지하고, 영향을 받는 비트와 그 주변을 검사하고, 다시 렌더링하고, 관련 검사를 실행하세요. 변경 사항이 메시지, 계층 구조 또는 내러티브를 변경하는 경우 전체 프로세스로 에스컬레이션하세요.
새로운 구성 또는 실질적인 재설계: 아래 단계를 따르세요. 과제에 맞게 산출물 크기를 조정하세요. 6초짜리 타이틀에 프로덕션 바이블이 필요하지는 않습니다. 중요한 의도가 누락된 경우, 집중된 질문을 하세요. 질문을 할 수 없을 때는 보수적인 가정을 표시하고 되돌릴 수 없는 작업은 피하세요.
1. 브리프 → 시각적 테제
관객, 의도된 핵심 메시지, 시청 맥락, 러닝타임, 화면 비율, 인도물, 필수 사본/에셋, 브랜드 제약 조건, 접근성 요구 사항, 그리고 사운드가 의미를 전달할 수 있는지 여부를 설정하세요. 필수 요구 사항을 선호 사항과 별도로 표시하세요.
다음 형식으로 테제를 작성하세요:
[관객]을 위해, [아이디어]를 [시각적 메커니즘]을 통해 [특정 품질]로 느끼게 하여, [결과]를 이해하거나 행동하게 하세요.
구성 메타포, 지배적인 주제, 타이포그래피 역할, 모션 로직의 이름을 지정하세요. "프리미엄, 시네마틱, 깔끔함"과 같은 목록은 방향이 아닙니다. 어떤 선택이 그 단어들을 실질적으로 만드는지 설명하세요. 다른 작업의 정체성을 재현하는 것이 아니라 원칙을 식별하기 위해 참조를 사용하세요.
브리프 해결, 참조 분석, 일관된 시각적 언어에 대해서는 아트 디렉션을 읽으세요.
2. 스토리보드 → 읽을 수 있는 논증
프레임을 다듬기 전에 비트를 계획하세요. 각 비트에 대해 다음을 기록하세요:
| 시간 범위 | 시청자가 배우는 내용 | 초점 / 키 프레임 | 전환 및 이유 | 오디오 큐 |
|---|---|---|---|---|
| 시작–끝 | 하나의 메시지 | 주제와 계층 구조 | 무엇이 변하는지, 그리고 그 이유 | 이벤트 또는 의도적인 침묵 |
실제 사본과 현실적인 에셋 비율로 대표적인 프레임을 그리거나 렌더링하세요. 읽고 인식하는 데 충분한 시간을 주고, 습관적으로 모든 비트를 균등하게 배포하지 마세요. 오프닝 약속, 비트 간의 인과 관계, 최종 핵심 메시지를 확인하세요. 값비싼 제작 전에 필요시 사람에게 중요한 사본이나 방향을 검증하세요.
구성이나 텍스트 타이밍을 확정하기 전에 타이포그래피를 읽으세요.
3. 애니매틱 → 시간을 저렴하게 테스트하세요
대략적인 시간 프레임, 블록 또는 낮은 디테일의 모션을 만드세요. 합법적이고 명확하게 표시된 경우에만 임시 사운드를 사용하세요. 의도된 속도로 전체 런타임을 스크러빙만 하지 말고 테스트하세요.
주의가 정보가 도착하는 곳에 도달하는지, 텍스트를 읽을 수 있는지, 엔딩이 자리 잡을 공간이 있는지 확인하세요. 여기서 구조를 수정하세요. 방향에 대한 불확실성을 다듬어 없애지 말고 표면화하세요.
시간 디자인과 결정론적 장면 구성에 대해서는 애니메이션 및 카메라를 읽으세요. 사운드가 작품의 일부인 경우 오디오를 읽으세요.
4. 프로덕션 → 의도적인 실행
승인된 비트를 최종 타이포그래피, 에셋, 조명 또는 그래픽 처리, 모션 커브, 전환 및 사운드로 다듬으세요. 테제를 보존하세요. 추가된 각 효과는 역할이 있어야 합니다: 드러내기, 연결하기, 강조하기, 방향 제시하기, 또는 해결하기. 이 중 어느 것도 하지 않으면 제거하거나 표현적 역할을 정당화하세요.
선택적 HTML 렌더러 계약
X Motion HTML 렌더러를 사용할 때, 각 구성은 다음을 노출합니다:
window.motion = { width: 1920, height: 1080, duration: 8, fps: 30, poster: 5.5 };
window.renderFrame = function (tSeconds) {
// 이 타임스탬프와 고정된 장면 데이터에서 모든 애니메이션 속성을 설정합니다.
// 반복 호출(순서가 맞지 않는 호출 포함)은 동일한 프레임을 생성합니다.
};
window.renderAudio = async function ({ sampleRate }) {
// 선택 사항입니다. OfflineAudioContext에서 점수를 작성하고 AudioBuffer를 반환합니다.
};
이 숫자들은 예시일 뿐, 디자인 기본값이 아닙니다. 너비와 높이는 픽셀 단위입니다. duration, poster 및 tSeconds는 초 단위입니다. fps는 프레임 속도입니다. poster는 선택 사항이며 썸네일로 사용되는 프레임의 이름을 지정합니다. 브리프에 맞게 조정하세요.
- 제공된 타임스탬프에서 직접 상태를 계산하세요. 벽시계 시간, 자율 CSS 애니메이션, 누적 시뮬레이션 단계, 네트워크 에셋 또는 시드되지 않은 무작위성은 사용하지 마세요.
- 캡처 전에 로컬 에셋과 글꼴을 로드하고 디코딩하세요.
renderFrame이 반환된 후 비동기 프레임 변이를 도입하지 마세요. 호스트 렌더러의 준비 메커니즘을 확인하세요. - 비트 경계와 활성 구간 너머의 동작을 정의하세요. 반복된 타임스탬프와 역방향 탐색을 테스트하세요.
- 프레임 함수는 시각적 요소를 정의하고 오디오 재생을 정의하지 않습니다. 사운드는
renderAudio에서만 옵니다: 하나 또는 두 개의 채널, 오프라인으로 렌더링되며 모든 호출에서 동일합니다. HTML 미디어 재생은 절대 캡처되지 않습니다.
먼저 설치 심볼릭 링크를 따라 전체 X Motion 클론으로 이 스킬 디렉토리의 실제 위치를 확인하세요. 저장소 루트는 확인된 skills/x-motion 디렉토리 기준 ../..이며, 사용자의 현재 작업 디렉토리 기준이 아닙니다. 이 명령어를 실행하기 전에 해당 저장소 루트로 변경하세요. 아래 구성 경로는 이에 상대적입니다.
스토리보드 PNG와 manifest.json을 내보냅니다(기본적으로 비디오 없음). --times 0.5,2,4.25를 추가하여 스틸을 선택하고 --audio를 추가하여 sound.wav와 함께 음량 수치를 내보냅니다:
node scripts/render.mjs path/to/scene.html --out renders/name-storyboard --audio
스토리보드 PNG, 전체 프레임, poster.webp, film.mp4(renderAudio가 존재할 때 점수가 AAC로 먹싱됨) 및 manifest.json을 내보냅니다:
node scripts/render.mjs path/to/scene.html --out renders/name-video --video
각 수정마다 새로운 출력 디렉토리를 사용하세요. 성공을 보고하기 전에 manifest.json과 실제 출력물을 검사하세요. 이는 프레임 결정론 검사, 오디오 결정론 검사, 통합 음량, 실제 피크 및 클리핑된 샘플을 기록합니다. 비디오 인코딩에는 ffmpeg가 필요합니다. 다른 호스트에서는 결정론적 타임스탬프 의미 체계를 유지하고 내보내기 명령을 조정하세요.
5. 비평 → 수정 → 전달
피드백이 게시된 비디오 ID를 언급하는 경우 갤러리 피드백을 읽으세요. 정확한 영화를 식별하고, 정체성과 피드백을 보존하며, 새로운 연결된 ID로 수정 사항을 게시하세요. 모든 클립별 지침을 보편적인 규칙으로 삼지 말고, 범위가 제한된 교훈을 전달하세요.
소스뿐만 아니라 렌더링된 결과물을 검사하세요. 구성을 위해 스토리보드를 보고 리듬을 위해 비디오를 재생하세요. 오디오가 있는 경우 내보낸 오디오를 듣세요. 재생 또는 청취가 불가능한 경우, 정확히 무엇이 검토되지 않았는지 명시하세요.
비평 및 전달을 사용하여 측정 가능한 실패와 주관적인 문제를 분리하세요. 영향이 가장 큰 문제부터 해결하세요. 비평/수정 루프를 방향당 최대 3회 반복으로 제한하세요. 방향이 여전히 해결되지 않은 경우 중단하고, 경쟁하는 우려 사항을 설명한 후, 인간에게 선택하거나 명확히 하도록 요청하세요. 기술적 통과는 미적 승인이 아닙니다.
결과물 위치, 소스 위치, 내보내기 사양, 검증 증거, 알려진 제한 사항 및 해결되지 않은 승인 질문을 전달하세요. 실제로 관찰한 내용을 보고하세요. 승인 없이 외부에 게시하지 마세요.
참조 맵
현재 단계에 필요한 참조만 로드하세요: