일시정지 메뉴, 자산 중복 제거, 엔드스크린 노드 (Devlog #2)

출처: Dev.to

안녕 다시 만나네. 그때 이후 캔버스가 어떻게 변했는지 차근차근 살펴볼게. 대부분의 작업은 도구의 화려하지 않은 중간 부분, 즉 별다른 매력은 없지만 없으면 배포할 수 없는 부분들이었어. 일시정지 메뉴, 에셋 정리, 에디터 성능 말이야. 최근 며칠 사이에 큰 새 노드 타입도 하나 추가했지만, 실제로 소요된 시간 대부분은 지루한 절반에 쏟아졌어.

대략적인 진행 상황은 이렇다.

첫 번째로 만든 건 일시정지 메뉴였어. 그때까지 ChoiceStory Studio는 하나의 편집 가능한 화면, 즉 메인 메뉴만 있었고, 일시정지를 추가하면서 “서브 화면”이 정확히 뭔가를 처음으로 정의해야 했지. 우리는 이렇게 정했어: 일시정지 메뉴는 별도의 노드가 아니라 메인 메뉴의 두 번째 저작 면이며, 에디터 탭을 통해 접근한다. 오른쪽 패널도, 캔버스 타일도 동일하지만, 런타임에서는 플레이어가 Escape 키를 누르면 현재 씬 위에 오버레이 형태로 나타난다. 디자인 화면은 메인 메뉴와 같은 드래그·리사이즈 핸들을 빌려 쓰니 근육 기억이 그대로 이어진다.

그 다음은 계획에 없었지만 필수적이게 된 기능, 에셋 중복 제거다. 같은 영상을 두 번 임포트하면 ChoiceStory가 두 파일을 모두 지문화하고, 중복 파일을 새로 쓰는 대신 기존 엔트리를 공유하겠냐는 옵션을 제공한다. 우리가 테스트용으로 돌리던 프로젝트에 파일이 106개 있었는데, 중복 제거와 고아 파일 정리를 한 뒤엔 실제로 참조되는 파일이 4개만 남았다. 이 수정은 중복 제거 대화창만 고치는 수준을 넘어, 프로젝트 내 모든 참조(배경, 버튼 이미지, 폰트 등)가 단일 진실 원본인 레지스트리를 통해 해결되도록 해야 했다. 그래서 “사용되지 않은 파일 삭제”가 실제로 어떤 파일이 사용 중인지 정확히 알 수 있게 된 거지.

거의 같은 시기에 파일 메뉴에 성능 설정 모달을 추가했다. 세 가지 토글: 선택 시 활성 노드 따라가기, 리사이즈 시 캔버스 뷰포트 재계산, 노드 글로우 애니메이션. 두 가지 프리셋: 고성능 PC와 저성능 PC. 우리 타깃은 워크스테이션이 아니라 일반 소비자용 머신을 쓰는 제작자들이기 때문에, 캔버스 애니메이션이 캔버스 자체보다 더 많은 사이클을 잡아먹는 경우가 있었거든. 이 토글 그룹은 임시 방편이며, 알파 버전 이전에 실제 Performance 탭을 만들 계획이다. 이 작업을 통해 나온 내부 규칙: 새로운 기능이 눈에 보이는 CPU·GPU 부하를 추가하면, 반드시 도입 단계에서 토글을 제공하고, 사후에 retrofit 하지 않는다.

다음은 패리티 패스라 부른 부수 작업이다. 메인 메뉴에는 있었지만 일시정지 메뉴에는 없던 기능들—요소별 드래그, 요소별 리사이즈, 비율 고정 코너 핸들을 가진 배경 드래그—을 메인‑메뉴/ 디렉터리에서 끌어올려 별도 로직 없이 두 화면이 같은 모듈을 사용하도록 했다. 앞으로 추가될 화면(선택 오버레이, 옵션 등)은 같은 코드를 재사용해 동일한 기능을 물려받게 된다. 이 과정에서 오래된 스키마 버그도 고쳤다. 배경을 색, 이미지, 영상으로 전환할 때 스키마가 각 변형마다 별도 슬롯을 유지하고, 활성 슬롯만 그리도록 수정했다.

가장 최근에 추가된 건 엔드스크린 노드다. 처음엔 일시정지와 같은 서브‑서페이스 형태로 시작했지만, 약 10분 정도 설계 후 방향을 바꿨다. 엔드스크린은 다르다. 스토리마다 여러 개(좋은 결말, 나쁜 결말, 비밀 결말, 농담 결말 등)를 가질 수 있고, 각각 별도 설정이 필요하므로 캔버스에서 직접 만들고, 구성하고, 연결할 수 있는 노드여야 했다. 캔버스에서 오른쪽 클릭하면 새 엔드스크린 노드가 추가된다. 노드 자체를 오른쪽 클릭하면 복제되고, 빈 캔버스를 오른쪽 클릭하면 커서 위치에 깊은 복제본이 붙여진다. 각 인스턴스의 설정 블록은 완전하다: 배경, 제목, 여러 줄의 엔딩 멘트, 음악, 폰트, 1~5개의 버튼 리스트(버튼당 텍스트, 선택 이미지, 밀리초 단위 등장 지연, 동작—메인 메뉴로 복귀, 재시작, 종료), 선택적 자동 진행(지연 가능) 등. 버튼은 저자가 작성한 타임라인에 따라 하나씩 순차적으로 페이드 인한다. 런타임 교체 로직이 마지막 퍼즐이었다. 플레이어 선택이 엔드스크린 노드로 연결되면, 재생 레이어가 해당 설정된 서페이스를 비디오처럼 재생하려 하지 않고 오버레이로 마운트한다.

이제 솔직히 말할게. 위에서 말한 대부분의 작업은 실제로 배포됐지만, 그렇지 않은 것도 많다. 일시정지 메뉴의 포스트‑클로저 패스는 한 세션에 11개의 후속 커밋을 배포했지만, 10번째 커밋에서 3개가 되돌려졌다. 모든 수정이 예상치 못한 하위 영향을 끼쳤기 때문이다. React에서 서브‑스테이트를 다루는 건 쉬운 반면, “이걸 바꾸면 무엇이 다시 렌더링되고, 어떤 순서·어떤 오래된 값으로”라는 그래프는 복잡했다. 그 세션 이후 우리는 버그 수정 시: 패치 작성 전에 부수 효과가 발생할 표면을 적어두고, 의도적으로 건드리지 않은 파일 리스트를 기록한다는 규칙을 만들었다. 이후 후속 커밋 수는 크게 감소했다.

CSS 쪽에서도 비슷한 교훈을 얻었다. 처음엔 컨테이너 쿼리를 써서 가변적인 Player‑slot 크기 안에서 일시정지 메뉴를 스케일링하려 했지만, 작은 슬롯에서는 제대로 동작하지 않았다. 결국 메인 메뉴가 이미 쓰던 레시피(뷰포트‑상대 클램프 + min‑height:0인 flex + overflow:hidden)로 교체했더니 바로 정상 작동했다. 교훈: 기존 패턴이 모든 테스트를 통과한다면, 새로운 패턴은 “하지만 기존 것이 이미 이걸 할 수 있나요?”라는 질문을 10분 넘게 버틸 수 있는 이유가 필요하다.

다음 목표는 선택 오버레이 에디터다. 영상(또는 이미지) 위에 나타나는 버튼들을 디자인하는 패널이다. 동일한 서페이스 계약과 공유 드래그·리사이즈 인프라를 사용할 예정이며, 기존에 구축된 기반이 대부분 마련돼 있기 때문에 엔드스크린보다 더 빠르게 완성될 것으로 기대한다.

여기까지 읽어줬다면 고맙다. 브랜칭 영상을 활용해 본 경험이 있든 없든, 지난번과 마찬가지로 우리에게 원하는 툴이 무엇인지 알려줘. 여기 댓글로 남기든, X(구 트위터)에서 @ChoiceStoryDev를 팔로우하든, 이메일이든 가장 편한 방법으로 연락해. 특히 거친 피드백을 기다리고 있다.

곧 더 많은 소식 전할게…