티스토리 뷰

API

Google Maps API 구글 지도 API 연동 - 5. 커스터마이징

열코 2026. 5. 14. 17:31
반응형

2026.05.12 - [API] - Google Maps API 구글 지도 API 연동 - 4. 클러스터링

Step 4까지 마친 여러분은 이제 지도 위에 수만 개의 데이터를 뿌리고 검색하는 기능을 완벽히 구현할 수 있게 되었습니다. 하지만 지도의 배경이 되는 '기본 지도'가 서비스의 디자인 톤앤매너와 어울리지 않는다면 어떨까요?

과거에는 수천 줄의 JSON 코드를 자바스크립트에 직접 입력해야 했지만, 이제는 클라우드 기반 지도 스타일링(Cloud-based Maps Styling)을 통해 클릭 몇 번으로 지도의 모든 요소를 제어할 수 있습니다. 이번 포스팅에서는 지도를 서비스의 일부처럼 보이게 만드는 최종 마감 기법을 상세히 다룹니다.

 

1. 왜 클라우드 기반 스타일링인가?

기존의 스타일링 방식(Javascript-based JSON)은 코드가 복잡해지고, 디자인을 변경할 때마다 웹사이트를 다시 배포해야 하는 번거로움이 있었습니다. 클라우드 기반 방식은 다음과 같은 압도적인 장점을 제공합니다.

  1. 실시간 업데이트: 구글 클라우드 콘솔에서 스타일을 수정하고 저장하면, 운영 중인 서비스에 즉시 반영됩니다. (코드 수정 및 재배포 불필요)
  2. 시각적 에디터: 코드가 아닌 GUI(그래픽 인터페이스)를 통해 색상을 선택하고 요소의 투명도를 조절할 수 있습니다.
  3. POI 밀도 제어: 지도 위를 어지럽히는 식당, 관공서, 상점 등의 아이콘 노출 빈도를 슬라이더 하나로 조절할 수 있습니다.
  4. 성능 최적화: 스타일 연산이 구글 서버 측에서 처리되어 클라이언트의 부담이 줄어듭니다.

 

2. 사전 준비: Map ID와 Map Style 생성하기

이 기능을 사용하려면 단순히 API 키만 있어서는 안 됩니다. 구글 클라우드 콘솔에서 Map ID를 생성해야 합니다.

 

2.1 지도 스타일(Map Style) 만들기

  1. Google Cloud 콘솔의 Google Maps Platform > 지도 스타일 메뉴로 이동합니다.
  2. [+ 새 지도 스타일] 버튼을 클릭합니다.
  3. 제공되는 템플릿(Silver, Retro, Dark 등) 중 하나를 선택하거나 직접 커스텀을 시작합니다.
  4. [스타일 편집기에서 열기]를 눌러 원하는 대로 디자인한 후 [저장] 및 [게시]를 클릭합니다.

2.2 지도 ID(Map ID) 생성 및 연결

  1. Google Maps Platform > 지도 관리 메뉴로 이동합니다.
  2. [+ 새 지도 ID]를 클릭합니다.
  3. 이름을 입력하고, 유형을 [JavaScript]로 선택한 뒤 [벡터(Vector)] 또는 [래스터(Raster)] 중 하나를 선택합니다. (고급 기능을 위해 벡터 권장)
  4. 생성된 Map ID를 방금 만든 지도 스타일과 연결합니다.

 

3. 실전 구현: 코드에 Map ID 적용하기

이제 발급받은 Map ID를 코드 한 줄에 넣기만 하면 됩니다.

3.1 전체 예제 코드 (HTML/JS)

 
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Google Maps 클라우드 스타일링 실전</title>
    <style>
        body { margin: 0; padding: 0; }
        #map { width: 100%; height: 100vh; }
        .style-control {
            position: absolute; top: 10px; left: 10px; z-index: 10;
            background: white; padding: 15px; border-radius: 8px;
            box-shadow: 0 2px 6px rgba(0,0,0,0.3);
        }
    </style>
</head>
<body>

    <div class="style-control">
        <h4>브랜드 맞춤형 지도</h4>
        <p>클라우드에서 설정한 스타일이<br>즉시 반영됩니다.</p>
    </div>

    <div id="map"></div>

    <!-- API 로드 시 v=beta 또는 최신 버전을 권장합니다. -->
    <script async src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>

    <script>
        function initMap() {
            // Map ID를 여기에 입력하세요.
            // 이 ID에 연결된 스타일이 자동으로 적용됩니다.
            const MAP_ID = "YOUR_MAP_ID_HERE"; 

            const map = new google.maps.Map(document.getElementById("map"), {
                center: { lat: 37.5665, lng: 126.9780 },
                zoom: 14,
                mapId: MAP_ID, // 핵심 파라미터!
                
                // 불필요한 UI 제거로 더 깔끔한 디자인 구현
                disableDefaultUI: true,
                zoomControl: true,
            });

            // 마커 하나 추가 (Advanced Marker)
            new google.maps.marker.AdvancedMarkerElement({
                map: map,
                position: { lat: 37.5665, lng: 126.9780 },
                title: "서울 시청"
            });
        }
    </script>
</body>
</html>
반응형

4. 상세 커스터마이징 가이드: 무엇을 바꿀 수 있는가?

스타일 편집기에서 조절 가능한 주요 요소들은 다음과 같습니다.

4.1 지형 및 배경 (Landscapes)

  • 색상: 산, 공원, 모래사장 등의 색상을 서비스 테마색으로 변경합니다.
  • 가시성: 특정 지형을 아예 숨겨서 지도를 단순하게 만들 수 있습니다.

4.2 주요 지점 (Points of Interest - POI)

  • 밀도(Density): "식당은 많이 보여주고, 학교는 숨기고 싶다"는 식의 세밀한 조정이 가능합니다.
  • 아이콘 색상: 기본 구글 아이콘의 색상을 브랜드 컬러에 맞춰 일괄 변경할 수 있습니다.

4.3 도로망 (Roads)

  • 간소화: 고속도로, 국도, 골목길의 굵기와 색상을 다르게 지정하여 정보의 우선순위를 정합니다.
  • 텍스트: 도로명의 크기나 폰트 스타일을 조절합니다.

4.4 수계 (Water)

  • 강, 바다의 색상을 조절합니다. 최근 유행하는 다크 모드 지도를 만들 때는 물의 색을 짙은 회색이나 검은색으로 설정하는 것이 핵심입니다.

 

5. 전략적 활용: 다크 모드와 브랜드 경험

5.1 시스템 테마에 반응하는 지도

사용자의 기기 설정에 따라 다크 모드 지도를 보여주고 싶다면, 두 개의 Map ID를 생성(라이트 버전, 다크 버전)한 뒤 자바스크립트에서 조건문으로 mapId를 교체하면 됩니다.

5.2 정보의 집중 (De-cluttering)

배달 서비스나 물류 서비스라면 '도로'와 '건물'을 강조하고 '관광지' 정보는 과감히 숨겨야 합니다. 클라우드 스타일링은 이 과정을 코딩 없이 해결해 줍니다.

 

6. 에러 핸들링 및 주의사항

  • 스타일이 반영되지 않음: 수정 후 반드시 [게시(Publish)] 버튼을 눌렀는지 확인하세요. '초안' 상태에서는 개발자 환경에서도 보이지 않을 수 있습니다.
  • Map ID 유효성: API 키 제한 사항에 Maps JavaScript API가 포함되어 있는지, 그리고 Map ID가 올바른 유형(JS)으로 생성되었는지 확인하세요.
  • 벡터 vs 래스터: 틸트(기울이기)나 회전 기능을 쓰려면 벡터(Vector) 맵을 선택해야 합니다.

 

#구글지도API #지도스타일링 #CloudBasedMapsStyling #MapID #구글맵커스텀 #다크모드지도 #웹디자인팁 #프론트엔드개발 #GoogleMapsSDK #지도UIUX #벡터맵 #위치기반서비스완성

반응형
저작자표시 (새창열림)

'API' 카테고리의 다른 글

Google Maps API 구글 지도 API 연동 - 4. 클러스터링  (0) 2026.05.14
Google Maps API 구글 지도 API 연동 - 3. 장소  (0) 2026.05.14
Google Maps API 구글 지도 API 연동 - 2. 길찾기  (0) 2026.05.14
Google Maps API 구글 지도 API 연동 - 1. 시작하기  (0) 2026.05.14
카카오 지도 연동하기  (0) 2026.05.10
카카오 로그인 연동하기  (0) 2026.05.10
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2026/05   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
글 보관함
반응형