Project

  • commandplusK
  • /
  • CtrlplusK
notion image

CASS COOL

카스 쿨 이벤트 소개 페이지를 프론트 엔드로서 구축하였습니다.

페이지 퍼블, api 연동 및 배포 체계 관리

 
 

담당 업무

 

기능

카스 쿨 네이버 지도 map Api 연동

마커 클러스터(축소시 마커 그룹화)기능 추가

CSR 네이버 및 구글 SEO 향상시키기

 

퍼블

뮤직 및 이벤트 소개 페이지 퍼블

 

배포

스테이징, PROD 운영 배포

 

TOOLS

리액트, Vite, SCSS, framer-motion

 

문재해결 및 경험

notion image

이 프로젝트에서 제가 직면한 주요 문제는 지도에 약 800개의 마커를 효과적으로 렌더링하는 것이었습니다. 특히 이 마커들이 특정 지역에 집중되어 있어, 사용자 경험을 저하시킬 정도로 지도 상에서 버벅거림이 발생했습니다.

프론트엔드 개발자로서 이 렌더링 성능 문제를 해결하고자 했고, 관련 자료를 찾아보던 중 ‘마커 클러스터링(Marker Clustering)’ 이라는 개념을 알게 되었습니다. 이 기법을 통해 다수의 마커를 그룹화하여 지도 성능을 개선할 수 있다는 점이 인상 깊었고, 실제로 적용해 보면서 사용자 경험을 크게 향상시킬 수 있었습니다

지도 위에 많은 마커가 표시될 때 마커를 그룹화하여 나타냅니다.

이 기술을 프로젝트에 적용하는 것을 팀장님과 담당 기획자에게 제안하였습니다. 마커를 그룹화하는 것은 렌더링 최적화만이 아니라 시각적인 단순화도 가져다 주기 때문에 사용자 경험에 큰 도움이 되기에 좋은 제안으로 받아들여졌습니다.

제안이 받아들여졌으니 구현에 들어가기로 했습니다.

네이버 맵 api에서는 ’마커 클러스터링‘을 제공하지 않습니다. 그래서 Naver Map 공식 깃허브에서 MarkerClustering.js 파일을 추가로 다운로드 받아서 사용해야 합니다. 아래는 다운로드 받은 js에서 MarkerClustering 클래스의 새로운 인스턴스를 markerClustering이라는 변수에 할당하여 사용하고 있습니다.


const markerClustering = new window.MarkerClustering({
	minClusterSize: 2,
	// 클러스터 마커로 표현할 최대 줌 레벨, 더 높아지면 클러스터를 구성하고 있는 마커를 노출합니다.
  maxZoom: 16,
  map: map,
  markers: markers,
  disableClickZoom: false,
  gridSize: 40,
  icons: [htmlMarker1],
  indexGenerator: [10, 100, 200, 500],
  stylingFunction: (clusterMarker, count) => {
     clusterMarker.getElement().querySelector('span').textContent =
     count;
  },
});

많은 양의 마커들이 그룹화가 되어 숫자로 표시 되니 지도의 버벅거림이 사라지고 사용자들에게 더 좋은 경험을 제공할 수 있었습니다.

이 경험을 통해 문제를 발견하고 적절한 기술을 찾아내어 주도적으로 해결해보는 능력을 발휘할 수 있어서 성취감을 느낄 수 있었습니다.

notion image
notion image