개발

크아 유저 조회 사이트 회고

윤해용 2025. 5. 7. 14:55

 

 

프로젝트 소개

넥슨에서 크레이지 아케이드 공식 API가 출시 되었다. API 없이 자세한 유저 정보와 아이템 정보를 조회는 게임에서 직접 만나는게 아니면 조회하기 힘들다.

아이템 같은 경우에는 공식 API에서 이름만 제공하고 있다. 아이템 이름만 페이지에서 보여주기에는 부족해 보일 것 같아서 이미지를 공식홈페이지에서 다운로드하여 보여주기로 기획했다.

 

개발기간

- 2025‑04‑13 ~ 2025‑05‑07 (약 3주)

 

주요 기능

- 유저 검색

Nexon Open API 호출하여 실시간 캐릭터 정보 표시

 

- 장착 아이템 정보 표시

 

 

기술 스택 선택과 이유

Next.js 15 앱 라우터

클라이언트와 서버 컴포넌트를 나누어 초기 페이지 로딩 속도를 빠르게 하였다.

Cloudflare R2

웹사이트에서 키워드 검색이 가능하여 편리하고 공식문서가 잘 되어있어서 선택하였다. 사용자 지정 도메인을 사용했을 경우에 CDN 기능을 사용하여 유저에게 이미지를 빠르게 보여줄 수 있다.

 

 

 

성능 최적화 전략

Vercel 기본 설정 문제

배포 환경에서만 웹사이트 로딩 속도가 조금 느려

vercel 네트워크 리전을 확인해보니 미국으로 설정되어 있어서 한국으로 바꾸었다.

 

Metadata SEO 

메타데이터를 통해 각 페이지별 SEO 최적화를 구현하였다. 현재 사이트 이름을 검색하면 구글 최상단에 사이트와 설명을 볼 수 있다.

export const metadata: Metadata = {
  metadataBase: new URL("https://cahub.xyz"),
  title: "크아허브: 크아 유저 정보 조회",
  description: "크레이지 아케이드 유저 정보 조회 서비스입니다. 레벨, 경험치, 장착 아이템 등을 한눈에 조회합니다.",
  openGraph: {
    images: "/images/social-main.png",
  },
};

 

이미지 최적화


- Cloudflare R2를 통한 이미지 전송 가속화
CDN 기능으로 캐싱하여 유저에게 이미지를 빠르게 보여주었다.

- Next.js Image 컴포넌트의 효과적인 사용

반응형 디자인 size 조절로 레이아웃 시프트 방지 및 브라우저 렌더링을 하였고, 사용자 경험을 위한 blur 플레이스홀더 적용하였다.
그리고 이미지 로딩 실패 시 기본 이미지를 보여주어 에러 처리를 했다.

 

 

에러 처리 및 모니터링

 

- Nexon Analytics와 Google Analytics 이용하여 유저 모니터링
Nexon Analytics으로 페이지 뷰, 기기와 해상도, 브라우저 환경, 경로를 파악할 수 있다. Google Analytics으로 실시간 개요를 모니터링 하였다.

 

5월 7일 현재 지표 - Nexon Analytics
재방문자 수 하루 평균 50명 - Google Analytics

 

 

- Sentry를 통한 실시간 에러 모니터링
아이템 이미지가 공식 홈페이지에 모두 존재하지 않는다. 공식 홈페이지에서 최신 아이템이 출시해도 아이템 이미지는 업데이트가 많이 느린편이다. 공식 API도 불안정해서 아이템 이름 뒤에 공백이 추가로 들어가거나, 따옴표가 붙어서 데이터를 주는 이슈가 있었다. 이런 이슈들을 에러 모니터링을 할 수 있는 Sentry를 코드에 작성하여 해결해 나갔다.

 

 

이미지 찾을 수 없는 에러

아이템 이름만 있고 아이템 이미지가 없는 경우, 경고가 떠서 달팽이 이미지를 Cloudflare R2에 추가 시켜주었다.

 

 

타입 에러

 

API에서 레벨 1은 경험치 '0'을 주는게 아니라 경험치 'null'을 주고 있어서 계산 코드에서 에러가 생기고 있었다. 경험치가 null일 경우 0으로 바꾸어서 해결하였다.

 

 

마무리

코파일럿 활용

작년에 코파일럿 1년치를 결제했는데 자동완성 기능만 사용하고 있었다. 코파일럿도 챗지피티처럼 모델을 골라 사용할 수 있었다. 기본 모델인 GPT 4.0을 사용하고 있었는데, Claude 3.7 Sonnet 모델이 코드를 잘 작성해주고 있어서 변경하여 사용하고 있다. 

 

 

 

프로젝트를 통해서 다양한 기능들과 활용법에 대해 알게 되었고 한 단계 발전하는게 느껴진다.

 

실제 사용자에게 서비스가 되고 있어서 더 신경쓰면서 만들게 된다. 배포할 때도 유저 입장에서 한번 더 생각하게 되었다. 커뮤니티를 통해 홍보하였으나 사용자가 에러나 피드백을 적극적으로 주는 편은 아니였다. 여기서 Sentry가 사용자의 에러 부분을 잡아주었기 때문에 프로젝트에 큰 도움이 되었다.

 

사용자들이 많이 사용해주고 있기 때문에 프로젝트는 계속해서 에러를 수정하고 추가 기능을 개발할 생각이다.