적들의 눈이 사라졌다 - 자바스크립트 슈팅게임 만들기

파이썬 슈팅게임을 자바스크립트로 이사시켰다

이번 오락실 기계는 재탕이야. 파이썬 배우던 시절(그래봐야 3주 전)에 만들었던 우주 슈팅 게임, 그걸 브라우저에서 돌아가게 다시 만든 거거든. 퐁 게임도 그렇게 이사시켰으니 두 번째 이사인 셈이지.

한 번 해본 이사라 금방 끝날 줄 알았어. 원본이라는 정답지까지 손에 있으니 이보다 쉬운 조건이 어딨어. 그런데 웬걸, 정답지를 손에 쥐여줘도 안 보면 소용이 없더라고. 오늘은 그 얘기야.

원본을 켜보니 적들의 눈이 없었다

새 게임이 얼추 완성되고 검증까지 끝났다고 해서 돌려봤는데 음, 결과물이 심히 별로였어.

"예전에 파이썬으로 만들었던 원본도 실행해보자."

원본 화면에는 적이 3행 10열, 30마리 격자 대형으로 쫙 깔려 있는 거야. 게다가 몸통에 조그만 눈이 두 개씩 박혀 있고, 줄마다 빨강·노랑·초록으로 색도 달랐어. 새로 만든 게임은? 밋밋한 역삼각형 몇 마리가 한 줄로 떠 있을 뿐이었지.

"원본의 적이 새로 만든 거랑 다르네. 왜 이렇게 만들었어?"

녀석의 답이 의외였어.

"게임 만들 때 난이도 3단계를 넣는 게 내 기본 규칙이거든. 난이도를 적 개수로 구현했어. 쉬움 3마리, 보통 5마리, 어려움 7마리. 그러다 보니 격자 대형이 들어갈 자리가 없어졌어."

원본에서 적 수가 딱 정해진 격자 대형은 초기에 만들었고 별다른 요청 없이 녀석이 알아서 만든 결과물이었어. 그런데 이전에 만들었던 게임 규칙을 그대로 가져와 적용한 거지. 벽돌깨기나 스네이크 게임은 난이도의 구분이 의미가 있지만 슈팅 게임은 아니잖아. 슈팅 게임과 맞지 않는 옷을 입혀버린 거지.

"규칙도 좋지만 원본부터 확인했으면 굳이 수정하지 않아도 되는 내용이잖아."

무서운 건 이거야. 이런 손실은 에러 메시지가 안 떠. 그냥 스타일 차이처럼 보이거든. 만드는 과정에서 토큰이 손실되는 거지. 의미없는 토큰이 소모되는 것처럼 무서운 게 어디 있겠어. 실제로 나는 이 게임을 만들면서 요금제를 업그레이드했어. 슬슬 시작인가봐.

이 차이 중 하나는 겉보기 문제가 아니라 진짜 버그로 이어져 있었는데, 그 얘기는 따로 에러노트에서 풀게.

난이도 3단계도 통째로 뺐어. 웨이브가 진행되며 어려워지게 만들면 되는 일이니까. 이처럼 간단해 보이지만 사람 손을 거쳐야 하는 일이 생각보다 많았어.

"웨이브가 진행될수록 어려워지게 만들면 되니까 난이도 조절은 필요없어."

"맞는 말이야. 다시 만들게."

677줄 한 파일, 원본은 이미 답을 알고 있었다

코드 파일을 열어봤는데 스크롤이 끝이 없는 거야. 한 파일에 677줄이라더라고. 당연히 더 긴 코드도 있겠지만 적어도 내 수준에선 길어보였어.

코드를 읽을 줄은 모르지만, 서류 뭉치 하나에 계약서랑 영수증이랑 편지가 다 섞여 있으면 안 좋다는 것쯤은 알지. 하다못해 분식집 메뉴판도 라면류, 김밥류는 따로 적어두잖아. 실제로 파이썬으로 만들었을 때는 종류별로 나뉘어 있었어. 애매하면 물어봐야지.

"인덱스 파일 하나로 다 돌아가는데 이렇게 하는 게 맞아? 파일을 구분하는 게 좋지 않아?"

"삼촌, 파이썬 원본을 다시 봤는데 이미 파일 6개로 나뉘어 있어. 주석에 이렇게 적혀 있더라. 파일 분리 전에는 모든 코드가 한 파일에 있었다고."

원본은 이미 같은 고민을 하고, 같은 결론을 내리고, 후배를 위해 메모까지 남겨놨던 거야. 그 길을 새 게임이 처음부터 다시 걸은 거지.

세어 보니 이런 일이 세 번째였어. 격자 대형이 그랬고, 난이도 선택이 그랬고, 파일 구조가 그랬어. 전부 원본이 먼저 알고 있던 답이었고, 전부 원본을 안 보고 일반 규칙부터 적용하다 생긴 일이었어. 정답지 옆에 두고 오답 쓰는 게 쉬운 일이 아닌데 말이야.

디자인을 맡겼더니 차이가 보였다

원본 복원이 끝나고 나서는 살을 붙일 차례였어. 내 목표가 그거잖아. 결과물 하나에 새 기능 하나, 조금 더 좋아진 퀄리티.

고전 그대로는 심심하니 뭘 얹을지 녀석이 후보를 내밀었고, 적의 반격이랑 목숨 3개, 무한 웨이브, 다섯 판마다 보스전 등등 몇 가지 요소를 추가했어.

다음으로 디자인을 요청했고 꽤 괜찮은 목업을 주더라고. 여기서 조금 손보고 정리할까 하다가 이전 작업에서 디자인은 클로드 디자인으로 했었거든. 그래서 궁금해진 거지. 같은 게임 디자인 맡겨보면 결과물이 어떻게 달라질까 하고 말이야.

받아온 시안을 보고 놀랐지 뭐야. 예쁘게 만들어달랬더니 게임 기능까지 재밌게 만들어 왔어. 가만히 있어도 총알이 나가고, 연달아 맞히면 점수가 배로 오르고, 적이 대형에서 이탈해 내 쪽으로 내리꽂히고, 보스가 패턴을 바꿔가며 덤비는 거야.

옷 수선을 맡겼더니 새 옷을 준 격이랄까.

추가된 게임 장치가 열다섯 개였어. 자동 발사, 콤보 배율, 적의 급강하, 보스 패턴, 폭발 파티클, 화면 흔들림, 별이 흐르는 배경까지. 왜 이런 차이가 나왔을까?(궁금하면 오백...)

"같은 게임인데 이런 차이가 나온 이유가 뭐야?"

"나는 삼촌이 만들던 게임 위에서 일했잖아. 원본 지키고, 시킨 것만 조심해서 얹었지. 그쪽은 백지에서 시작했거든. 지킬 게 없으니까 자기가 아는 제일 재밌는 슈팅게임을 통째로 그린 거야."

듣고 보니 이해가 되더라고. 잘하고 못하고의 문제가 아니라 판의 문제였던 거야. 있는 걸 고치라고 주면 지키는 쪽으로 움직이고, 백지를 주면 아는 걸 다 쏟아내고. 예전엔 결과물만 놓고 잘했네 못했네 했는데, 요즘은 어떻게 해야 이 녀석의 본 실력을 끌어낼 수 있을까를 고민하고 있어.

원본과 클로드 디자인에서 가져온 걸 절충해서 리디자인을 했고,

사실 욕심이 나긴 하는데 많이 참았어. 여기에 토큰을 다 쓰는 것도 좀 아깝기도 하고, 지금은 배우는 과정이니까. 그리고 보이는 것보다 물밑에서 신경을 더 많이 썼어. 말하자면 내실을 다졌다고 해야 할까. 청명이가 정순한 내공을 채우듯이 말이야.

오늘의 결론

본문에서 이야기했듯 이 녀석의 능력을 최대한 끌어내는 데 집중하며 이번 게임을 만들었는데, 내 방식이 맞는지는 아직 잘 모르겠어. 하지만 결과물이 쌓일수록 구조적으로 능력을 잘 이끌어낼 수 있는 시스템을 구축하는 데 에너지를 쏟고 있다고 해야 할까. 배보다 배꼽이 더 커진 느낌도 없잖아 있는데 조금씩 틀이 잡혀가고 있어. 이 이야기도 언젠가 기회를 봐서 풀어볼게.

완성된 게임은 네온 스트라이커 플레이 페이지에서 바로 해볼 수 있어. 격자가 왜 중앙에서 덜덜 떨기만 했는지, 총알이 왜 적을 뚫고 지나갔는지, 이사 도중에 잡은 버그들 얘기는 다음 에러노트에서 하기로 하자.