로스트아크 유저를 위한 공략 및 정보 사이트를 Next.js 16 + NestJS 11 기반으로 신규 개발했습니다.
일일 최대 3,000명이 방문하고 있으며, 기존 운영되던 로아해듀오 서비스의 깐부 모집 기능을 이전하고
직업 공략, 티어표, 레이드 가이드 등 다양한 콘텐츠를 새롭게 구축했습니다.



홈화면
클래스 분석
클래스 티어
• Next.js App Router 기반 SSR 및 SEO 최적화: sitemap, 메타데이터 동적 생성으로 검색 엔진 노출을 확보했습니다.
• 게임 정보 및 커뮤니티 페이지 개발: 캐릭터 조회, 직업 공략, 티어표, 레이드 가이드, 깐부 모집 게시판 등 서비스 전반의 페이지를 설계 및 구현했습니다.
• 관리자 대시보드를 통한 콘텐츠 승인/관리 기능을 개발했습니다.
• 반응형 UI 및 테마: Tailwind CSS 기반 모바일/데스크톱 대응, 다크/라이트 모드 테마 시스템을 구축했습니다. Zustand를 활용한 클라이언트 상태 관리.
• 로스트아크 공식 API 연동: 캐릭터 정보 조회 시스템을 구축하고, 10분 단위 DB 캐싱으로 API 호출을 최적화했습니다.
• RESTful API 설계: NestJS 기반으로 가이드, 티어표, 패치노트, 모집 게시판 등 10개 이상의 모듈을 설계 및 구현했습니다.
• 보안 및 인증: Firebase 소셜 로그인(Google) + JWT 기반 인증 체계를 구축하고, Rate Limiting을 적용하여 API 남용을 방지했습니다.
• Vercel을 활용하여 프론트엔드를 배포하고, MongoDB를 데이터베이스로 사용하여 서비스 데이터를 관리했습니다.
• 로아해듀오에서 lobal로 전환: 기존 서비스의 깐부 모집 기능을 이전하고 URL 리다이렉션을 처리했습니다.
• 직업 공략, 티어표, 레이드 가이드 등 신규 콘텐츠를 추가 확장했습니다.

MS Clarity 히트맵 분석
• Microsoft Clarity를 도입하여 히트맵, 세션 리플레이, 스크롤 도달률 등 사용자 행동 데이터를 수집·분석했습니다.
• 실제 클릭 패턴과 이탈 지점을 파악해 UI 배치 및 네비게이션 구조를 개선하는 데 활용했습니다.
백엔드를 전담하며 NestJS 모듈 설계, 로스트아크 공식 API 연동, 인증 체계 구축까지 백엔드 전반을 경험할 수 있었습니다.
기존 로아해듀오 서비스에서 기능을 이전하면서 레거시 코드를 새로운 구조에 맞게 재설계하는 과정을 통해 마이그레이션 경험을 쌓았습니다.
실제 사용자가 방문하는 서비스를 운영하며, 개발뿐만 아니라 서비스 안정성과 사용자 경험을 함께 고민하는 시야를 넓힐 수 있었습니다.