레블 1100 MT를 출고한 지 꼭 1년이 되는 날, 이 바이크로 작은 기념을 하나 남겨보고 싶었습니다. 멀리 달리는 대신 블로그 안에 오토바이가 달리는 도로를 만들었습니다.
시작은 인스타그램에서 본 픽셀풍 오토바이 게시물이었습니다. 그 화면을 캡처하고 제 사진과 레블 1100 측면도를 GPT에 건네 제 바이크 버전의 이미지를 만들었습니다. 다시 그 이미지를 나노바나나에 넣어 바퀴와 차체가 움직이는 짧은 영상으로 바꿨습니다.
영상이 나오자 이번에는 바라보기만 하는 장면이 아니라 직접 조작할 수 있는 게임으로 만들고 싶어졌습니다. 클로드와 GPT를 번갈아 사용해 크롬 공룡 게임과 비슷한 러너를 만들되, 커다란 크루저가 점프하는 대신 앞뒤 차선을 바꾸며 장애물을 피하도록 구성했습니다.
만드는 시간보다 다듬는 시간이 더 길었습니다.
- 열두 컷 라이더의 기준선을 맞춰 떨림 줄이기
- 타이어와 디스크는 돌리되 브레이크 캘리퍼는 고정하기
- 회전하는 바퀴에서 하이라이트와 그림자 분리하기
- 투명 픽셀, 도로 이음매와 반복되는 산 배경 정리하기
- 실제 레블 1100의 짧은 앞 휀더와 머플러 형태 살리기
기존 블로그 성능을 해치지 않는 것도 중요한 조건이었습니다. 평소에는 단축키 감지 코드만 두고, 게임 엔진과 캔버스 UI는 동적 import()로 별도 청크에 분리했습니다. 스프라이트 시트 역시 게임을 실행한 뒤에만 내려받습니다. 게임을 하지 않는 방문자는 큰 이미지와 게임 코드를 받을 필요가 없습니다.
완성된 게임은 키보드에서 ↑↑↓↓←→←→를 입력하면 열립니다. 모바일에서는 블로그 로고를 빠르게 다섯 번 누르면 됩니다. 제작에 사용한 원본 사진과 GPT 이미지, 나노바나나 영상, 최신 스프라이트 시트와 실제 플레이 영상은 원문에 함께 정리했습니다.
Product Engineer