로그인 양식 권장사항

교차 플랫폼 브라우저 기능을 사용하여 안전하고 액세스 가능하며 사용하기 쉬운 로그인 양식을 만들 수 있습니다.

사용자가 사이트에 로그인해야 하는 경우 로그인 양식을 잘 설계하는 것이 중요합니다. 이러한 현상은 연결 상태가 좋지 않거나 모바일을 사용하거나 서두르거나 스트레스를 받는 사용자에게 특히 그렇습니다. 잘못 설계된 로그인 양식은 이탈률이 높습니다. 사용자가 이탈할 때마다 로그인 기회를 놓친 것이 아니라 불만을 느끼는 사용자가 이탈할 수 있습니다.

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

체크리스트

• 의미 있는 HTML 요소 사용: <form>, <input>, <label>, <button>.
• 각 입력에 <label> 라벨을 지정합니다.
• 요소 속성(type, name, autocomplete, required)을 사용하여 기본 제공 브라우저 기능에 액세스합니다.
• 페이지 로드 또는 웹사이트 배포 간에 변경되지 않는 입력 name 및 id 속성에 안정적인 값을 제공합니다.
• 자체 <form> 요소에 로그인을 배치합니다.
• 양식을 성공적으로 제출합니다.
• 가입 양식에 비밀번호를 입력하고 비밀번호 재설정 양식에 새 비밀번호를 입력할 때는 autocomplete="new-password" 및 id="new-password"를 사용합니다.
• 로그인 비밀번호 입력에 autocomplete="current-password" 및 id="current-password"을 사용합니다.
• 비밀번호 표시 기능을 제공합니다.
• 비밀번호 입력에는 aria-label 및 aria-describedby를 사용합니다.
• 입력을 중복하지 않습니다.
• 모바일 키보드가 입력이나 버튼을 가리지 않도록 양식을 디자인합니다.
• 양식이 모바일에서 사용 가능한지 확인합니다. 읽기 쉬운 텍스트를 사용하고 입력과 버튼이 터치 영역처럼 작동하기에 충분히 커야 합니다.
• 가입 및 로그인 페이지에서 브랜딩과 스타일을 유지하세요.
• 현장 및 실습에서 테스트: 페이지 분석, 상호작용 분석, 사용자 중심 성능 측정을 가입 및 로그인 흐름에 구축할 수 있습니다.
• 브라우저와 기기에서 테스트: 양식 동작은 플랫폼에 따라 상당히 다릅니다.

의미 있는 HTML 사용

작업을 위해 빌드된 요소(<form>, <label>, <button>)를 사용합니다. 이를 통해 내장된 브라우저 기능을 사용하고 접근성을 개선하며 마크업에 의미를 추가합니다.

<form> 사용

<div>에서 입력을 래핑하고 자바스크립트로만 입력 데이터 제출을 처리하고 싶을 수 있습니다. 일반적으로 기존의 일반 <form> 요소를 사용하는 것이 좋습니다. 이렇게 하면 스크린 리더 및 기타 보조 기기에서 사이트에 액세스할 수 있고, 다양한 브라우저 기능이 기본 제공되며, 이전 브라우저용 기본 기능 로그인을 간편하게 빌드할 수 있으며 자바스크립트에 오류가 발생해도 계속 작동할 수 있습니다.

<label> 사용

입력에 라벨을 지정하려면 <label>를 사용하세요.

<label for="email">Email</label>
<input id="email" …>

두 가지 이유:

• 라벨을 탭하거나 클릭하면 포커스가 입력으로 이동합니다. 라벨의 for 속성을 입력의 name 또는 id와 함께 사용하여 라벨을 입력과 연결합니다.
• 스크린 리더는 라벨 또는 라벨의 입력에 포커스가 있으면 라벨 텍스트를 알려줍니다.

자리표시자를 입력 라벨로 사용하지 마세요. 사람들은 특히 텍스트 입력을 시작한 후 입력 내용에 집중하게 되면 잊어버릴 수 있습니다 ('이메일 주소, 전화번호 또는 계정 ID를 입력했는가?'). 자리표시자와 관련해 발생할 수 있는 다른 여러 가지 문제가 있습니다. 잘 모르겠다면 자리표시자 속성을 사용하면 안 됨 및 양식 필드의 자리표시자는 유해함을 참고하세요.

입력값 위에 레이블을 넣는 것이 가장 좋습니다. 이렇게 하면 모바일과 데스크톱에서 일관된 디자인이 가능하며 Google AI 연구에 따르면 사용자가 더 빠르게 스캔할 수 있습니다. 전체 너비 라벨과 입력이 제공되며 라벨 텍스트에 맞게 라벨과 입력 너비를 조정할 필요가 없습니다.

휴대기기에서 label-position Glitch를 열어 확인해 보세요.

<button> 사용

버튼에는 <button>를 사용하세요. 버튼 요소는 액세스 가능한 동작과 기본 제공 양식 제출 기능을 제공하며 손쉽게 스타일을 지정할 수 있습니다. <div> 또는 다른 요소를 사용하여 버튼처럼 가장하는 것은 의미가 없습니다.

제출 버튼에 어떤 기능이 있는지 확인합니다. 예를 들어 계정 만들기 또는 로그인이 포함되며 제출 또는 시작은 허용되지 않습니다.

양식을 성공적으로 제출했는지 확인하기

비밀번호 관리자가 양식이 제출되었음을 알 수 있도록 지원합니다. 여기에는 두 가지 방법이 있습니다.

• 다른 페이지로 이동합니다.
• History.pushState() 또는 History.replaceState()로 탐색을 에뮬레이션하고 비밀번호 양식을 삭제합니다.

XMLHttpRequest 또는 fetch 요청을 사용하면 로그인 성공이 응답에 보고되고 DOM에서 양식을 가져와 사용자에게 성공을 나타내는 방식으로 처리되는지 확인합니다.

사용자가 탭하거나 클릭하면 로그인 버튼을 사용 중지하는 것이 좋습니다. 많은 사용자가 버튼을 여러 번 클릭합니다. 빠르고 반응 속도가 빠른 사이트에서도 마찬가지입니다. 이로 인해 상호작용 속도가 느려지고 서버 로드가 늘어납니다.

반대로 사용자 입력을 기다리는 양식 제출을 사용 중지하면 안 됩니다. 예를 들어 사용자가 고객 PIN을 입력하지 않은 경우 로그인 버튼을 사용 중지하지 마세요. 사용자가 양식에서 무엇인가 누락된 후 (사용 중지됨) 로그인 버튼을 반복적으로 탭하려고 할 때 작동하지 않는다고 생각할 수 있습니다. 최소한 양식 제출을 사용 중지해야 하는 경우 사용 중지 버튼을 클릭할 때 무엇이 누락되었는지 사용자에게 설명합니다.

입력을 중복으로 하지 않기

일부 사이트는 사용자가 이메일이나 비밀번호를 두 번 입력하도록 합니다. 이렇게 하면 일부 사용자의 오류는 줄어들 수 있지만 모든 사용자에게 추가 작업이 발생하고 이탈률이 증가할 수 있습니다. 브라우저가 이메일 주소를 자동 완성하거나 안전한 비밀번호를 제안하는 경우에도 두 번 요청하는 것은 의미가 없습니다. 사용자가 이메일 주소를 확인할 수 있도록 하고 (필요한 경우) 사용자가 비밀번호를 쉽게 재설정할 수 있도록 하는 것이 좋습니다.

요소 속성 최대한 활용

바로 이 지점에서 마법이 일어납니다. 브라우저에는 입력 요소 속성을 사용하는 여러 유용한 기본 제공 기능이 있습니다.

비밀번호를 비공개로 유지하되 사용자가 원할 경우 볼 수 있도록 함

비밀번호 입력에는 비밀번호 텍스트를 숨기고 비밀번호가 비밀번호 입력임을 브라우저에서 인식할 수 있도록 비밀번호 입력에 type="password"가 있어야 합니다. 브라우저는 다양한 기법을 사용하여 입력 역할을 파악하고 비밀번호 저장 여부를 결정합니다.

사용자가 입력한 텍스트를 확인할 수 있도록 비밀번호 표시 전환 버튼을 추가해야 하며 비밀번호 찾기 링크를 추가하는 것도 잊지 마세요. 비밀번호 표시 사용 설정을 참고하세요.

모바일 사용자에게 적합한 키보드 제공

<input type="email">를 사용하여 모바일 사용자에게 적절한 키보드를 제공하고 브라우저에서 기본 제공 이메일 주소 유효성 검사를 사용 설정할 수 있습니다. JavaScript는 필요하지 않습니다.

이메일 주소 대신 전화번호를 사용해야 하는 경우 <input type="tel">를 통해 휴대기기의 전화 키패드를 사용할 수 있습니다. 필요한 경우 inputmode 속성을 사용할 수도 있습니다. inputmode="numeric"는 PIN 번호에 적합합니다. 입력 모드에 대해 알고 싶은 모든 정보에 자세한 내용이 나와 있습니다.

모바일 키보드가 로그인 버튼을 가리지 않도록 합니다.

하지만 조심하지 않으면 모바일 키보드가 양식을 가리거나 최악의 경우 로그인 버튼이 부분적으로 가려질 수 있습니다. 사용자는 무슨 일이 있었는지 알아차리기도 전에 포기할 수 있습니다.

가능한 경우 로그인 페이지 상단에 이메일/휴대전화 및 비밀번호 입력과 로그인 버튼만 표시하여 계정이 표시되지 않도록 하세요. 아래에 다른 콘텐츠를 삽입합니다.

다양한 기기에서 테스트

타겟층에 대해 다양한 기기에서 테스트하고 그에 따라 조정해야 합니다. BrowserStack은 다양한 실제 기기 및 브라우저에서 오픈소스 프로젝트를 위한 무료 테스트를 지원합니다.

페이지 두 개 사용 고려

일부 사이트 (Amazon 및 eBay 포함)는 두 페이지에서 이메일/전화번호와 비밀번호를 요청하는 방식으로 이 문제를 방지합니다. 이 접근 방식은 또한 환경을 단순화합니다. 사용자는 한 번에 한 가지 작업만 할 수 있습니다.

단일 <form>으로 구현하는 것이 좋습니다. JavaScript를 사용하여 처음에는 이메일 입력만 표시한 다음, 숨기고 비밀번호 입력을 표시합니다. 이메일과 비밀번호를 입력하는 사이에 사용자가 새 페이지로 이동하도록 해야 하는 경우 비밀번호 관리자가 올바른 값을 저장할 수 있도록 두 번째 페이지의 양식에 이메일 값이 있는 숨겨진 입력 요소가 있어야 합니다. Chromium이 이해하는 비밀번호 양식 스타일에서 코드 예시를 제공합니다.

사용자가 데이터 재입력을 방지하도록 지원

브라우저가 데이터를 올바르게 저장하고 입력을 자동 완성하도록 할 수 있습니다. 그러면 사용자가 이메일 및 비밀번호 값을 일일이 입력하지 않아도 됩니다. 이는 특히 모바일에서 중요하며 높은 이탈률을 가져오는 이메일 입력에 중요합니다.

여기에는 두 가지 부분이 있습니다.

1. autocomplete, name, id, type 속성은 브라우저가 나중에 자동 완성에 사용할 수 있는 데이터를 저장하기 위해 입력의 역할을 이해하는 데 도움이 됩니다. 자동 완성을 위해 데이터가 저장되도록 하려면 최신 브라우저에는 안정적인 name 또는 id 값 (각 페이지 로드 또는 사이트 배포 시 무작위로 생성되지 않음)이 있고 submit 버튼이 있는 <form>에 입력이 필요합니다.

2. autocomplete 속성은 브라우저가 저장된 데이터를 사용하여 입력을 올바르게 자동 완성하는 데 도움이 됩니다.

이메일 입력에는 autocomplete="username"를 사용하세요. type="email"를 사용해야 하고 id="email" 및 name="email"를 사용하려는 경우에도 최신 브라우저에서 비밀번호 관리자가 username를 인식하기 때문입니다.

비밀번호 입력에는 적절한 autocomplete 및 id 값을 사용하면 브라우저가 새 비밀번호와 현재 비밀번호를 구분할 수 있습니다.

autocomplete="new-password" 및 id="new-password"을(를) 새 비밀번호로 사용하세요.

• 가입 양식에서는 비밀번호를 입력하거나 비밀번호 변경 양식에서는 새 비밀번호를 입력할 때 autocomplete="new-password" 및 id="new-password"를 사용합니다.

기존 비밀번호에 autocomplete="current-password" 및 id="current-password" 사용

• 로그인 양식의 비밀번호 입력 또는 비밀번호 변경 양식의 사용자 이전 비밀번호 입력에는 autocomplete="current-password" 및 id="current-password"를 사용합니다. 이렇게 하면 사이트에 저장된 현재 비밀번호를 사용하도록 브라우저에 알릴 수 있습니다.

가입 양식의 경우:

<input type="password" autocomplete="new-password" id="new-password" …>

로그인의 경우:

<input type="password" autocomplete="current-password" id="current-password" …>

비밀번호 관리자 지원

브라우저마다 이메일 자동 완성 및 비밀번호 추천을 다소 다르게 처리하지만 효과는 거의 동일합니다. 예를 들어 데스크톱의 Safari 11 이상에서는 비밀번호 관리자가 표시되고 가능한 경우 생체 인식 인증 (지문 또는 얼굴 인식)이 사용됩니다.

데스크톱의 Chrome에서 이메일 추천과 비밀번호 관리자를 표시하며 비밀번호를 자동 완성합니다.

브라우저 비밀번호와 자동 완성 시스템은 간단하지 않습니다. 값을 추측하고 저장하고 표시하는 알고리즘은 표준화되어 있지 않으며 플랫폼에 따라 다릅니다. 예를 들어 Hidde de Vries에서 지적한 바와 같이 'Firefox의 비밀번호 관리자는 레시피 시스템으로 휴리스틱을 보완합니다.'

자동 완성: 웹 개발자가 알아야 하지만 다루지 않는 name 및 autocomplete 사용에 관해 더 많은 정보가 있습니다. HTML 사양에는 59개의 가능한 값이 모두 나열되어 있습니다.

브라우저에서 안전한 비밀번호를 제안하도록 사용 설정

최신 브라우저는 휴리스틱을 사용하여 비밀번호 관리자 UI를 표시할 시기를 결정하고 안전한 비밀번호를 제안합니다.

데스크톱에서는 Safari가 다음과 같이 작동합니다.

(Safari에서는 버전 12.0부터 고유하고 강력한 비밀번호 제안 기능이 제공되었습니다.)

브라우저 비밀번호 생성기가 내장되어 있어 사용자와 개발자가 '안전한 비밀번호'를 파악할 필요가 없습니다. 브라우저에서는 비밀번호를 안전하게 저장하고 필요에 따라 자동 완성할 수 있으므로 사용자가 비밀번호를 기억하거나 입력할 필요가 없습니다. 또한 사용자에게 내장된 브라우저 비밀번호 생성기를 활용하도록 권장하면 사용자가 사이트에서 고유하고 강력한 비밀번호를 사용할 가능성이 높아지며, 다른 곳에서 도용될 수 있는 비밀번호를 재사용할 가능성이 줄어듭니다.

실수로 입력하지 않도록 사용자 방지

이메일과 비밀번호 필드 모두에 required 속성을 추가합니다. 최신 브라우저는 누락된 데이터에 대한 메시지를 자동으로 표시하고 포커스를 설정합니다. JavaScript가 필요하지 않습니다.

손가락과 엄지손가락을 고려한 디자인

특히 모바일에서 입력 요소 및 버튼과 관련된 거의 모든 항목의 기본 브라우저 크기가 너무 작습니다. 당연한 듯 같지만, 많은 사이트의 로그인 양식에서 흔히 발생하는 문제입니다.

입력과 버튼이 충분히 커야 합니다.

입력 및 버튼의 기본 크기와 패딩이 데스크톱에서 너무 작고 모바일에서는 더 심합니다.

Android 접근성 가이드에 따르면 터치스크린 객체의 권장 대상 크기는 7~10mm입니다. Apple 인터페이스 가이드라인에서는 48x48픽셀을 권장하며, W3C에서는 최소 44x44 CSS 픽셀을 권장합니다. 이러한 측면에서 모바일의 경우 입력 요소와 버튼에는 최소 약 15px의 패딩을, 데스크톱의 경우 약 10px의 패딩을 추가합니다. 실제 휴대기기와 진짜 손가락이나 엄지손가락으로 시도해 보세요. 각각의 입력과 버튼을 편안하게 탭할 수 있어야 합니다.

탭 타겟의 크기가 적절하지 않음 Lighthouse 감사는 너무 작은 입력 요소를 감지하는 프로세스를 자동화하는 데 도움이 될 수 있습니다.

손가락으로 사용하기 편리한 디자인

터치 영역을 검색하면 다수의 검지 사진이 표시됩니다. 하지만 현실에서는 많은 사람들이 엄지손가락으로 휴대전화와 상호작용합니다. 엄지손가락이 검지보다 크고 컨트롤의 정확도가 떨어집니다. 터치 영역의 크기가 적절하게 조절되어야 하는 이유가 더욱 많아졌습니다.

충분히 큰 텍스트 만들기

크기 및 패딩과 마찬가지로 입력 요소 및 버튼의 기본 브라우저 글꼴 크기는 특히 모바일에서 너무 작습니다.

서로 다른 플랫폼의 브라우저는 글꼴 크기를 다르게 지정하므로 모든 위치에서 잘 작동하는 특정 글꼴 크기를 지정하기는 어렵습니다. 인기 웹사이트를 간단히 조사한 결과 데스크톱에서 13~16픽셀의 크기가 표시되는 것으로 나타났습니다. 모바일에서는 이와 일치하는 것이 최소 텍스트 크기입니다.

따라서 모바일에서는 더 큰 픽셀 크기를 사용해야 합니다. 데스크톱용 Chrome의 16px는 읽기 쉽지만 시력이 좋더라도 Android용 Chrome에서 16px 텍스트를 읽기 어렵습니다. 미디어 쿼리를 사용하여 표시 영역 크기에 따라 글꼴 픽셀 크기를 다양하게 설정할 수 있습니다. 20px는 모바일에서도 적합하지만, 시력이 낮은 친구나 동료와 함께 테스트해 보는 것이 좋습니다.

문서가 읽을 수 있는 글꼴 크기를 사용하지 않음 Lighthouse 감사는 너무 작은 텍스트를 감지하는 프로세스를 자동화하는 데 도움이 될 수 있습니다.

입력 사이에 충분한 공간 제공

터치 영역과 잘 어울릴 수 있도록 충분한 여백을 두세요. 즉, 손가락의 여백 너비 정도가 좋습니다.

입력이 명확하게 표시되어야 합니다.

입력의 기본 테두리 스타일 지정으로 인해 입력의 보기가 어렵습니다. Android용 Chrome과 같은 일부 플랫폼에서는 거의 표시되지 않습니다.

패딩뿐만 아니라 테두리도 추가합니다. 흰색 배경에서는 일반적으로 #ccc 또는 더 어두운 색을 사용하는 것이 좋습니다.

내장된 브라우저 기능을 사용하여 잘못된 입력 값 경고

브라우저에는 type 속성이 있는 입력에 대해 기본적인 양식 검증을 실행하는 기능이 내장되어 있습니다. 잘못된 값이 포함된 양식을 제출하면 브라우저에서 경고를 표시하고 문제가 있는 입력에 포커스를 설정합니다.

:invalid CSS 선택자를 사용하여 잘못된 데이터를 강조표시할 수 있습니다. 콘텐츠가 없는 입력이 선택되지 않도록 하려면 :not(:placeholder-shown)를 사용하세요.

input[type=email]:not(:placeholder-shown):invalid {
  color: red;
  outline-color: red;
}

잘못된 값이 있는 입력을 강조표시하는 다양한 방법을 시도해 보세요.

필요한 경우 JavaScript 사용

비밀번호 표시 전환

사용자가 입력한 텍스트를 확인할 수 있도록 Show password(비밀번호 표시) 전환 버튼을 추가해야 합니다. 사용 편의성은 사용자가 입력한 텍스트를 볼 수 없는 경우 발생합니다. 현재 이를 위한 기본 제공 방법은 없지만 구현 계획이 있습니다. 대신 JavaScript를 사용해야 합니다.

다음 코드는 텍스트 버튼을 사용하여 비밀번호 표시 기능을 추가합니다.

HTML:

<section>
  <label for="password">Password</label>
  <button id="toggle-password" type="button" aria-label="Show password as plain text. Warning: this will display your password on the screen.">Show password</button>
  <input id="password" name="password" type="password" autocomplete="current-password" required>
</section>

다음은 버튼을 일반 텍스트처럼 보이게 하는 CSS입니다.

button#toggle-password {
  background: none;
  border: none;
  cursor: pointer;
  /* Media query isn't shown here. */
  font-size: var(--mobile-font-size);
  font-weight: 300;
  padding: 0;
  /* Display at the top right of the container */
  position: absolute;
  top: 0;
  right: 0;
}

비밀번호를 표시하는 JavaScript:

const passwordInput = document.getElementById('password');
const togglePasswordButton = document.getElementById('toggle-password');

togglePasswordButton.addEventListener('click', togglePassword);

function togglePassword() {
  if (passwordInput.type === 'password') {
    passwordInput.type = 'text';
    togglePasswordButton.textContent = 'Hide password';
    togglePasswordButton.setAttribute('aria-label',
      'Hide password.');
  } else {
    passwordInput.type = 'password';
    togglePasswordButton.textContent = 'Show password';
    togglePasswordButton.setAttribute('aria-label',
      'Show password as plain text. ' +
      'Warning: this will display your password on the screen.');
  }
}

최종 결과는 다음과 같습니다.

쉽게 입력할 수 있는 비밀번호 만들기

aria-describedby를 사용하여 제약조건을 설명하는 요소의 ID를 제공하여 비밀번호 규칙의 개요를 작성합니다. 스크린 리더는 라벨 텍스트, 입력 유형 (비밀번호), 설명을 제공합니다.

<input type="password" aria-describedby="password-constraints" …>
<div id="password-constraints">Eight or more characters with a mix of letters, numbers and symbols.</div>

비밀번호 표시 기능을 추가할 때 비밀번호가 표시됨을 경고하는 aria-label를 포함해야 합니다. 그러지 않으면 사용자가 실수로 비밀번호를 공개할 수 있습니다.

<button id="toggle-password"
        aria-label="Show password as plain text.
                    Warning: this will display your password on the screen.">
  Show password
</button>

다음 Glitch에서 두 가지 ARIA 기능의 작동 방식을 확인할 수 있습니다.

액세스 가능한 양식 만들기에는 양식에 대한 접근성을 개선하는 데 도움이 되는 추가 도움말이 있습니다.

실시간 및 제출 전에 검증

HTML 양식 요소 및 속성에는 기본 유효성 검사를 위한 기능이 내장되어 있지만, 사용자가 데이터를 입력할 때와 양식을 제출하려고 할 때 더욱 강력한 유효성 검사를 하려면 자바스크립트를 사용해야 합니다.

로그인 양식 Codelab의 5단계에서는 Constraint Validation API (폭넓게 지원)를 사용하여 기본 제공 브라우저 UI를 사용하는 맞춤 유효성 검사를 추가하여 포커스를 설정하고 메시지를 표시합니다.

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

애널리틱스 및 RUM

특히 가입 양식과 로그인 양식에서 '측정할 수 없으며 개선할 수 없는 사항'이 해당합니다. 목표를 설정하고, 실적을 측정하고, 사이트를 개선하고, 반복해야 합니다.

할인 사용성 테스트는 변경사항을 시험하는 데 유용할 수 있지만 사용자가 가입 및 로그인 양식을 어떻게 경험하는지 제대로 이해하려면 실제 데이터가 필요합니다.

• 페이지 애널리틱스: 가입 및 로그인 페이지 조회수, 이탈률, 종료수
• 상호작용 분석: 목표 유입경로 (사용자가 로그인 또는 로그인 흐름을 중단하는 곳) 및 이벤트(사용자가 양식과 상호작용할 때 취하는 액션)
• 웹사이트 성능: 사용자 중심 측정항목 (가입 및 로그인 양식이 어떤 이유로 느린가요? 그렇다면 그 이유는 무엇인가요?)

가입 및 로그인에 대한 다양한 접근 방식을 시도하기 위해 A/B 테스트를 구현하고, 모든 사용자에게 변경사항을 출시하기 전에 단계적 출시를 통해 일부 사용자를 대상으로 변경사항을 검증하는 것이 좋습니다.

일반 가이드라인

UI와 UX를 잘 디자인하면 로그인 양식 이탈을 줄일 수 있습니다.

• 사용자가 로그인을 요구하도록 하지 마세요. 로그인, 계정 만들기, 등록과 같이 쉽게 이해할 수 있는 문구를 사용하여 페이지 상단에 로그인 양식 링크를 넣습니다.
• 집중해야 합니다. 가입 양식은 혜택 및 기타 사이트 기능으로 사용자의 주의를 분산시키는 곳이 아닙니다.
• 가입 복잡성 최소화 다른 사용자 데이터 (예: 주소 또는 신용카드 세부정보)를 제공함으로써 사용자에게 분명한 이점이 있는 경우에만 다른 사용자 데이터를 수집합니다.
• 사용자가 가입 양식을 시작하기 전에 가치 제안을 명확하게 하세요. 로그인을 통해 얻을 수 있는 이점은 무엇인가요? 사용자가 가입을 완료하도록 구체적인 인센티브를 제공하세요.
• 일부 사용자는 이메일을 사용하지 않을 수 있으므로 가능하면 사용자가 이메일 주소 대신 휴대전화 번호로 자신을 식별할 수 있도록 합니다.
• 사용자가 비밀번호를 쉽게 재설정할 수 있도록 하고 비밀번호 찾기 링크를 눈에 잘 띄게 표시하세요.
• 서비스 약관 및 개인정보처리방침 문서 링크: 사용자의 데이터를 보호하는 방법을 처음부터 사용자에게 명확히 설명합니다.
• 가입 및 로그인 페이지에 회사 또는 조직의 로고와 이름을 포함하고 언어, 글꼴, 스타일이 사이트의 나머지 부분과 일치하는지 확인합니다. 일부 양식은 특히 URL이 상당히 다른 경우 다른 콘텐츠와 동일한 사이트에 속한 것처럼 느껴지지 않습니다.

계속 학습하기

• 멋진 양식 만들기
• 모바일 양식 디자인 권장사항
• 더 많은 기능을 갖춘 양식 컨트롤
• 액세스 가능한 양식 만들기
• Credential Management API를 사용한 로그인 흐름 간소화
• WebOTP API로 웹에서 전화번호 인증하기

사진: Meghan Schiereck, Unsplash