결제 양식은 결제 프로세스에서 가장 중요한 부분입니다. 결제 양식 디자인이 좋지 않으면 장바구니 이탈이 발생하는 경우가 많습니다.
사용자가 데스크톱과 모바일에서 최대한 쉽게 결제 세부정보를 입력할 수 있는 양식을 만듭니다. 양식이 자동 완성, 유효성 검사, 데이터 입력 제약 조건에 대한 내장 브라우저 기능을 최대한 활용하도록 합니다.
구현 방법
아래에는 성공적인 결제 양식을 만들기 위한 가장 중요한 가이드라인이 설명되어 있습니다.
의미 있고 유효한 HTML 사용
양식 작성을 위해 빌드된 요소와 속성을 최대한 활용하세요.
<form>,<input>,<label>,<button>type,autocomplete,inputmode
이를 통해 내장된 브라우저 기능을 사용 설정하고 접근성을 개선하며 마크업에 의미를 더할 수 있습니다.
<label> 요소를 사용하여 데이터 입력을 위한 양식 입력란에 라벨을 지정합니다.
<input>, <select> 또는 <textarea>에 라벨을 지정하려면 <label>를 사용합니다. 라벨의 for 속성에 입력의 id과 동일한 값을 지정하여 라벨을 입력과 연결합니다.
HTML 속성 최대한 활용하기
적절한 <input> 요소 <type> 속성을 사용하여 모바일에서 올바른 키보드를 제공하고 브라우저에서 기본 제공되는 기본 유효성 검사를 사용 설정하여 사용자가 데이터를 쉽게 입력할 수 있도록 합니다.
이메일 주소에는 항상 type="email"를, 전화번호에는 type="tel"를 사용합니다.
<!-- type="email"/"tel" gives mobile users the right keyboard and enables built-in validation -->
<input type="email" id="email" name="email" autocomplete="email" required>
<input type="tel" id="phone" name="phone" autocomplete="tel">
접근성을 개선하고 사용자가 데이터를 다시 입력하지 않도록 모든 <input>, <select>, <textarea> 요소에는 적절한 autocomplete 속성이 있어야 합니다(SHOULD).
유용한 버튼 만들기
버튼에는 <button>을 사용합니다. <input type="submit">를 사용할 수도 있지만 div 또는 버튼 역할을 하는 다른 임의의 요소를 사용해서는 안 됩니다. 버튼 요소는 접근성 있는 동작, 기본 제공 양식 제출 기능을 제공하며 쉽게 스타일을 지정할 수 있습니다.
각 양식 제출 버튼에 해당 버튼의 기능을 설명하는 값을 지정합니다. 결제 단계마다 진행 상황을 보여주고 다음 단계를 명확하게 알려주는 설명이 포함된 클릭 유도 문구를 사용하세요. 예를 들어 배송지 주소 양식의 제출 버튼에 계속 또는 저장 대신 결제 진행이라는 라벨을 지정합니다.
가능한 경우 단일 이름 입력 사용
이름, 성, 경칭 또는 기타 이름 부분을 별도로 저장해야 하는 타당한 이유가 없는 한 사용자가 단일 입력을 사용하여 이름을 입력할 수 있도록 허용합니다. 단일 이름 입력을 사용하면 양식이 덜 복잡해지고 잘라내기 및 붙여넣기가 가능하며 자동 완성이 더 간단해집니다.
국제 이름을 허용합니다. 유효성 검사를 위해 라틴 문자만 일치하는 정규 표현식을 사용하지 마세요. 라틴어 전용은 라틴 알파벳이 아닌 문자가 포함된 이름이나 주소를 사용하는 사용자를 제외합니다. 대신 유니코드 문자 일치를 허용하고 백엔드가 입력과 출력 모두에서 유니코드를 안전하게 지원하는지 확인하세요. 정규 표현식의 유니코드는 최신 브라우저에서 잘 지원됩니다.
다양한 주소 형식 허용
결제 양식에 주소 양식 입력란을 추가할 때는 단일 국가 내에서도 다양한 주소 형식이 존재한다는 점에 유의하세요. '일반적인' 주소에 대해 추측하지 마세요.
데이터 요구사항 내에서 가능한 경우 주소에 단일 <textarea> 요소를 사용하는 것이 좋습니다. 다양한 국내외 주소 형식에 가장 유연한 옵션입니다.
청구서 수신 주소에 자동 완성 사용
기본적으로 청구서 수신 주소를 배송지 주소와 동일하게 설정합니다. 양식에 청구서 수신 주소를 표시하는 대신 청구서 수신 주소를 수정할 수 있는 링크를 제공하거나 요약 및 세부정보 요소를 사용하여 시각적 복잡성을 줄입니다.
사용자가 데이터를 두 번 이상 입력하지 않아도 되도록 배송지 주소와 마찬가지로 청구서 수신 주소에 적절한 자동 완성 값을 사용합니다. 여러 섹션에서 이름이 같은 입력에 다른 값이 있는 경우 자동 완성 속성에 접두사 단어를 추가합니다. 예를 들면 다음과 같습니다.
<!-- Prefix with shipping or billing; note that the valid token is address-line1 (no hyphen before the digit) -->
<input autocomplete="shipping address-line1" ...>
...
<input autocomplete="billing address-line1" ...>
결제 진행 상황 표시
결제 단계마다 페이지 제목과 설명이 포함된 버튼 값을 사용하여 현재 수행해야 할 작업과 다음 결제 단계를 명확히 합니다.
양식 입력에 enterkeyhint 속성을 사용하여 모바일 키보드 Enter 키 라벨을 설정합니다. 예를 들어 여러 페이지로 구성된 양식 내에서 enterkeyhint="previous" 및 enterkeyhint="next"를 사용하고, 양식의 최종 입력에는 enterkeyhint="done"를, 검색 입력에는 enterkeyhint="search"를 사용합니다.
사용자가 결제 데이터를 다시 입력하지 않도록 지원
결제 카드 양식에 적절한 autocomplete 값을 추가해야 합니다. 자동 완성이 없으면 사용자가 결제 카드 세부정보를 실물로 기록하거나 안전하지 않게 저장할 수 있습니다.
<!-- cc-number tells autofill this is a card number, not a generic number field -->
<!-- inputmode="numeric" gives a numeric keyboard without the increment/decrement spinner -->
<!-- DO NOT use type="number" — it adds increment/decrement controls and strips leading zeros -->
<input id="cc-number" name="cc-number" type="text" autocomplete="cc-number"
inputmode="numeric" maxlength="19" pattern="[\d ]{13,19}" required>
<!-- cc-name autofills with the name exactly as it appears on the card; Unicode pattern allows international names -->
<input id="cc-name" name="cc-name" type="text" autocomplete="cc-name"
maxlength="50" pattern="[\p{L} \-\.]+" required>
<!-- cc-exp autofills the full expiry date as MM/YY -->
<!-- MANDATORY: Place format hints above the input so autocomplete popovers or virtual keyboards do not obscure them during editing -->
<span id="exp-hint" class="hint">Format: MM/YY</span>
<input id="cc-exp" name="cc-exp" type="text" autocomplete="cc-exp"
aria-describedby="exp-hint" maxlength="5" required>
<!-- cc-csc autofills the security code; DO NOT use type="password" here -->
<input id="cc-csc" name="cc-csc" type="text" autocomplete="cc-csc"
inputmode="numeric" maxlength="4" pattern="[0-9]{3,4}" required>
입력란 위에 형식 힌트 표시
필드에 필수 형식 (예: MM/YY 만료일)이 있는 경우 입력 위의 표시되는 요소에 힌트를 넣고 위의 cc-exp 예와 같이 aria-describedby를 사용하여 두 요소를 연결합니다. 입력란 아래에 있는 힌트는 사용자가 필요로 하는 순간에 모바일 키보드나 자동 완성 팝오버에 의해 쉽게 가려집니다.
placeholder 속성을 유일한 형식 힌트로 사용하지 말고 <label> 대신 사용하지 마세요. 플레이스홀더 텍스트는 사용자가 입력을 시작하는 즉시 숨겨지므로 수정 중에 확인할 수 없습니다. 자리표시자는 라벨 및 영구 힌트와 함께 추가 단서로 사용해도 괜찮습니다.
보안 코드를 마스킹하지 않음
카드 보안 코드에는 type="password"가 아닌 inputmode="numeric"와 함께 type="text"를 사용합니다. 사용자는 마스킹된 3자리 또는 4자리 코드의 오타를 확인할 수 없으므로 결제가 거부될 때까지 잘못 입력된 숫자를 발견하지 못합니다. 또한 코드는 사용자가 소지한 카드에 인쇄되어 있으므로 마스킹은 보호 기능을 거의 제공하지 않습니다.
결제 카드 및 전화번호에 단일 입력 사용
결제 카드 및 전화번호의 경우 단일 입력을 사용합니다. 번호를 여러 부분으로 분할하지 마세요. 이렇게 하면 사용자가 데이터를 더 쉽게 입력할 수 있고, 유효성 검사가 더 간단해지며, 브라우저에서 자동 완성을 사용할 수 있습니다. PIN 및 은행 코드와 같은 다른 숫자 데이터에도 동일한 작업을 수행하는 것이 좋습니다.
신중하게 검증하기
실시간으로, 그리고 양식을 제출하기 전에 데이터 입력을 검증해야 합니다. 이를 위한 한 가지 방법은 결제 카드 입력에 패턴 속성을 추가하는 것입니다. 사용자가 잘못된 값으로 결제 양식을 제출하려고 하면 브라우저에 경고 메시지가 표시되고 입력에 포커스가 설정됩니다.
하지만 패턴 정규 표현식은 14자리 (또는 그 이하)에서 20자리 (또는 그 이상)까지의 결제 카드 번호 길이를 처리할 수 있을 만큼 유연해야 합니다. 카드 보안 코드 (CSC, CVC, CVV 또는 기타 이름으로도 알려짐)는 3자리 또는 4자리 숫자로 구성됩니다.
실물 카드에 번호가 표시되는 방식이므로 사용자가 새 결제 카드 번호를 입력할 때 공백을 포함할 수 있도록 허용합니다. 이렇게 하면 사용자에게 더 친숙하고('잘못된 작업을 수행했다'고 알릴 필요가 없음) 전환 흐름을 중단할 가능성이 적으며 처리 전에 숫자의 공백을 쉽게 삭제할 수 있습니다.
사용자가 실수로 데이터 필드를 누락하지 않도록 지원
필수 입력란에 required 속성을 추가합니다. 최신 브라우저는 누락된 데이터에 대해 자동으로 메시지를 표시하고 포커스를 설정합니다.
대체 전략
자동 완성은 점진적 개선입니다. 자동 완성을 지원하지 않는 브라우저에서는 사용자가 결제 세부정보를 직접 입력해야 합니다. 의미론적 HTML 제약 조건 (예: type, inputmode, pattern, required)은 사용자 입력을 검증하고 올바른 가상 키보드를 제공하는 데 계속 적절하게 작동합니다.