[ 공모전 ] 지도 페이지 : 사용자 행동을 가정해보자

최문길·2024년 6월 22일

공모전

목록 보기

16/46

내가 작성한 카카오맵 API설치

저번 시간에 쌈뽕하게 kakaoMap을 설치하고 주입하는 것을 알아보았다.
만족하면 한번 더 작성해 보는것이 예의!!😍

// @src/hooks/client/map/kakao-map
const useKakaoLoader = () => {
  const [loading, error] = useKakaoLoaderOrigin({
    appkey: process.env.NEXT_PUBLIC_KAKAO_MAP_API_KEY as string,
    libraries: ['clusterer', 'drawing', 'services'],
  });
	
  return [loading, error]; // useKakaoLoader에서 배열로 loading과 error를 반환한다. 
};

// @src/components/map/map-body/kakao-map
const KakaoMap = () => {
const [loading,error ] = useKakaoLoader()
 if (loading || error) return <Skeleton type="map" />;

 return (    
      <Map>
       // marker 아니면 overlay 들어갈곳~~
      </Map>
	)
  }

KakaoMap을 내가 어떻게 사용했을까??

참고로 나는 배달장사를 하였는데, 이때 카카오맵을 사용했었고, 여행, 위치 찾기등을 할 때 네이버 보다 카카오맵을 선호하고 지금도 사용하고 있다.

서울시 공공 API들을 사용하기 전에 내가 어떻게 KakaoMap을 사용했을까부터
먼저 알아야 할 것 같았다.
이유인 즉슨, 실제 사람들이 이용하는 것과 같이 카카오맵을 제어해 줘야 하기 때문이다.
그렇지 않다면, 사람들에게 혼란스러원 경험을 제공할 것이 분명하다.

카카오맵에 들어가면, 현재 내 위치가 표시되며, 아무것도 나와있지 않다.
장소명을 검색하면 그 장소로 맵이 움직이고, 지도에 표시된다.
특정 키워드를 입력하면, 현재 보여지는 지도상의 위치를 기점으로 주변 키워드에 적합한 장소들이 표시된다.
cf) 이전 장소들은 지도상에서 제거된다.
특정 키워드 + 지도맵을 움직이면, 지도의 중심좌표가 변하면서 중심좌표를 기점으로 특정 장소들이 지도에 표시된다.
cf) 이전 장소들은 지도상에서 제거된다.

위의 리스트를 토대로 카카오맵을 제어하고, 동작시켜보자
여기에 추가로 내가 사용하는 API와 잘 어우러지게 자연스러운 서비스 경험을 해야 하는 것도 있다.

서비스 사용자의 행동을 가정해보자

이번 프로젝트에서는 사람들에게 서울시에 있는 동물병원&동물약국/산책로의 위치"들"을 알려주는 서비스 페이지이다.

사용자의 행동과, 원하는 것을 가정해보자

사용자가 지도 페이지에서 어떻게 생각하고, 행동하는지를 가정해보았다.

사용자는 자신의 "현재 위치"를 기준으로 근처에 원하는 장소들을 탐색할 것이다.

사용자는 각 "지역구"마다 알고 싶을 것이다.

사용자는 "상호명"을 기반으로 알고 싶을 것이다.

사용자는 "키워드"를 기반으로 알고 싶을 것이다.

내가 설계할 지도페이지를 염두하고 사용자의 행동을 가정하자

나는 동물병원&동물약국과 산책로를 탭 형식으로 두어 카카오맵에 데이터를 시각화 할 것이다. 그러므로 탭과 관련지어 사용자의 UX를 상정해보자

2개의 탭:동물병원&동물약국과 산책로이 존재 할 때 사용자의 UX를 생각해보자

처음 지도페이지로 이동했을 시

기본적으로 동물탭이 default로 설정되어있기,

현재 자신의 위치만이 지도상에 표시 되어있기,
cf) 예외로 현재위치 등록 확인을 누르지 않았을 시 서울 중앙으로 표기

동물관련 탭의 경우

동물관련 탭을 클릭했을 때
- 산책로 관련 데이터가 표시되지 않고 동물관련만 표시된다.

자신이 보는 지도의 중심을 기점으로 표시된다.

드래그를 했을 때는 이전 데이터는 삭제되고 드래그된 중심좌표를 기점으로 데이터 표시된다.

동물관련 키워드를 검색했을 시, 동물병원, 또는 동물약국 데이터가 현재 좌표 중심으로부터 생성,시각화

특정 동물병원,약국장소를 검색했을 시, 하나의 데이터가 표시된다.

산책로 탭의 경우

산책로 관련 탭을 클릭했을 때
- 동물관련 데이터 표시되지 않고 산책로만 표시된다.
- 자신이 보는 지도의 중심을 기점으로 표시된다.

드래그를 했을 때는 이전 데이터는 삭제되고 드래그된 중심좌표를 기점으로 데이터 표시된다.

산책관련 키워드를 검색했을 시, 산책데이터가 표시된다.

특정 장소를 검색했을 시 , 하나의 데이터가 표시된다.