검색 가능한 카드-게임 용어집을 Static HTML, Lightweight JS 및 SEO Pages로 구축하기
Source: Dev.to
Jogos do Rei에서는 전통 카드 게임인 Buraco, Tranca, Truco 등을 즐기는 브라질 플레이어라는 아주 구체적인 타깃을 대상으로 서비스를 제공합니다. 이 타깃은 실제 검색 수요가 있지만, 동시에 용어 문제를 안고 있습니다.
플레이어들은 morto, manilha, canastra limpa, 3 preto, mão de onze와 같은 용어를 검색합니다. 이 용어들을 명확히 설명하지 않으면 검색 트래픽과 사용자 신뢰를 모두 잃게 됩니다.
그래서 우리는 가볍고 정적인 사이트 형태의 검색 가능한 용어집 페이지를 만들었습니다. 목표는 단순합니다: 용어를 이해하기 쉽게 만들고, 검색 엔진이 쉽게 색인하도록 하는 것.
Constraints
복잡한 프론트엔드 스택이 필요하지 않았습니다.
요구 사항은 다음과 같았습니다:
- 데스크톱 및 저사양 모바일 기기에서도 빠르게 로드될 것
- 용어집 페이지가 색인 가능할 것
- 간단한 클라이언트‑사이드 검색 제공
- 메인 플랫폼 및 규칙 페이지로 돌아가는 내부 링크 포함
- 소규모 팀이 쉽게 유지보수할 수 있을 것
이러한 요구 사항 때문에 매우 단순한 아키텍처를 선택하게 되었습니다.
Stack
용어집은 다음으로 구축되었습니다:
- 정적 HTML
- 소량의 바닐라 JavaScript
- 의미론적 헤딩과 내부 링크
- 크롤링을 위한 sitemap 및 robots 파일
공개 예시:
- 메인 플랫폼: Jogos do Rei
- 용어집 허브: glossario‑buraco on GitHub Pages
Why static was the right choice
용어집은 대부분 콘텐츠 검색 문제이며, 애플리케이션 상태 관리 문제는 아닙니다.
가장 적절한 트레이드‑오프는 다음과 같습니다:
- 페이지를 사전 렌더링
- 마크업을 의미론적으로 유지
- UX를 위한 가벼운 클라이언트‑사이드 필터링 사용
- 프레임워크 오버헤드 회피
정적 제공은 예측 가능한 성능, 용어집 자체에 대한 런타임 복잡도 제로, 그리고 더 깔끔한 크롤링 경로를 제공했습니다.
Search experience
클라이언트‑사이드 검색 박스를 추가해 사용자가 morto 혹은 manilha와 같은 용어를 입력하면 해당 카드를 빠르게 찾을 수 있게 했습니다.
이 검색은 의도적으로 단순합니다. 페이지가 퍼지 랭킹, 원격 쿼리, 무거운 컴포넌트 트리를 필요로 하지 않습니다. 마찰을 최소화하는 것이 목표입니다.
이와 같은 정보 제공 페이지에서는 엔지니어링 질문이 보통 “어떻게 더 정교하게 만들 것인가?”가 아니라 “문제를 신뢰성 있게 해결할 수 있는 가장 작은 시스템은 무엇인가?”가 됩니다.
SEO decisions that mattered
유용했던 부분들은 화려하지 않았습니다; 일관되게 수행된 기본적인 작업들이었습니다:
- 설명적인 타이틀과 메타 설명
- 정규화된 URL (canonical)
- 제품 및 규칙 페이지로 돌아가는 내부 링크
- 게임 개념별로 그룹화된 콘텐츠
- 실제 플레이어가 사용하는 언어를 중심으로 작성된 가독성 높은 카피
또한 sitemap/robots와 같은 지원 파일을 추가하고, 관련 페이지들이 서로를 강화하도록 내비게이션을 확장해 경쟁이 아닌 상호 보완이 되게 했습니다.
Product lesson
니치 제품을 운영할 때, 용어는 온보딩의 일부분입니다. 용어집은 단순히 SEO용 아티팩트가 아니라, 지원 마찰을 줄이고 새로운 플레이어가 게임 규칙을 더 빨리 이해하도록 돕는 역할을 합니다. 이것이 이 프로젝트를 출시할 가치가 있었던 주요 이유였습니다.
Takeaway
사용자가 도메인‑특화 용어를 검색한다면, 작은 정적 용어집은 만들 수 있는 가장 높은 레버리지를 가진 콘텐츠/엔지니어링 하이브리드 중 하나가 될 수 있습니다.
- 빠르게 유지하세요.
- 색인 가능하게 유지하세요.
- 유용하게 유지하세요.
문제가 정말 필요로 할 때만 복잡성을 추가하세요.
공개 예시: