GeoDirectory

커스텀 지도 마커 만드는 방법 (완벽 가이드)

Paolo

디렉토리 사이트, Leaflet 지도, 또는 Mapbox 대시보드에 커스텀 지도 마커를 추가해 보신 적이 있다면 이미 그 문제를 아실 겁니다.

기본 마커는 너무 평범해 보입니다.

디렉토리 사이트, Leaflet 지도, 또는 Mapbox 대시보드에 커스텀 지도 마커를 추가해 보신 적이 있다면 그 반복되는 상황을 아실 겁니다.

기본 마커는 평범해 보입니다. 기존의 무료 도구들은 대개 하나의 아이콘 라이브러리(주로 Font Awesome)만 지원하고 PNG만 출력합니다.

Lucide 아이콘을 사용하거나, 브랜드 색상에 정확히 맞추거나, CSS로 색상을 바꿀 수 있는 깔끔한 SVG로 출력해야 하는 순간, 다시 Illustrator로 돌아가거나 SVG 패스를 CodePen에 붙여넣는 신세가 됩니다..

저희는 GeoDirectory 를 12년 이상 개발해 왔으며, 커스텀 지도 마커 관련 문의는 매주 빠짐없이 들어옵니다.

그래서 저희가 있었으면 했던 바로 그 도구를 직접 만들었습니다: MapMarker Studio.

무료이고, 브라우저 기반이며, 회원가입이 필요 없고, 40,000개 이상의 아이콘을 포함하며, 픽셀 퍼펙트 지도 마커를 SVG 또는 PNG로 다운로드할 수 있고, 모든 주요 지도 플랫폼에 바로 붙여넣을 수 있는 코드를 출력합니다.

이 글은 커스텀 지도 마커 만들기에 관한 완벽 가이드입니다.

커스텀 마커란 무엇인지, 기본 마커의 한계, 좋은 마커를 디자인하는 방법, 그리고 지도에 실제로 적용하는 방법을 알아보세요.

커스텀 지도 마커란 무엇인가요?

지도 마커는 지도 위에 특정 위치를 표시하는 시각적 지표입니다.

모든 지도 플랫폼에는 기본 마커가 제공됩니다.

Google Maps는 빨간 물방울 모양, Leaflet은 파란 핀, Mapbox는 원형을 기본으로 사용합니다.

기능은 하지만, 인상에 남지 않습니다.

지도 위에 두 가지 이상의 장소 유형이 있다면(예: 레스토랑 vs. 호텔, 영업 중 vs. 마감, 무료 vs. 유료), 기본 마커로는 충족할 수 없는 시각적 구분이 필요합니다.

커스텀 지도 마커란 직접 디자인하거나 커스터마이징한 모든 마커를 말합니다.

다른 모양, 다른 색상, 내부 아이콘, 라벨, 그림자 등 사용자가 지도를 더 빠르게 파악할 수 있도록 돕는 모든 요소가 해당됩니다.

알아두면 유용한 세 가지 카테고리가 있습니다.

이미지 기반 마커 는 특정 좌표에 지도 위에 올려놓는 PNG 또는 SVG 파일입니다.

간단하고 범용적이며 모든 곳에서 지원됩니다. 단점은 SVG를 사용하지 않으면 PNG가 레티나 디스플레이에서 선명하게 확대되지 않으며, 색상을 변경하려면 파일을 다시 내보내야 한다는 점입니다.

심볼 또는 아이콘 마커 는 지도 라이브러리 자체가 코드로 스타일링하여 그리는 벡터 도형입니다.

어떤 줌 레벨에서도 선명하고, 즉석에서 색상 변경이 쉽습니다. Mapbox GL 및 Leaflet(플러그인 사용) 같은 라이브러리에 기본 내장되어 있습니다.

HTML 마커 는 전체 HTML 요소를 마커로 사용합니다. 클러스터, 정보 배지, 애니메이션 핀에 유용합니다.

유연성은 높지만, 대규모 렌더링 시 비용이 더 많이 듭니다.

디렉토리 및 대시보드 사용 사례의 90%에는 SVG 이미지 마커가 최선의 선택입니다. 선명하고, 가볍고, 색상 교체가 쉬우며, 모든 플랫폼에서 작동합니다.

기본 마커의 한계

사람들이 커스텀 마커를 필요로 하게 되는 세 가지 이유.

하나의 지도에 여러 카테고리 표시. 지도에 식당, 호텔, 주유소를 함께 표시한다면 시각적으로 구분되는 세 가지 마커가 필요합니다. 같은 모양에 다른 아이콘을 사용하거나, 같은 아이콘에 다른 색상을 적용하는 방식이죠. 기본 마커는 하나만 제공합니다.

브랜드 일관성. 중립적인 회색 톤과 단일 강조 색상으로 구성된 SaaS 대시보드에 Google의 빨간 핀이 튀어나와 있으면 어울리지 않습니다. 마커도 UI의 일부입니다.

정보 밀도. 다음을 사용하지 않는 한 Marker Cluster extension을 사용하지 않는다면, 마커가 200개인 지도는 8개인 지도보다 더 단순하고 작은 마커가 필요합니다. 기본 마커는 '적당한 밀도'를 기준으로 크기가 정해져 있어, 양쪽 극단에서 모두 어색해 보입니다.

좋은 지도 마커의 조건

WordPress 사이트용 지도를 수년간 제작하면서 몇 가지 원칙을 배웠습니다. 놀라운 내용은 없습니다. 하지만 기존 도구들은 대부분 이를 무시하고 있습니다.

작은 크기에서도 알아볼 수 있어야 합니다. 대부분의 마커는 24~32픽셀로 표시됩니다. 그 크기에서 아이콘을 알아볼 수 없다면 마커로서 실패한 것입니다. 눈을 가늘게 뜨고 테스트해 보세요.

지도 배경과의 높은 대비. 밝은 지도 타일 위에 밝은 마커는 보이지 않습니다. 채우기 색상과 대비되는 테두리를 선택하여 위성, 도로, 다크 테마 모두에서 마커가 잘 보이도록 하세요.

명확한 실루엣 형태. 물방울 모양 핀이 오래도록 사랑받는 데는 이유가 있습니다. 위치를 정확히 가리키는 뚜렷한 '끝점'이 있기 때문입니다. 원, 사각형, 육각형도 잘 작동하지만, 명확한 기준점이 없는 마커는 사용자가 지도의 어느 지점을 가리키는지 잘못 읽을 수 있습니다.

아이콘은 마커 옆이 아닌 마커 안에. 아이콘이 외부에 있는 마커(레이블 스타일)는 지도를 복잡하게 만듭니다. 의미는 실루엣 안에 담으세요.

최대 세 가지 색상. 마커, 아이콘, 강조색 하나. 그 이상은 작은 크기에서 마커가 복잡해 보입니다.

95%의 사용 사례를 커버하는 8가지 마커 모양

실제 GeoDirectory 지도에서 수십 가지 마커 실루엣을 테스트했습니다. 이 여덟 가지가 거의 모든 상황을 처리합니다.

  1. 핀 (클래식 물방울 모양). 상징적인 Google Maps 핀. 최고의 기본 선택입니다.
  2. 원형. 미니멀하고 현대적입니다. 밀도가 높은 지도에 적합합니다.
  3. 모서리가 둥근 사각형. Material Design 느낌. 앱 스타일 UI에 잘 어울립니다.
  4. 사각형. 날카롭고 기술적입니다. 건축 또는 데이터 대시보드에 적합합니다.
  5. 깃발. 목적지와 결승선 분위기. 이벤트 및 시작/종료 지점에 적합합니다.
  6. 방패. 안전, 보안, 공식적인 느낌. 긴급 서비스 또는 인증된 리스팅에 적합합니다.
  7. 육각형. 기술 및 데이터 시각화에서 트렌디한 모양. 현대적인 대시보드에 적합합니다.
  8. 말풍선. 리뷰 및 채팅 같은 맥락. 추천사 또는 댓글 마커에 적합합니다.

MapMarker Studio에는 시작점으로 사용할 수 있는 여덟 가지가 모두 포함되어 있습니다.

올바른 아이콘 선택하기

마커 안의 아이콘이 의미를 전달합니다. 잘못된 아이콘을 선택하면 아무리 아름답게 디자인된 마커라도 실패합니다. 몇 가지 지침을 소개합니다.

맵 전체에 하나의 아이콘 라이브러리를 사용하세요. Font Awesome, Lucide, 커스텀 SVG를 혼합하면 시각적 혼란이 생깁니다. 하나의 라이브러리를 선택하고 일관성을 유지하세요.

아이콘 스타일을 마커 스타일에 맞추세요. 외곽선 마커에는 외곽선 아이콘, 채워진 마커에는 채워진 아이콘을 사용하세요. 어떤 라이브러리를 선택하느냐보다 스타일 일관성이 더 중요합니다.

얇은 선의 아이콘은 피하세요. 1px 획은 마커 크기에서 잘 보이지 않습니다. 1.5px 이상의 굵기를 가진 아이콘이나 다양한 굵기를 제공하는 라이브러리(이 경우 Phosphor가 탁월합니다)를 선택하세요.

MapMarker Studio에는 최고의 아이콘 라이브러리 14개가 번들로 제공됩니다: Lucide, Phosphor, Tabler, Font Awesome, Heroicons, Material Symbols, Iconoir, Remix, Boxicons, Bootstrap Icons, Mage, Octicons, Radix, 그리고 Simple Icons(Airbnb, Starbucks, TripAdvisor 등의 브랜드 로고용).

총 40,000개 이상의 아이콘. 모두 상업적 사용이 무료입니다.

맵에 커스텀 마커를 추가하는 방법

정확한 코드는 플랫폼에 따라 다릅니다. 가장 일반적인 플랫폼에서의 작동 방식을 소개합니다. 사람들이 자주 막히는 부분도 포함해서 설명합니다.

Leaflet

const customIcon = L.icon({
  iconUrl: 'https://your-cdn.com/marker.svg',
  iconSize: [32, 40],
  iconAnchor: [16, 40],   // tip of the marker
  popupAnchor: [0, -40]
});

L.marker([40.7128, -74.0060], { icon: customIcon }).addTo(map);

주의할 점: 

iconAnchor
은 아이콘의 좌측 상단에서 맵에 고정되어야 할 지점까지의 픽셀 오프셋입니다. 물방울 모양 핀의 경우 이 지점은 하단 중앙(끝부분)입니다. 이 값이 잘못되면 마커가 엉뚱한 위치를 가리키게 됩니다.

Mapbox GL JS

const el = document.createElement('div');
el.style.backgroundImage = 'url(https://your-cdn.com/marker.svg)';
el.style.width = '32px';
el.style.height = '40px';
el.style.backgroundSize = 'contain';

new mapboxgl.Marker(el)
  .setLngLat([-74.0060, 40.7128])
  .addTo(map);

주의할 점: Mapbox는 

[lng, lat]
순서를 사용하는 반면, Leaflet은 
[lat, lng]
순서를 사용합니다. 개발자들이 이를 자주 혼동합니다.

Google Maps

new google.maps.Marker({
  position: { lat: 40.7128, lng: -74.0060 },
  map: map,
  icon: {
    url: 'https://your-cdn.com/marker.svg',
    scaledSize: new google.maps.Size(32, 40),
    anchor: new google.maps.Point(16, 40)
  }
});

주의할 점: Google Maps는 아이콘 URL을 적극적으로 캐싱합니다. 동일한 SVG URL에 대한 변경 사항을 테스트 중이라면 

?v=2
캐시 버스터를 추가하세요.

GeoDirectory

GeoDirectory 사용자의 경우, 커스텀 마커는 카테고리 → 카테고리 편집 → 기본 카테고리 아이콘에 추가합니다. SVG 또는 PNG를 업로드하면 GeoDirectory가 해당 카테고리의 모든 리스팅에 자동으로 적용합니다.

Image URL: https://your-cdn.com/restaurant-marker.svg
Recommended size: 36×46 px

MapMarker Studio는 올바른 크기와 앵커 포인트가 설정된 GeoDirectory 호환 SVG 파일을 출력합니다. 파일을 넣기만 하면 끝입니다.

한 번 디자인하고, 어디서나 내보내기

MapMarker Studio를 만든 이유는 바로 위의 반복 작업 때문입니다. Figma에서 마커를 디자인하고, SVG를 내보내고, Leaflet 설정을 기억에 의존해 작성하다가 (처음엔 iconAnchor를 틀리고), 테스트하고, 수정하고, 배포합니다. 그리고 지도의 모든 카테고리마다 이 과정을 반복하죠.

이 도구는 그 반복 과정을 네 단계로 압축합니다.

  1. 모양을 선택하세요 (8가지 옵션).
  2. 아이콘을 선택하세요 (14개 라이브러리에서 40,000개 이상).
  3. 색상을 선택하세요.
  4. Leaflet, Mapbox, Google Maps용 바로 붙여넣기 가능한 코드를 복사하세요. 또는 대부분의 WordPress 매핑 및 디렉토리 플러그인용으로 SVG/PNG를 직접 다운로드하세요.

모든 기능이 브라우저에서 실행됩니다. 회원가입 불필요. 서버 업로드 불필요. 무료입니다.

MapMarker Studio 사용해보기 →

파일 형식에 대한 참고 사항

이 가이드에서 한 가지만 기억하세요: SVG를 사용하세요. PNG는 플랫폼이 SVG를 실제로 지원하지 않는 경우 대안으로 허용되지만, 2026년에는 그런 경우가 드뭅니다.

SVG는 모든 줌 레벨에서 선명함을 유지하고, 일반적인 마커 복잡도에서 파일 크기가 더 작으며, CSS 변수를 통한 색상 변경도 지원합니다. PNG는 2× 및 3× 변형을 제공하지 않으면 레티나 화면에서 화질이 저하됩니다.

유일한 예외는 극단적인 규모에서의 성능입니다. 1,000개 이상의 마커를 동시에 표시하는 지도는 PNG를 사용할 때 렌더링이 약간 더 빠를 수 있습니다. 그 임계값 이하에서는 SVG가 올바른 선택입니다.

마무리하며

커스텀 지도 마커는 10분이면 끝날 것 같아 보이지만 결국 두 시간이 걸리는 작업 중 하나입니다. 대부분의 번거로움은 툴링에 있습니다.

기존의 모든 솔루션은 너무 제한적이거나, 너무 비싸거나, 너무 범용적입니다.

저희는 GeoDirectory 설치 작업을 수십 번 진행하면서 이 벽에 부딪혔기 때문에 MapMarker Studio를 만들었습니다.

무료이고, 앞으로도 무료이며, 저희가 생각할 수 있는 모든 지도 플랫폼에서 작동합니다.

지원하지 않는 사용 사례가 있다면 알려주세요. 여러분의 피드백이 툴을 더 발전시킵니다.

MapMarker Studio 열기 →