주소 자동 완성(Google Maps)

주소 자동 완성을 켜면 구매자가 도로명을 입력하기 시작하는 즉시 Sami B2B Onboarding이 Google의 주소 추천을 보여 줘요. 추천 주소를 선택하면 나머지 주소가 자동으로 채워져요. 구매자는 양식을 더 빨리 작성하고, 앱이 Shopify에 만드는 회사 위치에는 정확한 주소가 입력돼요.

스토어에 Google Maps 키를 하나 추가하세요. 자동 완성은 양식마다 켜거나 끌 수 있어요.

참고

시작하기 전에 결제 정보가 설정된 Google Cloud 계정이 필요해요. Google은 Maps API를 사용하기 전에 결제 정보를 요구해요.

Google Cloud에서 브라우저 키 만들기

1. 프로젝트 선택

   Google Cloud console을 열고 프로젝트를 만들거나 사용할 프로젝트를 선택하세요.

2. API 켜기

   APIs & Services › Library에서 Maps JavaScript API와 Places API를 차례로 검색해 사용 설정하세요. 첫 번째 API는 스토어프런트에 추천 주소를 불러오고, 두 번째 API는 주소를 찾아 줘요.

3. 키 만들기

   APIs & Services › Credentials에서 Create credentials › API key를 클릭하세요. 키를 복사하세요. 키는 AIza로 시작해요.

4. 키를 내 스토어로 제한하기

   키 설정을 여세요.

   1. Application restrictions에서 Websites를 선택하고 스토어에 접속하는 모든 도메인을 추가하세요. 예: https://example.com/*, https://your-store.myshopify.com/*
   2. API restrictions에서 Restrict key를 선택하고 Maps JavaScript API와 Places API를 선택하세요.
   3. Save를 클릭하세요.

주의

키는 스토어프런트 페이지에 그대로 기록되므로 누구나 볼 수 있어요. 웹사이트 제한은 다른 사람이 키를 사용해 Google 요금이 늘어나는 일을 막아 줘요. 앱 패널에도 **This key is printed into the storefront page, so restrict it to your store’s domain in the Google console.**라는 안내가 표시돼요.

키를 추가하고 켜기

1. Address autocomplete 패널 열기

   Forms로 이동해 양식 옆의 Edit를 클릭하세요. 왼쪽 레일에서 Integrations를 클릭하세요. Connected apps에서 Address autocomplete 행의 Set up을 클릭하세요.

   Address autocomplete 패널이 열리고 Account와 This form 두 섹션이 표시돼요.

   

   Set up을 클릭해 키를 추가하세요. 패널에는 어떤 필드에 추천이 표시되는지와 키를 제한하라는 안내가 나와요.

2. 키 붙여넣기

   Account에서 Set up을 클릭하세요. Address autocomplete 대화상자에서 Maps API key에 키를 붙여넣고 Save를 클릭하세요. Keys saved가 표시되고 Account 행에 키가 나타나요.

3. 사용 설정

   패널 하단에서 Enable을 클릭하세요. 버튼이 Disable로 바뀌고 Connected apps의 Address autocomplete 행에 Active가 표시돼요. 아직 저장된 키가 없으면 **Add your Maps API key first.**라는 배너가 표시돼요.

4. 양식 저장

   저장 바에서 Save를 클릭하세요. Form saved가 표시돼요.

채워지는 필드

양식의 Shopify 패널에서 Address line 1에 매핑된 모든 필드에 추천이 표시돼요. 패널에는 이렇게 안내돼요. When a buyer starts typing in a field mapped to Address line 1, Google suggests addresses. Picking one fills that block’s city, state, postal code and country.

구매자가 추천 주소를 선택하면 앱은 같은 주소 블록에서 다음에 매핑된 필드를 채워요.

매핑 대상	채워지는 내용
Address line 1	건물 번호와 도로명
City	시 또는 도시
State / province	주 또는 도
ZIP / postal code	우편번호
Country	국가

• Address line 2, Recipient, Phone은 구매자가 직접 입력해요.
• 배송 주소와 청구 주소는 따로 처리돼요. 배송 주소를 선택해도 청구 주소 필드는 바뀌지 않아요.
• 구매자는 자동으로 채워진 칸을 언제든 수정할 수 있어요.
• 추천 주소는 스토어 페이지의 언어로 표시돼요.

앱이 만드는 Wholesale application 양식에는 두 주소의 이 필드들이 이미 매핑되어 있어요. 주소 질문을 직접 만들었다면 Company location에서 매핑하세요. 답변을 Shopify에 매핑하기를 참고하세요.

스토어프런트에서 확인하기

1. 양식 열기

   Forms로 이동해 양식 옆의 Copy link를 클릭하세요. 시크릿 브라우저 창에서 링크를 여세요.

2. 주소 입력

   Shipping address에서 Address line 1에 123 Main Street 같은 주소를 입력하기 시작하세요. 입력 칸 아래에 Google의 추천 목록이 열려요.

3. 추천 선택

   목록에서 주소를 클릭하세요. 해당 주소에 맞춰 City, ZIP or postal code, Country, State or province가 채워져요.

추천이 나타나지 않는다면 다음을 확인하세요.

확인 사항	해결 방법
Address autocomplete 행에 Active가 표시되고 양식이 저장되어 있나요?	패널에서 Enable을 클릭한 다음 Save를 클릭하세요.
키의 웹사이트 제한에 테스트 중인 도메인이 포함되어 있나요?	스토어는 자체 도메인과 myshopify.com 도메인에서 응답해요. Google Cloud에 두 도메인을 모두 추가하세요.
Maps JavaScript API와 Places API가 켜져 있고 프로젝트에 결제 정보가 설정되어 있나요?	APIs & Services › Library에서 켜세요.
필드가 Address line 1에 매핑되어 있나요?	Shopify 패널의 Company location에서 매핑하세요.

끄기

• 양식 하나에서: 해당 양식의 Address autocomplete 패널을 열고 Disable을 클릭한 다음 Save를 클릭하세요.
• 모든 양식에서: Account에서 Change를 클릭한 다음 Remove keys를 클릭하세요. 대화상자에 **Every form in this store stops using Address autocomplete until you add keys again.**라는 경고가 표시돼요. Remove keys를 클릭해 확인하세요.

다음 단계

• 답변을 Shopify에 매핑하기 — 주소 질문을 매핑해 회사 위치를 채우세요.
• 양식 만들기 — 양식에 주소 필드를 추가하세요.
• Captcha(reCAPTCHA, hCaptcha) — 같은 양식에서 봇을 차단하세요.