메이플 헬퍼 배포 회고

etc

작성일 : 2024.12.17

안녕하세요 저는 이번에 메이플 헬퍼라는 웹 서비스를 배포하게 되었습니다. 이번 포스트에서는 프로젝트 진행 과정과 배포 과정 그리고 구현했던 주요 기능들을 되짚어보며 느낀 점과 배운 점들을 공유하고자 합니다.

서비스 소개

사용 언어 및 개발 환경 : Vercel Nexon Open API Next.js React TypeScript Axios Tailwind CSS

메이플 헬퍼는 메이플스토리 사용자를 위한 편의 기능을 제공하는 웹 서비스로

  • 주간 보스 수익 계산기

  • 해방 퀘스트 일정 계산기

    등의 기능을 포함하고 있습니다.

배포 과정

Vercel을 통한 프론트엔드 배포 : Vercel의 간편한 배포 환경 덕분에 프론트엔드 배포가 매우 수월했습니다. Git 연동과 자동 배포 기능을 적극 활용하여 코드 변경 사항이 실시간으로 반영되는 점이 특히 마음에 들었습니다.

주요 기능 개발

보스 주간 수익 계산기 개발

  • 사용자 경험 향상을 위해 API로 받아온 캐릭터 정보를 전역 상태로 관리하고 재방문 시 편의성을 위해 로컬 스토리지에 저장하고 있습니다.
  • API 키를 입력받을 시 계정의 모든 캐릭터 정보를 가져오게 되는데 특정 조건을 만족하는 캐릭터만 등록 하는 로직을 구현했습니다.
  • 주간 보스로 얻은 수익을 , 또는 억, 천, 만표기로 사용자가 선호하는 포맷팅 방식으로 선택할 수 있습니다.

해방 퀘스트 일정 계산기 개발

  • 사용자가 입력한 날짜를 기준으로 해방 퀘스트의 남을 일수를 계산해줍니다.
  • 남은 일수를 단순 나누기로 계산하면 정확하지 않아 1주씩 더해 필요한 어둠의 기운까지의 일정을 계산 했습니다.

axios 인스턴스 활용

  • API KEY를 숨기기 위해 클라이언트와 Nexon API 사이에 Next.js API 두어 중요 데이터를 은닉할 수 있었습니다.
    • 클라이언트 -> Next.js API -> Nexon API 호출
  • axios의 인터페이스를 활용해 공통 설정을 관리 하고 인터셉터를 이용해 에러 처리 및 데이터 요청을 로깅했습니다.

겪었던 문제

보스 이미지 404 에러

해방 퀘스트 서비스 배포 이후 특정 이미지들이 로드 되지 않았던 이슈가 있었습니다.

Vercel의 오류 메세지를 확인했고 공식문서를 찾아본 결과 무료 서비스의 이미지 최적화 기능 사용이 최대 1000회 라는 점을 알게 되었습니다. 사용자가 등록한 캐릭터 이미지와 같이 동적인 이미지에 대한 최적화 옵션을 제거하여 문제를 해결할 수 있었습니다.

검색엔진 최적화(SEO) & 반응형 디자인

반응형 디자인

  • 서비스 배포 이후 사용자 기기 분석 결과 모바일 사용자의 비중이 50% 가 넘어가는 부분을 확인했고 빠르게 반응형 디자인을 적용해 대응했습니다.

검색엔진 노출도 증가

  • Meta Tag, 구글 서치 콘솔, sitemap.xml 를 활용해 웹 사이트의 SEO를 개선했고 실제 검색 엔진에서의 노출 빈도가 증가하는 효과가 있었습니다.

회고 및 느낀 점

기능들을 개발하면서 점점 필요한 기능들이 등장해 개발 기간이 길어지는 상황이 있었습니다. 서비스에 필요한 스팩에 대해 상세하게 설정할 필요성이 있다는 점을 알게 되었습니다.

게임 속에서 발견한 불편함 기능들을 지속적으로 추가하며 서비스가 성장함에 따라 유지보수와 확장이 용이하도록 탄탄한 코드 구조를 위해 고민하고 있습니다.

서비스 바로가기