Remocn Studio 핸드오프
Remocn Studio(https://remocn.studio)는 macOS와 Linux용 데스크톱 앱입니다. Remotion 프로젝트를 실시간으로 미리보고, 사용자가 손으로 요소를 조정할 수 있게 하며, mp4를 내보냅니다. 이 앱은 인식하는 폴더만 열 수 있으므로 프로젝트는 한 번 Prepare 과정을 거친 후 언제든지 Opened 할 수 있습니다.
도우미 스크립트는 ${CLAUDE_SKILL_DIR}/scripts/studio.mjs입니다(Claude Code 외부에서는 이 파일 옆에 있는 scripts/studio.mjs). 이 스크립트는 Node만 필요하며 명령 하나당 하나의 JSON 객체를 출력합니다. Remotion 프로젝트 루트에서 실행하거나, 첫 번째 인자로 루트를 전달하십시오.
Prepare
node "${CLAUDE_SKILL_DIR}/scripts/studio.mjs" init <project-root> --name "<비디오 또는 제품 이름>"
이 명령이 수행하는 작업과 사용자에게 전달할 내용:
.remocn/project.json(Studio의 프로젝트 매니페스트: 새projectId,revision: 0, 브랜드 없음)이 없으면 생성합니다. 기존 매니페스트는 절대 수정하지 않습니다. 그projectId는 Studio에서 프로젝트의 식별자입니다.- Studio의 스캔을
src/videos/registry.tsx에 배치하고(없는 경우), 진입점에서registerRoot(withVideos(Root))로 루트를 감쌉니다. 이후src/videos/<slug>/index.tsx가meta를 export하는 모든 파일은 Remotion Studio와 Remocn Studio 모두에서<slug>라는 ID의 컴포지션이 됩니다. 사용자의 기존Root.tsx에 있는 컴포지션은 계속 정상 작동합니다.
사용자가 이미 가지고 있던 프로젝트에서 실행하기 전에 물어보십시오. 진입점을 수정(import 하나, 감싸기 하나)하고 두 파일을 추가합니다.
결과가 ok: false이고 진입점 관련 이유가 있다면, 진입점이 import 이후에 registerRoot(Root)를 정확히 한 번 호출하지 않는다는 의미입니다. 수동으로 감싸기를 수행하십시오: import { withVideos } from "<registry.specifier>";를 추가하십시오(specifier는 결과에서 가져오며 진입점 기준 상대 경로입니다. 예: remotion/index.ts의 경우 ../src/videos/registry). 그런 다음 호출을 registerRoot(withVideos(Root))로 변경하십시오. 이것이 불가능하다면 그 이유를 사용자에게 설명하십시오.
그런 다음 npx remotion compositions를 실행하여 모든 비디오 슬러그가 나열되는지 확인하십시오.
Open
사용자가 Studio에서 프로젝트를 열겠다고 한 후에만 실행:
node "${CLAUDE_SKILL_DIR}/scripts/studio.mjs" open <project-root>
결과의 message를 전달하십시오. action에 따라:
deep-link: Studio가 프로젝트를 열고 있으며 확인 대화상자를 표시합니다. 추가로 할 일은 없습니다.launched: Studio가 시작되었지만 아직 어떤 폴더를 열지 지정할 수 없습니다. 사용자에게 Open Folder(macOS는 ⌘O, Linux는 Ctrl+O)를 선택하고 프로젝트 루트를 선택하라고 알려주고 경로를 알려주십시오.not-installed: 다운로드 링크(https://remocn.studio)와 설치 후 동일한 Open Folder 단계를 알려주십시오.unsupported-platform: Studio가 이 OS에서 실행되지 않습니다. 비디오는 여전히npx remotion studio로 미리보기하고npx remotion render <slug>로 렌더링할 수 있습니다.
결과에 매니페스트가 없다고 나오면 먼저 Prepare를 실행하십시오.
Studio가 설치되어 있는지 확인만 하려면(열지 않고) detect 명령을 실행하십시오.
금지 사항
.remocn/project.json을 수동으로 생성하거나 다른 프로젝트에서 복사하지 마십시오. 동일한projectId를 가진 두 프로젝트는 Studio에서 충돌하며 두 번째 프로젝트를 거부합니다.- 비디오를
src/videos/<slug>/밖으로 이동하지 마십시오. Studio는 비디오를 폴더 이름으로 식별합니다. - claude.ai나 ChatGPT에는 핸드오프할 로컬 프로젝트가 없습니다. 대신 사용자에게 이 플러그인이 설치된 코딩 에이전트(Claude Code, Codex)나 Remocn Studio의 자체 템플릿을 안내하십시오.