효과적인 사용자 가입화면/플로우 만들기 | 매거진에 참여하세요

모든 웹 앱에는 사용자가 회원가입하고 계정을 생성할 수 있는 방법이 있습니다.

여러분도 아마 많은 웹 앱에 회원가입해본 경험이 있을 것입니다.

회원가입 기능은 단순히 이메일과 비밀번호를 요청하고 사용자를 로그인시키는 것처럼 쉽게 코딩하고 디자인할 수 있다고 생각할 수 있습니다.

하지만 안타깝게도, 그렇게 간단하지 않습니다.

좋은 회원가입 흐름을 설계하려면 사용성과 보안 사이의 균형을 찾아야 하며, 여기에 약간의 마케팅 요소도 추가되어야 합니다.

랜딩 페이지: 마찰을 최소화하라!

웹 앱의 완벽한 랜딩 페이지를 설계하는 데 도움을 줄 수 있는 온라인 자료는 많으므로, 여기서는 회원가입 섹션에만 초점을 맞추겠습니다.

여기서 두 가지 옵션이 있습니다: 전용 회원가입 페이지를 만들거나, 랜딩 페이지 내에서 회원가입을 처리하는 것입니다.

전용 페이지는 더 깔끔해 보일 수 있고 코딩하기 쉬울 수 있지만, 사용자가 찾아야 하는 추가 페이지이며, 로딩을 기다려야 하고, 사용법을 익혀야 합니다.

또한, 전용 회원가입 페이지는 랜딩 페이지가 제공하는 컨텍스트를 일부 잃을 가능성이 높습니다.

이러한 이유로, 우리는 랜딩 페이지 내에 회원가입 폼을 배치할 것을 권장합니다. 실제로, 로그인 폼도 동일하게 처리합니다!

이제 랜딩 페이지에 이러한 폼을 배치하는 다양한 방법이 있습니다. 처음에는 다음과 같이 생각할 수 있습니다:

• 전용 회원가입 페이지 와이어프레임: 로그인과 회원가입을 위한 폼이 있으며, 여러 필드를 채워야 합니다.

이것은 명백히 끔찍한 UI입니다. 폼 필드로 가득 찬 벽은 혼란스럽고 위압적입니다.

이것이 정말로 잠재 고객에게 주고 싶은 첫인상인가요? 😊

대안을 보여드리겠습니다:

랜딩 페이지의 회원가입 폼 와이어프레임: "회사 이메일 주소"라는 단일 필드만 있습니다.

이게 전부입니다! 😊

이 디자인에서 사용된 몇 가지 트릭은 다음과 같습니다:

1. 로그인과 회원가입 기능은 시각적으로 매우 다릅니다. 하나는 링크이고, 다른 하나는 폼입니다. 이렇게 하면 사용자가 둘을 혼동하지 않습니다.

3. 로그인 링크는 사용자가 기대하는 위치인 오른쪽 상단에 있으며, 회원가입 폼과 멀리 떨어져 있습니다.

4. 이렇게 하면 두 기능을 혼동할 가능성이 줄어듭니다.

6. 가장 중요한 것은, 두 개의 무서워 보이는 로그인 및 회원가입 폼을 두 번째 단계로 이동시켜 랜딩 페이지를 깔끔하게 유지하는 것입니다.

이러한 요소들이 함께 큰 차이를 만듭니다. 그렇지 않나요?

기본 : 사용자 이름과 비밀번호 인증

가장 일반적인 인증 방법인 사용자 이름과 비밀번호부터 시작해보겠습니다.

이미 랜딩 페이지에서 사용자의 이메일을 요청했으므로, 이제는 조금 더 많은 정보를 요청할 시간입니다.

사용자가 랜딩 페이지에서 "Start Trial"을 클릭하면 다음과 같은 대화 상자가 나타납니다:

여기서 주목할 만한 마이크로 인터랙션들이 있습니다:

1. 모든 필드에는 "이 필드는 필수입니다"를 의미하는 빨간색 *가 표시됩니다.

3. - 이메일 주소 필드는 사용자가 이미 입력한 내용으로 미리 채워집니다.

4. 다시 입력할 필요가 없습니다! 이는 이전 화면과의 연결을 제공합니다.

5. - 별도의 사용자 이름 필드가 없습니다.

6. 이메일은 고유하며 충분히 설명적이므로 각 사용자의 주요 식별자로 사용됩니다.

7. - 포커스는 자동으로 "전체 이름" 필드로 설정됩니다.

8. 이는 사용자가 마우스를 사용하지 않고도 바로 입력을 시작할 수 있게 합니다.

9. - TAB 키를 사용하면 사용자가 다양한 폼 필드 사이를 이동할 수 있습니다.

10. 이는 접근성을 높이고, 파워 사용자가 빠르게 회원가입할 수 있게 도와줍니다.

11. - 별도의 이름과 성 필드 대신 단일 "전체 이름" 필드를 사용하는 것이 더 포괄적입니다.

12. 일부 지역에서는 이름과 성을 사용하지 않기 때문입니다.

13. - 비밀번호 필드는 하나만 있습니다. 비밀번호 확인을 강제하는 것은 번거롭고 필요하지 않습니다.

14. 대신, 사용자가 비밀번호를 보이게 할 수 있는 눈 아이콘 토글을 제공합니다.

15. 비밀번호를 잘못 입력한 경우, 언제든지 쉽게 재설정할 수 있습니다. 물론, 해당 흐름을 잘 설계했다는 가정 하에요. 😉

17. - 비밀번호 보안 정책은 매우 간단합니다:

18. 최소 8자입니다. 이는 이해하기 쉽고 준수하기 쉬우며, 충분한 보안을 제공합니다. 더 복잡한 요구사항은 보안을 약간 높이지만, 사용자의 불만을 크게 증가시킵니다. 😊

19. 사용자가 8자 이상 입력하면 "최소 8자" 텍스트가 녹색으로 변하여 사용자에게 피드백을 제공합니다.

20. - 사용자가 유효한 비밀번호를 입력하지 않고 탭이나 클릭으로 비밀번호 필드를 벗어나면 텍스트 필드의 테두리가 빨간색으로 변하여 오류를 표시합니다.

21. - 표준 개인정보 보호정책 및 이용약관 체크박스를 표시하는 것을 잊지 마세요. 링크는 새 브라우저 탭에서 열리도록 하여 회원가입 흐름을 방해하지 않도록 합니다.

22. - "Continue" 버튼은 모든 필드가 올바르게 채워질 때까지 비활성화 상태로 유지됩니다.

23. - "Resend Verification Email" 링크도 있습니다.

24. 이메일을 받지 못한 경우 다시 시도할 수 있도록 합니다. 이 링크를 여기에 숨기는 것은 좋은 위치입니다.

25. 사용자가 처음 이메일 주소를 입력한 곳이기 때문에, 회원가입 과정에서 다시 찾을 수 있기 때문입니다.

인증 : 이메일 인증

사용자가 작은 폼을 채우고 "Continue"를 클릭했습니다.

불행히도, 이제 바로 사용자 계정을 생성하고 로그인시킬 수는 없습니다.

사용자가 이메일을 받을 수 있는지 확인해야 합니다. 이는 매우 중요합니다.

왜냐하면 이메일을 통해 비밀번호를 재설정할 수 있고, 계정에 대한 중요한 통신을 보낼 수 있기 때문입니다.

과거에는 여러 웹 앱이 이메일 확인이 완료되기 전에 사용자를 로그인시키곤 했지만, 이는 혼란스럽습니다.

"미확인 사용자"라는 개념을 추가해야 하며, 모든 것이 더 복잡해집니다.

또한 보안 문제도 있습니다: 내가 당신의 이메일 주소로 회원가입하면, 당신이 나중에 회원가입하는 것을 방해할 수 있습니다!

대신, 대부분의 웹 앱은 이제 이메일 확인을 회원가입 흐름의 필수 부분으로 만듭니다. 다음과 같이 말이죠:

이것이 전부입니다: 많은 텍스트가 없습니다. 이메일 주소를 표시하여 올바르게 입력되었는지 확인할 수 있게 하고, 이메일을 확인하여 프로세스를 계속하라고 안내합니다.

Resend Verification Email 대화 상자

다음은 Resend Verification Email 대화 상자의 모습입니다:

• Resend Verification Email 와이어프레임: 이메일 필드가 미리 채워져 있으며, 지원팀에 연락할 수 있는 방법을 제공합니다.

간단하고 깔끔합니다: 이전에 입력한 이메일을 미리 채우고, 이메일 필드에 포커스를 맞추며, 사용자가 확인하면 이메일 주소를 보여주고,

문제가 있을 경우 지원팀에 연락할 수 있는 쉬운 방법을 제공합니다.

메인 흐름으로 돌아가기: 이메일 확인 시간!

먼저, 백엔드 시스템이 트랜잭션 이메일에 대해 매우 높은 수준의 전달 가능성과 속도를 보장해야 합니다.

이 이메일 메시지의 구조는 다음과 같습니다:

1. "제품 이름 support@yourdomain"에서 발송됩니다. "no-reply" 같은 적대적인 내용은 없습니다! 사용자가 답장하기 쉽고, 지원팀이 도울 수 있게 합니다.

3. 제품 로고와 이름이 포함됩니다. 이는 이메일을 랜딩 페이지와 연결시켜 동일한 흐름의 일부로 느끼게 합니다.

4. 짧은 텍스트와 명확한 CTA 버튼이 있습니다.

5. 확인 URL을 버튼과 링크로 모두 표시합니다. 이는 오래된 이메일 클라이언트나, 사용자가 링크를 복사/붙여넣기해야 하는 경우에 유용합니다.

7. 하단에는 제품이 무엇을 하는지와 지원팀에 연락하는 방법을 안내합니다.

8. 이는 누군가 실수로 이 이메일을 받은 경우에 유용하지만, 컨텍스트를 제공하고 지원팀이 접근 가능하고 도움을 줄 준비가 되어 있음을 보여줍니다.

거의 다 왔습니다: 로그인으로 확인 완료

사용자가 "Verify Account" 버튼이나 링크를 클릭하면 거의 다 끝났습니다!

다시 한 번, 아직 계정을 생성할 수는 없습니다. 보안상 안전하지 않기 때문입니다. 대신, 다음과 같은 로그인 화면을 보여줍니다:

몇 가지 주목할 점:

2. 제목은 "이메일 확인을 완료하려면 로그인하세요"라고 표시되어, 로그인을 방금 클릭한 이메일과 연결시킵니다.

3. 이메일 주소에 포커스가 맞춰져 있지만, 이번에는 미리 채워지지 않습니다. 이렇게 하는 것이 더 안전하며, 사용자에게 로그인 방법을 가르치는 것입니다.

4. 폼에는 오류를 표시할 공간이 있습니다. 가장 일반적인 오류는 "잘못된 이메일 또는 비밀번호입니다. 다시 시도하세요."입니다.

5. 이는 어떤 필드가 잘못되었는지 알려주지 않아 잠재적인 해커에게 정보를 누출하지 않습니다.

7. 또 다른 오류는 누군가 너무 많은 비밀번호 시도를 하는 경우입니다. 이 경우, "너무 많은 시도입니다. support@yourdomain으로 문의하세요."와 같은 메시지를 표시합니다.

로그인에 성공하면, 드디어 데이터베이스에 사용자 계정을 생성하고 로그인시킬 수 있습니다!

휴! 시간이 좀 걸렸지만, 여기까지 왔습니다. 사용자가 이메일을 받을 수 있고, 성공적으로 로그인할 수 있음을 확인했습니다. 이제 파티할 시간입니다!

물론, 사용자가 이메일, 비밀번호를 업데이트하거나 계정을 닫을 수 있는 방법을 제공해야 합니다(우리는 이를 사용자 설정 대화 상자에서 처리합니다).

또한, 로그아웃 기능도 제공해야 합니다. 현재 표준은 아바타를 클릭하여 트리거되는 오른쪽 상단의 작은 메뉴에 이러한 기능을 배치하는 것입니다.

다른 경우: 여러 계정을 가진 사용자 지원

다음은 생각하지 못했을 수 있는 특별한 경우입니다:

이미 한 계정으로 로그인한 사용자가 다른 계정을 생성하는 경우입니다. 예를 들어, 하나는 업무용이고 다른 하나는 개인용일 수 있습니다.

이메일 링크를 클릭하여 확인하려고 할 때, 이미 로그인한 상태라면 다음과 같은 메시지를 표시해야 합니다:

알겠죠? 생각할 게 정말 많습니다!!!! 😊

단축 경로: Google 인증

Google 인증을 사용하면 프로세스가 훨씬 간단해집니다. 사용자와 개발자 모두에게요.

왜냐하면 Google은 사용자가 처음 Google로 회원가입할 때 이미 이메일 주소를 확인했기 때문입니다! 우리는 Google이 이를 대신해줄 수 있으므로, 이메일 확인을 할 필요가 없습니다.

랜딩 페이지에서 사용자가 "Google 인증으로 빠르게 회원가입"을 클릭하면 표준 Google OAuth 화면으로 이동합니다:

이 화면은 Google이 제공하는 것이므로, 코딩할 필요가 없습니다! 😊

한 번의 클릭으로 사용자는 계정을 선택할 수 있고, Google은 웹 앱에 전체 이름과 이메일 주소를 보냅니다. 정말 간단하죠!

Google의 화면은 또한 개인정보 보호정책과 이용약관에 대한 링크를 제공합니다. 이는 매우 편리하지만,

우리는 개인정보 보호에 대해 매우 엄격하기 때문에 이 정도로는 충분하지 않다고 생각합니다. 따라서 다음과 같은 단계를 추가합니다:

이를 통해 사용자가 실제로 우리의 약관을 읽고 동의했는지(또는 적어도 체크박스를 클릭했다고 말했는지) 확인할 수 있습니다.

단 두 번의 클릭만으로 새로운 사용자가 로그인합니다!

정말 부드럽죠... OAuth는 코딩하기 조금 까다롭지만, 작동하면 사용자에게 매우 부드러운 경험을 제공합니다.

위의 글은 아래 원문을 번역 및 재가공한 글입니다. 원문은 아래에서 확인하실 수 있습니다.

https://balsamiq.com/learn/articles/sign-up-flow/