K-Guess 개발기: React + Vite로 한국어 단어 맞추기 게임 만들기
K-Guess 개발기: React + Vite로 한국어 단어 맞추기 게임 만들기 이번에 K-Guess 라는 한국어 단어 맞추기 웹 게임을 만들고 배포했습니다. 서비스 주소는 https://k-guess.vercel.app/ 입니다. 처음에는 간단한 웹 게임 프로젝트로 시작했지만, 개발을 진행하면서 단순히 “게임이 돌아가는 수준”이 아니라 실제 서비스처럼 운영 가능한 형태까지 만들어보고 싶었습니다. 그래서 게임 로직뿐 아니라 SEO, 사이트맵, 애드센스 준비, 정책 페이지, 봇 차단, rate limiting까지 함께 다뤘습니다. 프로젝트 개요 K-Guess는 매일 바뀌는 한국어 단어를 맞히는 웹 게임입니다. 영어권의 워드 게임처럼 직관적으로 즐길 수 있으면서도, 한국어 입력과 자모 구조를 고려한 플레이 경험을 제공하는 것이 목표였습니다. 클래식 모드 : 6자모 정답 단어를 제한된 횟수 안에 맞히는 기본 모드 하드 모드 : 여러 길이의 단어를 단계적으로 맞히는 모드 유사도 모드 : 의미적으로 가까운 단어를 탐색하면서 정답에 접근하는 모드 사용한 기술 스택 React Vite TypeScript Vercel 프론트엔드는 React + Vite 기반으로 구성했고, 정적 배포는 Vercel을 사용했습니다. 빠른 번들링과 단순한 배포 흐름 덕분에 프로토타입을 서비스 수준으로 키워 나가기 좋았습니다. 1. 라우팅과 기본 구조 앱은 React Router 기반으로 구성했고, 홈과 각 게임 모드, 도움말, 정책 페이지를 분리했습니다. 초반에는 게임 화면 자체에 집중했지만, 이후 검색엔진과 광고 심사를 고려하면서 정적 정보 페이지도 중요해졌습니다. import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'; <BrowserRouter> ...
