로그인/회원가입 기획 & 디자인하기
들어가며
UXUI 디자이너로서 첫 로그인/회원가입 부분을 설계하고 정리한 내용을 공유하고자 합니다.
세부적인 정책 기획에 대한 것은 빠져있으나 프로세스 기획 ~ UXUI 디자인 시 고려할 내용이 포함되어 있으므로 참고 부탁드립니다!
1. 로그인/회원가입 플로우 설계하기
세부 기획이 있기 전, 로그인/회원가입 단계에 대한 전체 프로세스를 그리는 것이 필요하다. 보통 주요 태스크로는, [로그인], [회원가입], [아이디/비밀번호 찾기]가 있다.
로그인의 경우 거의 프로세스가 유사하지만 회원가입의 경우 서비스마다 조금씩 다른 점을 확인할 수 있는데, 서비스마다 다른 정책이나 기획 원칙에 맞게 정보나 프로세스가 달라질 수 있기 때문이다.
예를 들어, 네이버 회원가입의 경우 약관 동의 → ID / PW 설정 및 본인 인증 → 회원가입 완료이다. 그러나 내가 기획한 B2B 회원가입의 프로세스는 관리자 승인 정책에 맞게 ID 설정 및 본인 인증 → 관리자 승인 → 비밀번호 생성 → 회원가입 완료의 절차로 이어지게 되었다.
이렇게 개요를 구상하고 각 태스크에서 플로우차트에서 촘촘하게 고려할수록 디자인/개발에 필요한 정의를 빼놓지 않고 기획할 수 있다.
예시용 : 러프한 플로우차트2. 정보 정리하기
개요가 어느 정도 정해졌다면 사용자에게 정보를 어떻게 노출시킬지에 대한 고민을 하게 된다. 사용성을 높일 수 있는 방안은 여러 가지 요소가 있지만 로그인/회원가입 부분에서 필수적으로 고려해야 하는 세 가지를 전달하고자 한다.
1) 정보의 유효성
꼭 필요한 정보인지 재고려한다. 사용자에게 essential 정보를 제공함으로 주어진 정보에 집중하도록 하고 이탈률을 줄일 수 있다.
2) 정보 청킹
청크(Chunks)란 더 큰 무언가의 일부인 조각을 뜻하는데, UX에서는 연관성 있는 정보를 작고 개별의 유닛 단위로 분류하는 것이다. 이는 사용자의 인지적 노력을 줄이며 이해를 높이기에 회원가입 단계에서 사용자로부터 받아야 할 정보가 많은 경우 고려하는 것이 필수적이다.
3) 정보 우선순위
꼭 필요하고 입력하기 쉬운 정보부터 받는다. 입력받는 정보가 여러 개일 시 입력 순서를 정해야 하는데, 중요도 / 입력 용이한 정도와 같은 기준에 따라 정할 수 있다. 그리고 우선순위에 따른 화면 구성도 정의한다.
3. 세부 항목 설계하기
메인 플로우를 설계하고 화면 별 노출할 정보를 정했다면 좀 더 상세한 기획이 필요하다. 여러 개의 UI 항목들이 있지만 가장 주요하게 노출되는 두 가지 항목에 대해서 전달하고자 한다.
1) 입력 필드 정의
로그인/ 회원가입 단계에서는 Input Field 사용이 잦은데, 입력 시 성공/에러 표시 조건에 대해서 정의가 필요하다. (사실 이것은 [첫 번째 단계 - 플로우 설계]에서도 할 수 있다. 그런데 큰 구조를 보며 놓칠 수 있다.. ㅎ)
예를 들어, ‘비밀번호’와 ‘비밀번호 확인’을 다르게 입력했을 때 / 비밀번호 정책에 맞지 않게 입력했을 때 등 다양한 케이스에 대해 고려한 정의가 필요하다.
그리고 General Rule이 없는 상태라면 상태값, 형태에 대한 UI정의도 필요하다. (inactive, active, focused, disabled, error, hover)
2) 버튼 정의
로그인 / 회원가입 프로세스 모두 Call To Action 버튼이 표시되는데, 일관성 있게 노출하기 위해 해당 버튼의 활성화 조건에 대한 정의도 필요하다. 사용자의 자율성을 높일 것인가? 에러 발생 가능성을 줄일 것인가? 선택의 문제지만 대다수의 서비스는 CTA 버튼을 활성화된 상태로 표시하고 있다.
Default : 활성화
- CTA 버튼은 항시 활성화 상태이며, 필수항목이지만 입력이 누락된 것이 있거나 입력 조건에 맞지 않게 입력 시 에러 문구를 표시하는 케이스이다. (CTA를 누르지 않아도 각 입력 필드에 대한 조건을 걸게 되면 이런 이슈는 사라진다.)
Default : 비활성화
- 로그인이나 회원가입의 경우 사용자가 수행해야 할 것이 명확하며 가짓수가 많지 않기에 버튼을 비활성화로 표시한 이후, 모든 입력이 완료되었을 때 활성화 처리를 하는 케이스가 있다.
마치며
살면서 로그인/회원가입을 정말 많이 했는데 기획을 하며 다시 모든 것을 새롭게 보게 되었다. 관리자 승인이 있는 회원가입 케이스는 어떻게 되어야 하는지, 정상 케이스 이외 에러 케이스는 무엇이 있는지와 같은 것도 어렵게 느껴졌다..
제너럴 룰도 없어 정책 문의 + UX 고려 + UI 설계까지 하는 것이 주니어로서 카오스였지만 레퍼런스 참고하고 설계하는 단계에서 로직, UI 요소 통일성을 고려하는 것이 체득이 된 것 같다.!
