세로 모드 — 최근 가장 뿌듯했던 작업

번뜩인 아이디어

게임 홍보 영상을 꾸준히 올리고 싶었습니다. 게임플레이를 숏츠 형태로 올리면 좋겠다는 생각이 들었고, 그때 아이디어가 번뜩 떠올랐습니다. 게임 자체에 세로 모드를 추가하면 어떨까?

숏츠형 레이아웃의 특성

숏츠는 주로 휴대폰으로 소비됩니다. PC에서는 화면 전체가 보이지만, 모바일에서는 하단이 UI 요소들로 많이 가려집니다.

제 게임은 대화 시스템이 화면 아래에 위치합니다. 숏츠로 올렸을 때 가장 중요한 내용이 가려지는 구조였습니다. 불리한 조건이었습니다.

해결법: SubViewport

Godot의 SubViewport가 답이었습니다.

SubViewport를 사용하면 메인 게임 화면의 위아래에 별도의 화면을 배치할 수 있습니다. 16:9 게임플레이를 9:16 프레임 안에 자연스럽게 담을 수 있게 된 것입니다. 빈 공간으로 두지 않고, 탈리스만 코드 로고와 게임플레이 이미지를 채워 넣었습니다.

그래도 남은 비율 문제

하지만 문제가 하나 더 있었습니다. 게임 자체가 16:9 기반이라, 남은 공간을 억지로 채우면 비율이 깨져 제대로 표시되지 않았습니다.

웹 개발에서 가져온 아이디어

해답은 웹의 반응형 디자인에서 왔습니다.

억지로 늘리는 대신, 세로 비율에 맞게 UI를 처음부터 다시 구성했습니다. 실제 게임과 픽셀 단위로 동일하지는 않지만, 게임이 전달하고자 하는 내용은 똑같이 보여줄 수 있었습니다. 특히 전투 화면에서 기존에는 양옆으로 펼쳐지던 스킬 카드들을 상하로 배치하니, 나름대로 새로운 매력이 생기기도 했습니다.

노력할 만한 가치가 있었습니다

세로 모드는 이제 실제로 작동하고 있습니다. 게임플레이 숏츠를 꾸준히 올리면서 반응을 살피고, 그 피드백을 바탕으로 게임을 계속 개선해나갈 계획입니다.

최근 작업 중 가장 뿌듯한 결과물입니다. 하나의 아이디어가 게임을 알리는 새로운 방법을 열어줬고, 그 과정에서 개발자로서도 많은 것을 배웠습니다.