브랜드 일관성은 작고 명확한 소재 묶음에서 시작됩니다. 이 안내는 오픈 소스 Claude Motion 도구 모음과 Remotion 소재 규칙을 사용합니다. 준비 과정은 HyperFrames 편집에도 유용하지만 React import와 staticFile은 Remotion 방식이며 본 사이트 편집기의 명령이 아닙니다.
에이전트가 따를 수 있는 소재 목록 만들기
승인된 로고, 있다면 밝고 어두운 배경용 버전, 정확한 글꼴 파일, 간단한 색상표, 공개해도 되는 스크린샷을 모읍니다. 프로젝트 옆 문서에 각 파일명, 용도, 출처, 사용 허가를 적고 현재 제품명과 승인된 행동 안내도 추가하세요. 임시 소재는 분명히 표시합니다. 구현 전에 실제로 찾은 파일을 나열하도록 하면, 그럴듯한 영상이 진짜 로고를 몰래 바꾸거나 제품에 없는 화면을 만드는 문제를 피할 수 있습니다.
안정적인 로컬 경로 사용하기
Remotion 프로젝트에서는 public/assets/logo.png, public/assets/dashboard.png처럼 공용 소재를 public 아래에 두고 public 기준 상대 경로를 staticFile에 전달합니다. 이름은 짧고 대소문자는 일관되게 사용하세요. 다른 컴퓨터에서는 대소문자 차이로 경로가 실패할 수 있습니다. 만료될 수 있는 임시 이미지 URL보다 허가된 로컬 파일을 우선합니다. 렌더링 편의를 위해 URL에 접근 토큰을 넣거나 고객의 비공개 스크린샷을 공개 호스트에 올리지 마세요.
움직이기 전에 투명도와 잘림 확인하기
밝은 배경과 어두운 배경에서 모두 로고를 열어 봅니다. 흰 사각형은 렌더링 문제가 아니라 이미지 자체일 수 있고, 투명 여백 때문에 실제 로고가 작아 보일 수도 있습니다. 종횡비와 승인된 여백을 유지하세요. 사진마다 상자를 채울지 전체를 넣을지 결정합니다. 채우면 중요한 내용이 잘릴 수 있습니다. 애니메이션 전에 각 소재의 정지 화면을 요청하고, 가는 선은 데스크톱 확대 화면뿐 아니라 실제 휴대폰 표시 크기로 검사합니다.
실제 글꼴을 불러오고 모든 문자 확인하기
Remotion은 @remotion/fonts를 통한 로컬 글꼴 로딩을 안내합니다. 지정한 글꼴과 실제 굵기를 사용하고 측정이나 렌더링 전에 로딩이 완료되도록 합니다. 사용 목적이 허가 범위에 들어가는지 확인하고 라이선스 기록을 보관하세요. 라틴 글꼴에 중국어, 일본어, 한국어 글리프가 없을 수 있으므로 적절한 대체 글꼴을 지정하고 검토해야 합니다. 모든 언어가 동일하게 보인다고 가정하지 마세요. 가장 긴 제목, 문장부호, 숫자, 악센트 문자를 테스트하고, 번역으로 줄바꿈이 달라지면 전부 작게 줄이기 전에 배치를 조정합니다.
브랜드를 정확히 지시하고 출력 검사하기
아래 프롬프트로 브랜드 요구 사항을 구체적으로 전달하세요. 승인 후 실제 MP4에서 글꼴 대체, 로고 잘림, 색 변화, 누락 이미지를 확인하세요. 소재, 목록, 글꼴 정보, 완성본을 함께 보관합니다. 본 사이트의 편집 가능한 다운로드로 로컬 작업을 이어갈 수 있지만 범용 브랜드 업로드나 자동 브랜드 키트 가져오기를 가정해서는 안 됩니다.
제공한 로고를 다시 그리지 말고 사용하세요. 승인된 크림 배경과 짙은 회색 글자를 쓰고 초록색은 핵심 행동에만 쓰세요. 제공한 글꼴을 로드하고 스크린샷의 비율과 내용은 유지하세요. 움직이기 전에 로고, 가장 긴 제목, 스크린샷이 포함된 정지 화면을 보여주세요다음 단계
실제 파일과 명확한 규칙을 전달한 뒤 내보낸 영상에서 확인하세요. 정확한 소재 목록이 막연한 “브랜드답게”라는 요구보다 믿을 만합니다.
제작 작업 공간 살펴보기출처와 참고 자료
출처는 원본 문서와 제작자 페이지로 연결됩니다. 제공 기능은 바뀔 수 있으므로 구독하거나 설치하기 전에 해당 출처를 확인하세요.
- Importing assetsRemotion
- Using fontsRemotion
- Visual review loopwhaleyxbt
- Claude Motion Skills public CLIClaude Motion Skills