본문으로 건너뛰기
AI 수익화 도전기
심해 방치형 게임 「아비스 다이브」 · 일지 2

심해 방치형 게임 아비스 다이브 제작기 2편, 공습과 레이드, 엔딩, 로딩 0% 사건

일지· 읽는 데 10분

아비스 다이브 제작 과정 2편이에요. 상어가 쳐들어오는 공습, 함대가 같이 싸우는 레이드, 프롤로그와 두 가지 엔딩, 저장 슬롯, 정적 배포 후 로딩 0%에서 멈춘 문제를 실제 화면으로 보여 드려요.

바로 해 보기아비스 다이브설치 없이 브라우저에서 바로 돌아가요. 진행은 브라우저에 저장돼요.
새 창
목차 7개

1편에서는 진주를 줍고, 심해 트리에서 시설을 사고, 8,000m까지 잠수하는 기본 흐름을 보여 드렸어요. 이번 편은 그 위에 올린 것들이에요. 진주만 모으면 늘어져서 넣은 공습과 레이드, 프롤로그와 엔딩 컷신, 저장 슬롯, 그리고 다른 서버에 올렸더니 로딩 화면에서 멈춰 버린 일이에요.

레이드 스테이지. 수심 500m에서 전기뱀장어 보스를 가운데 두고 내가 산 아귀, 해파리, 굴, 침몰선이 둘러싸고 있어요. 위에 보스 체력 192K/200K와 남은 시간 72초가 보여요. 보스 체력과 남은 시간 줄에 노란 밑줄을 그었어요

스크린샷은 게임을 다시 켜서 한국어 설정으로 찍었어요. 레이드나 엔딩처럼 몇 시간 뒤에 나오는 장면은 개발용 치트로 진주를 채워서 불러왔어요.

공습: 가끔 쳐들어오는 상어

진주를 모으기만 하니 늘어져서 방해꾼을 넣었어요. 제가 원한 건 어려운 게 아니라 보통 난이도의 긴장감이었어요. 깊이 100m를 넘고 3분쯤 지나면 첫 공습이 와요.

공습 경보 화면. 수심 150m 햇빛층 한가운데 빨간 글씨로 공습 경보가 뜨고, 아래에 백상아리 이빨이 접근 중이니 나타나면 탭해서 쫓아내자는 문구가 있어요. 빨간 동그라미로 공습 경보 글자를 표시했어요

먼저 5초 동안 경보가 울리고 화면 테두리가 붉게 깜빡여요. 그다음 그 층의 보스가 나타나요. 햇빛층은 백상아리, 박명층은 전기뱀장어, 심해층은 거대 게, 심연층은 유령 오징어, 초심해는 촉수 괴물이에요.

백상아리가 나타난 화면. 위쪽에 상어 체력 35/35와 28.8초 뒤 도주 표시, 그 아래 잠수정 체력 100/100 막대가 있고, 왼쪽에 공습 중 생산 절반 표시가 떠 있어요. 1번 상어 체력, 2번 생산 절반 표시에 노란 동그라미를 쳤어요

그림의 1번이 상어 체력, 2번이 공습 중 생산이 절반이라는 표시예요. 보스가 있는 동안 생산은 절반이 돼요. 상어를 탭해서 체력을 깎아야 하는데, 탭은 0.15초에 한 번만 들어가고 맞은 상어는 옆으로 튀어서 다시 조준해야 해요. 찍으면서 상어를 열두 번 눌렀더니 체력이 35에서 28로 줄었어요. 그냥 연타해서는 안 되고 쫓아가며 눌러야 하는 정도예요.

보스도 가만있지 않아요. 몇 초마다 잠수정 자리나 생물 하나에 원이 좁혀지며 공격을 예고해요. 잠수정은 옮겨서 피할 수 있고, 생물은 세 번 맞으면 그 시설 하나가 영구히 사라져요. 떠 있는 진주를 주우면 잠수정 체력이 조금 돌아와요.

레이드 스테이지: 함대가 같이 싸워요

공습이 보통이라면 레이드 스테이지는 어려움이에요. 잠수하다 500m를 지날 때마다 도전권이 하나 생기고, 왼쪽 레이드 버튼으로 출정해요.

레이드 출정 창. 500m 전기뱀장어 번개, 보스 체력 200K, 제한 75초, 보상 진주, 그리고 충전 중에 탭하면 내가 감전된다는 보스 특성 설명과 출정 버튼이 있어요. 보스 특성 줄에 형광펜을 칠했어요

출정하면 지금까지 산 생물과 구조물이 전부 보스 주위로 진형을 짜요. 1편에서 만든 +숫자 수확 주기가 그대로 공격이 돼서, 진주를 빨아들이던 타이밍에 보스에게 돌진해요. 보스 체력은 함대가 혼자 55초 넘게 때려야 하는 양이고 제한 시간은 75초라서 탭을 보태야 시간 안에 잡혀요. 지면 잃는 건 없고 다시 도전할 수 있어요.

전기뱀장어가 방전을 준비하는 장면. 뱀장어 둘레에 큰 원이 그려지고 위쪽에 충전 중이니 손을 떼고 떨어지라는 경고가 떠 있어요. 노란 동그라미로 충전 원과 방전까지 남은 시간을 표시했어요

보스마다 패턴이 달라요. 상어는 돌진할 줄을 먼저 보여 주고, 전기뱀장어는 충전하는 동안 누르면 오히려 내가 감전돼요. 게는 껍질을 닫았다 열고, 유령 오징어는 분신 둘과 함께 나타나서 눈이 빛나는 진짜만 때려야 해요. 레이드 입장은 나중에 앱으로 낼 때 붙일 인앱 상품 자리로 잠가 뒀어요. 지금은 실제 결제 없이 확인 창만 뜨는 테스트 구매이고, 공습은 누구나 겪어요.

컷신: 프롤로그와 두 가지 엔딩

둘째 날에는 컷신을 넣었어요. 새 게임을 누르면 프롤로그가 나오고, 할아버지의 항해일지 이야기로 시작해요. 그림 12장은 이미지 생성 API로, 영어 내레이션 11개는 음성 합성으로 만들었어요.

프롤로그 첫 장면. 노을 진 바다 위 낡은 배의 크레인에 노란 잠수정이 매달려 있고, 아래에 영어 자막이 한 글자씩 찍히는 중이에요. 자막에 노란 밑줄을 그었어요

자막은 내레이션 길이에 맞춰 한 글자씩 찍혀요. 컷신은 영어로만 나와서, 한국어로 설정해도 여기만 영어예요.

8,000m 레이드에서 촉수 괴물에게 지면 죽음 엔딩이 나와요. 진주 절반을 잃고 다시 떠올라 이어서 할 수 있어요.

죽음 엔딩 컷신. 보라색 촉수가 노란 잠수정을 감싸고, 잠수정 탐조등이 앞을 비추고 있어요. 아래 자막은 The tentacles came from below

트리 끝의 심연의 심장을 찍으면 진짜 엔딩이에요. 잠수정이 해구 틈으로 가라앉으면서 화면이 보라색에서 흰색으로 차오르고, 엔딩 컷신이 이어져요.

엔딩 컷신 첫 장면. 보라색으로 빛나는 거대한 틈 위에 잠수정이 떠 있고, 아래 자막은 At the bottom of everything

엔딩 카드. 심연의 심장 아이콘 아래에 짧은 에필로그와 플레이 시간, 탭 수, 누적 진주가 있고, 클리어 시간과 ABYSS로 시작하는 기록 코드, 기록 코드 복사, 계속 탐사하기, 처음부터 다시 버튼이 있어요. 클리어 시간 57초에 형광펜, 기록 코드에 밑줄을 그었어요

엔딩 카드의 클리어 시간이 57초인 건 테스트 명령으로 바로 엔딩을 불러서예요. 형광펜 칠한 곳이 그 57초예요. 원래는 몇 시간이 걸려요.

소리는 한 번 통째로 다시 짰어요. 처음에는 설정에서 음악을 내려도 폰에서는 소리가 그대로였어요. 모바일 브라우저가 오디오 요소의 볼륨 값을 무시해서였고, Web Audio로 바꿔서 효과음, 음악, 내레이션마다 음량 조절 장치를 따로 달았어요. 프롤로그 곡이 배경음악과 같은 파일이라 컷신 위에 배경음악이 깔리는 것처럼 들려서, 컷신 동안에는 음악을 아예 끄고 배경음악도 0.7배로 낮췄어요.

타이틀, 저장 슬롯, 설정

타이틀 화면. ABYSS DIVE 로고 아래에 이어하기, 새 게임, 저장 슬롯, 설정, 클리어 기록 버튼이 있어요. 저장이 없어서 이어하기는 흐리게 나와요. 빨간 동그라미로 흐린 이어하기 버튼을 표시했어요

저장은 서버 없이 브라우저에 해요. 슬롯이 3개이고 기본 10초마다 자동 저장해요. 다시 켜면 비운 시간만큼(최대 12시간) 오프라인 수입을 줘요.

저장 슬롯 화면. 슬롯 1은 플레이 중 표시와 함께 초심해 8,000m, 보유 진주, 저장 시각이 적혀 있고 지금 저장과 삭제 버튼이 있어요. 슬롯 2와 3은 비어 있어요. 저장 시각에 노란 밑줄을 그었어요

설정 화면. 언어 English와 한국어, 효과음 60%, 음악 40%, 진동, 그래픽 품질, 숫자 표기 K/M/B와 만/억/조, 자동 저장 간격 10·30·60초, 튜토리얼 다시 보기가 있어요. 1번 컷신은 영어로만 나온다는 안내, 2번 숫자 표기의 만/억/조 버튼을 표시했어요

엔딩까지 걸린 시간으로 경쟁하게 만들고 싶었는데 서버는 두고 싶지 않았어요. 그래서 심연의 심장을 찍는 순간의 플레이 시간을 짧은 기록 코드로 만들어요. 친구가 보낸 코드를 클리어 기록 화면에 넣으면 숫자를 고친 코드인지 확인해 줘요. 코드 안에 확인용 값이 들어 있어서 마음먹고 위조하면 막을 수는 없고, 숫자만 슬쩍 고치는 걸 막는 정도예요.

폰에서 연타하다 손가락이 미끄러지면 뒤로 가기 스와이프로 게임을 나가 버리는 일도 있었어요. 지금은 뒤로 가기가 오면 페이지를 나가는 대신 일시정지 메뉴가 열려요.

배포했더니 로딩 0%에서 멈췄어요

다음 날 아침, 빌드해서 다른 서버에 올렸더니 처음 들어온 사람은 로딩 화면 0%에서 더 나가지 못했어요. 개발 서버에서는 멀쩡했고, 오류 메시지도 하나 없었어요.

로딩 화면. 가운데 ABYSS DIVE 로고 아래 빈 로딩 막대와 로딩 중 0% 글자가 있어요. 빨간 동그라미로 0%를 표시했어요

위 화면은 오늘 그림 파일을 일부러 늦게 받게 해서 찍은 정상 로딩 화면이에요. 그때는 이 상태에서 영원히 멈춰 있었어요.

원인은 게임 시작 코드가 파일 맨 위에서 바로 await를 쓰고 있던 거였어요. 배포용 빌드에서는 Pixi 코어가 게임 시작 파일에 합쳐지는데, 렌더러를 불러오는 조각이 그 시작 파일을 다시 불러와요. 시작 파일은 렌더러를 기다리고, 렌더러는 시작 파일이 끝나기를 기다리며 서로 멈춰 있었어요. 오류가 아니라서 콘솔도 조용했어요. 개발 서버는 파일을 하나씩 따로 줘서 이 순환이 생기지 않았어요.

async function main() { /* 시작 과정 전체 */ }
void main().catch((err) => { /* 로딩 화면에 오류 표시 */ });

시작 과정을 함수 하나로 감싸고, Pixi를 따로 떼어 자기 조각에 두었어요. 다시 멈추면 15초 뒤에 "Loading failed" 문구와 새로고침 버튼이 뜨게 하는 감시 장치도 넣었어요. 처음에는 개발 서버 쪽 문제로 보고 그쪽부터 살피다가, 제가 정적 배포라고 다시 알려 준 뒤에야 빌드 결과물을 의심했어요.

자동 시험도 있어요. 헤드리스 크롬이 새 게임부터 진주 줍기, 트리 칸 실제 클릭, 공습, 레이드, 두 엔딩, 저장까지 60개를 확인해요. 그래도 두 번 놓쳤어요. 첫 번째는 트리를 합친 날 저녁에 나온 버그예요. 찍을 수 있는 특성이 5개라고 뜨는데 칸을 눌러도 아무 반응이 없었어요. 트리를 끌어서 움직이는 기능이 누르는 순간 손가락을 트리 전체에 붙잡아 두는 바람에, 손을 뗄 때 어느 칸을 눌렀는지 알 수 없었던 거예요. 누른 순간의 칸을 기억해 두는 식으로 고쳤어요. 시험은 코드로 칸을 골라서 이 버그를 못 잡았고, 로딩 0%는 시험이 개발 서버만 봐서 못 잡았어요. 앞의 것은 진짜 마우스로 누르는 시험을 더해서 막았고, 뒤의 것은 배포 전에 빌드 결과물을 열어 보라는 할 일로 남아 있어요.

해 보니

수심 8,000m 화면. 초심해 괴물들과 눈알 생물이 화면을 가득 채우고 그 위에 +숫자 수십 개가 겹쳐 떠 있어요. 진주는 59.8Qa예요. 노란 동그라미로 겹친 숫자와 59.8Qa를 표시했어요

좋은 점은 방치형인데 손을 쓸 일이 계속 생긴다는 거예요. 공습 보스는 쫓아가며 눌러야 하고, 레이드는 보스마다 피해야 하는 패턴이 달라서 같은 연타가 통하지 않아요. 내가 산 해파리와 아귀가 보스에게 돌진하는 장면은 그동안 모은 게 쓸모 있어지는 순간이라 보기 좋아요. 컷신 그림도 게임 그림체와 잘 맞아요.

아쉬운 점은 후반 화면이에요. 8,000m쯤 가면 생물과 숫자가 겹쳐서 보스나 진주를 찾기 어려워요. 한국어로 설정해도 컷신은 영어 자막이라 흐름이 한 번 끊겨요. 레이드 스테이지는 테스트 구매로 잠겨 있어서, 지금 버전에서는 확인 창을 눌러야 들어갈 수 있어요.

지금 상태와 남은 것

지금은 새 게임부터 8,000m 엔딩까지 한 판이 끝까지 돌아가요. 프롤로그, 엔딩, 죽음 엔딩 컷신이 있고, 저장 슬롯 3개와 서버 없는 클리어 기록 코드가 있어요.

  • 인앱 상품(광고 제거, 특성 초기화, 레이드 입장)은 상품과 지급 코드만 있고, 결제는 테스트용 확인 창이에요. 광고는 아직 붙이지 않았어요.
  • 클리어 기록을 올릴 순위 서버는 없어요. 올릴 기록을 쌓아 두는 자리만 있어요.
  • 빌드 결과물을 여는 배포 전 검사는 아직 자동 시험에 들어가지 않았어요.
  • 게임은 올려 두었지만 해 본 사람의 반응은 아직 받지 못했어요.
공유X에 공유

이어 읽기

댓글 0

가입 없이 써요. 비밀번호는 고치거나 지울 때 써요 · 댓글 규칙

아직 댓글이 없어요. 첫 이야기를 남겨 주세요.