자동 완성

열 번째 동안 주소를 다시 입력하는 것은 피곤합니다. 브라우저와 개발자는 사용자가 데이터를 더 빠르게 입력하고 데이터를 다시 입력하는 것을 피할 수 있습니다. 이 모듈에서는 자동 완성의 작동 방식과 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를 자바스크립트로 사용하여 이를 실행할 수 있습니다.

SMS OTP 양식 권장사항을 사용하여 웹에서 전화번호를 인증하는 방법을 자세히 알아보세요.

사용자가 신용카드 정보를 입력하도록 지원

많은 전자상거래 웹사이트에서 신용카드를 사용하여 제품을 구매할 수 있습니다. 사이트에서는 자체 양식을 제공하는 서드 파티 결제 플랫폼을 사용할 수 있지만, 자체 결제 양식을 만들어야 하는 경우 사용자가 결제 정보를 쉽게 입력할 수 있어야 합니다.

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"의 또 다른 사용 사례는 honeypot 필드입니다 (이전 모듈 참고). 필드가 표시되지 않더라도 브라우저는 나머지 필드로 필드를 자동 완성할 수 있습니다. 자동 완성을 사용 중지하면 필드가 자동으로 완성되므로 실제 사용자가 봇으로 식별되지 않습니다.

사용자에게 도움이 된다고 확신하는 경우에만 자동 완성을 사용 중지해야 합니다.

이해도 테스트

자동 완성에 관한 지식 테스트

가입 양식의 비밀번호 입력란에 사용해야 하는 자동 완성 값은 무엇인가요?

autocomplete="password"
다시 시도해 보세요.
autocomplete="off"
다시 시도해 보세요.
autocomplete="new-password"
🎉
autocomplete="current-password"
다시 시도해 보세요.

자료