Bubble의 지도 및 위치 정보 기능은 Google API에 의존합니다. 이 가이드는 Google에서 자신의 키를 얻고 Bubble에 등록하는 방법을 다룹니다.
Bubble에 세팅하기
- 메인 패널의 좌측 Settings > General > "General services API Keys" 섹션에 Google에서 발급받은 자체 Google API 키를 입력해야 합니다.
- Goole에서 API키를 발급받지 않았다면 아래의 설명에 따라 Google에 자신의 정보를 등록하고 API를 발급받으세요
참고:
- Google API는 지리적 주소뿐만 아니라 timezone파악에도 사용되므로 Current user's timezone(현재 사용자의 시간대) 파악 또는 주소(위치) 파악을 사용하는 경우 계속해서 이 키를 업데이트해야만 두 개 다 제대로 작동합니다.
- 2020년 5월 Google은 API를 변경하여 timezone파악 기능(이전에는 지오코드 기능 번들의 일부)을 자체 API로 분리했습니다. 즉, 앱을 Google 쪽에 정보를 등록할 때 앱의 기능 중에 Time Zone API를 추가해야 합니다.
(1) Google 개발자 콘솔에서 앱 설정
먼저 Google Developers Console에서 계정을 설정해야 합니다.
여기서 계정은 Google에게 나의 앱에 대해 알려주고 앱이 호출할 수 있는 API를 Google에서 파악하게 만드는 방법입니다.
1. 다음 링크를 통해서 구글 개발자 콘솔을 방문하십시오 https://console.developers.google.com/
2. 먼저 로그인을 합니다.
3. Google의 요구사항인 결제 세부정보를 제공해야 할 수도 있습니다.
4. Google에서 Bubble 앱에 해당하는 이름으로(같은 이름이 아니어도 상관없음) "프로젝트"를 만듭니다.
5. 인터페이스는 다음과 같을 수 있습니다. (새 프로젝트 버튼은 다른 페이지에도 있음)
6. 그런 다음 해당 프로젝트가 활성화된 상태에서(즉, 상단 표시줄에 이름이 표시됨) 왼쪽 상단의 메뉴 아이콘 > API 및 서비스 > API라이브러리를 클릭합니다.
7. API라이브러리에서 다음의 API 5개를 검색하고 각각 "사용"을 클릭합니다.
- Geocoding API (지오코딩 API)
- Places API (장소 API)
- Geolocation API(지리적 위치 API)
- Maps JavaScript API(지도 자바스크립트 API)
- Time Zone API (시간대 API: 2020년 5월의 새로운 기능)
(2) 새 키 생성 및 설정
1. Google API 키 생성하기
이제 왼쪽 상단의 메뉴 아이콘 > API 및 서비스 > 사용자 인증 정보(Credentials)를 방문합니다.
- 상단의 “사용자 인증 정보 만들기 + “ > API 키를 클릭
- 새로운 2개의 API 키를 만들고 그중 하나는 "Client"로, 다른 하나는 "Server"로 편집합니다.
*발급받은 API 키 보안을 철저히 지켜야 합니다. 다른 장소에 복사하거나 분실되면 보안에 문제가 될 수 있으니, 분실 시에는 다시 발급받아야만 합니다.
2. Client 키 보안 설정
다음으로 보안설정으로 키에 몇 가지 제한을 적용하려고 합니다.
- Client 키 설정을 클릭하고 애플리케이션 제한사항 설정에서 “웹 사이트(HTTP 리퍼러)"를 선택합니다.
- 그런 다음 하단의 "웹사이트 제한" 섹션에서 +ADD를 클릭하여 https://appname.bubbleapps.io /* 와 같은 자신의 Bubble 앱의 URL을 추가합니다.
- 이 제한은 자신의 웹 주소만 클라이언트 키를 접속 사용할 수 있음을 의미합니다.
- *는 https://appname.bubbleapps.io/ 로 시작하는 모든 URL이 허용됨을 의미하는 기호입니다.
- 설정 후 저장을 클릭합니다.
3. Server 키 보안 설정
- 다음으로 서버 키 설정을 클릭하고 하단의 API 제한사항 섹션을 확인합니다.
- "키 제한"을 선택한 다음 드롭다운에서 위에서 활성화한 5개의 API를 모두 선택합니다.
- Geocoding API (지오코딩 API)
- Places API (장소 API)
- Geolocation API(지리적 위치 API)
- Maps JavaScript API(지도 자바스크립트 API)
- Time Zone API (시간대 API: 2020년 5월의 새로운 기능)
- 이 제한은 서버 키가 이 5개의 Google API만 사용할 수 있음을 의미합니다.
- 설정 후 저장을 클릭합니다.
4. Bubble에 키 설정
- Bubble 메인화면으로 돌아가 좌측의 Settings > General > "General services API Keys" 섹션에 자체 Google API 키를 설정합니다.
- Server 키를 복사하여 "Google Geocode API 키" 상자에 복사합니다.
- Client 키를 "Google 지도 API 키" 상자에 붙여 넣으십시오.
- 이제 모든 설정이 완료되었습니다.
(3) Google 추가 참고 사항
1. API 설명서
- API 키 설정을 위해 Google에서 제공하는 일반 지침은 지도용 , 지오코드를 참고하세요
- 이 설명서 페이지의 지침은 2023년 8월 현재 정확하지만 Google이 인터페이스를 업데이트하면 관련 정보가 수정도리 수 있으니 필요에 따라서 공식 문서를 참조하십시오
- 이러한 API를 사용하려면 Google Cloud로 결제 계정을 설정하고 Google 프로젝트를 해당 결제 계정과 연결해야 할 수 있습니다.
- Google 프로젝트 구성의 변경사항이 전파되고 적용되려면 1분 정도 걸릴 수 있습니다.
2. 주의사항
- Bubble은 Google 지도 API를 사용하기 때문에 앱에 반영되는 Google 지도 데이터에 일부에 불일치가 있습니다.
- 예를 들어 일부 미국 외의 주소인 경우 '도시'의 이름은 실제로 지역의 이름일 수 있습니다. (미국의 지역 구분 체계가 미국 외 국가와 다름)
- 이를 보완하려면 위치 값을 Searchbox Input에서 받아서 사용하는 Map element를 추가해 보세요. 그러면 Map element가 핀을 지도의 "중심"에 설정하여 더 정확한 데이터를 설정할 수 있습니다.
