안녕하세요. 가입 없이 HTML5 게임 20여 종을 즐길 수 있는 무료 학습·아케이드 게임 플랫폼, studyplay.kr을 개발하고 운영하고 있습니다.

사이트를 다 만들고 내놓았을 때, 조회수가 '0'이 나오는 걸 보고 정말 충격을 받았었습니다. 사이트를 만들고 실제로 운영하면서 마주친 문제가 많았습니다 저와 같은 고민을 하실 분들을 위해 그동안의 삽질과 해결 과정을 회고로 정리해 봅니다.

🛠 기술 스택
Frontend: Vue 3 (SPA) + Vite

Backend: Node.js (Express) + PostgreSQL

AI 에이전트: Python (FastAPI) — 별도 서비스

인프라: Naver Cloud + Nginx + PM2

1. "검색에 사이트가 아예 안 잡혀요" — SPA의 함정
가장 충격적이었던 건, 사이트를 다 만들고 검색했는데 조회수가 0이었다는 점입니다. 원인을 파보니 명확했습니다. Vue SPA는 검색봇에게 그저 빈 페이지로 보였던 것입니다.

일반 유저가 접속하면 브라우저가 JS(자바스크립트)를 실행해 게임 목록을 그려주지만, 검색봇(특히 네이버 Yeti 봇)은 JS를 거의 실행하지 않습니다. sitemap이 아무리 충실해도 봇이 들어와서 본 게 빈 페이지면 색인할 가치가 없다고 판단하는 거죠.

실제로 같은 페이지를 일반 유저와 검색봇이 받았을 때 가 어떻게 다른지 비교해봤습니다.

① 프리렌더 적용 전 — 봇이 보던 페이지

<body class="bg-gray-900 text-white">
  <div id="app"></div>
</body>

📏 75바이트. 텅 빈 껍데기. 검색봇 입장에선 색인할 내용이 0입니다.

② 프리렌더 적용 후 — 봇이 보는 페이지

<body class="bg-gray-900 text-white">
  <div id="app"><article>
    <nav aria-label="breadcrumb">
      <a href="/">StudyPlay</a> » <span>체스 (Chess)</span>
    </nav>
    <h1>체스 (Chess)</h1>
    <p><strong>카테고리:</strong> 보드/전략 | <strong>가격:</strong> 무료 | <strong>지원:</strong> PC·모바일</p>
    <p>클래식 체스 게임. 킹을 잡으면 승리. 1P(AI 대전) 및 2P(로컬 대결) 지원...</p>
    <h2>체스 (Chess) 게임 정보</h2>
    <ul>
      <li>가입 없이 바로 플레이 가능한 무료 HTML5 보드/전략 게임입니다.</li>
      <li>StudyPlay 에서는 학습·아케이드·교육 등 다양한 무료 게임을 제공합니다.</li>
    </ul>
  </article></div>
</body>

📏 1,197바이트. 제목·카테고리·설명이 실제 HTML로 채워져, 검색봇이 그대로 읽어갑니다.

같은 URL인데, User-Agent가 봇이냐 아니냐에 따라 75바이트와 1,197바이트로 갈립니다. 일반 유저는 가벼운 SPA를 받아 JS로 화면을 그리고, 봇은 서버가 미리 채워준 완성된 HTML을 받는 거죠.

💡 해결: 봇 전용 서버사이드 프리렌더링
User-Agent로 검색봇을 판별해서, 봇이 들어왔을 때만 Express 서버가 DB 데이터로 채운 진짜 HTML을 돌려주도록 했습니다. 일반 유저는 기존 SPA 구조 그대로 받고요.

# Nginx: 봇이면 백엔드 프리렌더로 프록시
map $http_user_agent $is_bot {
    default 0;
    "~*googlebot" 1;
    "~*yeti" 1;        # 네이버 (한국 유입의 핵심!)
    "~*bingbot" 1;
    # ...
}

결과적으로 봇이 보는 페이지가 75바이트에서 4,068바이트(실제 게임 목록이 담긴 HTML)로 바뀌었습니다.

✔️ 교훈
SPA로 사이트를 만들 거면, SEO가 중요한 순간 "봇은 내 JS를 실행하지 않는다"를 반드시 기억해야 합니다.

2. AI 비용 폭탄을 피하라 — Gemini ➔ Groq 전환
처음엔 Google Gemini API로 구현했는데, 운영 관점에서 두 가지 문제가 있었습니다.

무료 등급 할당량(429): 트래픽이 조금만 몰려도 막힘

과금 위험: 선불 전환 시 하루 수백 명이 쓰면 월 10만 원 수준 청구 예상

직접 토큰 단가로 계산해보니 트래픽이 커질수록 개인이 감당하기 부담스러운 구조였습니다. 그래서 AI Core를 무료 오픈소스 모델로 교체하기로 마음먹었습니다.

처음엔 서버에 Llama를 직접 호스팅하려 했으나 ➔ 서버 RAM이 957MB라 불가능 (현실 점검 완료)

결론은 Groq(무료 티어, Llama 3.3 70B)로 전환 ➔ OpenAI 호환 API라 코드 교체는 10분 만에 끝났고, 트래픽 상관없이 비용은 $0이 되었습니다.

AI Core를 Groq로. 코드는 거의 그대로, 비용만 0으로.

GROQ_MODEL = "llama-3.3-70b-versatile"
✔️ 교훈
AI 기능은 "되게 만드는 것"과 "운영 비용을 감당하는 것"이 완전히 다른 문제입니다. 1인 개발에선 후자가 훨씬 더 중요할 수 있습니다.

마치며

현재 웹게임을 직접 만들면서, AI 에이전트를 도입해 NCS 직무 분류별 진로 안내와 학습 게임 매칭 기능을 운영하고 있습니다.

앞으로도 계속 업데이트하며 퀄리티를 높이고, 더 많은 사람에게 유익한 사이트로 만들어가는 것이 목표입니다. 그 과정을 벨로그에 하나씩 남기며 성장하려 합니다.