Active 2024.08

Poke Korea

Next.js 14 App Router + GraphQL 기반 포켓몬 정보 사이트. AWS EC2 셀프 호스팅, CloudFront + Lambda@Edge 이미지 최적화, 테크니컬 SEO를 적용하여 월간 1.7만 사용자를 확보한 1인 개발·운영 프로젝트.

nextjs typescript graphql apollo tailwindcss aws
* 이미지를 클릭하여 확대하실 수 있습니다.

프로젝트 소개

이전에 만들었던 Pokemon Dogam 프로젝트를 운영하면서 느꼈던 기술적 한계와 UX 문제를 개선하기 위해 시작한 프로젝트입니다. 단순히 기능을 다시 만드는 것이 아니라, 그동안 쌓은 프론트엔드 역량을 총동원해 “실제 사용자가 꾸준히 찾아오는 서비스”를 만들고 운영하는 것이 목표였습니다.

기존 프로젝트에서는 개발 자체에 집중했다면, Poke Korea에서는 SEO를 통한 자연 유입, AWS 인프라 구성, 이미지 최적화까지 서비스 전체 라이프사이클을 직접 경험하고 싶었습니다.

주요 구현

Next.js 14 App Router + GraphQL

Next.js 14의 App Router를 기반으로, Apollo Client와 graphql-codegen을 활용해 타입 안전한 데이터 통신 구조를 구성했습니다. PokeAPI에서 원본 데이터를 수집한 뒤 서비스에 필요한 형태로 가공하여 별도 GraphQL 서버를 구축했고, 프론트엔드에서는 화면별로 필요한 필드만 정확히 요청하는 구조로 설계했습니다.

UX 중심의 설계 개선

기존 Pokemon Dogam에서 사용했던 가상화 렌더링(react-virtuoso) 방식은 SEO 크롤링과 캐싱에 불리한 구조였습니다. Poke Korea에서는 이를 제거하고 커서 기반 무한 스크롤효율적인 캐싱 전략으로 전환하여, 검색엔진 접근성과 사용자 경험을 동시에 개선했습니다.

또한 User-Agent 기반으로 서버에서 디바이스를 감지하여 데스크톱과 모바일에 각각 최적화된 뷰를 제공합니다. 포켓몬 도감 6개 주요 기능(포켓몬 도감, 기술 도감, 특성 도감, 상성 계산기, 퀴즈, 검색)을 네비게이션으로 구성하고, 모바일에서는 하단 탭바로 빠르게 접근할 수 있도록 설계했습니다.

퀴즈 시스템

매일 갱신되는 4종의 퀴즈(실루엣 맞추기, 특성 맞추기, 타입 맞추기, 타입 상성 퀴즈)를 제공합니다. 각 퀴즈는 20문제 4지선다 형식으로 구성되며, 완료 후 정답률과 소요 시간을 확인할 수 있습니다. 홈 화면의 “오늘의 퀴즈” 섹션에서 미리보기를 제공하여 자연스러운 진입을 유도했습니다.

AWS 인프라 구성

AWS EC2 t2.micro 인스턴스에 PM2를 활용한 셀프 호스팅 환경을 구성했습니다. 이미지 최적화를 위해 CloudFront + Lambda@Edge를 도입하여, 원본 이미지를 실제 화면에 노출되는 영역 크기에 맞춰 리사이즈하고 WebP로 변환하여 제공합니다. 실제로 필요한 만큼의 리소스만 전달하기 때문에 불필요한 대역폭 소비를 줄이고 로딩 속도를 개선할 수 있었습니다.

테크니컬 SEO

검색엔진을 통한 자연 유입을 확보하기 위해 테크니컬 SEO를 체계적으로 적용했습니다.

성과 지표

실제 사용자 트래픽을 기반으로 서비스의 성장을 추적하고 있습니다.

Google과 네이버 두 검색엔진 모두에서 안정적인 자연 유입을 확보하고 있으며, 지속적인 콘텐츠 추가와 SEO 개선을 통해 트래픽이 꾸준히 증가하는 추세입니다.

배운 점

앞으로

현재도 꾸준히 기능을 추가하고 버그를 수정하며 서비스를 운영하고 있습니다. 검색엔진 노출 순위를 더 끌어올리기 위한 SEO 개선, 사용자 피드백 기반의 UX 고도화, 그리고 새로운 포켓몬 데이터 업데이트에 맞춘 콘텐츠 확장을 계속 진행할 예정입니다.