주소를 열 번이나 다시 입력하는 것은 피곤한 일입니다. 브라우저와 개발자는 사용자가 데이터를 더 빠르게 입력하고 데이터를 다시 입력하지 않도록 지원할 수 있습니다.
이 모듈에서는 자동 완성의 작동 방식과 autocomplete 및 기타 요소 속성을 통해 브라우저가 적절한 자동 완성 옵션을 제공하도록 하는 방법을 알아봅니다.
자동 완성은 어떻게 작동하나요?
자동 완성 소개에서 자동 완성의 기본사항을 이미 배웠습니다. 하지만 브라우저에서 자동 완성을 제공하는 이유는 무엇일까요?
양식 작성은 흥미로운 활동은 아니지만 자주 하는 작업입니다. 시간이 지남에 따라 많은 양식을 작성하게 되며, 동일한 데이터를 입력하는 경우가 많습니다. 사용자가 양식을 더 빠르게 작성할 수 있도록 지원하는 한 가지 방법은 이전에 입력한 데이터로 양식 필드를 자동으로 채우는 옵션을 제공하는 것입니다. 이것이 자동 완성입니다.
브라우저는 어떤 데이터를 자동 완성해야 하는지 어떻게 알 수 있나요? 예시 양식 필드를 확인해 보세요.
<label for="name">Name</label>
<input name="name" id="name">
이 양식 필드를 제출하면 브라우저가 값 (입력한 데이터)을 name 속성 (이름)의 값과 함께 저장합니다. 일부 브라우저는 데이터를 저장하고 입력할 때 id 속성도 확인합니다.
몇 주 후에 다른 웹사이트에서 다른 양식을 작성한다고 가정해 보겠습니다. 이 사이트에는 name="name"가 있는 양식 필드도 포함되어 있습니다. 이제 이름 값이 이미 저장되어 있으므로 브라우저에서 자동 완성을 제공할 수 있습니다.
자동 완성은 가입 및 로그인, 결제, 결제, 이름 또는 주소를 입력해야 하는 양식과 같이 정기적으로 사용하는 양식에서 특히 유용합니다.
autocomplete 속성에 적절한 값을 사용하면 브라우저에서 최적의 자동 완성 옵션을 제공할 수 있습니다. autocomplete에는 많은 가능한 값이 있습니다. 다음은 주소의 예입니다.
브라우저에 이미 저장된 주소가 있나요? 좋습니다. 주소 양식의 첫 번째 필드와 상호작용하면 브라우저에 저장된 주소 목록이 표시됩니다. 하나를 선택하면 브라우저에서 주소와 관련된 모든 필드를 자동으로 입력합니다. 자동 완성 기능을 사용하면 양식을 더 빠르고 쉽게 작성할 수 있습니다.
모든 주소 양식에 동일한 필드가 있는 것은 아니며 필드의 순서도 다릅니다.
autocomplete에 올바른 값을 사용하면 브라우저가 양식에 올바른 값을 입력합니다. country, postal-code, 그 외 여러 가지 값이 있습니다.
사용자가 빠르게 로그인하고 안전한 비밀번호를 사용할 수 있도록 지원
비밀번호를 잘 기억하지 못하는 사람이 많습니다. 가장 일반적인 비밀번호는 '123456'이며, 그 뒤를 기억하기 쉬운 조합이 따릅니다. 안전하고 고유한 비밀번호를 모두 기억하지 않고도 사용하는 방법은 무엇인가요?
브라우저에는 비밀번호를 생성, 저장, 자동 입력하는 비밀번호 관리자가 내장되어 있습니다. 브라우저가 이메일을 자동 완성하고 비밀번호를 관리하도록 지원하는 방법을 알아보세요.
이메일 필드에 autocomplete="email"를 사용하면 사용자에게 이메일 주소 자동 완성 옵션이 표시됩니다.
이것은 가입 양식이므로 사용자에게 이전에 사용한 비밀번호를 입력하는 옵션이 표시되지 않아야 합니다. autocomplete="new-password"를 사용하여 브라우저에서 새 비밀번호를 생성하는 옵션을 제공하도록 할 수 있습니다.
로그인 양식에서 autocomplete="current-password"를 사용하여 브라우저에 이 웹사이트에 대해 이전에 저장된 비밀번호를 입력하는 옵션을 제공하도록 지시할 수 있습니다.
많은 웹사이트에서 2단계 인증을 설정할 수 있습니다. 비밀번호 외에도 일회용 코드가 SMS 또는 2단계 인증 앱과 함께 전송됩니다.
SMS 메시지로 받은 코드가 터치 키보드에 제안되어 바로 선택하여 값을 입력할 수 있다면 좋지 않나요? Safari 14 이상에서는 autocomplete="one-time-code"을 사용하여 이를 달성할 수 있습니다. Android에서 실행되는 Chrome에서는 WebOTP API를 사용하여 JavaScript로 이를 구현할 수 있습니다.
SMS OTP 양식 권장사항을 사용하여 웹에서 전화번호를 인증하는 방법을 자세히 알아보세요.
주의: 전화번호는 재활용되거나 도용될 수 있으므로 SMS는 그 자체로 가장 안전한 인증 방법은 아닙니다. 다른 2단계 인증 방법 또는 다중 인증(MFA)을 사용하는 것이 좋습니다.
사용자가 신용카드 정보를 입력하도록 지원
많은 전자상거래 웹사이트에서 신용카드를 사용하여 제품을 구매할 수 있습니다. 사이트에서 자체 양식을 제공하는 서드 파티 결제 플랫폼을 사용할 수 있지만 자체 결제 양식을 만들어야 하는 경우 사용자가 결제 정보를 쉽게 입력할 수 있도록 해야 합니다.
브라우저에서 올바른 자동 완성 옵션을 제공하도록 autocomplete 속성을 다시 사용할 수 있습니다.
신용카드 번호 cc-number, 신용카드 만료일 cc-exp, 신용카드 결제에 필요한 기타 모든 정보의 값이 있습니다.
브라우저에서 자동 완성을 제공하도록 신용카드 번호, 전화번호와 같은 숫자에 단일 입력을 사용합니다. 자동 완성을 사용할 수 있도록 맞춤 요소 대신 표준 양식 요소(예: 결제 카드 날짜의 경우 <select>)를 사용하세요.
사용자가 결제 데이터를 다시 입력하지 않도록 지원하는 방법을 자세히 알아보세요.
모든 필드에서 자동 완성이 작동하는지 확인
주소, 계정 정보, 신용카드 정보 외에도 브라우저가 자동 완성으로 사용자를 지원할 수 있는 필드가 많습니다.
양식에 전화번호 필드를 추가할 때 자동 완성에 사용 가능한 값을 사용할 수 있는지 확인하세요. 양식 필드에 적합한 값을 찾았나요? 추가합니다.
autocomplete 속성에 적절한 값을 사용하면 브라우저에서 최적의 자동 완성 옵션을 제공하고 사용자가 양식을 더 빠르게 작성할 수 있습니다.
브라우저가 필드를 자동 완성하지 않도록 지원
자동 완성의 작동 방식, 브라우저의 자동 완성 지원 방법, 자동 완성이 사용자의 양식 작성에 편리한 이유를 알아봤습니다. 하지만 브라우저에서 자동 완성을 제공하지 않도록 하고 싶을 때도 있습니다.
<label for="one-time-code">One-time code</label>
<input autocomplete="off" type="text" name="one-time-code" id="one-time-code">
자동 완성은 일회성 코드 필드와 같은 일회성 고유 값을 입력할 때는 유용하지 않습니다. 값은 매번 다르며 브라우저에서 값을 저장하거나 자동 완성 옵션을 제공해서는 안 됩니다. 이러한 필드에 autocomplete="off"를 사용하여 자동 완성을 방지할 수 있습니다.
autocomplete="off"의 또 다른 사용 사례는 허니팟 필드입니다 (이전 모듈 참고). 필드가 표시되지 않더라도 브라우저에서 나머지 필드를 사용하여 자동 완성할 수 있습니다. 자동 완성을 사용 중지하면 필드가 자동으로 완성되어 실제 사용자가 봇으로 식별되지 않습니다.
자동 완성이 사용자에게 도움이 된다고 확신하는 경우에만 자동 완성을 사용 중지해야 합니다.
이해도 확인
자동 완성에 대한 지식 테스트
가입 양식의 비밀번호 필드에 어떤 자동 완성 값을 사용해야 할까요?
autocomplete="password"autocomplete="off"autocomplete="new-password"autocomplete="current-password"