삼국지 Ⅲ의 감성을 웹게임으로 옮긴 과정

고전 전략 게임의 화면은 지금 기준으로 보면 정보 밀도가 대단히 높습니다. 상단에 명령이 늘어서 있고, 가운데에 지도가 있고, 가장자리를 정보 패널이 둘러쌉니다. 스크롤도 없고 팝업도 거의 없이 한 화면 안에서 모든 판단이 끝납니다.

그 구조를 브라우저에서 다시 세우면 어떻게 될지 궁금했습니다. 원작을 복원하는 것이 목적이 아니라, 그 화면 문법이 웹이라는 환경에서도 성립하는지 확인해 보고 싶었습니다.

화면은 1280×800 크기의 고정 스테이지 하나로 잡고, 그 안의 모든 수치를 2px 격자에 맞췄습니다. 브라우저 창 크기에 따라 스테이지 전체를 비율 그대로 확대·축소하는 방식입니다. 레이아웃이 창 크기마다 재배치되지 않으므로 도트가 흐트러지지 않고, 원작처럼 한 화면에 모든 정보를 고정해 둘 수 있습니다.

지도와 인물 초상은 이미지 파일을 쓰지 않고 캔버스에서 절차적으로 그렸습니다. 지형은 계절별로 네 벌을 만들어 캐시해 두고, 초상화는 인물마다 지정한 골격 값(얼굴 폭과 높이, 턱 모양, 눈 간격, 고개를 돌린 각도 등)에서 생성합니다. 덕분에 인물이 늘어나도 새로 그릴 이미지가 생기지 않습니다.

원작은 숫자키로 명령을 고르고 Enter로 결정하는 흐름입니다. 이 흐름을 그대로 두면서 마우스와 터치를 함께 받으려면, 입력을 기다리는 쪽의 코드가 지저분해지기 쉽습니다.

그래서 메뉴·목록·도시 지정 같은 선택 단계를 모두 Promise를 돌려주는 함수로 만들었습니다. 게임 로직은 어떤 입력 장치로 값이 들어왔는지 신경 쓰지 않고 결과만 기다리고, 키보드·마우스·터치는 같은 Promise를 각자 해결(resolve)하는 방식입니다. 입력 장치를 하나 더 붙여도 게임 로직은 그대로 둘 수 있습니다.

가장 오래 붙잡고 있던 문제입니다. 스테이지가 화면에 맞춰 축소되기 때문에 폰에서는 배율이 0.5 안팎이 되고, 그러면 스테이지 안에 그린 버튼은 실제로 눌리는 크기가 절반으로 줄어듭니다.

해결 방향은 두 가지였습니다. 첫째, 스테이지 안의 것은 넉넉히 키운다 — 터치 기기를 감지하면 상단 명령 바를 44px에서 72px로, 짧은 메뉴의 항목을 72px로 키우고, 지도에서 도시를 잡는 반경도 16px에서 30px로 넓혔습니다. 둘째, 크기를 보장해야 하는 조작 버튼은 스테이지 밖에 실제 픽셀 크기로 둔다 — 화면 위를 떠다니는 조작판을 얹는 대신, 지금 쓰고 있는 패널 안에 버튼을 붙이는 방식입니다.

실수로 명령이 실행되는 것을 막기 위해, 목록에서는 한 번 눌러 고르고 다시 눌러 결정하도록 두 단계로 나눴습니다. 징병 인원이나 금액처럼 숫자를 입력하던 자리에는 숫자판을 띄웠습니다. 키보드와 마우스 환경은 아무것도 달라지지 않습니다.

가장 까다로웠던 것은 이벤트가 터지는 조건이었습니다. 역사에서 그 일이 몇 년에 있었는지만 따지면, 시작하자마자 판이 뒤집히거나 앞뒤가 맞지 않는 순서로 사건이 흐릅니다.

그래서 이벤트가 판을 얼마나 흔드는지에 따라 등급을 매기고, 등급이 높을수록 조건을 조이는 구조로 바꿨습니다. 대화나 풍경 같은 사건은 느슨하게 두고, 장수가 오가거나 사람이 죽는 사건은 시나리오 시작 후 일정 기간이 지나야 하며 같은 등급의 사건이 연달아 터지지 않도록 간격을 뒀습니다. 조건을 눈으로 확인하기 어려워서, 발생 순서와 도달 가능성을 자동으로 검사하는 스크립트를 따로 만들어 두었습니다.

확정된 일정은 없습니다. 플레이 피드백을 바탕으로 버그 수정과 사용성 개선을 먼저 하려고 합니다. 바뀐 내용은 이 개발 일지에 이어서 적겠습니다.