개발자 모드는 영상을 만든 코드와 파일을 직접 엽니다. 코드 모션 편은 화면을 그리는 index.html과 엔진·소재 파일을, 원본 영상 편집 편은 편 폴더와 제작 파일을 보여 줍니다. 코드를 고치면 0.5초 뒤 미리보기에 반영되고, 오류가 나면 그 줄로 바로 갑니다. 아래 화면은 솜씨 쇼츠 「8시간 일, 어떻게 줄여요?」·「이 광택이 오기까지」와 KTV 「중앙청 보수공사」입니다.
화면 구성
- 파일 — 파일 이름으로 찾기, 묶음별 파일 목록, ＋ 추가.
- 코드 — 고르면 열리는 편집 칸. 위쪽에 코드에 반영 · ↺ 모두 원래대로 · 코드 저장.
- 아래 탭 — 콘솔 · 점검 · 렌더 · 버전 · 비교 · 찾기 · API · 효과 목록 · 손잡이 · 라이선스.
- 미리보기 — 재생, 시간 입력(
12.3,369f,T.s3+0.5), 구간 반복(I/O), 0.25–2배속, 바로 반영, 검사, HUD.
휴대폰에서는 코드 · 미리보기 · 파일 · 콘솔 · 렌더 중 하나씩 봅니다.
파일 묶음
| 묶음 | 들어 있는 것 | 고치면 |
|---|---|---|
| 이 편(코드 모션) / 편 폴더(원본 편집) | index.html, 목소리·음악, edit.json·meta.json 등 | 이 편만 바뀝니다 |
| 배치 엔진 | lib/*.js·css(그리기 엔진·브랜드) | 이 편만 바뀝니다(사본으로 덮어씀) |
| 배치 공용 소재 | media/ 그림·소리·클립 프레임 | 이 편만 바뀝니다 |
| 제작 파일(원본 편집 편) | 편집 스크립트(build.py 등)·ASS 자막·그래픽 | 실행되는 스크립트(.py·.sh·.js·.html 등)는 운영 관리자만 고칠 수 있습니다 |
| 배치 글꼴 | fonts/ | 보기만 |
| 편집 레이어 | project.json — 초보자·중급자·고급자에서 한 편집 전체 | 0.4초 뒤 「JSON 편집」 한 단계로 적용 |
코드 고치기 → 바로 미리보기
- 파일 목록에서
index.html(또는 lib 파일)을 엽니다. - 숫자·색·크기를 고칩니다(예: 배치 엔진
brand.js의 색 이름표B.C). 바로 반영이 켜져 있으면 0.5초 뒤 미리보기가 다시 그려지고, 재생 위치는 그대로입니다(CSS 는 다시 그리지 않고 바로 반영). 200KB 넘는 파일은 바로 반영이 꺼지니 ▶ 적용 또는Ctrl+Enter. - 코드 속 T 시각 알약을 끌면 그 장면의 시각 숫자가 바뀝니다.
화면 글자는 어디서 고치나 — 검사로 찾기
코드 모션 편의 index.html에는 VFX.plan({ facts: […], beats: […] }) 처럼 화면 문구가 적힌 목록이 있지만, 이 목록은 점검용(글자 크기·가림 영역·사실 확인)이라 고쳐도 화면이 바뀌지 않습니다. 실제로 글자를 그리는 코드는 따로 있습니다.
- 검사(
Alt+I)를 켜고 바꿀 글자를 가리킵니다. 그 글자를 그린 함수와 줄(예:B.pillBot · index.html:387)이 뜨고, 줄로 이동을 누르면 그 줄이 열립니다. - 그 줄이 문구를 직접 넘기면 거기서 고칩니다. 넘기지 않으면 함수의 기본 문구가 그려지는 것이니, 배치 엔진(
lib/brand.js등)에서 그 함수를 찾아 고칩니다. 예:B.pillBot의o.q || '비결은 ‘빨리’일까?'. - 재생 위치를 한 번 옮기면 바뀐 글자가 보입니다. 배치 엔진을 고쳐도 이 편에만 적용됩니다.
문구만 바꿀 때는 초보자의 큰 글자 카드나 중급자의 코드 글자 줄이 더 쉽고 안전합니다(편집 레이어에 남아 공개본으로 쉽게 되돌릴 수 있습니다). 개발자 모드는 카드에 안 나오는 글자, 여러 편에 쓰는 함수의 문구를 고칠 때 씁니다.
오류가 나면
코드에 오류가 있으면 마지막으로 잘 그려진 화면이 남고 빨간 상자에 오류와 줄로 이동이 나옵니다. 콘솔 탭에서도 파일:줄을 눌러 그 자리로 갑니다.
검사 · HUD
검사(Alt+I)를 켜고 미리보기를 가리키면 그 부분을 그린 코드 줄이 표시되고, 누르면 그 줄로 갑니다. HUD(Alt+H)는 장면·시각 정보를 미리보기 위에 겹쳐 보여 줍니다.
자동 완성 · 스니펫
Ctrl+Space로 엔진 API 자동 완성(설명·호출 모양 포함)을 열고, 스니펫(CAP 자막 설정, FX.reveal 글자 등장, FX.scenes 장면 목록, R.k 손잡이, CAP.at 단어 시각에 맞추기, VFX 효과)을 넣습니다. 찾기 Ctrl+F, 바꾸기, 접기, 줄로 이동도 됩니다.
그림 · 소리 · 글꼴 · 영상 교체
글자가 아닌 파일을 고르면 미리보기와 ⤒ 교체… 단추가 나옵니다. 그림은 원래 크기·형식으로 맞춰지고(꽉 채우기·전체 보이기·그대로), 소리는 MP4 를 다시 만들 때 원래 형식으로 바뀌며, 🎞 영상으로 교체…는 브라우저에서 영상을 같은 장수의 프레임으로 잘라 넣습니다. ↺ 원래대로(이 파일만 공개본으로), 배치 원본으로, ⬇ 내려받기.
원본 영상 편집 편의 개발자 모드
원본 영상 편집 편은 미리보기가 편집 프로젝트이고, 파일 목록에 편 폴더(edit.json·meta.json·목소리·음악)와 제작 파일(편집 스크립트·ASS 자막·그래픽)이 보입니다. 제작 스크립트를 고친 뒤 MP4 를 다시 만들면 스크립트가 다시 돌아 영상이 새로 만들어집니다. 실행되는 스크립트는 서버에서 돌기 때문에 운영 관리자만 저장·다시 만들기를 할 수 있고, 그 밖의 사람에게는 「제작 스크립트(.py·.sh·.js·.html 등)는 관리자만 고칠 수 있습니다」가 나옵니다. 기록용 파일(edit.json·plan.md 등)은 스크립트가 읽지 않으면 ⚠ 표시가 붙습니다 — 실제 자막 문구는 스크립트 안에 있을 수 있으니 🔎 build.py 에서 찾기로 찾으세요.
아래 탭 10개
| 탭 | 하는 일 |
|---|---|
| 콘솔 | 로그·정보·경고·오류 거르기, 파일:줄 누르면 이동, 지우기 |
| 점검 | 지금 화면(가장 작은 글자 px·안전 영역 밖) · 전체 훑기 · 규칙 점검 · 고아 패치 → 점검 실행 |
| 렌더 | 코드만 MP4 다시 만들기(저장한 코드 버전으로, 편집 레이어 없이 2–5분) · 이 코드 버전을 편집에 연결 · 진행 단계(대기→그리기→소리→인코딩→검사→게시) |
| 버전 | 저장한 코드 버전 불러오기 · 비교 · 이 버전으로 MP4 · 공개본으로 되돌리기 |
| 비교 | 지금/공개본/저장본/버전을 나란히·한 줄로, 이 파일만 되돌리기, 3-way 비교, 화면 비교(1초마다 프레임) |
| 찾기 | 정규식·대소문자·단어 전체, 범위(이 편·엔진·공용 소재·제작 파일), 모두 바꾸기, 기호 찾기(Ctrl+Shift+O) |
| API | 엔진 API 목록 — 코드에 넣기·정의 열기·복사, 스니펫, VFX 효과 |
| 효과 목록 | 효과(이름·종류)와 이 편에서 쓰인 곳, 스니펫 넣기/복사 |
| 손잡이 | 이 편이 등록한 조절값(R.k)과 코드 숫자(const T·대문자 상수)를 슬라이더로 |
| 라이선스 | 코드 라이브러리·배치 글꼴의 라이선스 전문 |
저장 · 코드에 반영 · 렌더
- 코드 저장 — 「코드 버전 저장」 창에서 이름과 「무엇을 바꿨나요」를 적고 저장합니다. 저장 전 수정은 이 기기에 임시로 남고(불러오기·버리기), ↺ 모두 원래대로는 이 기기의 수정만 지웁니다.
- 코드에 반영(코드 모션 편) — 초보자·중급자에서 바꾼 문구·브랜드 색·소리 시각·크기·손잡이 값을 코드 안으로 옮겨 새 버전으로 저장합니다. 그 밖의 편집은 편집 레이어에 그대로 남습니다.
- 렌더 탭의 코드만 MP4 다시 만들기는 저장한 코드 버전만으로 영상을 다시 만들어 갤러리 영상을 바꿉니다. 편집 레이어(글자·효과 등)까지 넣으려면 위쪽 내보내기 (렌더)를 쓰세요(MP4 만들기).
할 수 없는 것
- 엔진 파일은 있는
lib/*.js·css만, 배치 소재는 있는 파일만 바꿀 수 있습니다.index.html은 지울 수 없고, 새 html·js·css·svg 파일은 만들 수 없습니다. - 한 번에 바꿀 수 있는 파일은 600개까지, 크기는 글자 2MB·그림 15MB·소리 30MB·영상/프레임 45MB·글꼴 10MB 까지입니다.
- MP4 다시 만들기는 한 시간에 30번까지입니다.
- 법적 고지 문구는 코드에서도 숨기거나 작게 만들면 MP4 를 만들 때 막힙니다.
막히는 곳이 있다면 → 문제 해결
