Media Studio: 3D와 HTML 페이지

3D 디렉터 스테이지: 프리비즈 먼저, 렌더링은 나중에

목적은 단 하나: 영상에 크레딧을 쓰기 전에 공간 관계를 확정하는 것입니다.

블로킹, 카메라 움직임, 가림, 여러 사람이나 차량의 상대적 위치처럼 말로는 잘 전달되지 않는 요소를 스테이지 위에 화이트 모델로 물리적으로 배치합니다. 화이트 모델 프리비즈를 보며 카메라와 움직임을 확정한 다음, 그 움직임을 보드로 보내 최종 렌더링을 이끌게 합니다. 이렇게 아끼는 것은 생성 한 번이 아니라 시퀀스 전체를 다시 찍는 비용입니다.

클립: 스테이지 열기 → 카메라 선택기로 마스터 카메라와 숏 카메라 두 대 시점으로 보기 → 프리비즈 재생 → 감독 시점에서 궤도 회전 → 카메라에서 카메라 하나를 활성으로 설정 → 프레임을 보드로 → 움직임을 보드로 → 닫기. 이제 보드에 정지 이미지와 프리비즈 영상이 생깁니다

시작하기

1. 노드 추가 → 3D 디렉터 스테이지(베타, 에이전트가 생성). 3D 배지가 붙은 노드가 나타나며, 버튼은 스테이지 열기 하나뿐입니다.
2. 스테이지 열기를 누르세요. 스테이지가 전체 화면으로 열립니다(처음에는 "디렉터 스테이지를 여는 중…"이 표시됨). 왼쪽에는 스테이지 전용 대화가, 오른쪽에는 3D 뷰포트가 있습니다.
3. 왼쪽 아래의 "장면을 설명하세요..."에 장면을 설명하고(누가, 어디서, 어떻게 움직이는지, 카메라는 어떻게 움직이는지) 보내세요. 스테이지 에이전트의 기본 티어는 Ultra입니다. 시작이 막막하다면 빈 화면에 아이디어 떠올리기 도와줘 / 장면 이미지로 월드 만들기 / 스토리보드로 프리비즈 만들기 / 제품 페이지 같은 URL에서 시작하기가 있습니다.
4. 에이전트가 장면을 화이트 모델 프리비즈로 만듭니다. 사람은 실제 키에 맞춘 원기둥이나 상자, 세트는 회색 블록입니다 — 텍스처나 조명 없이 부피와 움직임만 있습니다. 숏마다 카메라를 하나씩 만들고(마스터 카메라도 유지) 완료되면 몇 줄로 보고합니다. 이 단계에는 미디어 크레딧이 거의 들지 않지만, 공간 구성이 제대로 되는지 확인할 수 있습니다.

브리프에서 가장 중요한 한 문장: "화이트 모델, 움직임과 카메라만"이라고 분명히 적으세요. 이 말이 없으면 에이전트가 세트를 꾸밀 수 있고(네온, 비, 반사), 그러면 영상 모델이 움직임 대신 겉모습을 따라 하게 됩니다. Night Run 예시의 브리프는 "순수 화이트 모델 프리비즈: 색상 없음, 텍스처 없음, 재질 없음…"으로 시작합니다.

열었을 때 보이는 화면

상단 표시줄(왼쪽부터)

컨트롤	하는 일
감독 시점	자유 카메라로 돌아갑니다(드래그해서 궤도 회전. 마우스를 올리면 키보드 안내 표시: W A S D 이동, Q E 아래 / 위, Shift 빠르게)
카메라 시점 ▾(카메라 선택기)	에이전트가 만든 카메라 목록. 하나를 고르면 그 카메라 시점으로 봅니다. 카메라가 없을 때는 "먼저 카메라를 추가하세요"가 표시됩니다
↻	파일에서 스테이지 다시 불러오기
16:9 ▾	화면 비율: 16:9, 9:16, 1:1, 4:3, 21:9, 3:4
프레임을 보드로	활성 카메라로 정지 이미지 한 장을 렌더링해(긴 변 1920px) 보드에 이미지 노드로 추가합니다. 알림: "프레임이 보드에 추가되었습니다"
움직임을 보드로	활성 카메라로 타임라인 전체를 렌더링해(긴 변 1280px, 브라우저에서 렌더링, 상태 "영상 렌더링 중…") 비디오 노드로 추가합니다. 알림: "영상이 보드에 추가되었습니다"
그리기	프레임 위에 그림을 그리고 메모를 붙입니다. 대기열에 넣거나 에이전트에게 바로 보내기(대기열은 최대 10개)
패널 아이콘 / ×	인스펙터 표시 / 숨기기. 스테이지 닫기(Esc도 가능)

오른쪽 인스펙터: 아무것도 선택하지 않으면 "스테이지에서 무언가를 클릭하거나 아래 윤곽선에서 골라 살펴보세요. 에이전트에게 장면을 만들고, 옮기고, 조명을 넣어 달라고 요청하세요."라고 표시됩니다. 아래에 접을 수 있는 섹션 네 개가 있습니다.

• 설정 · n — 이 스테이지에서 정의한 스위치, 색상, 슬라이더(에이전트의 코드에서 나오며 스테이지마다 다릅니다).
• 카메라 · n — 카메라 목록(시야각 포함). 행을 클릭하면 그 카메라 시점으로 보고, 선택 항목에 카메라로 보기, 활성화(활성 카메라는 프레임 / 움직임을 보드로 기능이 사용하는 카메라), 시야각 슬라이더, 위치 / 대상이 표시됩니다. 각 행에는 @(채팅에서 언급)가 있어 채팅에 @camera:<id>를 넣으므로 에이전트에게 정확히 가리킬 수 있습니다. 카메라는 에이전트만 만들 수 있습니다 — 채팅에서 요청하세요.
• 객체 · n — 스테이지 위의 객체. 행이나 뷰포트의 객체를 클릭해 선택하면 표시, 위치 / 회전 / 배율, 크기가 나타납니다. 여기에도 **@**가 있습니다.
• 에셋 — 컴퓨터에서 파일 업로드(GLB, 텍스처, HDR, 오디오…)(.glb / .gltf / .obj / .fbx, 텍스처, HDR, 오디오. 파일당 100MB). 이 스테이지에는 이 스테이지의 파일이 나열되며 .glb 파일 옆에 배치가 있습니다. 보드 라이브러리 · 3D에는 보드 라이브러리에 이미 있는 3D 모델이 나열되며, 여기에도 배치와 **@**가 있습니다.

아래쪽 플레이어: 재생 / 일시 정지, 반복, 시간 표시(예: 7.53 / 16.00), 스크러버, @(채팅에서 이 순간 언급, @time:7.5s 삽입 — "이 시점에는 차가 모퉁이를 지나 있어야 해"를 클릭 한 번으로 전달할 수 있습니다), 전체 화면(컨트롤이 숨겨지며 Esc로 다시 표시). 타임라인은 기본 10초, 30fps이며 에이전트가 바꿀 수 있습니다.

왼쪽 대화에서는 에이전트의 작업이 카드로 표시됩니다: 카메라 움직임 렌더링 <카메라> · 0s–4s(카메라 하나의 구간을 스테이지의 렌더링 폴더에 영상으로 렌더링), 보드로 내보내기(정지 이미지 / 영상 묶음을 "<스테이지 제목> · 3D"라는 그룹으로 "인수인계" 메모와 함께 보드로 보냄), 결과 보고(실행 결과 요약). 직접 누르는 프레임 / 움직임을 보드로는 인수인계 메모 없이 단일 노드를 만듭니다.

프리비즈에서 실제 숏으로

1. 보드에서 프리비즈 비디오 노드의 ⊕ → 비디오로 드래그하세요. 모션 레퍼런스를 받는 모델(예: Seedance 2.5)을 고르고, 화면 비율은 프리비즈와 같게 맞추세요.
2. 프롬프트에서 각 블록이 무엇인지 말하고, 색상만이 아니라 카메라 기준 위치로 이름을 붙이세요("카메라에서 가장 먼 가장 밝은 블록은 도주하는 검은 세단이고, 루프 바가 달린 카메라에 가장 가까운 블록은 경찰차로 내내 뒤따라온다"). 영상 모델은 프리비즈의 움직임은 따르지만 역할은 자유롭게 배정합니다.
3. 생성하세요. Night Run 예시에서는 카메라 네 대가 각각 프리비즈 클립을 만들고, 각 클립이 실사 숏이 되었으며, 이 숏들을 비디오 컴포저에서 16초 시퀀스로 편집했습니다.

내 3D 모델 가져오기

Blender, C4D 등 어떤 도구에서 내보낸 .glb 파일이든 스테이지에 바로 올릴 수 있습니다: 인스펙터 → 에셋 → 파일 업로드. 업로드가 끝나면 자동으로 배치됩니다("<이름>이(가) 스테이지에 배치되었습니다"). 또는 glb를 먼저 보드에 에셋으로 업로드한 뒤 보드 라이브러리 · 3D에서 배치하세요. 스테이지에 올라가면 에이전트가 만든 블록과 똑같이 선택하고, 옮기고, 프레임에 담을 수 있습니다. Tripo 등으로 생성한 3D 노드도 같은 라이브러리에 나타납니다.

스테이지가 제값을 할 때: 여러 인물의 블로킹, 추격 장면, 실내 이동, 주변과의 위치 관계가 고정된 제품, 완전히 같은 카메라의 여러 버전. 단순한 인물 사진이나 제품 클로즈업에는 필요하지 않습니다.

공식 예시: 영감 얻기의 Night Run — 자동차 추격전, 3D 스테이지에서 Seedance로가 바로 이 방법으로 만들어졌습니다 — 화이트 스테이지에서 카메라 움직임 네 개를 확정한 다음 Seedance로 보내 실제 숏을 만들었습니다. Florida House — 평면도에서 3D 단면도로는 또 다른 활용법을 보여 줍니다. 평면도를 위에서 내려다본 렌더링으로 바꾼 뒤, 스테이지에서 벽 하나하나 가구가 배치된 3D 단면도로 다시 만들고, 위에서 본 정지 이미지와 45° 버즈아이 정지 이미지로 내보냈습니다.

30초로 보는 디렉터 스테이지:

3D 월드와 리깅

• 3D 월드(노드 추가) / 이미지의 3D 월드 생성: 설명이나 사진으로 생성하는, 돌려 보고 안으로 걸어 들어갈 수 있는 공간입니다. 결과물은 둘러보기 화면이 있는 3D 노드입니다.

• 골격 리깅: 애니메이션을 위한 자동 골격 리깅입니다. 적용 범위가 중요합니다: Tripo로 생성한 모델에서만, 그리고 캐릭터 / 생물에서만 작동합니다. 업로드한 모델, 3D 월드, 이미 리깅된 결과물은 리깅할 수 없습니다.

HTML 페이지: 세 가지 종류, 종류마다 전용 Studio

HTML 노드는 이미지가 아니라 재생되고 반응하는 페이지를 만듭니다. 노드 추가 → HTML(베타)을 누르면 스튜디오 열기 버튼 하나만 있는 빈 카드가 놓입니다. 처음 열면 페이지 유형 선택에서 다음 중 하나를 묻습니다.

종류	대화 상자의 설명	캔버스	Studio 이름
포스터	정적인 디자인. 텍스트와 레이어를 직접 편집할 수 있습니다.	1080×1620	Design Studio
모션	HTML 애니메이션: 타임라인 위의 텍스트, 도형, 전환 효과를 영상으로 렌더링합니다. — 대화 상자의 설명은 실제보다 소박합니다. 이것은 보드의 After Effects입니다. 아래를 참고하세요	1920×1080	Motion Studio
인터랙티브 영화	분기형 영상: 시청자가 선택 지점에서 고릅니다. 브라우저에서 재생되며 Steam과 모바일로 내보낼 수 있습니다.	1920×1080	Interactive Studio

각 카드에 마우스를 올리면 짧은 미리보기가 재생됩니다. 인터랙티브 영화에만 두 번째 단계인 영화의 UI 테마 선택이 있습니다: 중국 고전(먹과 금칠 조각, 주홍빛 인장 — 사극, 무협, 궁중 암투), SF(건메탈 패널, 청록색 라이트 바 — 우주, 사이버펑크), 동양 판타지(가는 금색 선, 자수정 장식, 부적 인장 — 수련, 하이 판타지, 신화), 모던(반투명 유리, 가는 테두리, 네온 핑크 포인트, 말풍선 선택지 — 도시, 로맨스, 호러, 범죄). 테마는 한 번만 정하며, 테마 키트는 영화의 테마 폴더에 들어가고 나중에 Studio에서 스타일을 바꿀 수 있습니다.

종류를 고르면 바로 Studio가 열리며("스튜디오를 여는 중…"), 페이지에는 "채팅에서 포스터를 설명하세요" 같은 한 줄짜리 안내 문구가 표시됩니다. 빈 Studio에는 컴포저를 채워 주는 시작 문구가 몇 개 있습니다. 포스터: 짧은 브리프로 출시 포스터 만들기 / 내 문구를 타이포그래피 포스터로 / 현재 포스터 스타일 바꾸기. 모션: 이 페이지를 읽는 순서대로 애니메이션 / 6초 타이틀 카드 / 내레이션에 맞춰 모션 타이밍 조정. 영화: 내 클립으로 스토리 그래프 작성 / 아직 필요한 구간 계획 / 커버와 선택지 스타일 바꾸기.

네 번째 종류로 앱(독립적으로 동작하는 인터랙티브 페이지: 게임, 도구, 프로토타입)이 있습니다. 대화 상자에는 없으며 작업에 필요할 때 에이전트가 만들고, 해당 Studio는 App Studio입니다.

노드 도구 모음은 종류에 따라 달라집니다(전체 화면과 삭제는 항상 오른쪽에 있습니다).

종류	도구 모음
포스터	레이어 내보내기, Design Studio
모션	렌더링, Motion Studio
인터랙티브 영화	빌드 내보내기, 빌드 다운로드(빌드가 있을 때), Interactive Studio
앱	App Studio

에이전트가 작성한 브리프가 아직 실행되지 않은 노드에는 실행이 먼저 표시됩니다. 전체 화면은 페이지를 실행하거나(포스터 / 영화 / 앱) 구성을 재생합니다(모션).

포스터: 완성 후에도 여전히 디자인 파일

클립: 포스터 노드 → 레이어 내보내기 → 보드에 레이어 문서가 나타남 → 레이어 편집으로 레이어 편집기 열기 → 레이어 수정 → 캔버스로 내보내기

Design Studio 살펴보기

Design Studio는 전체 화면으로 열립니다. 왼쪽에는 포스터 전용 대화가, 오른쪽에는 페이지가 있습니다.

• 첫 번째 탭 줄: 채팅 숨기기 / 채팅 표시, 디자인 파일, 파일 탭, 에이전트가 질문할 때 질문. 오른쪽에는 내보내기 ▾(이미지 내보내기, PSD 내보내기 — 포스터 레이어마다 레이어 하나 — 그리고 보드로 레이어 내보내기)와 프레젠테이션.
• 두 번째 줄: 미리보기 새로고침, 조정(에이전트에게 조절 가능한 컨트롤 요청), 댓글(페이지 요소에 댓글 달기), 편집(오른쪽 서랍: 캔버스에서 무엇이든 클릭해 글꼴, 크기, 상자 변경), 그리기(표시를 그려 에이전트에게 보내기), 확대/축소.
• 레이어 패널: 모든 포스터 레이어(빌링 블록, 제목, 태그라인, 키 아트…)가 있으며, 각각 레이어 숨기기 / 레이어 표시용 눈 아이콘이 있습니다. 이미지 레이어에는 이미지 재생성이 있습니다.
• 변경 사항은 페이지에 바로 반영되며, 저장 버튼은 없습니다. 전체 스타일을 바꾸고 싶다면 채팅에서 요청하세요.

레이어를 내보내 레이어 편집기에서 마무리하기

1. 보드로 돌아와 포스터 노드를 선택하고 레이어 내보내기를 누르세요(카드에 "레이어 내보내는 중…" 표시).
2. 완료되면 — "레이어를 새 노드로 내보냈습니다" — 포스터 옆에 "<포스터 이름> 레이어"라는 레이어 문서가 놓이며, 포스터 레이어마다 레이어가 하나씩 있습니다(최대 128개). 래스터화할 수 없는 레이어(예: SVG 필터 필름 그레인)는 "N개 레이어 건너뜀: …"과 함께 제외됩니다.
3. 레이어 편집을 누르면 Photoshop급 레이어 편집기가 열립니다: 순서, 불투명도, 혼합 모드, 리터치, 자르기, 텍스트 — 보드와 이미지 도구를 참고하세요.
4. 캔버스로 내보내기로 결과를 새 이미지로 가져오거나, PNG / PSD 다운로드를 하세요.

페이지 → 레이어 내보내기 → 레이어 편집기 → 다시 보드로 이어지는 이 흐름은 Media Studio에서 가장 간과되면서도 가장 유용한 흐름입니다. AI가 생성한 레이아웃을 다시 생성하는 대신 디자인 파일처럼 편집할 수 있습니다.

모션 페이지: 보드의 After Effects

모션 노드는 "작은 애니메이션"이 아닙니다. 프레임 단위로 정확하게 렌더링되는 구성입니다. Motion Studio 에이전트가 HTML로 작성하고, 렌더링이 이를 프레임 단위로 영상으로 바꿉니다. 보드에서 이것은 생성된 클립이 담아낼 수 없는 후반 작업입니다 — 프레임이 정확해야 할 때는 언제나 여기서 작업합니다.

• 실사 또는 생성된 영상 위의 문구, 숫자, 로고, 브랜드 타이포그래피
• 타이틀 카드, 제목, 로워 서드, 엔드 카드
• 설명 영상과 데이터 스토리: 막대가 축에서 자라나고, 선이 경로를 따라 그려지고, 숫자가 목표값까지 올라갑니다
• 프로모션 및 제품 영상, 출시 영상, 제품 업데이트, HUD 데모, 트레일러: 그래픽, 타이포그래피, 인터페이스 모션으로 이루어진 작품 전체
• 내레이션 트랙에 맞춘 단어 단위 동기화 자막(하이라이트, 노래방 스타일 알약형, 전체 화면 강조, 네온, 그레이디언트 채우기 — 또는 일반 자막 바와 기업형 로워 서드)
• 마스크와 혼합 모드, 장면 사이의 WebGL 셰이더 전환(크로스페이드, 와이프, 리플, 셔터, 글리치, 블러 스왑, 플래시…)
• Three.js 3D: 모델, 파티클, 조명, 카메라 움직임 — 영상 모델의 추측이 아니라 프레임 단위로 제어해야 하는 3D 숏을 위해
• Lottie 애니메이션, 여러 장면으로 된 작품(장면마다 하위 구성 하나), 매개변수화된 템플릿(제목, 색상, 길이를 변수로)

소재를 넣는 방법: 보드의 비디오 / 이미지 / 오디오 노드를 모션 노드에 연결하세요. 영상은 아래에 깔리는 전체 화면 소스가 되고(천천히 다가가는 움직임 등을 줄 수 있음), 이미지는 레이어가 되며, 오디오는 내레이션이나 배경 음악이 됩니다. 그리고 작품의 속도가 목소리에 맞춰집니다. 오디오 노드를 연결하면 클립 길이와 각 문구가 나타나는 시점이 소리를 따릅니다.

홈 화면 영감 얻기에 있는 HTML 모션 작품 아홉 개를 모은 편집본(각 5초): 드론 영상 위의 HUD, 제품 UI가 움직이며 그려지는 출시 영상, 로고로 변하는 아이콘, 숫자가 화면에 표시되는 제품 업데이트, 영상 위의 데이터 리포트, 지식 영상에서 스스로 그려지는 차트, 1:1 마켓플레이스 영상, 픽셀 게임 데모, VHS 스타일 트레일러 — 모두 모션 노드에서 렌더링했습니다.

모션을 써야 할 때와 쓰지 말아야 할 때

원하는 것	사용할 것
정확한 텍스트, 숫자, 로고, UI. 타이틀 카드, 로워 서드, 자막	모션
설명 영상, 데이터 리포트, 제품 업데이트, 출시 영상, HUD, 트레일러, 마켓플레이스 영상	모션(작품 전체)
이미 생성한 클립에 제목 / 브랜드 타이포그래피 / 단어 동기화 자막 / 데이터 오버레이 추가	모션: 해당 비디오 노드를 연결하고 새 비디오 노드를 렌더링하세요. 원본 클립은 그대로 유지됩니다
사람의 연기, 자연스러운 장면, 렌즈 특유의 느낌, 빛	영상 생성. 텍스트가 정확해야 한다면 그다음에 모션 작업
클립 잇기, 자막 바, 음악, 내보내기만 필요할 때	비디오 컴포저가 더 빠릅니다
계속 편집할 수 있는 정적 레이아웃	포스터

시작하기

같은 곳에 이르는 세 가지 방법:

1. 에이전트에게 말하기(일반적인 방법): 작품을 설명하고 "HTML 모션 페이지로"라고 말한 다음, 제품 사진, 영상, 로고, 내레이션을 연결하거나 @로 언급하세요. 에이전트가 먼저 대본 / 사양을 텍스트 노드에 작성한 뒤, 모션 노드를 만들어 Studio에 넘깁니다. 렌더링 결과는 모션 노드 옆의 비디오 노드이며, 마스터본이 필요하면 컴포저에서 효과음을 믹싱하거나 오프닝을 추가합니다 — 홈 화면 예시 아홉 개 모두 이 구조입니다: 사양 텍스트 → 모션 노드 → 렌더링된 영상 → 컴포저.
2. 직접 노드 배치하기: 노드 추가 → HTML → 스튜디오 열기 → 모션을 선택한 다음, Studio의 채팅에 브리프를 작성하세요(길이, 장면, 장면마다 보여 줄 텍스트, 브랜드 색상, 효과음 / 내레이션).
3. 예시에서 시작하기: 홈 화면 영감 얻기의 아무 HTML 모션 카드 → 복사 후 계속을 누른 다음, 제품 이름, 숫자, 색상을 바꾸세요(각 예시에는 이어서 작업할 수 있는 한 줄짜리 프롬프트가 있습니다. 레시피 16 참고).

Motion Studio의 작동 방식

Motion Studio는 대화로 움직입니다. 드래그할 키프레임 타임라인은 없습니다. 에이전트가 설명을 바탕으로 영상, 텍스트, 그래픽, 전환 효과를 타임라인에 배치하고, 사용자는 미리보기를 보며(진행 막대로 어느 순간으로든 이동 가능) 한 문장으로 수정합니다.

클립: 드론 영상 위 HUD 수정하기 — Motion Studio 열기 → 12초의 목표 고정 장면까지 재생 → "호박색 조준선과 왼쪽 아래에 신뢰도 표시"를 요청 → 에이전트 작업이 끝나면 미리보기 새로고침 후 다시 재생 → 닫기 → 렌더링 → 보드의 비디오 노드가 그 자리에서 업데이트됨

1. 모션 노드를 선택하고 Motion Studio(또는 카드의 버튼)를 누르세요. 왼쪽에 대화가 있고(컴포저에 "이 페이지에 원하는 모션을 설명하세요..."가 표시됨), 오른쪽에 플레이어가 있으며 아래쪽에 재생, 이동 가능한 진행 막대, 음소거, 재생 속도가 있습니다.
2. 바꾸고 싶은 순간으로 이동해 변경 사항을 설명하세요 — "헤드라인이 페이드 대신 왼쪽에서 밀려 들어오게 해 줘. 큰 숫자 세 개는 각각 2초에 걸쳐 올라가게 해 줘. 고정 조준선은 호박색으로. 마지막 로고 화면은 1초 더 유지해 줘". 에이전트가 어떤 큐 포인트를 바꿨는지 요약해 줍니다.
3. 미리보기 새로고침을 누르고 다시 재생하세요. 상단 표시줄에는 그리기(위치에 동그라미를 그려 에이전트에게 보내기)와 닫기도 있습니다.
4. Studio를 닫고 노드를 선택한 뒤 렌더링을 누르세요. 카드에 "렌더링 중…", 이어서 "모션 렌더링 완료"가 표시되고, 같은 이름의 비디오 노드가 옆에 나타나거나 업데이트됩니다. 다시 렌더링하면 그 비디오 노드가 그 자리에서 업데이트되므로 렌더링 결과가 쌓이지 않습니다.
5. 이 비디오 노드는 편집, 믹싱, 오프닝 추가를 위해 비디오 컴포저에 바로 넣을 수 있습니다.

알아 두면 좋은 점: 오디오 노드를 모션 노드에 연결하면 렌더링 시 이를 내레이션으로 취급해 길이를 맞춥니다. 렌더링은 동시에 두 개까지, 각각 최대 약 20분까지 실행되며, 모션 페이지 하나에는 요소 노드를 최대 60개까지 넣을 수 있습니다. 페이지 자체의 효과음, 음악, 내레이션은 렌더링에 포함됩니다. 소리를 더 겹치고 싶다면 렌더링된 영상과 오디오 노드를 함께 컴포저에 넣으세요. 무거운 구성(3D, 셰이더 전환, 여러 장면으로 된 긴 작품)에는 Studio의 모델 티어를 Ultra나 Mega로 설정하세요. AI 슬라이드 / Design 페이지를 내레이션 영상으로 만들 때는 모든 페이지가 이런 모션 노드 하나입니다 — 해당 페이지의 Motion Studio를 열어 수정한 다음 그 페이지만 다시 렌더링하세요.

30초로 보는 모션 페이지:

인터랙티브 영화

인터랙티브 영화는 5–15초짜리 구간으로 이루어진 그래프입니다. 시청자가 선택 지점마다 고르면 이야기가 갈라지고, 여러 엔딩 중 하나로 끝납니다.

클립: 영화 노드 선택 → 전체 화면으로 플레이어 열기 → 커버 → 새 게임 → 첫 번째 구간 → 선택 지점에서 선택지 네 개가 나타남 → 하나를 고름 → 이야기가 갈라짐 → 스토리 트리에서 흐름도 확인 → 메뉴로 일시 정지 카드 열기 → 계속하기

만들기

• 대본, 구간, 분기는 모두 프로젝트 안에 있습니다. story.json에는 오프닝, 각 구간의 영상, 자막(.vtt), 1–6개의 선택지와 다음에 이어질 내용, 그리고 챕터, 캐릭터, 업적, UI 문자열이 들어 있습니다.
• 가장 쉬운 방법은 인터랙티브 영화 게임 스킬입니다("이야기를 분기형 인터랙티브 영화로 바꿉니다: 시청자가 선택 지점에서 고르고, 캔버스에서 미리 보고, Steam과 모바일로 내보냅니다."). 이야기 하나로 에이전트가 스토리 그래프를 작성하고, 아직 필요한 구간을 나열하고, 생성한 뒤, 플레이어에 연결합니다. 보드에는 분기마다 비디오 노드 하나와 "스토리 트리" 텍스트 노드가 보입니다.
• Interactive Studio에서 채팅으로 커버, 선택지 문구, 테마를 조정하세요.

플레이어 살펴보기

• 커버: 제목과 태그라인. 재생을 누르면 타이틀 메뉴가 열립니다: 계속 / 새 게임 / 챕터 / 불러오기 / 엔딩 (n/4 해금) / 업적 / 캐릭터 / 설정 / 크레딧.
• 재생 중: 왼쪽 위에 챕터 이름, 오른쪽 위에 배지 네 개 — 챕터 / 엔딩 / 스토리 트리 / 메뉴. 오른쪽 아래에 CC(자막), 1.0×(속도), 전체 화면. 처음 볼 때는 건너뛸 수 없으며("처음 볼 때는 건너뛸 수 없습니다"), 이미 본 구간에는 ⏭ 본 구간 건너뛰기가 표시됩니다.
• 선택 지점: 구간이 끝나기 몇 초 전에 선택 카드가 나타납니다(선택적으로 카운트다운 포함 — 시간제한 선택. 시간이 지나면 기본 선택지가 선택됩니다: "침묵도 하나의 선택입니다").
• 스토리 트리: 영화 전체의 흐름도로, 방문한 노드가 밝게 표시됩니다. 전체 보기 / 현재 위치 찾기 / 여기로 되감기도 있습니다.
• 메뉴(일시 정지 카드): 계속하기 / 장면 다시 보기 / 챕터 / 저장 / 불러오기 / 설정 / 타이틀로 돌아가기. 저장 슬롯 세 개와 자동 저장이 있습니다.
• 설정: 음량, 효과음, 재생 속도, 자막, 자막 스타일(윤곽선 / 바), 화자 이름, 자막 크기, 본 구간, 모두 다운로드, 다운로드 및 저장 데이터 삭제, 전체 화면.

패키징과 배포

1. 노드를 선택하고 빌드 내보내기를 누르세요. 팝오버에 "빌드 준비 중…", "미디어 업로드 중 n/total", "빌드 패키징 중…"이 표시됩니다.
2. 완료되면 버튼이 빌드 다운로드로 바뀌고, 팝오버에 **"zip 파일을 다운로드해 데스크톱 앱 GenCode에 넘기세요. 웹, 데스크톱(Steam), 모바일용으로 패키징하고 배포하도록 도와줍니다."**라고 표시됩니다(GenCode는 다운로드 페이지로 연결됩니다).
3. zip 파일에는 app/(웹 빌드: index.html, 런타임, story.json, manifest), desktop/(Steam 디포 스크립트가 포함된 Electron 프로젝트), mobile/(iOS 및 Android용 Capacitor 프로젝트), README가 들어 있습니다. 실제 배포는 GenCode에서 진행합니다 — 콘텐츠 생성과 호스팅은 의도적으로 분리되어 있습니다.

보드는 스트리밍 빌드(미디어를 클라우드에서 가져옴)를 내보내므로, 먼저 프로젝트를 공개로 공유해야 합니다. 그렇지 않으면 "프로젝트가 공개로 공유되지 않았습니다: 공개 공유 전까지 스트리밍 빌드는 미디어를 가져올 수 없습니다"라는 메시지가 표시됩니다.

공식 예시 The Lighthouse Signal — 인터랙티브 영화는 엔딩이 네 개인 완성된 프로젝트입니다. 읽기 전용 보드에서 모든 분기 구간과 스토리 트리를 볼 수 있습니다.

30초로 보는 인터랙티브 영화:

자주 묻는 질문

디렉터 스테이지는 영상을 바로 생성하는 것과 무엇이 다른가요?

스테이지는 먼저 화이트 모델 프리비즈를 보여 줍니다. 렌더링에 크레딧을 쓰기 전에 카메라, 블로킹, 가림을 눈으로 확인할 수 있습니다. 공간이 복잡한 장면에서는 이것이 시퀀스 전체를 다시 찍는 일을 막아 줍니다.

내 3D 모델을 사용할 수 있나요?

네. 인스펙터 → 에셋 → 파일 업로드에서 .glb(그리고 gltf / obj / fbx, 텍스처, HDR, 오디오. 파일당 100MB)를 받으며, 보드 라이브러리 · 3D에서 배치할 수도 있습니다. 다만 골격 리깅은 Tripo로 생성한 모델에서만 작동합니다 — 두 기능은 별개입니다.

프레임을 보드로는 지금 보고 있는 시점을 캡처하나요?

아니요. 활성 카메라로 렌더링합니다. 지금 보고 있는 카메라를 캡처하려면 카메라에서 해당 카메라를 선택하고 활성화를 누르세요.

HTML 페이지는 만든 뒤에도 편집할 수 있나요?

네, 여러 수준에서 가능합니다. 페이지 자체는 해당 Studio에서(채팅, 편집 서랍, 레이어 패널) 편집하고, 픽셀 수준 작업이 필요하면 레이어 내보내기로 레이어 편집기용 레이어 문서로 바꾸세요.

Motion Studio에는 왜 타임라인이 없나요?

대화로 움직이기 때문입니다. 에이전트가 설명을 바탕으로 모션을 배치하고, 사용자는 미리보기를 보며 한 문장으로 수정합니다. 의견을 말하기 전에 플레이어의 진행 막대로 어느 순간으로든 이동할 수 있습니다. 프레임 단위로 제어하려면 브리프에 타이밍을 적으세요("3초에 막대가 자라남", "12초에 고정"). 에이전트가 초 단위까지 정확히 배치합니다 — 바로 이 점이 영상 모델과 다릅니다. 프레임을 추측하는 것이 아니라 작성합니다.

인터랙티브 영화를 배포할 수 있나요?

네. 빌드 내보내기를 한 다음 GenCode로 웹, 데스크톱(Steam), 모바일에 배포하세요.

문제 해결

스테이지나 Motion Studio가 열리지 않습니다

"이 계정에서 3D 디렉터 스테이지가 활성화되어 있지 않습니다" / "이 계정에서 Motion Studio가 활성화되어 있지 않습니다"는 거의 항상 워크스페이스 관리자가 Media Studio를 꺼 두었거나(보드와 같은 스위치), 프로젝트에 대한 쓰기 권한이 없다는 뜻입니다(읽기 전용 공유). 읽기 전용 프로젝트에는 "이 스테이지는 아직 설정되지 않았습니다. 소유자에게 한 번 열어 달라고 요청하세요."라는 메시지도 표시됩니다.

스테이지가 비어 있거나 "스테이지를 불러오지 못했습니다."라고 표시됩니다

새로고침을 누르세요. 그래도 해결되지 않으면 에이전트에게 수정 요청을 누르세요 — 에이전트가 자신의 코드를 점검합니다.

움직임을 보드로 영상이 검은색이거나 너무 짧습니다

브라우저에서 렌더링하는 동안 탭을 바꾸지 마세요. 활성 카메라와 타임라인 길이(플레이어 오른쪽의 전체 시간)를 확인하세요.

내보낸 레이어가 포스터와 다릅니다

레이어 내보내기는 내보낼 수 있는 모든 요소를 래스터화합니다. SVG 필터와 일부 혼합 효과는 별도 레이어로 만들 수 없어 건너뛰며, 카드에 "N개 레이어 건너뜀"이 표시됩니다.

렌더링이 되지 않거나 "이미 렌더링 중"이라고 표시됩니다

렌더링은 노드당 한 번에 하나, 프로젝트당 두 개까지입니다. "렌더링 중…"이 사라질 때까지 기다리세요. 포스터에는 렌더링할 모션이 없습니다 — 레이어 내보내기를 사용하세요.