목표
이 문서에서는 양질의 주소를 캡처하기 위해 전자상거래 결제 시 Place Autocomplete, Address Validation API1, 지도 서비스를 결합하는 방법을 설명합니다.
기본 요건
다음 사항에 익숙한 것이 좋습니다.
- Place Autocomplete JavaScript 개발자 문서
- 기술적 관점에서 Place Autocomplete의 작동 방식과 구현 옵션을 이해합니다.
- 결제 구현 장소 자동 완성 가이드
- 전자상거래 결제 시 Place Autocomplete 구현 권장사항의 예
- Address Validation API 제품 문서를 참고하세요. 특히 유효성 검사 로직 빌드에 중점을 두세요.
- 기술적 관점에서 Address Validation API의 작동 방식을 이해하고 주소 품질을 결정하는 신호를 검토합니다.
주소 검증이란 무엇인가요?
Address Validation API는 주소를 허용하는 서비스입니다. 주소 구성요소를 식별하고 유효성을 검사합니다. 또한 우편 발송용 주소를 표준화하고 가장 잘 알려진 위도/경도 좌표를 찾습니다. 원하는 경우 미국 및 푸에르토리코의 주소에 Coding Accuracy Support System (CASS™)을 사용 설정할 수 있습니다.결제 시 주소 확인이 필요한 이유는 무엇인가요?
주문 과정에서 정확한 주소 수집:
정확한 주소를 수집하는 것은 성공적인 배송을 유도하고, 제때 처리를 늘리며, 비용이 많이 드는 주소 수정 요금을 줄이는 데 중요한 단계입니다.
고객이 주소를 빠르고 정확하게 입력하도록 안내:
주소 자동 완성을 사용하면 주소 입력 속도가 빨라지고 입력 오류가 줄어들어 고객이 결제를 쉽게 진행할 수 있습니다. Address Validation은 전반적인 주소 품질에 관한 의견을 제공하고, 표준화 및 맞춤법 오류와 같은 수정사항을 적용하며, 주거용 또는 상업용 표시기 제공과 같은 메타데이터를 개선합니다 (일부 지역에서 사용 가능).
구현 개요
이 섹션에서는 전자상거래 결제에 권장되는 주소 입력 워크플로를 간략히 설명합니다. 이 절차는 다음 세 단계로 구성됩니다.
- Place Autocomplete를 사용하여 처음에 주소를 캡처합니다.
- Address Validation API를 사용하여 입력된 주소를 확인합니다.
- 입력된 주소의 위치를 지도에 표시하여 고객에게 배송에 대한 확신을 줍니다.
다음으로 각 단계를 개별적으로 살펴보겠습니다.
1단계: 주소 입력 흐름 - Place Autocomplete 서비스 사용
주소 입력 양식의 첫 번째 줄에서 JavaScript API를 사용하여 Place Autocomplete를 구현합니다.
Place Autocomplete는 고객이 주소 세부정보를 입력할 때 추천 검색어를 제공합니다. JavaScript API를 사용하여 구현하면 사용자가 입력을 시작하면 주소 입력 양식 입력란 아래에 드롭다운이 표시되어 키 입력마다 업데이트되는 자동 완성 서비스의 결과를 보여줍니다. 사용자가 주소를 찾기에 충분한 정보를 입력하면 드롭다운에서 주소를 선택합니다. 이 작업을 수행하면 양식 필드가 주소 데이터로 자동으로 채워집니다.
Place Autocomplete를 사용하여 사용자에게 두 가지 양식 입력 스타일을 제공할 수 있습니다. 모든 주소 입력란이 있는 디스플레이 또는 단일 입력란이 있는 디스플레이입니다. 이 단일 입력란은 사용자가 주소 구성요소를 개별적으로 입력하는 대신 입력하는 대로 검색을 시작하도록 메시지를 표시합니다. 자동 완성으로 주소가 채워지면 워크플로에서 주소 데이터로 양식 필드를 확장하여 고객이 아파트 동수나 아파트 번호를 추가하는 등 검토하고 수정할 수 있도록 합니다.
다음은 단일 입력란을 사용하여 이 흐름이 표시되는 방식의 예입니다.
2단계: Address Validation API를 사용하여 주소 확인
사용자가 주소를 입력한 후 결제 시 Address Validation API를 호출하여 주소가 유효하고 완전한지 확인하는 것이 좋습니다. 사용자가 주소 양식에서 '다음' 또는 '계속' 버튼을 클릭하면 Address Validation API 호출을 트리거합니다. 이 버튼은 결제 페이지로 연결되는 경우가 많습니다.
모든 거래에 대해 Address Validation API를 호출하는 것이 좋습니다.
다음 플로우 다이어그램은 결제 내에서 Address Validation API를 엔드 투 엔드로 통합하는 예를 보여줍니다.
이 문서에서는 뒷부분에서 주소 수락 시나리오에 대해 설명합니다.
3단계: 시각적 확인 제공
주소 입력 후 지도에 배송 위치를 표시하여 사용자가 배송 위치를 시각적으로 확인할 수 있게 합니다. 그러면 고객은 주소가 올바른지를 한 번 더 확인할 수 있고 배달 또는 수령 오류를 줄일 수 있습니다.
지도는 결제 프로세스 중에 표시되거나 거래 확인 이메일 내에서 전송될 수 있습니다. 이러한 두 가지 사용 사례 모두 다음 API를 사용하여 실행할 수 있습니다.
| Maps JavaScript API는 사용자 위치를 표시하는 양방향 지도를 제공합니다. | Maps Static API를 사용하면 웹페이지 내에서 또는 나중에 이메일에서 이미지를 삽입할 수 있습니다. |
|---|---|
 |
 |
심층 분석 - 주소 수락 시나리오
Address Validation API 응답은 다음 세 가지 주요 시나리오로 분류할 수 있습니다.
- 수정: 주소의 품질이 낮습니다. 추가 정보를 요청해야 합니다.
- 확인: 주소의 품질이 우수하지만 입력된 주소와 다릅니다. 확인 메시지가 표시될 수 있습니다.
- 수락: 주소가 고품질입니다. 제공된 주소를 수락할 수 있습니다.
이 개념은 Address Validation API 문서의 유효성 검사 로직 빌드 섹션에서 다루며 이 섹션에서는 각 시나리오를 논의합니다.
수정
이 섹션에서는 주소 입력을 수정하는 방법을 보여줍니다. Address Validation API가 품질이 낮은 주소를 나타내기 위해 반환하는 특정 신호에 관한 자세한 내용은 유효성 검사 로직 빌드 문서의 주소 수정을 참고하세요.
Address Validation API의 응답이 잘못된 주소를 나타내는 경우 고객을 주소 입력 양식으로 리디렉션하여 입력한 데이터를 확인합니다. 주소가 수정되면 서비스는 Address Validation API에 다시 전송하여 수정사항이 유효한지 확인해야 합니다.
addressComponents 수준에서 반환된 신호를 사용하여 특정 주소 줄 오류를 강조 표시할 수도 있습니다. 오른쪽 스크린샷에서 예를 확인할 수 있습니다.
확인
이 섹션에서는 주소를 확인하는 방법을 보여줍니다. Address Validation API가 주소를 확인해야 함을 나타내기 위해 반환하는 특정 신호에 관한 자세한 내용은 검증 로직 빌드 문서의 주소 확인을 참고하세요.
시스템에서 사용자에게 주소를 확인해 달라고 요청하는 경우가 많습니다. 예를 들어 고객이 도시 이름을 잘못 입력하면 Address Validation API에서 수정합니다. 고객에게 이 수정사항을 확인해야 합니다. 이는 API에서 변경한 사항으로 인해 원래 입력한 내용이 근본적으로 변경될 수 있기 때문입니다.
전면 광고 모달을 사용하여 고객에게 정보를 표시하고 다음 세 가지 옵션을 진행할 수 있도록 합니다.
- API에서 반환한 주소를 확인하면 수정된 주소를 사용하여 결제 프로세스가 계속됩니다.
- Address Validation API의 수정사항을 무시하고 원래 입력된 주소를 선택합니다. 결제 절차는 정상적으로 계속 진행할 수 있으며, 프로세스가 허용하는 경우 배송 전에 다운스트림 검토를 위해 주문이 신고될 수 있습니다.
- 고객이 모달을 취소하거나 닫으면 결제 프로세스의 주소 입력 단계로 돌아가서 처음부터 주소를 다시 입력하여 프로세스를 다시 시작할 수 있습니다.
오른쪽 스크린샷에서 예를 확인할 수 있습니다.
수락
이 섹션에서는 주소를 수락하는 방법을 보여줍니다. Address Validation API가 주소의 품질이 우수하여 허용되어야 함을 나타내기 위해 반환하는 특정 신호에 관한 자세한 내용은 검증 로직 빌드 문서의 주소 허용을 참고하세요.
이 시나리오에서는 결제 절차가 주소 품질과 관련하여 고객에게 메시지를 표시하지 않고 다음 단계인 결제 승인 단계로 이동해야 합니다. API에서 고객이 입력한 주소가 양호한 품질이며 전송 가능함을 확인했습니다.
Address Validation API에서 반환된 주소 데이터를 주문에 사용하는 것이 좋습니다. 다음과 같은 사소한 수정사항과 추가사항이 포함될 수 있기 때문입니다.
- 대문자 사용(영문)
- 형식 수정(예:
- Street to St
- 주소 구성요소의 올바른 순서
- 미국의 경우 ZIP+4
구현 관련 고려사항
주소 수락 로직을 빌드할 때는 구현으로 인해 고객이 잘못된 주소를 입력하여 결제할 수 없게 되지 않도록 합니다. API가 항목이 잘못되었다고 반복적으로 표시하는 경우 무한 루프가 발생하지 않도록 로직을 구성합니다.
고객에게 주소를 입력할 기회를 최대 2번 제공하고, 두 번째 시도에서 유효하지 않더라도 입력한 주소를 허용하는 것이 좋습니다. 두 번째 시도에서는 유효성 검사와 관계없이 계속 진행하도록 하는 것이 목표입니다.
두 번째 시도를 허용하는 두 가지 추천 방법은 다음과 같습니다.
- 강제 진행: 고객에게 주소가 유효하지 않다고 설명하는 모달을 표시하지만 입력한 주소로 계속 진행할 수 있는 옵션을 허용합니다.
- 무음 수락: 주소가 완전히 유효하지 않더라도 확인 단계 없이 두 번째 시도를 자동으로 수락합니다.
가능하면 주문 제품이 발송되기 전에 고객 서비스 담당자가 주소를 검토할 수 있도록 시스템을 설계하여 유효하지 않은 주소를 표시합니다. 이 추가 조치를 통해 실수를 포착할 수 있습니다.
신축 건물 건설은 이 검사가 권장되는 이유를 잘 보여줍니다. 새 건물 건설이 완료된 시점과 해당 건물의 주소가 우편 주소 데이터베이스에 채워지는 시점 사이에는 시간차가 있을 수 있습니다. 고객이 입력한 주소가 유효하지 않더라도 입력한 주소로 결제 페이지를 강제로 진행할 수 있는 옵션이 있어야 합니다.
결제 세션이 완료되면 원하는 경우 provideValidationFeedback 메서드를 사용하여 특정 주소 유효성 검사 시도에 관한 의견을 Google에 보냅니다.
결론
이 문서에서는 Google 지도에서 자동 완성, 주소 유효성 검사, 시각적 확인을 구현하는 결제 흐름을 간략히 설명했습니다. 권장되는 주소 입력 흐름에 따라 이 문서를 구현 설계의 시작점으로 사용하세요.
다음 단계
안정적인 주소로 결제, 배송, 운영 개선 워크페이퍼를 다운로드하고 주소 확인으로 결제, 배송, 운영 개선 웨비나를 시청하세요.
추가 자료:
참여자
헨리크 발브 | 솔루션 엔지니어
토마스 앙글라레트 | 솔루션 엔지니어
사르탁 강구리 | 솔루션 엔지니어
-
United States Postal Service의 비독점 라이선스 소유자입니다. 다음 상표는 United States Postal Service®에서 소유하고 있으며 허락을 받아 사용합니다. CASS™, USPS®, DPV®. ↩