가입 양식 권장사항

사용자가 간편하게 가입, 로그인 및 계정 세부정보 관리를 할 수 있도록 지원합니다.

Sam Dutton

사용자가 사이트에 로그인해야 하는 경우를 대비하여 가입 양식을 디자인하는 것이 좋습니다. 매우 중요합니다 특히 연결 상태가 좋지 않거나 모바일 기기 또는 서두르거나 스트레스를 받을 때입니다. 잘못 디자인된 가입 양식은 이탈률이 높습니다. 반송이 발생할 때마다 단순히 가입을 놓친 것이 아니라 사용자가 이탈하고 불만족스러워할 수 있습니다. 있습니다.

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

체크리스트

• 가능하다면 로그인하지 마세요.
• 계정을 만드는 방법을 명확히 합니다.
• 계정 세부정보에 액세스하는 방법을 명확히 합니다.
• 양식의 불필요한 요소를 자릅니다.
• 세션 길이를 고려합니다.
• 비밀번호 관리자가 비밀번호를 안전하게 제안하고 저장할 수 있도록 지원합니다.
• 유출된 비밀번호를 허용하지 않습니다.
• 비밀번호 붙여넣기를 허용합니다.
• 비밀번호를 일반 텍스트로 저장하거나 전송해서는 안 됩니다.
• 비밀번호를 강제로 업데이트하지 마세요.
• 간편하게 비밀번호를 변경 또는 재설정합니다.
• 제휴 로그인을 사용 설정합니다.
• 간편한 계정 전환:
• 다단계 인증 제공 고려하기
• 사용자 이름 관련 유의사항
• 실습과 현장에서 모두 테스트합니다.
• 다양한 브라우저, 기기, 플랫폼에서 테스트

가능하면 로그인하지 마세요.

가입 양식을 구현하고 사용자에게 사이트에 계정을 만들도록 요청하기 전에 먼저 정말 필요한 것인지 생각해 보세요. 가능하면 로그인이 필요한 기능을 제한하지 않는 것이 좋습니다.

가장 좋은 가입 양식은 가입 양식이 없는 것입니다.

사용자에게 계정을 만들도록 요청함으로써 사용자가 달성하고자 하는 바를 넘나들게 됩니다. 사용자에게 개인 정보를 믿고 맡길 것을 요청하는 것입니다. 모든 비밀번호와 항목이 저장하는 데이터의 비중은 개인 정보 보호 및 보안에 대한 "데이터 부채"로 이어지며 확인할 수 있습니다.

사용자에게 계정 생성을 요청하는 주된 이유가 탐색 메뉴 사이에 정보를 저장하거나 클라이언트 측 저장소를 사용하는 것이 좋습니다. 쇼핑용 사용자가 계정을 만들어야 구매가 가능하도록 하는 것이 쇼핑의 주요 원인으로 꼽힙니다. 장바구니 이탈을 줄일 수 있습니다. 비회원 결제를 기본값으로 설정해야 합니다.

명확한 로그인

로그인 또는 로그인 등 사이트에 계정을 만드는 방법을 명확히 합니다. 버튼을 클릭합니다. 모호한 아이콘이나 모호한 문구("시작하세요!", "가입하세요") 탐색 메뉴에서 로그인 정보를 숨기지 마세요. 사용성 전문가인 Steve Krug는 생각하지 마세요 필요한 경우 애널리틱스를 사용하여 다양한 유형의 키워드가 미치는 영향을 있습니다.

</ph>

</ph> <ph type="x-smartling-placeholder"></ph>

Google과 같은 ID 공급업체를 통해 가입한 사용자의 계정과 이메일과 비밀번호를 사용하여 가입할 수도 있습니다. 사용자의 이메일 주소에 액세스할 수 있다면 이 작업을 쉽게 수행할 수 있습니다. 두 계정을 일치시킵니다. 아래 코드는 Google 로그인 사용자의 이메일 데이터에 액세스하는 방법

// auth2 is initialized with gapi.auth2.init()
if (auth2.isSignedIn.get()) {
  var profile = auth2.currentUser.get().getBasicProfile();
  console.log(`Email: ${profile.getEmail()}`);
}

계정 세부정보에 액세스하는 방법을 명확히 합니다.

사용자가 로그인하면 계정 세부정보에 액세스하는 방법을 명확하게 설명합니다. 특히, 비밀번호를 변경 또는 재설정하는 방법을 명확하게 알려줍니다.

복잡한 양식 자르기

가입 과정에서 해야 할 일은 복잡성을 최소화하고 사용자에게 집중하는 것입니다. 불필요한 요소를 줄이세요. 지금은 주의가 산만하고 유혹에 빠질 때가 아니에요.

가입 시에는 가능한 한 적은 정보를 요청하세요. 추가 사용자 데이터 (예: 이름, 주소) 수집 필요한 경우에만, 그리고 사용자가 해당 데이터를 제공함으로써 명확한 이점을 얻을 수 있는 경우에만 말이죠. 주의사항 통신하고 저장하는 데이터의 모든 항목에 비용과 책임이 발생한다는 것을 의미합니다.

사용자가 연락처 세부정보를 제대로 확인할 수 있도록 정보를 두 배로 늘리지 마세요. 그러면 속도가 느려집니다. 양식 작성이 자동으로 진행되고 양식 필드가 자동 완성되는 것은 적합하지 않습니다. 대신 확인 이메일 보내기 코드를 사용자에게 제공한 다음 계정 생성을 계속합니다. 요청을 받습니다. 이는 일반적인 가입 패턴으로, 사용자는 익숙합니다.

사용자가 로그인할 때마다 코드를 전송하여 비밀번호 없는 로그인을 고려해 보세요. 새 기기나 브라우저를 사용할 수 있습니다. Slack 및 Medium 같은 사이트에서는 이 버전을 사용합니다.

제휴 로그인과 마찬가지로 이 방법은 사용자 비밀번호를 관리할 필요가 없다는 추가적인 이점이 있습니다.

세션 길이 고려하기

사용자 ID에 대해 어떤 접근 방식을 취하든지 세션 정보를 신중하게 결정해야 함 길이: 사용자의 로그인 상태 및 로그아웃 원인에 대한 정보를 제공합니다.

사용자가 모바일 또는 데스크톱 중 무엇을 사용하는지, 그리고 데스크톱에서 공유하거나 기기를 공유하는 것입니다.

비밀번호 관리자가 비밀번호를 안전하게 제안하고 저장하도록 지원

타사 및 내장된 브라우저 비밀번호 관리자가 비밀번호를 제안하고 저장하도록 하여 사용자가 직접 비밀번호를 선택하거나 기억하거나 입력할 필요가 없습니다. 비밀번호 관리자는 다음 환경에서 잘 작동합니다. 여러 장치 간, 플랫폼별 앱과 웹 앱 전반에 걸쳐 계정을 동기화하고, 새로운 기기.

따라서 가입 양식을 올바르게 코딩하는 것이 대단히 중요합니다. 특히 올바른 코드 안에 자동 완성 값. 가입 양식의 경우 새 비밀번호에 autocomplete="new-password"을(를) 사용하고 가능한 경우 autocomplete="email"과 같은 다른 양식 입력란에 자동 완성 값을 수정합니다. 및 autocomplete="tel" 다른 name 및 id를 사용하여 비밀번호 관리자를 도울 수도 있습니다. form 요소 자체뿐만 아니라 input, select에 대한 가입 및 로그인 양식의 값 및 textarea 요소.

또한 적절한 type 속성을 사용해야 합니다. 를 사용하여 모바일에 올바른 키보드를 제공하고 브라우저에서 기본 제공되는 유효성 검사를 사용 설정합니다. 자세한 내용은 지급 및 주소 양식 권장사항을 참고하세요.

사용자가 안전한 비밀번호를 입력해야 함

비밀번호 관리자가 비밀번호를 제안하도록 설정하는 것이 가장 좋은 옵션이며, 사용자가 브라우저 및 서드 파티 브라우저 관리자가 제안하는 안전한 비밀번호를 수락하도록 설정할 수 있습니다.

하지만 자신의 비밀번호를 입력하는 사용자가 많기 때문에 비밀번호에 대한 규칙을 구현해야 합니다. 있습니다. 미국 국립표준기술원(National Institute of Standards and Technology)은 안전하지 않은 비밀번호를 방지하는 방법

유출된 비밀번호 허용 안함

비밀번호에 대해 어떤 규칙을 선택하든 비밀번호에 노출된 비밀번호를 보안 침해를 방지합니다.

사용자가 비밀번호를 입력하고 나면 이전에 입력한 비밀번호가 아닌지 확인해야 합니다. 침해당했습니다. have I Been Pwned 사이트는 비밀번호에 대한 API를 제공합니다. 서비스를 직접 실행할 수도 있습니다

Google의 비밀번호 관리자를 사용하면 기존 비밀번호가 사용 설정되었는지 합니다.

사용자가 제안한 비밀번호를 거부한다면 거부된 이유를 구체적으로 설명하세요. 문제를 인라인으로 표시하고 해결 방법 설명 사용자가 값을 입력한 직후(가입 양식을 제출한 이후가 아니라) 서버의 응답을 기다립니다

비밀번호 붙여넣기 금지 안함

일부 사이트에서는 비밀번호 입력에 텍스트를 붙여넣을 수 없습니다.

비밀번호 붙여넣기를 금지하면 사용자를 귀찮게 할 뿐 아니라 기억하기 쉬운 비밀번호를 사용해야 하므로 침해하기 더 쉬울 수 있으며, 영국 국립 기관과 같은 조직에 따르면 사이버 보안 센터를 사용하면 실제로 보안을 약화시킬 수도 있습니다. 사용자는 비밀번호를 붙여넣으려고 한 후에만 붙여넣기가 허용되지 않는다는 사실을 알게 되므로 비밀번호 붙여넣기를 허용하지 않아도 클립보드 취약점이 방지되지 않습니다.

비밀번호를 일반 텍스트로 저장하거나 전송해서는 안 됩니다.

비밀번호의 솔트 및 해싱을 사용해야 하며 자체 해싱 알고리즘을 고안하지 마세요.

비밀번호 강제 업데이트 안 함

사용자가 임의로 비밀번호를 업데이트하도록 강요하지 마세요.

비밀번호를 강제로 업데이트하는 것은 IT 부서에 많은 비용이 들 수 있고 사용자에게 불편을 줄 수 있으며 그렇지 않습니다. 보안에 미치는 영향에 대해 자세히 알아보세요. 또한 사람들이 안전하지 않고 기억하기 쉬운 비밀번호를 사용하거나 비밀번호를 물리적으로 기록해 두는 행위

비밀번호를 강제로 업데이트하는 대신 비정상적인 계정 활동을 모니터링하고 사용자에게 경고해야 합니다. 또한 가능하면 정보 유출로 인해 비밀번호가 유출되지 않았는지 모니터링해야 합니다.

또한 사용자에게 계정 로그인 기록에 대한 액세스 권한을 제공하여 로그인이 일어난 시점입니다.

</ph>

간편하게 비밀번호 변경 또는 재설정하기

계정 비밀번호를 업데이트하는 위치와 방법을 사용자에게 명확히 알립니다. 일부 사이트에서는 생각하기 어렵습니다.

사용자가 비밀번호를 잊어버렸을 때 간편하게 재설정할 수 있도록 해야 합니다. 오픈 웹 애플리케이션 보안 프로젝트는 분실한 비밀번호를 사용합니다.

비즈니스와 사용자를 안전하게 보호하기 위해서는 사용자가 비밀번호의 보안이 침해된 것을 알게 되는 경우 이를 알립니다. 이 작업을 더 쉽게 하려면 /.well-known/change-password URL 비밀번호 관리 페이지로 리디렉션되는 사이트로 이동합니다. 이를 통해 비밀번호 관리자는 사이트의 비밀번호를 변경할 수 있는 페이지로 바로 연결됩니다. 이 기능은 현재 Safari, Chrome에서 구현되며 다른 브라우저에서도 지원될 예정입니다. 사용자가 비밀번호를 변경하도록 지원하기 잘 알려진 URL을 추가하여 쉽게 비밀번호를 변경하도록 하세요.에서 구현할 수 있습니다

또한 사용자가 원하는 경우 간편하게 계정을 삭제할 수 있어야 합니다.

서드 파티 ID 공급업체를 통한 로그인 제공

이메일 주소와 비밀번호 가입 양식을 사용하여 웹사이트에 로그인하는 것을 선호하는 사용자가 많습니다. 하지만 사용자가 서드 파티 ID 공급업체( 통합 로그인을 사용할 수 있습니다

</ph>

이 방식에는 여러 가지 장점이 있습니다. 제휴 로그인을 사용하여 계정을 만드는 사용자의 경우 비밀번호를 요청하거나 소통하거나 저장할 필요가 없습니다.

또한 다음과 같은 제휴 로그인을 통해 확인된 추가 프로필 정보에 액세스할 수 있습니다. 이메일 주소로 사용할 수 있습니다. 즉, 사용자가 해당 데이터를 입력할 필요가 없으며 확인해야 합니다 제휴 로그인을 사용하면 새 기기로 시작합니다.

웹 앱에 Google 로그인 통합 은 가입 옵션에 제휴 로그인을 추가하는 방법을 설명합니다. 다른 다양한 ID 플랫폼을 사용할 수 있습니다.

간편한 계정 전환

많은 사용자가 동일한 브라우저에서 기기를 공유하고 계정 간에 전환합니다. 사용자의 액세스 여부 계정이 있다면 계정 전환을 간단하게 만들어야 합니다.

</ph>

다중 인증(MFA) 제공 고려

다중 인증(MFA)은 사용자가 두 가지 이상의 방법으로 인증을 제공하도록 하는 것을 의미합니다. 예를 들어 사용자에게 비밀번호를 설정하도록 요구할 뿐만 아니라 확인을 시행할 수도 있습니다. 이메일 또는 SMS 문자 메시지로 전송된 일회용 비밀번호 또는 앱 기반의 일회성 사용 지문 센서 등이 있습니다. SMS OTP 권장사항 WebAuthn으로 강력한 인증 사용 설정 다중 인증(MFA) 구현 방법을 설명합니다.

사이트에서 개인 정보나 민감한 정보를 포함할 수 없습니다.

사용자 이름 주의

꼭 필요할 때까지 (또는 필요할 때까지) 사용자 이름을 고집하지 마세요. 사용자가 가입하고 로그인할 수 있도록 지원 이메일 주소 (또는 전화번호)와 비밀번호 또는 제휴 로그인만 선택할 수 있습니다. 사용자가 사용자 이름을 선택하고 기억하도록 강요하지 마세요.

사이트에서 사용자 이름을 요구하는 경우 부당한 규칙을 부과해서는 안 되며, 사용자가 사용자 이름을 업데이트하지 못하게 할 수 있습니다. 백엔드에서는 모든 사용자 계정에 대해 고유 ID를 생성해야 합니다. 사용자 이름과 같은 개인 정보를 기반으로 하는 식별자가 아닙니다.

또한 사용자 이름에 autocomplete="username"를 사용해야 합니다.

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

사용자에게 가장 일반적인 플랫폼에서 가입 양식을 테스트하세요. 양식 요소의 기능은 다를 수 있지만 표시 영역 크기의 차이로 인해 레이아웃 문제가 발생할 수 있습니다. BrowserStack은 브라우저에서 오픈소스 프로젝트를 제공합니다.

분석 및 실제 사용자 모니터링 구현

실험실 데이터뿐만 아니라 필드 데이터도 필요합니다. 을 살펴보세요. 분석 및 실제 사용자 모니터링 (RUM)은 가입 페이지가 도착하는 데 걸리는 시간 등 사용자의 실제 경험에 대한 데이터를 제공합니다 사용자가 상호작용하거나 상호작용하지 않는 UI 구성요소, 완료하는 데 걸리는 시간 가입.

• 페이지 분석: 가입 과정의 모든 페이지에 대한 페이지 조회수, 이탈률 및 이탈수를 확인할 수 있습니다.
• 상호작용 분석: 목표 유입경로 및 이벤트 사용자가 가입 절차를 포기하는 지점과 버튼을 클릭하는 사용자 비율을 표시합니다. 링크 및 기타 가입 페이지의 구성요소가 포함됩니다.
• 웹사이트 실적: 사용자 중심 측정항목 가입 절차의 로드 속도가 느린지 또는 시각적으로 불안정한지 알 수 있습니다.

조금만 변경해도 가입 양식의 완료율이 크게 달라질 수 있습니다. 분석 및 RUM 변경사항을 최적화하고 우선순위를 지정할 수 있으며, 사이트에서 발생하지 않는 문제가 있는지 영향을 받을 수 있습니다

계속 학습하기

• 로그인 양식 권장사항
• 지급 및 주소 양식 권장사항
• 멋진 양식 만들기
• 모바일 양식 디자인 권장사항
• 더욱 유용한 양식 컨트롤
• 액세스 가능한 양식 만들기
• Credential Management API를 사용한 가입 흐름 간소화
• WebOTP API를 사용하여 웹에서 전화번호 인증하기

@ecowarriorprincess가 Unsplash에 촬영한 사진입니다.