개인 프로젝트 | 2025.10 ~ 현재 | mapleplanet.gg

게임 경매장 시세를 조회하는 서비스입니다. 아이템 2,200종의 시세 추이·매물·거래 내역을 제공하고, 지금은 월 86만 PV가 나옵니다. 기획부터 프론트·백엔드·인프라·운영까지 혼자 했습니다.

이 문서는 프론트엔드에서 내린 결정들 위주로 정리했습니다.

무엇을 만들었나

메인 페이지 — 검색바, NPC 캐러셀, 시장 통계, 인기 아이템

• 검색 — 2,200종 자동완성. 초성 검색 지원
• 아이템 상세 — 최근 체결가·거래량·매물 수 + 매물 테이블(가상화) + 시세 차트
• 도감 — 장비 2,800종 / 몬스터 / 맵. 레벨별·직업별 탐색
• 듀얼 테마 — 라이트(크림) / 다크, OS 자동 감지

검색창 타이핑 → 자동완성

프론트에서 내린 결정들

1. 페이지마다 렌더링 전략을 다르게 가져갔습니다

처음엔 전부 SSR로 통일했는데, 아이템 상세 HTML이 1.88MB까지 부풀었습니다. 매물 수천 행을 서버에서 직렬화하고 있었거든요.

그런데 그 테이블은 가상화라 실제 DOM엔 46행만 그려집니다. 봇에게도 유저에게도 안 보이는 데이터를 1.4MB어치 실어 나르고 있었던 거죠.

페이지 성격별로 나눴습니다.

• 홈 — 정적 셸 + 라이브 섹션만 클라이언트에서 (진짜 ISR-HIT)
• 도감 목록 — 정적 셸 + 데이터는 서버 컴포넌트가 런타임에 받아 prop으로 (클라 fetch 0)
• 아이템 상세 — 히어로·요약은 캐시된 서버 렌더(봇 가시), 매물 테이블은 CSR 아일랜드

결과: 아이템 상세 HTML 1.88MB → 465KB. 그리고 홈·허브는 CDN 캐시가 실제로 HIT하게 됐습니다.