결제 및 주소 양식 권장사항

사용자가 최대한 쉽고 빠르게 주소 및 결제 양식을 작성할 수 있도록 하여 전환수를 극대화하세요.

Sam Dutton

잘 설계된 양식은 사용자에게 도움이 되고 전환율을 높이는 데 도움이 됩니다. 작은 수정으로 큰 효과를 얻을 수 있습니다.

사용해 보기: 실습 튜토리얼을 통해 이러한 권장사항을 알아보려면 이 게시물의 두 가지 Codelab을 확인하세요. * 결제 양식 권장사항 Codelab * 주소 양식 권장사항 Codelab

다음은 모든 권장사항을 보여주는 간단한 결제 양식의 예입니다.

다음은 모든 권장사항을 보여주는 간단한 주소 양식의 예입니다.

체크리스트

• 의미 있는 HTML 요소를 사용합니다: <form>, <input>, <label>, <button>.
• 각 양식 입력란에 <label> 라벨을 지정합니다.
• HTML 요소 속성을 사용하여 기본 제공 브라우저 기능에 액세스합니다. 특히 적절한 값을 가진 type 및 autocomplete을 사용합니다.
• 결제 카드 번호와 같이 증가하지 않는 숫자에는 type="number"를 사용하지 마세요. 대신 type="text" 및 inputmode="numeric"를 사용하세요.
• input, select 또는 textarea에 적절한 자동 완성 값을 사용할 수 있다면 이 값을 사용해야 합니다.
• 브라우저가 양식을 자동 완성할 수 있도록 입력 name 및 id 속성에 페이지 로드 또는 웹사이트 배포 간에 변경되지 않는 안정적인 값을 제공합니다.
• 탭하거나 클릭한 제출 버튼을 사용 중지합니다.
• 양식 제출뿐만 아니라 입력 중에도 데이터 확인을 할 수 있습니다.
• 비회원 결제를 기본값으로 설정하고 결제가 완료되면 계정을 간단하게 만듭니다.
• 명확한 클릭 유도 문구로 명확한 단계에서 결제 프로세스의 진행 상황을 표시합니다.
• 불필요한 요소를 삭제하여 결제 종료 가능성이 있는 지점을 제한하세요.
• 결제 시 전체 주문 세부정보를 표시하여 간편하게 주문 내역을 조정하세요.
• 필요하지 않은 데이터는 요청하지 않습니다.
• 꼭 그렇지 않은 것이 아니라면 한 번만 입력하여 이름을 요청하세요.
• 이름 및 사용자 이름에 라틴 문자만 사용하면 안 됩니다.
• 다양한 주소 형식을 사용할 수 있습니다.
• 주소에 단일 textarea를 사용해 보세요.
• 청구서 수신 주소 자동 완성을 사용하세요.
• 필요한 경우 국제화 및 현지화합니다.
• 우편번호 주소 조회를 사용하지 않는 것이 좋습니다.
• 적절한 결제 카드 자동 완성 값을 사용합니다.
• 결제 카드 번호는 한 번에 입력하세요.
• 자동 완성 환경을 중단시키는 맞춤 요소는 사용하지 마세요.
• 현장 및 실험실에서 테스트: 페이지 분석, 상호작용 분석, 실제 사용자 성능 측정
• 다양한 브라우저, 기기, 플랫폼에서 테스트합니다.

참고: 이 도움말에서는 주소 및 결제 양식의 프런트엔드 권장사항에 대해 설명합니다. 사이트에서 거래를 구현하는 방법은 설명하지 않습니다. 웹사이트에 결제 기능을 추가하는 방법에 대해 자세히 알아보려면 웹 결제를 참조하세요.

의미 있는 HTML 사용

작업에 빌드된 요소 및 속성을 사용합니다.

• <form>, <input>, <label>, <button>
• type, autocomplete, inputmode

이렇게 하면 내장된 브라우저 기능을 사용하고 접근성을 높이며 마크업에 의미를 추가할 수 있습니다.

의도한 대로 HTML 요소 사용

<form>에 양식 넣기

<input> 요소를 <form>에 래핑하지 않고 자바스크립트로만 데이터 제출을 처리하고 싶을 수 있습니다.

그렇지 않습니다.

HTML <form>을(를) 사용하면 모든 최신 브라우저에서 기본으로 제공되는 강력한 기능에 액세스할 수 있으며, 스크린 리더 및 기타 보조 기기에서 사이트에 액세스할 수 있습니다. 또한 <form>를 사용하면 자바스크립트 지원이 제한된 이전 브라우저를 위한 기본 기능을 더 간단하게 빌드할 수 있으며, 코드에 결함이 있는 경우에도 그리고 실제로 JavaScript를 사용 중지하는 소수의 사용자를 위해 양식 제출을 사용 설정할 수 있습니다.

사용자 입력을 위한 페이지 구성요소가 두 개 이상 있는 경우 각각 고유한 <form> 요소에 배치해야 합니다. 예를 들어 검색 및 가입이 동일한 페이지에서 나왔다면 각각 자체 <form>에 삽입합니다.

<label>를 사용하여 요소에 라벨 지정

<input>, <select> 또는 <textarea>에 라벨을 지정하려면 <label>를 사용합니다.

라벨의 for 속성에 입력의 id와 동일한 값을 제공하여 라벨을 입력과 연결합니다.

<label for="address-line1">Address line 1</label>
<input id="address-line1" …>

단일 입력에 단일 라벨 사용: 라벨이 하나만 있는 여러 입력에 라벨을 지정하려고 하지 마세요. 이 기능은 브라우저와 스크린 리더에서 사용할 수 있습니다. 라벨을 탭하거나 클릭하면 연결된 입력으로 포커스가 이동하고 라벨 또는 라벨의 입력에 포커스가 맞춰지면 스크린 리더가 라벨 텍스트를 알려줍니다.

주의: 라벨 대신 placeholders를 단독으로 사용하지 마세요. 입력에 텍스트를 입력하기 시작하면 자리표시자가 숨겨지므로 입력의 용도를 쉽게 잊어버릴 수 있습니다. 자리표시자를 사용하여 날짜와 같은 값의 올바른 형식을 표시하는 경우에도 마찬가지입니다. 이는 특히 휴대폰을 사용하는 사용자가 집중력이 분산되거나 스트레스를 받는 경우 문제가 될 수 있습니다.

버튼을 유용하게 만들기

버튼에는 <button>를 사용하세요. <input type="submit">도 사용할 수 있지만 div 또는 버튼으로 작동하는 다른 임의의 요소는 사용하지 마세요. 버튼 요소는 액세스 가능한 동작과 기본 제공되는 양식 제출 기능을 제공하며 손쉽게 스타일을 지정할 수 있습니다.

각 양식 제출 버튼에 해당 기능을 나타내는 값을 제공합니다. 결제의 각 단계마다 진행 상황을 표시하고 다음 단계를 명확하게 설명하는 구체적인 클릭 유도 문구를 사용합니다. 예를 들어 배송지 주소 양식에서 계속 또는 저장 대신 결제 진행에 있는 제출 버튼에 라벨을 지정합니다.

사용자가 제출 버튼을 탭하거나 클릭하면 특히 사용자가 결제를 하거나 주문할 때 제출 버튼을 사용 중지하는 것이 좋습니다. 버튼이 제대로 작동하더라도 버튼을 반복적으로 클릭하는 사용자가 많습니다. 이로 인해 결제에 문제가 발생하고 서버 부하가 증가할 수 있습니다.

반면에 완전하고 유효한 사용자 입력을 기다리는 제출 버튼은 사용 중지하지 마세요. 예를 들어 누락되거나 잘못되었다는 이유로 주소 저장 버튼을 사용 중지된 상태로 두지 마세요. 이는 사용자에게 도움이 되지 않습니다. 사용자는 버튼을 계속 탭하거나 클릭하고 고장이 난 것으로 생각할 수 있습니다. 대신 사용자가 잘못된 데이터가 포함된 양식을 제출하려고 하면 무엇이 잘못되었으며 어떻게 해야 하는지 설명합니다. 이는 데이터 입력이 더 어렵고 사용자가 양식을 제출하려고 할 때 사용자의 화면에 데이터가 표시되지 않거나 누락될 수 있는 모바일에서 특히 중요합니다.

주의: 양식에서 버튼의 기본 유형은 submit입니다. 양식에 다른 버튼 (예: 비밀번호 표시)을 추가하려면 type="button"를 추가합니다. 그렇지 않은 경우 버튼을 클릭하거나 탭하면 양식이 제출됩니다. 양식 입력란에 포커스가 있는 상태에서 Enter 키를 누르면 양식의 첫 번째 submit 버튼 클릭을 시뮬레이션합니다. 양식의 제출 버튼 앞에 버튼을 포함하고 유형을 지정하지 않으면 해당 버튼은 양식에서 기본 버튼 유형 (submit)을 가지며 양식을 제출하기 전에 클릭 이벤트를 수신합니다. 이에 관한 예는 데모를 참고하세요. 양식을 작성하고 Enter 키를 누릅니다.

HTML 속성 최대한 활용

사용자가 데이터를 쉽게 입력할 수 있도록 지원

적절한 입력 type 속성을 사용하여 모바일에서 적절한 키보드를 제공하고 브라우저에서 기본 제공되는 기본 제공 유효성 검사를 사용 설정합니다.

예를 들어 이메일 주소에는 type="email", 전화번호에는 type="tel"를 사용합니다.

이메일 및 전화에 적합한 키보드

경고: type="number"를 사용하면 위쪽/아래쪽 화살표가 추가되어 숫자가 늘어나므로 전화번호, 결제 카드, 계좌 번호와 같은 데이터에는 의미가 없습니다. 이러한 숫자에는 type="text"를 설정합니다 (또는 text가 기본값이므로 이 속성은 생략합니다). 전화번호의 경우 type="tel"를 사용하여 휴대기기에 적절한 키보드를 가져옵니다. 다른 숫자의 경우 inputmode="numeric"를 사용하여 휴대기기에서 숫자 키보드를 사용할 수 있습니다. 일부 사이트에서는 모바일 사용자가 원하는 키보드를 사용할 수 있도록 여전히 type="tel"에서 결제 카드 번호를 사용합니다. 그러나 inputmode는 현재 매우 광범위하게 지원되므로 그렇게 할 필요는 없습니다. 단, 사용자의 브라우저를 확인하세요.

날짜의 경우 맞춤 select 요소를 사용하지 마세요. 제대로 구현되지 않으면 자동 완성 환경이 중단되며 이전 브라우저에서 작동하지 않습니다. 출생연도와 같은 숫자의 경우, 특히 모바일에서 긴 드롭다운 목록에서 숫자를 선택하는 것보다 숫자를 직접 입력하는 것이 더 쉽고 오류가 적게 발생할 수 있으므로 select 대신 input 요소를 사용하는 것이 좋습니다. inputmode="numeric"를 사용하여 모바일에서 올바른 키보드인지 확인하고 텍스트 또는 자리표시자와 함께 유효성 검사 및 형식 힌트를 추가하여 사용자가 데이터를 적절한 형식으로 입력할 수 있도록 합니다.

참고: datalist 요소는 사용자가 사용 가능한 옵션 목록에서 선택할 수 있도록 하며, 사용자가 텍스트를 입력할 때 일치하는 추천을 제공합니다. simpl.info/datalist에서 text, range, color 입력에 datalist를 사용해 보세요. 출생 연도 입력의 경우 datalist-select.glitch.me에서 select을 input 및 datalist와 비교할 수 있습니다.

자동 완성을 사용하여 접근성을 개선하고 사용자가 데이터를 다시 입력하지 않도록 지원

적절한 autocomplete 값을 사용하면 브라우저에서 데이터를 안전하게 저장하고 input, select, textarea 값을 자동 완성하여 사용자에게 도움을 줄 수 있습니다. 이는 모바일에서 특히 중요하며 높은 양식 이탈률을 방지하는 데 중요합니다. 자동 완성은 여러 접근성 이점도 제공합니다.

양식 입력란에 적절한 자동 완성 값을 사용할 수 있는 경우 이 값을 사용해야 합니다. 전체 값 목록과 값을 올바르게 사용하는 방법에 관한 설명은 MDN 웹 문서를 참조하세요.

안정적인 값

참고: 적절한 자동 완성 값을 사용할 뿐만 아니라 양식 입력란에 페이지 로드 또는 웹사이트 배포 사이에 변경되지 않는 안정적인 값을 제공하여 브라우저가 양식을 자동 완성할 수 있도록 합니다.nameid

청구서 수신 주소

기본적으로 청구서 수신 주소는 배송 주소와 동일하게 설정합니다. 양식에 청구서 수신 주소를 표시하는 대신 청구서 수신 주소를 수정할 수 있는 링크를 제공하거나 (또는 summary 및 details 요소를 사용)하여 시각적인 복잡함을 줄입니다.

결제 검토 링크를 추가합니다.

배송지 주소와 마찬가지로 청구서 수신 주소에도 적절한 자동 완성 값을 사용하면 사용자가 데이터를 두 번 이상 입력할 필요가 없습니다. 다른 섹션에서 이름이 같은 입력에 서로 다른 값이 있는 경우 자동 완성 속성에 접두사를 추가합니다.

<input autocomplete="shipping address-line-1" ...>
...
<input autocomplete="billing address-line-1" ...>

사용자가 올바른 데이터를 입력하도록 지원

고객이 '잘못된' 일을 했다고 '이야기'하지 않도록 하세요. 대신 문제가 발생할 때 바로 수정하도록 지원하여 사용자가 양식을 더 빠르고 쉽게 작성할 수 있도록 하세요. 고객은 결제 과정을 통해 제품 또는 서비스에 대한 비용을 지불하려고 합니다. 즉, 고객은 제품이나 서비스를 처벌하는 것이 아니라 지원하는 것입니다.

제약 조건 속성을 추가하여 요소를 양식화하여 min, max, pattern 등 허용 가능한 값을 지정할 수 있습니다. 요소의 유효 상태는 요소의 값이 유효한지 여부에 따라 자동으로 설정됩니다. 유효한 값 또는 잘못된 값으로 요소의 스타일을 지정하는 데 사용할 수 있는 :valid 및 :invalid CSS 의사 클래스도 마찬가지입니다.

예를 들어 다음 HTML은 출생 연도에 1900년과 2020년 사이의 입력을 지정합니다. type="number"를 사용하면 입력 값이 min 및 max로 지정된 범위 내에서 숫자로만 제한됩니다. 범위 밖의 숫자를 입력하려고 하면 입력이 잘못된 상태로 설정됩니다.

다음 예시에서는 pattern="[\d ]{10,30}"를 사용하여 공백을 허용하면서 유효한 결제 카드 번호를 확인합니다.

최신 브라우저는 email 또는 url 유형이 있는 입력에 대해 기본적인 유효성 검사도 수행합니다.

참고: type="email"를 사용해 입력에 multiple 속성을 추가하면 쉼표로 구분된 여러 이메일 주소에 대해 단일 입력으로 기본 제공되는 검증을 사용 설정할 수 있습니다.

양식 제출 시 브라우저는 문제가 있거나 누락된 필수 값이 있는 필드에 포커스를 자동으로 설정합니다. JavaScript가 필요하지 않습니다.

브라우저에서 기본적으로 제공하는 기본 유효성 검사입니다.

사용자가 제출 버튼을 클릭할 때 오류 목록을 제공하는 대신 인라인을 검증하고 사용자가 데이터를 입력할 때 피드백을 제공합니다. 양식을 제출한 후 서버의 데이터 유효성을 검사해야 하는 경우 발견된 모든 문제를 나열하고 잘못된 값이 포함된 모든 양식 필드를 명확하게 강조 표시하고, 문제가 있는 각 필드 옆에 인라인으로 해결해야 할 사항을 설명하는 메시지를 표시합니다. 서버 로그 및 분석 데이터에 일반적인 오류가 있는지 확인하세요. 양식을 다시 설계해야 할 수도 있습니다.

또한 사용자가 데이터를 입력하고 양식을 제출하는 동안 더욱 강력한 유효성 검사를 하려면 JavaScript를 사용해야 합니다. Constraint Validation API(폭넓게 지원됨)를 사용하면 기본 제공되는 브라우저 UI를 사용하여 포커스를 설정하고 프롬프트를 표시하는 맞춤 유효성 검사를 추가할 수 있습니다.

자세한 내용은 보다 복잡한 실시간 유효성 검사에 JavaScript 사용하기를 참고하세요.

경고: 클라이언트 측 유효성 검사 및 데이터 입력 제약 조건이 있더라도 백엔드에서 사용자의 데이터 입력과 출력을 안전하게 처리하는지 확인해야 합니다. 사용자 입력을 절대 신뢰하지 마세요. 악의적인 입력일 수 있습니다. 자세한 내용은 OWASP 입력 검증 요약본을 참고하세요.

사용자가 필요한 데이터를 놓치지 않도록 지원

필수 값의 입력에는 required 속성을 사용합니다.

양식이 제출되면 최신 브라우저에서 자동으로 메시지를 표시하고 누락된 데이터가 있는 required 필드에 포커스를 설정합니다. :required 유사 클래스를 사용하여 필수 필드를 강조표시할 수 있습니다. JavaScript는 필요하지 않습니다.

모든 필수 필드의 라벨에 별표를 추가하고 양식 시작 부분에 별표의 의미를 설명하는 메모를 추가합니다.

결제 간소화

모바일 상거래 시장의 빈틈을 조심하세요.

사용자의 피로 예산이 있다고 가정해 보겠습니다. 전부 다 사용하면 사용자가 이탈할 것입니다.

특히 모바일에서는 불편함을 줄이고 집중력을 유지해야 합니다. 대부분의 사이트는 모바일에서 트래픽이 증가하지만 데스크톱에서는 더 많은 전환을 얻습니다. 이러한 현상을 모바일 상거래 격차라고 합니다. 고객은 단순히 데스크톱에서 구매하는 것을 선호할 수 있지만 사용자 경험이 저하되면 모바일 전환율이 낮아지기도 합니다. 모바일에서 손실된 전환을 최소화하고 데스크톱에서 전환을 최대화해야 합니다. 연구 결과, 더 나은 모바일 양식 환경을 제공할 수 있는 엄청난 기회가 있는 것으로 나타났습니다.

무엇보다도 길고 복잡하며 방향감이 없는 양식은 사용을 중단할 가능성이 높습니다. 사용자가 작은 화면을 사용하거나, 주의가 산만하거나, 급한 경우 특히 그렇습니다. 가능한 한 적은 양의 데이터를 요청하세요.

비회원 결제를 기본값으로 설정

온라인 상점의 경우 양식 충돌을 줄이는 가장 간단한 방법은 비회원 결제를 기본값으로 설정하는 것입니다. 사용자가 구매하기 전에 계정을 만들도록 강요하지 마세요. 비회원 결제를 허용하지 않는 것이 장바구니 이탈의 주요 원인으로 언급됩니다.

baymard.com/checkout-usability에서

결제 후 계정 가입을 제안할 수 있습니다. 이 시점에서는 계정 설정에 필요한 대부분의 데이터를 이미 확보한 상태이므로 사용자가 쉽고 빠르게 계정을 생성할 수 있어야 합니다.

결제 후 가입을 제공하는 경우 사용자가 방금 구매한 항목이 새로 만든 계정에 연결되어 있어야 합니다.

결제 진행률 표시

진행 상황을 표시하고 다음에 해야 할 작업을 명확히 하여 결제 프로세스를 덜 복잡하게 만들 수 있습니다. 아래 동영상은 영국의 소매업체인 johnlewis.com에서 이를 달성한 방법을 보여줍니다.

결제 진행률을 표시합니다.

추진력을 유지해야 합니다. 결제의 각 단계에 대해 지금 해야 할 작업과 다음에 수행할 결제 단계를 명확하게 나타내는 페이지 제목과 설명 버튼 값을 사용합니다.

양식 버튼에 다음 단계를 나타내는 의미 있는 이름을 지정합니다.

양식 입력에 enterkeyhint 속성을 사용하여 모바일 키보드의 Enter 키 라벨을 설정합니다. 예를 들어 다중 페이지 양식에서는 enterkeyhint="previous" 및 enterkeyhint="next"를, 양식의 최종 입력에는 enterkeyhint="done", 검색 입력에는 enterkeyhint="search"를 사용합니다.

Android에서 키 입력 버튼: '다음' 및 '완료'

enterkeyhint 속성은 Android 및 iOS에서 지원됩니다. enterkeyhint 설명에서 자세한 내용을 확인할 수 있습니다.

사용자가 최종 결제 단계에서 결제 과정 간에 쉽게 오가며 주문을 쉽게 조정할 수 있어야 합니다. 제한된 요약뿐만 아니라 주문의 전체 세부정보를 표시합니다. 사용자가 결제 페이지에서 항목 수량을 쉽게 조정할 수 있습니다. 결제 시 우선순위는 전환 진행에 방해가 되지 않도록 하는 것입니다.

불필요한 부분 삭제

제품 프로모션과 같은 시각적인 요소와 주의를 분산시키는 요소를 제거하여 잠재적인 이탈 지점을 줄이세요. 성공을 거둔 많은 소매업체에서는 결제에서 탐색 및 검색을 없애기도 합니다.

결제를 위한 검색, 탐색, 기타 방해 요소가 삭제되었습니다.

여정에 집중하세요. 지금은 사용자가 다른 것을 하도록 유인할 때가 아닙니다.

고객의 구매 완료를 방해하지 마세요.

재사용자의 경우 확인할 필요가 없는 데이터를 숨겨 결제 절차를 훨씬 더 간소화할 수 있습니다. 예를 들어 배송지 주소를 양식이 아닌 일반 텍스트로 표시하고 사용자가 링크를 통해 변경할 수 있도록 합니다.

고객이 확인할 필요가 없는 데이터를 숨깁니다.

이름과 주소를 쉽게 입력

필요한 데이터만 요청

이름 및 주소 양식의 코딩을 시작하기 전에 필요한 데이터를 이해해야 합니다. 필요하지 않은 데이터는 요청하지 마세요. 양식의 복잡성을 줄이는 가장 간단한 방법은 불필요한 필드를 삭제하는 것입니다. 이는 고객 개인 정보 보호에도 도움이 되며 백엔드 데이터 비용 및 법적 책임을 줄일 수 있습니다.

단일 이름 입력 사용

이름, 성, 경칭, 기타 이름 부분을 별도로 저장해야 할 합당한 이유가 없는 한 사용자가 단일 입력을 사용하여 이름을 입력할 수 있도록 허용합니다. 단일 이름 입력을 사용하면 양식이 덜 복잡해지고, 잘라내어 붙여넣기가 가능하며, 자동 완성이 더 간단해집니다.

특히 그럴 만한 이유가 없다면 접두사나 직책 (예: Mrs, Dr 또는 Lord)에 별도의 입력을 추가하지 마세요. 사용자는 원하는 경우 자신의 이름과 함께 입력할 수 있습니다. 또한 honorific-prefix 자동 완성은 현재 대부분의 브라우저에서 작동하지 않으므로 이름 접두사 또는 제목 필드를 추가하면 대부분의 사용자에게 주소 양식 자동 완성 환경이 중단됩니다.

이름 자동 완성 사용 설정

전체 이름에 name를 사용합니다.

<input autocomplete="name" ...>

이름 부분을 분할해야 할 합당한 이유가 있는 경우에는 적절한 자동 완성 값을 사용해야 합니다.

• honorific-prefix
• given-name
• nickname
• additional-name-initial
• additional-name
• family-name
• honorific-suffix

국제 이름 허용

이름 입력의 유효성을 검사하거나 이름 데이터에 허용되는 문자를 제한할 수 있습니다. 그러나 알파벳에서는 최대한 제한적이지 않아야 합니다. 자신의 이름이 '잘못됨'이라는 말은 무례합니다.

확인을 위해 라틴 문자와만 일치하는 정규 표현식은 사용하지 마세요. 라틴어에서만 라틴 문자를 사용하는 경우 라틴 알파벳이 아닌 문자가 포함된 이름이나 주소를 사용하는 사용자는 제외됩니다. 대신 유니코드 문자 일치를 허용하고 백엔드에서 안전하게 유니코드를 입력과 출력으로 모두 지원하는지 확인합니다. 정규 표현식의 유니코드는 최신 브라우저에서 잘 지원됩니다.

금지사항

<!-- Names with non-Latin characters (such as Françoise or Jörg) are 'invalid'. -->
<input pattern="[\w \-]+" ...>

의견을 제시하지

<!-- Accepts Unicode letters. -->
<input pattern="[\p{L} \-]+" ...>

유니코드 문자 일치와 라틴어 전용 문자 일치 비교

참고: 다국어화 및 현지화에 관한 자세한 내용은 아래를 참고하세요. 단, 사용자가 있는 모든 지역에서 양식에서 이름을 사용할 수 있는지 확인하세요. 예를 들어, 일본어 이름의 경우 소리 나는 대로 이름을 위한 필드를 사용하는 것이 좋습니다. 이렇게 하면 고객 지원 담당자가 전화 상에서 고객의 이름을 말하는 데 도움이 됩니다.

다양한 주소 형식 허용

주소 양식을 디자인할 때는 단일 국가 내에서도 매우 다양한 주소 형식을 염두에 두어야 합니다. '일반' 주소를 가정하지 않도록 주의하세요. 잘 모르겠다면 UK Address Oddities!를 살펴보세요.

유연한 주소 양식 만들기

사용자가 주소를 맞지 않는 양식 입력란에 직접 입력하도록 강요하지 마세요.

예를 들어, 많은 주소가 이러한 형식을 사용하지 않고 불완전한 데이터로 인해 브라우저 자동 완성이 손상될 수 있으므로 별도의 입력에서 번지수와 도로명을 그대로 사용하면 안 됩니다.

required 주소 입력란에는 특히 주의하세요. 예를 들어 영국의 대도시에는 카운티가 없지만 많은 사이트에서는 카운티를 입력해야 하는 경우가 많습니다.

유연한 주소 입력란 2개를 사용하면 다양한 주소 형식에 사용할 수 있습니다.

<input autocomplete="address-line-1" id="address-line1" ...>
<input autocomplete="address-line-2" id="address-line2" ...>

일치하는 라벨 추가:

<label for="address-line-1">
Address line 1 (or company name)
</label>
<input autocomplete="address-line-1" id="address-line1" ...>

<label for="address-line-2">
Address line 2 (optional)
</label>
<input autocomplete="address-line-2" id="address-line2" ...>

아래에 삽입된 데모를 리믹스하고 편집하여 시도해 볼 수 있습니다.

주의: 연구에 따르면 주소 입력란 2는 사용자에게 문제가 될 수 있습니다. 주소 양식을 디자인할 때는 단일 textarea (아래 참고) 또는 다른 옵션을 사용하는 등의 대안을 고려해야 합니다.

주소에 단일 텍스트 영역 사용 고려

가장 유연한 주소 옵션은 단일 textarea를 제공하는 것입니다.

textarea 접근 방식은 모든 주소 형식에 적합하며 잘라내어 붙여넣기에 적합하지만 데이터 요구사항에 맞지 않을 수 있으며 사용자가 이전에 address-line1 및 address-line2로 양식만 사용한 경우 자동 완성을 놓칠 수 있다는 점에 유의하세요.

텍스트 영역의 경우 street-address를 자동 완성 값으로 사용합니다.

다음은 주소에 단일 textarea를 사용하는 방법을 보여주는 양식의 예입니다.

주소 양식 다국어화 및 현지화

주소 양식에서는 사용자의 위치에 따라 다국어화 및 현지화를 고려해야 합니다.

주소 부분의 이름 지정은 동일한 언어 내에서도 주소 형식뿐만 아니라 다양하다는 점에 유의하세요.

    ZIP code: US
 Postal code: Canada
    Postcode: UK
     Eircode: Ireland
         PIN: India

주소에 맞지 않거나 예상한 단어가 사용되지 않는 양식이 표시되면 짜증을 내거나 당혹스러울 수 있습니다.

여러 언어에 맞게 주소 양식을 맞춤설정해야 할 수도 있지만 위에서 설명한 대로 양식의 유연성을 최대화하는 기법을 사용하는 것도 충분할 수 있습니다. 주소 양식을 현지화하지 않는 경우 다양한 주소 형식을 처리하기 위한 주요 우선순위를 이해해야 합니다. * 도로 이름이나 번지를 입력하는 등 주소 부분이 지나치게 구체적이지 않습니다. * 가능하면 필드를 required로 만들지 마세요. 예를 들어 많은 국가의 주소에는 우편번호가 없으며 시골 주소에는 거리나 도로 이름이 없을 수도 있습니다. * 포괄적 이름 사용: '국가'가 아닌 '국가/지역', 'ZIP'이 아닌 '우편번호'

유연하게 사용하세요. 위의 간단한 주소 양식 예는 많은 언어로 '충분히' 작동하도록 조정할 수 있습니다.

우편번호 주소 조회 방지

일부 웹사이트에서는 우편번호 또는 우편번호를 기준으로 주소를 조회할 수 있습니다. 일부 사용 사례에서는 이렇게 하는 것이 합리적일 수 있지만 잠재적인 단점을 알고 있어야 합니다.

우편번호 주소 추천은 일부 국가에서 작동하지 않으며, 일부 지역에서는 우편번호에 다수의 주소를 포함할 수 있습니다.

우편번호에는 많은 주소가 포함되어 있을 수 있습니다.

사용자는 긴 주소 목록에서 선택하기가 어렵습니다. 특히 모바일에서 바쁘거나 스트레스를 받는 경우에는 더욱 그렇습니다. 사용자가 자동 완성을 사용하고 탭 또는 클릭 한 번으로 전체 주소를 입력하도록 하면 더 쉽고 오류가 적게 발생할 수 있습니다.

이름을 하나만 입력하면 탭 한 번으로 주소를 입력할 수 있습니다.

결제 양식 간소화

결제 양식은 결제 프로세스에서 가장 중요한 단일 부분입니다. 결제 양식의 디자인이 잘못되어 장바구니 이탈의 일반적인 원인입니다. 세부적인 부분: 사소한 문제로 인해 사용자가 구매를 포기하도록 유도할 수 있으며 특히 모바일에서 더욱 그렇습니다. 사용자가 데이터를 최대한 쉽게 입력할 수 있도록 양식을 설계해야 합니다.

사용자가 결제 데이터를 다시 입력하지 않도록 지원

결제 카드 번호, 카드에 표시된 이름, 만료 월과 연도를 포함하여 결제 카드 양식에 적절한 autocomplete 값을 추가해야 합니다.

• cc-number
• cc-name
• cc-exp-month
• cc-exp-year

이를 통해 브라우저에서 결제 카드 세부정보를 안전하게 저장하고 양식 데이터를 올바르게 입력하여 사용자를 지원할 수 있습니다. 자동 완성을 사용하지 않으면 사용자가 결제 카드 세부정보의 물리적 기록을 유지하거나 결제 카드 데이터를 기기에 안전하지 않게 저장할 가능성이 큽니다.

주의: 항상 결제 카드 번호를 통해 추론할 수 있으므로 결제 카드 유형 선택기를 추가하지 마세요.

결제 카드 날짜에 맞춤 요소를 사용하지 마세요.

올바르게 설계되지 않으면 맞춤 요소가 자동 완성을 중단하여 결제 흐름을 방해할 수 있으며 이전 브라우저에서 작동하지 않습니다. 자동 완성에서 다른 모든 결제 카드 세부정보가 제공되지만 맞춤 요소에 자동 완성이 작동하지 않아 사용자가 만료일을 조회하기 위해 실제 결제 카드를 찾아야 하는 경우 판매 기회를 잃을 수 있습니다. 대신 표준 HTML 요소를 사용하고 그에 따라 스타일을 지정하세요.

자동 완성에서 만료일을 제외한 모든 필드를 채웠습니다.

결제 카드 및 전화번호에 단일 입력 사용

결제 카드 및 전화번호의 경우 단일 입력을 사용합니다. 번호를 여러 개로 나누지 마세요. 이렇게 하면 사용자가 데이터를 더 쉽게 입력하고 유효성 검사를 간소화할 수 있으며 브라우저에서 자동 완성을 사용할 수 있습니다. PIN 및 은행 코드와 같은 다른 숫자 데이터에 대해서도 동일한 작업을 수행하는 것이 좋습니다.

신용카드 번호를 여러 번 입력하지 마세요.

신중하게 검증하기

실시간으로 그리고 양식을 제출하기 전에 데이터 입력의 유효성을 검사해야 합니다. 이렇게 하는 한 가지 방법은 결제 카드 입력에 pattern 속성을 추가하는 것입니다. 사용자가 유효하지 않은 값으로 결제 양식을 제출하려고 하면 브라우저에 경고 메시지가 표시되고 입력에 포커스가 설정됩니다. JavaScript는 필요하지 않습니다.

그러나 pattern 정규 표현식은 14자리(또는 20자리 이상)까지 결제 카드 번호 길이 범위를 처리할 수 있을 만큼 유연해야 합니다. 결제 카드 번호 구조에 대한 자세한 내용은 LDAPwiki를 참조하세요.

사용자가 새 결제 카드 번호를 입력할 때 공백을 포함할 수 있도록 허용합니다. 이는 실물 카드에 숫자가 표시되는 방식입니다. 이렇게 하면 사용자에게 더 친숙하고("사용자가 잘못된 작업을 했습니다"라고 알릴 필요가 없음), 전환 흐름이 중단될 가능성이 적으며, 처리하기 전에 숫자에서 공백을 간단하게 삭제할 수 있습니다.

참고: 신원 확인 또는 결제 인증에 일회용 비밀번호를 사용하는 것이 좋습니다. 하지만 사용자에게 코드를 직접 입력하거나 이메일 또는 SMS 문자 메시지로 복사하도록 요청하면 오류가 발생하기 쉬우며 불편을 야기할 수 있습니다. SMS OTP 양식 권장사항에서 일회용 비밀번호를 사용 설정하는 더 좋은 방법을 알아보세요.

다양한 기기, 플랫폼, 브라우저, 버전에서 테스트

양식 요소의 기능과 모양이 다양할 수 있고 표시 영역 크기의 차이로 인해 위치에 문제가 생길 수 있으므로 사용자에게 가장 일반적인 플랫폼에서 주소 및 결제 양식을 테스트하는 것이 특히 중요합니다. BrowserStack은 다양한 기기와 브라우저에서 오픈소스 프로젝트를 위한 무료 테스트를 지원합니다.

iPhone 7과 iPhone 11의 동일한 페이지.
결제 완료 버튼이 숨겨지지 않도록 작은 모바일 표시 영역의 패딩을 줄입니다.

분석 및 RUM 구현

로컬에서 사용성과 성능을 테스트하면 도움이 될 수 있지만 사용자가 결제 및 주소 양식을 경험하는 방식을 제대로 이해하려면 실제 데이터가 필요합니다.

이를 위해서는 결제 페이지 로드 시간, 결제 완료 시간 등 실제 사용자 경험에 관한 데이터인 분석 및 실제 사용자 모니터링이 필요합니다.

• 페이지 분석: 양식이 있는 모든 페이지의 조회수, 이탈률, 이탈수입니다.
• 상호작용 분석: 목표 유입경로 및 이벤트는 사용자가 결제 흐름을 이탈하는 위치와 양식과 상호작용할 때 취하는 액션을 나타냅니다.
• 웹사이트 성능: 사용자 중심 측정항목을 통해 결제 페이지 로드가 느린지 여부와 로드 속도가 느린 경우 원인을 확인할 수 있습니다.

페이지 분석, 상호작용 분석, 실제 사용자 실적 측정은 서버 로그, 전환 데이터, A/B 테스트와 결합될 때 특히 유용하므로 할인 코드를 통해 수익을 증대하는지, 양식 레이아웃 변경이 전환을 개선하는지 등의 질문에 답할 수 있습니다.

이렇게 하면 노력의 우선순위를 정하고 변화를 주며 성공에 보답할 수 있는 탄탄한 기반을 마련할 수 있습니다.

계속 학습하기

• 로그인 양식 권장사항
• 가입 양식 권장사항
• WebOTP API로 웹에서 전화번호 인증하기
• 멋진 양식 만들기
• 모바일 양식 디자인 권장사항
• 더 많은 기능을 갖춘 양식 컨트롤
• 액세스 가능한 양식 만들기
• Credential Management API를 사용한 가입 흐름 간소화
• Frank의 Compulsive Guide to Postal Addresses에서는 200개 이상의 국가에서 주소 형식에 관한 유용한 링크와 광범위한 안내를 제공합니다.
• 국가 목록에는 국가 코드와 이름을 여러 언어로 여러 형식으로 다운로드할 수 있는 도구가 있습니다.

사진: @rupixen, Unsplash