Google Maps API를 활용한 프로토타이핑 완전 가이드

이 API 튜토리얼은 고화질 프로토타입에 Google Maps를 매끄럽게 통합하는 경험을 더 쉽게 만들도록 설계되었습니다. ProtoPie의 Connect API 플러그인과 셀프 호스팅 미디어 기능을 활용하면 코딩 없이도 진정성과 상호작용성을 더해 디자인을 향상시킬 수 있습니다.

숙련된 디자이너든 UI/UX를 처음 접하든, 이 튜토리얼은 실제 Google Maps를 프로토타입에 담아낼 수 있도록 꼭 필요한 도구를 제공합니다. ProtoPie에서 고화질 디자인을 한 단계 끌어올리는 이 흥미로운 여정에 함께하세요.

코딩 없이 Google Maps API로 프로토타입 제작하는 방법

아시다시피 Google Maps API는 개발자를 위한 강력한 도구 모음을 제공하며, 애플리케이션과 웹사이트에 지도 및 위치 기반 기능을 매끄럽게 통합할 수 있게 해줍니다.

이러한 API는 지도 작성, 지오코딩, 경로 안내 등 다양한 기능을 다루지만, 주로 개발자를 위해 설계되어 있어 디자이너가 다루기에는 다소 어렵습니다.

혹시 당신이 디자이너라면 걱정하지 마세요! ProtoPie를 사용하면 어떤 코딩도 없이 프로토타입에 지도를 손쉽게 통합할 수 있습니다. 가장 큰 장점은 무엇일까요? 완성된 제품처럼 초기 단계에서 디자인을 테스트하고 검증할 수 있으며, 여기에 실제 세계의 신뢰할 수 있는 데이터까지 더할 수 있다는 점입니다.

비디오

배울 내용

1. 인증 키를 얻는 방법

• 보너스: 예제 프로토타입 받기

1. API에서 정보를 가져오는 방법

2. API 요청을 디버그하는 방법

3. 텍스트 검색을 하는 방법 (Places API 사용)

4. 위치 사진을 표시하는 방법 (Places API 사용)

5. 정적 지도를 표시하는 방법 (Maps Static API 사용)

6. 사용자 지정 지도를 표시하는 방법 (Maps Static API 사용)

1. 인증 키를 얻는 방법

이제 Google Maps API를 사용하기 위한 첫 번째 단계는 계정을 만들고 인증 키를 얻는 것입니다. 바로 시작해 볼게요!

1. Google Maps Platform에 방문한 뒤 "Get Started" 버튼을 클릭해 Google 계정으로 로그인하세요.

Google Maps Platform.

2. 로그인에 성공했다면, 플랫폼의 왼쪽 사이드바에 있는 "Keys & Credentials" 섹션으로 이동하세요.

Keys & Credentials 탭으로 이동하세요.

3. 처음 Google Maps Platform을 사용하는 경우 개인 정보를 입력하라는 안내가 표시됩니다. 시작은 무료이지만, 인증을 위해 결제 정보를 입력해야 할 수도 있습니다. 화면의 안내와 지시에 따라 설정 과정을 완료하세요.

계정 정보를 설정하세요.

4. 설정이 완료되면 API Key가 화면에 표시됩니다. 다음 단계에서 필요하므로 이 키를 메모장에 복사해 두거나 안전한 위치에 저장해 두는 것을 강력히 권장합니다.

"Enable all Google Maps APIs for this project" 옵션을 선택한 뒤, "GO TO GOOGLE MAPS PLATFORM" 버튼을 클릭해 계속 진행하세요.

API 키.

• 설정 중에 키를 잊어버리거나 복사하지 못했다면, 언제든지 "Keys & Credentials" 페이지에서 다시 확인할 수 있습니다.

• 키는 반드시 비공개로 유지해야 한다는 점을 잊지 마세요. 실수로 노출되면 예기치 않은 비용과 문제가 발생할 수 있습니다.

🌟 보너스: 예제 프로토타입 받기

직접 사용해 보고 싶으신가요? 지금이 바로 완벽한 기회입니다!

API 키를 확보했다면 이제 예제 프로젝트를 살펴볼 준비가 모두 끝났습니다. 아래 Pie 파일을 내려받고, 다음 단계에 따라 설정해 보세요.

Pro 사용자와 Enterprise 사용자 모두 다음 단계를 따르면 이 프로토타입을 실행하고 같은 결과를 얻을 수 있습니다:

1. 프로토타입을 로컬에 저장합니다.

2. Google Maps Platform에서 API 키를 신청합니다.

3. 프로토타입 파일에 API 키를 삽입합니다. API 키는 두 곳에 붙여 넣어야 합니다:

• 메인 씬에서 변수 패널을 확인해 "API_KEY"라는 변수를 찾고, 그곳에 키를 붙여 넣습니다.

• "POI Card" 컴포넌트에서도 다시 변수 패널을 확인해 "API_KEY"라는 변수를 찾고, 그곳에 키를 붙여 넣습니다.

4. 프로젝트를 저장합니다.

5. 프로토타입을 ProtoPie Connect로 드래그합니다.

6. "Plugin" 버튼을 클릭해 플러그인 패널을 엽니다. 설정은 다음과 같이 구성하세요:

• 메서드: GET

• URL, Header, Body는 비워 둡니다.

• Message from Pie: TEXT SEARCH REQUEST

• "override" 체크박스를 선택하고 드롭다운 메뉴에서 URL을 선택합니다. 이렇게 하면 메시지와 함께 전달된 값으로 요청 URL을 덮어쓰게 됩니다.

• Message to Pie: TEXT SEARCH RESULT

• 마지막으로 "Activate" 버튼을 클릭해 API 플러그인을 실행하세요.

7. 웹 브라우저에서 프로토타입을 열면, 탐색을 시작할 준비가 모두 끝납니다.

모든 과정이 어떻게 작동하는지 궁금하신가요? 이제 프로토타입에서 Google Maps API를 다루는 과정을 깊이 있게 살펴보는 종합 가이드를 함께 시작해 봅시다!

2. API에서 정보를 가져오는 방법

API 키를 손에 넣었으니, 이제 사용할 API를 잠시 익혀 봅시다. Places API 문서 페이지로 이동하면 이 API에 대한 필요한 모든 정보를 담은 잘 정리된 포괄적인 자료를 확인할 수 있습니다.

이제 첫 번째로 사용할 API인 Text Search부터 살펴보겠습니다. 이름 그대로, 입력한 텍스트 문자열과 일치하는 장소 목록을 제공합니다. 문서가 길고 어렵게 느껴질 수 있지만, 지금은 꼭 필요한 핵심 정보에만 집중하겠습니다.

가장 중요한 요소는 다음 구조를 따르는 요청 URL입니다:

https://maps.googleapis.com/maps/api/place/textsearch/output?parameters

이 URL에서 특히 두 부분에 집중해 주세요: output과 parameters입니다.

• output은 API가 정보를 반환하는 형식을 지정합니다. Connect API 플러그인에서 사용하려면 원활하게 동작하는 json을 사용하겠습니다.

• parameters와 관련해서는, 이 API를 처음 사용하는 경우 문서를 참고해 익숙해질 필요가 있습니다. 일반적으로 API가 작동하려면 요청 URL에 반드시 포함해야 하는 필수 매개변수와, API 동작을 세부 조정할 수 있는 선택적 매개변수가 있습니다.

• 특히 Text Search에는 query와 radius라는 두 개의 필수 매개변수가 있습니다.

• query — 검색하고 싶은 텍스트 문자열입니다.

• radius — 이 매개변수는 API가 장소 결과를 반환해야 하는 거리 범위를 미터 단위로 나타냅니다. 하지만 대부분의 경우 이 값은 자동으로 최대값으로 설정되므로, 보통은 따로 지정하지 않아도 됩니다.

• 마지막으로, URL의 매개변수로 API 키를 포함하는 것도 잊지 마세요. 자세한 내용은 Places API와 함께 API 키 사용하기 가이드를 참고하세요.

*필수 매개변수. *

이제 이를 바탕으로 “gym”을 검색해 보겠습니다. URL은 다음과 같습니다:

https://maps.googleapis.com/maps/api/place/textsearch/json?query=gym&key=YOUR_API_KEY

여기서 "YOUR_API_KEY"를 앞서 얻은 실제 API 키로 바꿔 주세요.

3. API 요청을 디버그하는 방법

API를 디버깅할 때 유용한 도구는 Postman이며, 무료 플랜만으로도 충분합니다.

*Postman을 사용해 API 요청을 디버깅합니다. *

이 경우 필요한 모든 매개변수와 인증 정보가 URL에 포함되어 있으므로, 웹 브라우저에서 이 URL을 바로 열기만 하면 됩니다.

*브라우저를 사용해 API 요청을 디버깅합니다. *

4. 텍스트 검색을 하는 방법 (using Places API 사용)

이제 실제 사용 사례로 넘어가 보겠습니다. 첫 단계의 목표는 검색 결과의 텍스트 콘텐츠를 표시하는 것입니다.

검색 결과의 텍스트 콘텐츠를 표시합니다.

API 요청 보내기

샘플 파일을 열면 "Search" 버튼을 탭할 때 검색이 실행됩니다. 바로 이 지점에서 Text Search 요청을 보내야 합니다. 그래서 Tap 트리거 아래에 Send response를 사용했습니다.

• Channel은 "ProtoPie Connect/Studio"를 선택합니다.

• Message는 원하는 것을 사용해도 되지만, 본인에게 의미가 분명해야 합니다. 여기서는 TEXT SEARCH REQUEST를 사용했습니다.

텍스트 검색 요청.

• 그다음 "Send Value Together"를 클릭합니다. 값에는 수식을 사용할 것입니다.

수식.

• placeBaseURL은 수식을 더 단순하게 만들기 위해 URL의 일부를 저장하는 텍스트 변수입니다. 여기에는 https://maps.googleapis.com/maps/api/place/textsearch/json?query=가 들어 있습니다.

• ``Search Box.text는 입력 상자의 텍스트 속성을 가져오며, 본질적으로 검색창에 입력한 내용을 나타냅니다.

• "&key="는 단순히 텍스트 조각입니다.

• API_KEY는 API 키를 저장하는 텍스트 변수입니다.

본질적으로 이 수식은 요청 URL을 구성하며, 메시지를 Connect로 보낼 때 URL을 값으로 포함하게 됩니다.

텍스트 콘텐츠 표시

텍스트 검색 응답을 조금 더 자세히 살펴보겠습니다. Text Search는 IP 주소를 기반으로 주변 장소를 찾습니다. JSON 응답에서 우리가 주목해야 할 부분은 검색 결과가 담긴 "results" 섹션입니다.

중요한 점은 각 페이지에 최대 20개의 결과가 포함되며, 0부터 19까지 번호가 매겨진다는 것입니다. (많은 프로그래밍 언어에서는 첫 번째 항목이 보통 0부터 시작합니다.)

각 결과 안에는 이름, 주소, 평점 등 위치에 대한 추가 정보가 들어 있습니다.

텍스트 검색 응답.

이 정보를 프로토타입에 반영하기 위해 ProtoPie의 parseJson() 함수를 사용하겠습니다. 이 함수는 JSON 문자열을 입력으로 받아 해당 값을 추출합니다. 예를 들어 첫 번째 결과의 이름을 가져오려면 parseJson(apiResponse, "results.0.name")를 사용할 수 있습니다.

• apiResponse는 API가 반환한 데이터를 저장하는 텍스트 변수입니다.

• "results.0.name"는 JSON 데이터 안에서 특정 값에 접근하기 위한 경로나 키 순서를 나타내는 문자열입니다. 이 함수가 JSON 데이터 구조를 다음과 같이 탐색하도록 알려 줍니다:

1. 배열인 "results" 키에 접근합니다.

2. 그 배열의 인덱스 0에 있는 요소에 접근합니다.

3. 그 요소 안의 "name" 키에 접근합니다.

더 고급 기능을 활용한 개선 아이디어

parseJson() 함수를 텍스트 응답에 활용해 원하는 형식으로 텍스트 콘텐츠를 추출하고 표시할 수 있습니다. 이 외에도 API 데이터로 탐색할 수 있는 가능성은 무궁무진합니다. 다음 예시를 참고해 보세요:

• 검색 결과에 있는 장소의 이름을 또렷하고 세련되게 보여 줍니다.

• API 응답에서 자세한 주소 정보를 가져와 사용자에게 위치 정보를 제공합니다.

• 각 장소에 별점을 추가해 품질을 빠르게 시각적으로 확인할 수 있게 합니다.

• 각 결과에 영업 중/영업 종료 상태를 포함해 사용자 친화적이고 보기 좋은 표현을 만듭니다.

텍스트 콘텐츠 표시.

API 플러그인 구성하기

이제 ProtoPie Connect로 이동해 플러그인을 구성해 보겠습니다. "Plugin" 버튼을 클릭해 플러그인 패널을 여세요.

• 메서드: GET

• URL, Header, Body는 비워 둡니다.

• Message from Pie: TEXT SEARCH REQUEST

• "override" 체크박스를 선택하고 드롭다운 메뉴에서 URL을 고릅니다. 이렇게 하면 메시지와 함께 전달된 값으로 요청 URL을 덮어쓰게 됩니다.

• Message to Pie: TEXT SEARCH RESULT

• 마지막으로 activate 버튼을 클릭해 API 플러그인을 실행하세요.

5. 위치 사진을 표시하는 방법 (Places API 사용)

현재 검색 결과에는 위치 사진이 표시되지 않지만, 이제 그 부분을 바꿔 보겠습니다. 검색 결과에 사진을 포함하는 작업을 해 봅시다.

Places API를 통해 위치 사진을 표시합니다.

Text Search 응답에서 "photos" 섹션에 주목해 보세요. 더 살펴보면 "photo_reference"라는 키를 발견하게 됩니다. 이 키는 위치 사진을 표시하는 데 매우 중요합니다.

"photo_reference"라는 키.

사진을 표시하려면 Places API의 또 다른 서비스인 Place Photos를 사용할 것입니다. Place Photos 요청의 구조는 다음과 같습니다:

https://maps.googleapis.com/maps/api/place/photo?parameters

매개변수로 반드시 포함해야 하는 항목은 다음과 같습니다:

• photo_reference — 위의 Text Search 응답에서 찾을 수 있는 값입니다.

• maxheight or maxwidth — 사진 크기를 지정하는 데 사용됩니다.

• 그리고 언제나 그렇듯, URL 끝에 API 키를 덧붙이는 것을 잊지 마세요.

예를 들어, 이전 스크린샷에 표시된 photo_reference를 사용해 사진을 표시하고 싶고, 최대 너비를 400픽셀로 하고 싶다면 URL은 다음과 같아야 합니다:

https://maps.googleapis.com/maps/api/place/photo?maxwidth=400&photo_reference=AcJnMuGgHB8nM5itT6xjy_NPCiatZPdnBSfMA6sDfy6GmaUNas8HvJPQBKIhTKDRaUEig32RaNP_729GheM7-WEBSiP1Ck8-OcslObfpBO7NAL98XcVav31fo9ih8wYQcEPU8oxW4Sm_GAvMAKgC46YxyHMeML0Ur9SJZi6KUMDNNb2WNTfZ&key=YOUR_API_KEY

여기서도 "YOUR_API_KEY"를 앞서 얻은 실제 API 키로 바꿔 주세요.

이 역시 웹 브라우저에서 URL을 열어 쉽게 디버그할 수 있습니다.

Text search 응답 사진 디버그.

이 사진을 프로토타입에 어떻게 넣을지 궁금하실 수 있습니다. 이를 위해 두 번째 API 플러그인이 필요한 걸까요? 대답은 아니오입니다. 새로 출시된 ProtoPie 7.9의 셀프 호스팅 미디어 기능 덕분에, 제공된 URL을 Media response 안에서 손쉽게 활용할 수 있습니다.

이를 위해서는 이미지 레이어에 Media response를 적용하고 수식을 사용하기만 하면 됩니다. 수식은 다음과 같이 사용해 보겠습니다:

수식.

수식이 조금 길어 보일 수 있지만 걱정하지 마세요. 단계별로 나눠서 살펴보겠습니다.

• photoBaseURL은 URL의 일부를 담고 있는 텍스트 변수로, 수식을 더 관리하기 쉽게 만들어 줍니다. 여기에는 https://maps.googleapis.com/maps/api/place/photo?maxwidth=400&가 들어 있습니다.

• "photo_reference="는 단순히 텍스트 조각입니다.

• parseJson(apiResponse,"results.0.photos.0.photo_reference") — 이미 parseJson() 함수에 익숙하실 것입니다. 이 함수는 Text Search 결과의 API 응답에서 photo_reference를 가져옵니다.

• "&key="는 또 다른 텍스트 요소입니다.

• API_KEY는 API 키를 저장하는 텍스트 변수입니다.

이 요소들이 함께 모여 검색 결과 사진을 가져오는 데 필요한 URL을 구성합니다.

6. 정적 지도를 표시하는 방법 (Maps Static API 사용)

Maps Static API는 Google Maps Platform 안의 또 다른 서비스입니다. 이를 통해 Google Maps 이미지를 삽입할 수 있습니다. 우리의 목표는 검색 결과 중 아무 항목이나 클릭했을 때 오른쪽에 선택한 위치의 지도를 표시하는 것입니다.

선택한 위치의 지도를 표시합니다.

이제 Text Search 응답에서 위치의 경도와 위도를 포함하는 "location" 섹션에 집중해 보겠습니다. 이것도 프로토타입에서 활용할 수 있는 중요한 정보입니다.

Text Search 응답

Maps Static API URL의 구조는 다음과 같습니다:

https://maps.googleapis.com/maps/api/staticmap?parameters

필수 매개변수는 다음과 같습니다:

• center는 지도의 중심을 정의하며, 지도의 모든 가장자리에서 동일한 거리에 있습니다. 위도와 경도의 쌍 또는 문자열 주소로 제공할 수 있습니다.

• zoom은 지도의 확대 수준입니다. 필요에 맞는 확대 수준을 직접 실험해 선택할 수 있습니다.

• size는 지도 이미지의 직사각형 크기를 정의합니다.

• 그리고 다시 한 번, URL 끝에 API 키를 덧붙이는 것을 잊지 마세요.

예를 들어, 제공된 좌표(위도: 43.6544165, 경도: -79.3600957)의 지도 이미지를 확대 수준 12와 크기 865 x 920픽셀로 얻고 싶다면, URL은 다음과 같이 구성됩니다:

https://maps.googleapis.com/maps/api/staticmap?center=43.6544165,-79.3600957&zoom=12&size=865x920&key=YOUR_API_KEY

여기서도 "YOUR_API_KEY"를 앞서 얻은 실제 API 키로 바꿔 주세요.

이것도 브라우저에서 다시 디버그할 수 있습니다.

Text search 응답 지도 디버그.

이 이미지를 프로토타입에 넣으려면, 짐작하셨겠지만 셀프 호스팅 미디어 기능을 활용하면 됩니다.

7. 사용자 지정 지도를 표시하는 방법 (Maps Static API 사용)

마지막으로, Google이 제공하는 기본 지도 색상에 의존하고 싶지 않은 분들을 위해 프로토타입의 지도 이미지에 사용자 지정 스타일을 적용하는 방법을 살펴보겠습니다. 이것 역시 Maps Static API에서 지원하며, 자세한 내용은 여기에서 확인할 수 있습니다.

Google Map 색상 변경.

간단히 말해, 사용자 지정 스타일을 적용하려면 디자인에 맞는 map ID를 생성하기만 하면 됩니다. 이는 다음 단계를 따르면 가능합니다.

디자인에 맞는 map ID를 생성합니다.

그다음 URL 안에 map ID를 매개변수로 포함하면, 이 URL을 Media response에서 매끄럽게 사용할 수 있습니다.

https://maps.googleapis.com/maps/api/staticmap?center=43.6544165,-79.3600957&zoom=12&size=865x920&map_id=YOUR_MAP_ID&key=YOUR_API_KEY

ProtoPie와 함께라면 Google Maps 통합도 가능합니다!

이 튜토리얼에서는 코딩의 복잡함 없이 Google Maps와 위치 기반 서비스를 UI/UX 프로토타입에 통합하는 방법을 배웠습니다. 숙련된 디자이너든 이제 막 디자인 여정을 시작한 사람이든, Google Maps Platform과 ProtoPie의 혁신적인 기능을 함께 활용하면 생동감과 진정성이 살아 있는 고화질 디자인을 만들 수 있습니다.

실제 데이터, 사진, 그리고 개인화된 지도 스타일을 프로토타입에 담아낼 수 있으므로, 사용자의 시선을 사로잡고 현실 세계의 상호작용을 그대로 반영하는 사용자 경험을 제공할 수 있습니다.

이제 새로 얻은 이 기술을 바탕으로 디자인 아이디어에 생명을 불어넣고, 창의성과 상호작용이 가득한 여정을 시작해 보세요. 즐거운 프로토타이핑 되시길 바랍니다!