thumbnail

대한민국 철봉 지도


개발 인원
2명 (FE: 1, BE: 1)
담당 역할
프론트엔드
사용 기술
Next.jsTypescriptZustandTanStackQueryTailwindCSSStorybook
프로젝트 설명

사용자가 지도에서 원하는 위치를 검색하여 주변의 철봉 위치를 확인할 수 있고, 발견한 철봉을 지도에 등록하는 기능을 제공합니다. 사용자는 등록된 철봉의 상세 정보, 사진, 거리뷰를 조회할 수 있으며, 즐겨찾기 기능을 통해 특정 위치를 저장하고 관리할 수 있습니다. 또한, 각 철봉 위치에 대한 댓글을 작성, 위치 공유를 통해 다른 사용자와 정보를 공유할 수 있습니다.

핵심 기능 및 성과

클러스터러 최적화

  • 여러 위치에 대한 클러스터링 기능을 Grid-Based 클러스터링 알고리즘을 사용해 직접 구현하여 최적화

SEO 최적화

  • Next.js(SSR)로 변경 및 메타데이터 최적화 수행
  • 구글 평균 게재순위 6등애서 1등으로 상승
  • 총 클릭수 80% 상승
  • 총 노출 수 100% 상승

초기 로딩 시간 단축

  • React의 lazy함수를 사용한 코드 스플리팅
  • SSR 적용
  • 초기 로딩시간 6343ms에서 2330ms으로 약 60% 개선

모바일 사용성 확장

  • PWA 도입
  • React Native Expo 기반 WebView 도입

이미지 용량 감소를 위한 접근

  • JavaScript의 Canvas API를 활용한 이미지 압축 구현

라이브러리 개발 경험

  • 이미지 압축 라이브러리인 img-toolkit 개발·배포
  • UI 라이브러리인 radici-ui 개발·배포

회고

프로젝트를 실제로 배포하고 운영하면서, 사용자로부터 받은 피드백을 통해 제공하는 서비스의 사용자 경험(UX)에 많은 부분을 개선해야 할 필요성을 실감했습니다. 사용자들은 종종 저에게 예상치 못한 사소한 부분에서조차 불편함을 느끼고 있었습니다. 이는 저의 개발 과정이 주로 제 자신의 관점에만 초점을 맞추었음을 반영합니다. 이에 따라 사용자 경험을 세심하게 고려하고 개선하기 위한 노력을 기울였습니다. 비록 아직 부족한 부분이 많지만, 사용자 경험을 지속적으로 공부하고 발전시켜 나가는 프론트엔드 개발자가 되겠다는 각오를 다졌습니다. 또한, 실제 서비스 중인 사이트에서 다양한 오류가 발생하면서, 지속해서 메인 브랜치를 수정하고 다시 배포하는 과정을 반복했습니다. 특히 이미지 업로드, 회원가입 과정에서의 오류가 예상치 못하게 지속해서 발생하였습니다. 저는 이 과정에서 배포 이전에 개발 환경에서 문제점을 발견하고 미리 깨뜨려 보면서 해결하는것의 중요성을 깨닫게 되었습니다. 따라서 저는 테스트 코드의 도입을 결정했고, 배포 전 필수 로직에 대한 검증을 통해 사이트의 안정성을 높이기 시작했습니다. 테스트 코드에 대한 이해와 활용은 아직 초보 단계이지만, 이를 계속해서 학습하고 적용함으로써 사이트를 더욱 견고하게 만들고자 합니다. 이번 프로젝트는 저에게 정말 의미 있는 프로젝트입니다. 사용자는 많지 않지만 개발자로서 어떤 기능을 제공하고, 어떤 노력을 해야 사용자에게 만족감을 주는지, 기존 비슷한 서비스와 비교하여 어떤 부분을 장점으로 가져갈지, 어떤 식으로 코드를 작성하고 프로젝트를 만들어야 검색엔진에서 다른 사이트들보다 우선순위가 높아질지, 이런 고민들은 저를 제가 꿈꾸고 이상적으로 생각하는 개발자로 성장하기 위한 작지만, 매우 의미 있는 한걸음이었습니다. 볼수록 개선해야 될 것들이 눈에 보이고, 불편한 점들도 많이 남아있습니다. 저는 계속해서 해당 프로젝트를 조금씩 바꿔 나가려 합니다.

아키텍처

architecture

구현 이미지

대한민국 철봉 지도 screenshot
대한민국 철봉 지도 screenshot
대한민국 철봉 지도 screenshot
대한민국 철봉 지도 screenshot
대한민국 철봉 지도 screenshot
대한민국 철봉 지도 screenshot