게임이 완성됐습니다. 이제 배포할 차례인데, 여기서 아주 현실적인 벽에 부딪혔어요.
도메인이 부담스러웠다
처음엔 이 게임을 단독 서비스로 배포하려고 했습니다. 그럴듯한 도메인 하나 사서, 거기에 올리고요. 그런데 막상 하려니 마음이 걸렸어요.
재미로 만든 밈 게임입니다. 얼마나 많은 사람이 할지도 모르고, 대부분은 한두 번 해보고 말 단발성 콘텐츠일 가능성이 높죠. 그런데 여기에 도메인 값을 매년 내는 게 아깝더군요. 도메인 등록하고, DNS 붙이고, 호스팅 잡고… 배보다 배꼽이 큰 느낌이었습니다.
그러다 생각했어요. "어차피 나 플레이톡 운영하고 있잖아?"
플레이톡은 제가 만들어서 운영 중인 랜덤 매칭 미니게임 사이트입니다. 이미 도메인도 있고, 배포 환경도 다 갖춰져 있죠. 그러니 이 게임을 굳이 따로 낼 게 아니라, 플레이톡 안에 하위 페이지로 붙이면 도메인 비용은 0원이고 배포도 기존 파이프라인을 그대로 쓸 수 있는 겁니다.
이게 개인 개발자가 여러 사이드 프로젝트를 굴릴 때의 이점이더군요. 플랫폼 하나 만들어두면, 이후의 작은 프로젝트들은 거기 얹기만 하면 되니까요.
iframe으로 임베드하기로
붙이는 방식은 두 가지가 있었습니다.
- (A) iframe으로 통째 임베드 — 게임을 정적 폴더에 넣고, 하위 페이지에서 iframe으로 띄우기. 게임 코드를 거의 안 건드려서 빠르고 안전.
- (B) 플레이톡 구조에 네이티브로 이식 — 게임을 플레이톡 컴포넌트/라우트 체계에 맞춰 옮겨 심기. 통합감은 좋지만 손이 많이 감.
저는 **A(iframe)**를 골랐습니다. 이 게임은 이미 순수 HTML/JS 정적 파일로 독립 실행되니까, iframe에 그대로 넣으면 바로 돌거든요. 나중에 게임을 수정해도 파일만 교체하면 되고요. 1편에서 "가볍게 순수 HTML/JS로 가기로 했다"는 결정이 여기서 빛을 발했습니다. 프레임워크로 짰으면 이렇게 간단히 못 붙였을 거예요.
경로는 /games/buythedip으로 잡았습니다. "buy the dip(딥을 사라)"은 영어권에서 딱 이 상황을 가리키는 관용구라, 경로만 봐도 뭐 하는 게임인지 오거든요.
모바일에서 터진 문제들
배포하고 실기기로 만져보니 몇 가지 문제가 나왔습니다. iframe 임베드는 편한 대신, 이런 통합 지점에서 자잘한 이슈가 생기더군요.
1) 공유 버튼이 iframe 내부 주소를 공유하는 문제
우측 상단에 공유 버튼을 달았는데, 이게 iframe 안에서 실행되다 보니 게임 프레임의 내부 URL을 공유하고 있었어요. 이러면 링크를 받은 사람이 사이트 껍데기 없는 맨몸 게임으로 들어가게 됩니다. 부모 페이지의 URL(/games/buythedip)을 공유하도록 고쳤습니다.
2) 모바일 공유 시트가 안 뜨는 문제
모바일에서 공유 버튼을 누르면 카톡·메시지 같은 앱 선택 시트가 떠야 하는데, 링크 복사만 되더군요. 원인은 iframe 권한이었습니다. navigator.share는 iframe 안에서 기본적으로 차단되는데, 부모가 allow="web-share" 속성으로 권한을 줘야 동작하거든요. 이걸 추가하니 정상적으로 공유 시트가 떴습니다.
3) 백그라운드 갔다 오면 화면이 깨지는 문제
브라우저를 한참 백그라운드에 뒀다가 다시 열면, 게임 화면이 좌상단 1/4로 쪼그라들고 애셋이 안 뜨는 경우가 있었습니다. Canvas 게임에서 흔한 버그인데, 백그라운드에서 캔버스 크기가 초기화됐다가 복귀할 때 다시 안 맞춰져서 생깁니다. 포그라운드로 돌아올 때(visibilitychange) 캔버스를 다시 리사이즈하고 그리도록 방어 코드를 넣어 해결했어요.
이런 버그들은 간헐적이라 재현이 잘 안 되는 게 골치입니다. 그래서 "재현을 쫓기보다 방어 코드를 다 깔아둔다"는 방향으로 갔습니다. 어차피 넣어둬서 손해 볼 게 없는 안전장치들이니까요.
셀프 리뷰로 마무리
배포 후에는 클로드코드에 PR 셀프 리뷰를 시켰습니다. 여러 각도로 코드를 훑어서 문제를 찾게 했더니, 위에서 말한 공유 URL 문제 같은 걸 정확히 짚어주더군요. 사람이 놓치기 쉬운 경계 케이스(키보드로 공유 버튼 누르면 매수까지 실행되는 버그 같은)까지 잡아줘서 유용했습니다.
다음 편에서는
여기까지가 기획→제작→개발→배포의 흐름이었습니다. 이제 남은 두 편은 프로젝트 중에 특히 깊게 파고들었던 두 주제를 따로 다룹니다.
먼저 5편은 저작권 이야기입니다. "왜 페페를 못 쓰고 와작으로 갔는가", 그리고 "AI로 페페 비슷하게 그리면 괜찮지 않나?"라는 흔한 오해에 대해서요.
👉 플레이톡 에서 직접 써보실 수 있습니다.
