결제 및 주소 양식 권장사항

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

Sam Dutton

잘 설계된 양식은 사용자에게 도움이 되며 전환율을 높입니다. 작은 수정사항 하나가 큰 차이를 만들 수 있습니다.

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

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

체크리스트

• 의미 있는 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>로 래핑하지 않고 JavaScript로만 데이터 제출을 처리하고 싶을 수 있습니다.

그렇지 않습니다.

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

사용자 입력을 위한 페이지 구성요소가 두 개 이상인 경우 각각을 자체 <form> 요소에 배치해야 합니다. 예를 들어 검색과 가입이 같은 페이지에 있는 경우 각각을 자체 <form>에 배치합니다.

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

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

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

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

단일 입력에 단일 라벨 사용: 하나의 라벨로 여러 입력에 라벨을 지정하지 마세요. 이 방법은 브라우저와 스크린 리더에 가장 적합합니다. 라벨을 탭하거나 클릭하면 포커스가 연결된 입력란으로 이동하며 스크린 리더는 라벨 또는 라벨의 입력란에 포커스가 있을 때 라벨 텍스트를 알려줍니다.

유용한 버튼 만들기

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

각 양식 제출 버튼에 기능을 나타내는 값을 지정합니다. 결제 단계마다 진행 상황을 보여주고 다음 단계를 명확하게 하는 설명이 포함된 클릭 유도 문구를 사용하세요. 예를 들어 배송지 주소 양식의 제출 버튼에 계속 또는 저장이 아닌 결제 진행이라는 라벨을 지정합니다.

사용자가 제출 버튼을 탭하거나 클릭한 후에는 제출 버튼을 사용 중지하는 것이 좋습니다. 특히 사용자가 결제하거나 주문하는 경우 더욱 그렇습니다. 버튼이 제대로 작동하더라도 버튼을 반복적으로 클릭하는 사용자가 많습니다. 이로 인해 결제가 중단되고 서버 부하가 늘어날 수 있습니다.

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

HTML 속성 최대한 활용하기

사용자가 데이터를 쉽게 입력할 수 있게 합니다.

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

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

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

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

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

양식 필드에 적절한 자동 완성 값을 사용할 수 있는 경우 이를 사용해야 합니다. MDN 웹 문서에서 값의 전체 목록과 올바르게 사용하는 방법을 확인하세요.

안정적인 값

청구서 수신 주소

기본적으로 청구서 수신 주소는 배송지 주소와 동일하도록 설정합니다. 결제 주소를 양식에 표시하는 대신 결제 주소를 수정할 수 있는 링크를 제공하거나 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 유형의 입력에 대한 기본 유효성 검사도 실행합니다.

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

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

또한 JavaScript를 사용하여 사용자가 데이터를 입력하는 동안과 양식 제출 시 더 강력한 유효성 검사를 실행해야 합니다. Constraint Validation API(광범위하게 지원됨)를 사용하여 내장 브라우저 UI를 사용하여 맞춤 유효성 검사를 추가하여 포커스를 설정하고 메시지를 표시합니다.

더욱 복잡한 실시간 유효성 검사에 JavaScript 사용에서 자세히 알아보세요.

사용자가 필수 데이터를 누락하지 않도록 지원

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

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

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

결제 간소화

모바일 상거래 격차 해소

사용자에게 피로 예산이 있다고 가정해 보겠습니다. 다 사용하면 사용자가 이탈하게 됩니다.

특히 모바일에서 불편을 줄이고 집중력을 유지해야 합니다. 많은 사이트에서 모바일에서 트래픽이 더 많지만 데스크톱에서 전환이 더 많습니다. 이를 모바일 상거래 격차라고 합니다. 고객이 데스크톱에서 구매를 완료하는 것을 선호할 수도 있지만, 모바일 전환율이 낮은 것은 사용자 환경이 좋지 않기 때문이기도 합니다. 따라서 모바일에서 발생하는 전환 손실을 최소화하고 데스크톱에서 전환수를 최대화해야 합니다. 연구에 따르면 더 나은 모바일 양식 환경을 제공할 수 있는 큰 기회가 있습니다.

무엇보다도 길어 보이고 복잡하며 방향성이 없는 양식은 사용자가 포기할 가능성이 더 높습니다. 이는 특히 사용자가 작은 화면을 사용하거나, 방해를 받거나, 서두르고 있을 때 더욱 중요합니다. 최대한 적은 데이터를 요청합니다.

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

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

에서 확인합니다.

결제 후 계정 가입을 제안할 수 있습니다. 이 시점에서는 계정을 설정하는 데 필요한 데이터가 이미 대부분 있으므로 사용자가 쉽고 빠르게 계정을 만들 수 있습니다.

결제 진행률 표시

진행 상황을 표시하고 다음에 해야 할 일을 명확하게 나타내면 결제 프로세스의 복잡성을 줄일 수 있습니다. 아래 동영상에서는 영국 소매업체 johnlewis.com이 이를 실행하는 방법을 보여줍니다.

계속해서 기세를 유지해야 합니다. 결제 단계별로 지금 해야 할 일과 다음 결제 단계를 명확하게 보여주는 페이지 제목과 설명성 있는 버튼 값을 사용하세요.

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

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} \-]+" ...>

다양한 주소 형식 허용

주소 양식을 디자인할 때는 한 국가 내에서도 주소 형식이 다양하다는 점을 고려하세요. '일반적인' 주소에 관해 추측하지 않도록 주의하세요. (확실하지 않다면 영국 주소의 특이사항을 참고하세요.)

주소 양식을 유연하게 만들기

사용자가 주소를 맞추기 위해 양식 입력란에 주소를 욱여넣도록 강요하지 마세요.

예를 들어 많은 주소에서 이 형식을 사용하지 않으며 불완전한 데이터는 브라우저 자동 완성을 중단할 수 있으므로 집 번호와 도로명을 별도의 입력란에 입력하도록 강요하지 마세요.

특히 required 주소 필드에 주의하세요. 예를 들어 영국의 대도시 주소에는 카운티가 없지만 많은 사이트에서 사용자에게 여전히 군을 입력해야 합니다.

두 개의 유연한 주소 입력란을 사용하면 다양한 주소 형식에 적합할 수 있습니다.

<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" ...>

아래에 삽입된 데모를 리믹스하고 수정하여 이를 사용해 볼 수 있습니다.

주소에 단일 textarea를 사용하는 것이 좋습니다.

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

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

textarea의 경우 자동 완성 값으로 street-address를 사용합니다.

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

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

주소 양식의 경우 사용자의 위치에 따라 다국어화 및 현지화를 고려하는 것이 특히 중요합니다.

주소 부분의 이름은 같은 언어 내에서도 주소 형식뿐만 아니라 이름도 달라질 수 있습니다.

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

주소에 맞지 않거나 예상한 단어를 사용하지 않는 양식이 표시되면 불편하거나 당혹스러울 수 있습니다.

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

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

우편번호 주소 조회는 사용하지 않는 것이 좋습니다.

일부 웹사이트에서는 서비스를 사용하여 우편번호 또는 우편번호를 기반으로 주소를 조회합니다. 이는 일부 사용 사례에서는 적절할 수 있지만 잠재적인 단점을 인식해야 합니다.

우편번호 주소 추천은 일부 국가에서만 작동하며, 일부 지역에서는 우편번호에 잠재적인 주소가 다량 포함될 수 있습니다.

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

결제 양식 간소화

결제 양식은 결제 과정에서 가장 중요한 부분입니다. 결제 양식 설계가 잘못되면 장바구니 이탈이 발생하는 경우가 많습니다. 디테일이 중요: 작은 글리치가 특히 모바일에서 사용자의 구매를 포기하게 만들 수 있습니다. 개발자는 사용자가 최대한 쉽게 데이터를 입력할 수 있도록 양식을 설계해야 합니다.

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

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

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

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

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

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

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

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

신중하게 검증

실시간으로 데이터 입력을 검증하고 양식 제출 전에 다시 검증해야 합니다. 이를 위한 한 가지 방법은 결제 카드 입력란에 pattern 속성을 추가하는 것입니다. 사용자가 잘못된 값이 있는 결제 양식을 제출하려고 하면 브라우저에서 경고 메시지를 표시하고 입력에 포커스를 설정합니다. JavaScript가 필요하지 않습니다.

하지만 pattern 정규 표현식은 다양한 길이의 결제 카드 번호(14자리 이하~20자리 이상)를 처리할 만큼 유연해야 합니다. 결제 카드 번호 구조에 대한 자세한 내용은 LDAPwiki를 참고하세요.

사용자가 새 결제 카드 번호를 입력할 때 카드에 숫자가 표시되는 방식과 같이 공백을 포함하도록 허용합니다. 이렇게 하면 사용자에게 더 친절하고('잘못한 것이 있습니다'라고 말하지 않아도 됨), 전환 흐름이 중단될 가능성이 줄어들며, 처리하기 전에 숫자의 공백을 간단하게 삭제할 수 있습니다.

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

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

분석 및 RUM 구현

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

이를 위해서는 결제 페이지 로드에 걸리는 시간이나 결제를 완료하는 데 걸리는 시간과 같은 실제 사용자 경험에 대한 데이터인 분석 및 실제 사용자 모니터링이 필요합니다.

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

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

이를 통해 노력의 우선순위를 정하고, 변화를 주며, 성공에 보상을 제공할 수 있는 탄탄한 기반을 마련할 수 있습니다.

계속 학습

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

Unsplash의 @rupixen님 제공 사진