XE3 Member & Management #1

데이터 분석을 통해 회원가입, 로그인 등 Account 모듈 UI 설계하고 개선하기

XE3는 기존 Xpressengine 1.x 버전의 확장성 문제를 해결하고 모던한 CMS를 만들기 위한 프로젝트다.
Member & Magagement 포스팅은 회원가입, 정보관리, 페이지 및 플러그인 관리를 위한 편집 페이지 UI에 대한 내용이다. 로그인, 회원가입, 계정설정, 모듈관리, 컨텐츠설정, 프로필 관리, 소셜 후킹 관리, 보안설정 등의 내용을 포함한다. 주요 항목으로 XE3 Core에 포함하는 기본 개념으로, 일부 핵심 모듈과 연동되어 관리를 손쉽게 할 수 있도록 고민했다.

1장에서 다루는 Auth는 로그인, 회원가입 등의 계정정보와 개인정보 확인 기능을 포함하며, 소셜 로그인 제공으로 회원가입 허들을 낮추고 중복 입력하는 허들을 낮추기 위해 API를 제공하도록 하였다.
거의 대부분의 서비스가 XE3의 Auth에 해당하는 Account 모듈이 있는데, 구지 평범한 Account 모듈을 소개하는 이유는 익숙하지만 모르던 많은 기능과 고민들이 필요한 중요한 역할을 하는 UI이기 때문이다.

Authentication

Account 모듈에서 Authentication은 크게 로그인, 회원가입으로 나뉜다. CMS 특성상 기본 입력값 외에도 입력 항목 필드를 커스텀 설정을 통해 추가하여 정보를 입력 받을 수 있도록 설계되었다. 각 입력값이 사용자로부터의 input인지, 소셜 정보라면 어디서 정보를 가져오고 데이터를 확인할지, 어느 플로우에서 데이터를 비교하여 Validator를 통할지..등의 고민들이 UI에 담겨있다.

Log in

로그인 UI는 일반 로그인, 소셜 로그인으로 2가지 경로를 가진다. Setting에서 소셜 로그인을 설정할 경우, 소셜로그인 UI를 노출한다. 각 모든 UI는 설정된 다국어를 모두 지원하여야 하기 때문에 각 요소별로 고정 위치를 유지하도록 하였다. 로그인은 기본 Capcha(Google)를 탑재하고 있다.

처음엔 Sign in, Sign up으로 분리하여 명명해두었는데, 아시아권 뿐 아니라 영어권에서도 이를 헷갈리는 유저 테스트가 발견되어, Sign-in은 범용적으로 사용되는 Log in으로 명칭을 변경하고 아시아권 다국어 해석만 ‘Sign-in’으로 해석하도록 교체하였다.

다국어 대응 예시와 세팅을 통해 자동 변경되는 로그인 모듈


Log-in UI Guideline

Sign up

회원가입 UI는 기본 회원가입, 관리자 커스텀 회원가입, 소셜 회원가입으로 3가지 타입으로 분리된다. 입력 데이터에 따라 alert 메시지를 전송하며, 입력 항목을 커스텀 설정으로 추가할 수 있다. 추가된 항목은 필수/선택 항목으로 선택하며, 추가 info 메시지를 전송할 수 있도록 하였다.

Auth에 관련한 모든 Selectbox는 XE3 BasicUI에서 제공하는 Dropbox를 사용하지 않고 모바일 OS 대응을 위해 기본 dropbox UI를 적용하도록 하였다. 개인정보 항목을 추가하는 경우 이용약관 및 개인정보 보호 정책을 수정/적용할 것을 권장하도록 안내하였다.

Validator 작동 예시와 입력 양식 커스텀 예시


Sign-up UI Guideline

Forgot Password

비밀번호 찾기와 관련된 UI는 등록된 e-mail을 통해서만 확인 가능도록 설계하였다. 필요에 따라 핸드폰번호 인증방식 등의 UI는 추가 플러그인이 서브파티로부터 개발될 수 있으므로, 기본이 되는 e-mail 인증방식만 Core에서 제공하기로 하였다.

송신되는 e-mail에는 비밀번호 변경에 대한 지침을 포함한다. 각 UI는 웹제공 UI(정보입력)과 이메일 수신 UI로 2Step을 거치도록 설계하였다. 비밀번호 변경을 제외한 UI에는 로그인 페이지로 항상 롤백할 수 있도록 버튼을 제공하여 사용자가 길을 잃지 않도록 배려하였다.

개인정보보안, 작동오류를 위한 대응책, 취소할 때의 로직 등에 대한 고민이 담겨있다.

Social Login Popup Widget

소셜로그인만 사용할 경우 로그인 페이지 이동이 꽤 불필요한 유저플로우라고 생각될 수 있었다. 이를 대응하고자 Account 모듈에 팝업 위젯을 기본 내장하여 선택을 통해 사용할 수 있도록 하였다. 기존 페이지의 UI 작동을 막기 위해 CoreUI의 dimd 레이어를 포함하고 있다.

소셜로그인 팝업 위젯은 Chak 서비스에서 적용하여 사용하였다.

 

후기 또는 잡담

어쩌면 매우 흔한 회원가입, 로그인, 회원정보 찾기 등의 Auth의 Account 모듈을 중점으로 살펴보았다.
매우 일반적이지만 서비스마다 매우 다른 부분 중 하나가 이 페이지인데, 이유는 서비스마다 제공하는 회원 타겟이 다르고, 타겟이 다르다보니 대응해야하는 기기와 언어가 다른 것이 일반적이고, 서비스 특성에 따라 허들이 높아야하는 경우(증권, 은행 등의 Fintech)도 존재한다.
하지만 객관적인 관점에서 보면, 많은 부분에서 고민의 깊이가 다른 경우가 많은데 이를 위해 해당 UI를 작업하면서 몇가지 가설과 개선을 진행하였다.

가설 수립

  • 사용자는 GNB의 로그인과 회원가입 버튼이 동시 노출되면 헷갈려한다.
  • 다국어 대응으로 인해 언어권별로 통용되는 단어가 아닐 수 있다.
  • 비밀번호를 제대로 입력했는지 보고 싶어할 것이다.
  • 사용자는 이메일, 비밀번호만 입력하면 회원가입이 가능할 것이라고 판단할 것이다.
  • 이미 회원가입이 완료된 사용자는 로그인 페이지로 매번 이동(리다이렉팅 되더라도..)하는 것이 불편할 것이다.
  • 비밀번호 변경을 하는 경우, 이메일이 어디로 전송되는지 모를 수 있다.

개선 내용

  • 상단 GNB에 로그인, 회원가입 버튼이 동시에 제공되지 않는다. (접근시 Auth 확인과정을 거친다)
  • Sign-in을 영어권에서 Log-in으로 통일하고, 한국어는 ‘회원가입’. 중국, 일본어를 제외한 기타 언어권에서 영문 ‘Log-in’을 공통으로 쓰도록 한다.
  • 비밀번호 입력 필드에서는 텍스트를 볼 수 있는 기능을 제공한다.
  • 라벨 옆에 필수입력 영역은 *표시, 추가정보 입력 영역은 ‘(선택사항)’ 텍스트가 노출되도록 UI단에서 input 클래스를 구분하도록 한다.
  • 로그인 페이지는 위젯을 내장하여 Dialog UI로 대체할 수 있게 기능을 제공한다. (페이지이동을 하지 않음)
  • 비밀번호 찾기/변경 단계에서, 필요한 정보를 필수로 노출한다. (보낸 이메일 계정, 재수신, 취소시 메시지 등)