심해 방치형 게임 아비스 다이브 제작기 1편, 진주 줍기에서 8,000m까지

「아비스 다이브(ABYSS DIVE)」는 브라우저에서 돌아가는 심해 방치형 게임이에요. 노란 잠수정으로 바다에 떠 있는 진주를 줍고, 그 진주로 해파리나 잠수 드론 같은 시설을 사서 진주가 저절로 쌓이게 만들어요. 진주가 모이면 50m씩 잠수하고, 다섯 층을 내려가 8,000m 바닥에서 「심연의 심장」을 찍으면 엔딩이에요.

Claude Code로 오전 9시 47분에 시작해서 다음 날 오후 1시 38분까지 만들었어요. 주제와 엔진, 숫자 설계는 전부 AI에게 맡겼고, 저는 켜 보고 불편한 점을 말하는 쪽이었어요. 이번 1편은 첫 판부터 튜토리얼, 심해 트리, 진주 줍기, 생물 머리 위 숫자, 잠수까지예요. 공습과 레이드, 컷신과 엔딩, 배포 문제는 2편에 있어요.

스크린샷은 게임을 다시 켜서 새로 찍었어요. 기본 언어는 영어라 설정에서 한국어로 바꿨어요. 후반 화면은 개발용 치트로 진주를 채워 가며 빠르게 내려가서 찍었어요.

첫 판: 잠수정 한 척과 숫자 몇 개

엔진은 PixiJS 8, 언어는 TypeScript, 빌드는 Vite예요. 왼쪽 바다는 WebGL 캔버스로 그리고, 오른쪽 패널과 위쪽 숫자는 HTML로 만들었어요. 버튼과 목록이 많은 부분은 HTML이 훨씬 빨리 만들어지거든요.

첫 판은 아주 단순했어요. 바다 아무 데나 누르면 진주가 올라가고, 오른쪽 탭에서 시설을 사고, 잠수 버튼을 누르면 카메라가 50m 내려갔어요. 그 화면은 따로 남겨 두지 않아서, 대신 그때부터 쓰고 있는 그림들을 모아 봤어요.

그림은 전부 이미지 생성 API로 뽑았어요. 시설, 이벤트, 특성 아이콘, 보스, 층 배경까지 41장이에요. 스프라이트는 흰 배경으로 뽑은 다음 가장자리부터 흰색을 지워서 투명하게 만들었어요. 같은 꼬리말을 붙여 뽑아서 그림체가 한 벌로 맞아요. 기획서와 그림 프롬프트, 흰 배경 지우는 스크립트는 글 아래에서 내려받을 수 있어요.

튜토리얼: 어디를 눌러야 하는지부터

첫 판을 켜고 제가 처음 한 말은 어디를 눌러야 할지 모르겠다는 거였어요. 만든 쪽도 헷갈리는 화면이었죠. 그래서 4단계 튜토리얼이 들어갔어요. 진주 5개 줍기, 진주 15개로 굴 양식장 사기, 첫 잠수, 그리고 앞으로 할 일을 알려 주는 카드예요.

손가락 표시가 대상 위를 따라다녀요. 1단계에서는 가장 가까운 진주를 가리키고, 주울 때마다 카드의 숫자가 0/5, 1/5로 올라가요.

진주 15개가 모이면 트리를 열라고 하고, 트리를 열면 굴 양식장이 미리 선택된 채로 「15 · 1개 사기」 버튼을 가리켜요. 누를 곳을 하나씩만 보여 줘서 다음에 뭘 할지 헷갈리지 않아요. 설정에 튜토리얼 다시 보기 버튼도 있어요.

심해 트리: 시설과 특성을 한 그림에

처음에는 시설을 사는 탭과 특성을 찍는 트리가 따로 있었어요. 써 보니 둘 다 강해지는 버튼이라 차이를 모르겠더라고요. 그래서 첫날 저녁에 둘을 하나의 방사형 트리로 합쳤어요.

가운데 잠수정이 잠수 버튼이고, 여기서 여덟 가지가 뻗어요. 집게, 엔진, 탐사는 특성 가지이고 나머지 다섯은 층 가지예요. 층 가지의 첫 칸이 그 층의 시설이고, 시설을 하나라도 사면 뒤로 개량, 자동화 같은 강화 칸이 드러나요. 트리 칸은 모두 108개인데, 가진 칸의 바로 다음 칸만 보이고 나머지는 점선으로만 있다는 걸 알려 줘요. 아직 못 간 층은 자물쇠가 붙어 있어요. 위 그림에서 빨간 동그라미 친 곳이 잠수 버튼이고, 노란 동그라미 친 초심해 가지는 아직 잠겨 있어요.

합치고 나니 특성 하나 찍는 데 너무 오래 걸렸어요. 그래서 여러 번 찍을 수 있는 레벨형 특성 11종을 넣고 값을 낮췄어요. 트리를 열면 게임이 멈추고 전체 화면이 돼요(단축키 T, Esc로 닫기). 칸을 누르면 아래에 설명과 사기 버튼이 나오고, 진주가 모자라면 값이 빨간 글씨로 보여요. 칸을 눌러도 선택이 안 되던 버그도 있었는데, 그 이야기는 2편에 있어요.

진주 줍기: 아무 데나 누르던 걸 바꿨어요

바다 아무 데나 눌러도 진주가 올라가는 게 의미 없게 느껴졌어요. 그래서 화면에 진주가 떠 있고 그걸 눌러야 먹을 수 있게 바꿔 달라고 했어요. 대신 계속 연타해도 진주가 모자라지 않아야 한다는 조건을 붙였어요.

규칙은 두 가지예요. 진주를 주우면 방금 누른 자리에서 조금 떨어진 곳에 다음 진주가 바로 생기고, 최근 2초 동안 누른 속도에 맞춰 떠 있는 진주 수가 늘어나요.

const want = Math.min(30, 6 + this.game.pearlBonus() + Math.round(cps * 2) + (this.game.isFrenzy() ? 4 : 0));

기본 6개에, 1초에 세 번 누르면 6개가 더 떠요. 빈 물을 누르면 잔물결만 생겨요. 20번쯤 빠르게 주우면 버블 게이지가 차서 8초 동안 줍는 값이 7배가 되고, 5%는 10배짜리 황금 진주예요. 판정 반경은 마우스 46px, 손가락 64px로 달라요.

생물 머리 위의 +숫자

시설을 여러 개 사도 위쪽 숫자만 조용히 올라가니 얼마나 버는지 느낌이 안 왔어요. 그래서 생물마다 1.4~2.6초마다 작은 진주를 빨아들이고, 몸이 살짝 부풀면서 머리 위에 숫자가 튀어 오르게 했어요.

생물은 하늘색, 바닥에 붙은 구조물은 금색 숫자예요. 그림에서 파란 동그라미가 해파리 숫자, 빨간 동그라미가 굴 숫자예요. 화면에 뜨는 숫자를 다 더하면 실제 초당 생산과 맞게 계산했어요. 한 종류는 화면에 16마리까지만 나오니, 20개를 가졌으면 화면의 한 마리가 20/16마리 몫을 대신 보여 줘요. 이게 들어가고 나서 가만히 둬도 화면을 볼 이유가 생겼어요.

같은 무렵에 잠수하면 생물이 사라지던 문제도 고쳤어요. 처음에는 해파리가 햇빛층 높이에 고정돼 있어서 잠수하면 화면 위로 사라졌어요. 지금은 산 생물이 전부 잠수정을 살짝 늦게 따라 내려와요.

잠수할수록 바뀌는 바다

기획서 첫 줄이 "진주를 캐서 더 깊이, 더 깊이 내려간다"였어요. 숫자만 커지는 게 아니라 어디까지 왔는지가 화면에 남게 하자는 생각이었고, 층마다 배경과 생물이 바뀌어요.

햇빛층, 박명층(500m), 심해층(2,000m), 심연층(4,000m), 초심해(6,500m) 순이에요. 새 층에 닿으면 그 층의 시설이 트리에서 열려요. 깊이 100m마다 생산이 2%씩 붙는 압력 보너스도 있어요.

처음 잠수 값은 고정 공식이었어요. 둘째 날 처음부터 다시 시작하는 프레스티지를 빼고 한 번에 엔딩까지 가게 바꿨더니, 6,000m에서 6,500m로 가는 한 번이 29일짜리 벽이 됐어요. 그래서 잠수 값을 그 순간의 수입에 묶었어요. n번째 잠수에는 최소 30 + 2n초 동안 번 진주가 들어요. 경제 시뮬레이터로 돌려 보니 계속 접속해서 1초에 세 번 누르는 사람은 약 4시간 55분, 30%만 접속하는 방치형으로는 약 13시간 22분에 엔딩이에요. 시뮬레이터 숫자라서 실제 플레이 시간은 다를 수 있어요.

생물을 처음 만나면 도감에 등록되고 생산이 1% 붙어요. 특성 「탐사 일지」를 찍으면 칸마다 2%로 늘어요. 고래나 보물 상자처럼 가끔 지나가는 이벤트도 도감에 들어가서, 놓친 칸이 물음표로 남아요.

해 보니

좋은 점부터요. 잠수할 때마다 배경이 확실히 바뀌어서 내려가고 있다는 느낌이 들어요. 생물 머리 위 숫자 덕분에 방치 수입이 눈에 보이고, 진주 줍기는 연타해도 다음 진주가 바로 근처에 생겨요. 튜토리얼은 누를 곳을 하나씩 짚어 줘서 처음 켜도 막히지 않아요.

아쉬운 점도 분명해요. 후반으로 갈수록 숫자가 너무 많이 떠서 생물이 잘 안 보여요. 초심해쯤 가면 화면이 거의 숫자와 커다란 생물로 덮여요. 진주 수가 59.8Qa처럼 영어 단위로 나오는데 설정에서 만/억/조로 바꿀 수는 있지만 기본값은 영어 단위예요. 트리는 전체를 한 화면에 맞추면 칸 이름이 작아서 확대해야 읽혀요. 500m 박명층은 화면 위쪽에 햇빛층 모래가 남아 있어서 층이 바뀐 느낌이 약해요.

여기까지가 진주를 줍고, 시설을 사고, 잠수하는 기본 흐름이에요. 이 위에 올린 공습과 레이드, 컷신과 엔딩, 저장 슬롯, 그리고 배포했더니 로딩 0%에서 멈춘 이야기는 2편에 이어서 적었어요.

위의 "바로 해 보기"에서 브라우저로 바로 해 볼 수 있어요. 받아서 해 보고 싶은 분을 위해 빌드도 글 아래에 올려 뒀어요. 8,000m까지 내려가 보신 분은 댓글로 알려 주세요.