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

서비스 소개

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

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

배포 과정

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

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

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

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

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

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

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

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