이 글에서는 AI를 활용하여 미니 게임 웹사이트를 처음부터 구축하는 상세한 과정을 소개합니다. 기술 아키텍처, 게임 리소스 확보 등을 다룹니다.

1. 배경 소개

최근 독립 웹사이트 해외 진출을 시도하면서 여러 유형의 웹사이트를 만들었지만, 아직 큰 성과는 없습니다. 지난주에 게임 플랫폼 웹사이트를 런칭했는데, 도메인은 https://miniplay.io/ 이며 현재 몇 개의 게임만 서비스하고 있습니다.

이 과정을 정리해서 필요한 분들께 참고가 되고, 웹사이트도 홍보할 겸 글을 작성하게 되었습니다.

2. 도메인

좋은 도메인은 웹사이트 성공의 첫걸음입니다. 제가 사용 중인 도메인은 키워드 자체에 검색량이 있어서, 사이트맵도 제출하지 않은 상태로 런칭한 지 일주일도 안 되어 Google 검색에서 노출과 클릭이 발생했습니다.

하지만 도메인 찾기는 쉽지 않은 작업입니다. 좋은 도메인은 대부분 선점되어 있습니다. ChatGPT로 웹사이트 컨셉에 맞는 도메인을 추천받고, NameBeta에서 하나씩 확인해보는 방법을 추천합니다. NameBeta는 도메인 가격 비교 사이트로, 도메인 등록 가능 여부와 어디서 등록하는 게 유리한지 빠르게 확인할 수 있습니다.

등록 가능한 도메인을 찾았다면 Google Trends에서 해당 키워드의 검색량을 확인해보세요. 검색량이 있다면 훨씬 유리합니다. 단, 타인의 상표를 침해하지 않도록 주의해야 합니다.

가격이 비슷하다면 dynadot에서 도메인을 등록하는 것을 추천합니다. 알리페이 결제가 가능하고, 등록 후 후회하더라도 부분 환불이 가능합니다.

도메인 확장자는 com, org, net, io 등 주류 확장자를 우선 사용하는 것이 좋습니다. 웹사이트 신뢰도를 높이고 예상치 못한 문제를 피할 수 있습니다. 게임 관련 웹사이트의 경우 io가 자주 사용되며 사용자 신뢰를 얻기 쉽습니다.

3. 기술 구현

우선 코드 프레임워크는 해외 진출 시 주로 Next.js를 사용합니다. 웹사이트 코드의 99%를 AI가 작성한다고 해서 AI에게 완전히 맡기는 것은 아닙니다.

AI의 생성 결과는 컨텍스트에 의존하기 때문에, 제공하는 정보가 적을수록 결과의 통제가 어려워집니다.

웹사이트 템플릿부터 시작하는 것을 추천합니다. 템플릿은 AI의 작업 범위를 규정할 뿐만 아니라 로그인 시스템, 결제 시스템 등을 편리하게 연동할 수 있습니다.

요즘 SaaS 웹사이트 템플릿이 많이 나오고 있습니다. 금을 캐는 것보다 삽을 파는 게 더 돈이 되니까요.

웹사이트 템플릿은 유료와 무료가 있는데, 저는 유료 템플릿을 사용했습니다. 웹 개발자가 아니라서 직접 구축하는 비용이 높아, 사용자가 많은 유료 템플릿을 선택해 핵심 작업에 집중했습니다.

하지만 실제 사용 경험은 평범했고 문제도 있었으며, 제작자의 유지보수도 적극적이지 않아 추천하지는 않겠습니다.

템플릿을 준비한 후 다음 단계는 AI로 코드를 작성하는 것입니다. 저는 Claude Code와 Codex를 사용합니다.

프로젝트 시작 전에 AI와 소통하며 어떤 프로젝트를 만들 건지, 생각한 기능과 대략적인 인터랙션을 AI에게 설명합니다. 그리고 AI가 명확하지 않은 부분과 잠재적 문제를 제기하도록 합니다.

여러 차례 대화하면 AI가 프로젝트 세부사항을 거의 파악하게 됩니다.

이때 바로 코딩을 시작하지 말고, AI에게 논의 내용을 제품 설계 문서, 기술 설계 문서 등으로 정리해서 프로젝트 디렉토리에 저장하게 합니다.

정리가 끝나면 세부사항을 다시 확인하고 예상과 다른 부분이 없는지 체크합니다. 확인이 끝나면 코드 구현을 시작할 수 있습니다.

문서 정리의 또 다른 장점은 AI의 생성이 현재 창의 컨텍스트를 기반으로 하기 때문입니다. 프로젝트 개발 과정에서 불가피하게 창을 여러 번 재시작하게 되는데, 재시작할 때마다 AI에게 문서를 먼저 읽게 해서 프로젝트 배경을 파악하도록 할 수 있습니다.

웹사이트 코드가 완성되면 서버에 배포해야 합니다. 요즘 일반적으로 사용하는 서버 플랫폼은 Vercel과 Cloudflare Workers이며, 두 플랫폼 모두 무료 할당량이 있습니다.

이전에 Vercel에 배포해봤는데 몇 가지 문제가 있었습니다. 또한 Vercel에서 트래픽이 증가하면 유지비용이 많이 든다고 해서, 지금은 주로 Cloudflare Workers를 사용합니다.

다만 Cloudflare Workers 배포가 Vercel보다 약간 복잡하니, 초보자는 먼저 Vercel로 시작해서 나중에 필요에 따라 마이그레이션하는 것도 좋습니다.

배포 절차는 웹사이트 템플릿에 관련 문서가 있으니 따라 하면 됩니다.

데이터베이스는 Neon 플랫폼을 사용하며, 현재 무료 할당량으로 충분합니다.

4. UI 디자인

이 웹사이트의 UI는 여러 버전을 거쳤습니다. 처음에는 색상 조합 웹사이트에서 마음에 드는 색상 조합을 선택하고 AI에게 그 색상으로 웹사이트를 최적화하게 했습니다.

하지만 이 방법에는 문제가 있었습니다. 색상 조합이 괜찮아 보여도 실제 사용 시 어느 색을 어느 요소에 적용하느냐에 따라 최종 결과가 크게 달라질 수 있습니다.

나중에 새로운 방법을 사용했습니다. 온라인에는 다양한 웹사이트 디자인 사례가 있는데, 마음에 드는 사례를 찾아 스크린샷을 AI에게 보내고 웹사이트의 디자인 방식을 분석하게 합니다. AI가 버튼, 배경, 텍스트의 스타일을 이해한 후 우리 웹사이트에 적용하게 합니다.

5. 게임 리소스

미니 게임 웹사이트에서 가장 중요한 것은 게임 리소스 소싱입니다. 리소스 출처는 주로 3가지입니다:

1. 무료 오픈소스

GitHub에는 많은 오픈소스 게임이 있으며, 이 저장소에도 많이 수록되어 있습니다. 오픈소스 게임은 소스 코드를 CDN 서버에 직접 업로드할 수 있습니다. 하지만 비교적 현대적인 게임을 선별해야 하며, 오래된 게임은 업로드해도 아무도 플레이하지 않습니다.

2. 다른 웹사이트 참조

여러 게임 플랫폼 웹사이트를 살펴보면 인기 게임이 대부분 공통으로 있는데, 이런 게임 대부분은 iframe으로 다른 게임 소스를 직접 참조합니다. 하지만 이 방법은 위험이 있습니다. 원본 웹페이지에 차단이나 리다이렉트 코드가 추가되면 게임 페이지에 접근할 수 없거나 위험 웹페이지로 판정될 수 있습니다.

또 다른 참조 방식은 승인을 받는 것입니다. 예를 들어 Game Distribution 웹사이트에서 배급사로 등록하고 승인을 받으면 합법적으로 이 웹사이트의 게임을 참조할 수 있으며, 추가 위험이 없고 플랫폼의 광고 수익도 배분받을 수 있습니다.

3. 자체 개발

이론적으로 지금 AI가 발달해서 AI의 도움으로 웹 미니 게임을 만드는 것이 가능합니다. 하지만 향후 홍보, 게임의 재미 등을 고려하면 난이도가 상당합니다.

천부적인 재능이 있어 인기 있는 게임을 만들 자신이 있는 게 아니라면, 이 방법은 투자 대비 효율이 너무 낮습니다.

6. 홍보 운영

신규 웹사이트 런칭 후 일반적인 단계:

1. Google Analytics 연동하여 웹사이트 트래픽 모니터링
2. Google Search Console 연동하여 Google 검색 엔진에서의 웹사이트 성과 모니터링, 키워드 및 백링크 최적화
3. Bing Webmaster Tools 연동하여 Bing 검색 엔진에서의 웹사이트 성과 모니터링. Bing의 전체 트래픽은 Google에 비해 훨씬 적지만 경쟁이 덜 치열해서 개별 웹사이트 입장에서는 때때로 더 많은 검색 트래픽을 얻을 수 있습니다.
4. SEO를 지속적으로 관리합니다. 게임 플랫폼 웹사이트의 경우 지속적으로 새 게임을 추가하고, 내부 링크 구조를 잘 설계하며, 외부 링크를 꾸준히 확보해야 합니다.

7. 수익화

게임 플랫폼 웹사이트의 수익화 방식은 주로 두 가지입니다:

1. 다른 게임 플랫폼의 배급사가 되어 트래픽에 따라 수익을 배분받습니다. 위에서 언급한 Game Distribution이 그 예입니다.
2. Google Adsense 연동하여 승인을 받으면 웹사이트에 직접 광고를 게재할 수 있습니다.