[UI/UX] 깃허브의 신박한 회원가입 플로우 UX분석

지금까지는 깃허브를 사용하지 않다가 우연히 오늘 깃허브를 가입하게 되었습니다.

내부에 개발자가 있는 팀에서 근무를 할 때 웹개발자분은 깃허브를 유료로 개인사용하고 있었는데, 배워야지 하면서도 늘 미뤄두었던 것 중 하나였지요.

문득 자바스크립트 라이브러리를 검색하러 codepen에 들어갔다가 여러 템플릿을 확인하려면 로그인하라고 뜨기에 회원가입하려는데 '깃허브로 로그인하기'가 눈에 띄었습니다.

깃허브의 계정 정보로 두가지 다 이용할 수 있다고 하기에 깃허브에 가입을 하러 들어갔어요.

 

gifhub character via google

 

깃허브는 그 특유의 고양이 캐릭터가 귀엽다고 생각했는데 개발 관련 서비스 답게 개발자들의 소스코드 작성 창과 우주 그래픽을 활용하여 독특한 그래픽 UI를 연출하고 있었습니다.

회원가입 절차를 밟으려는데 회원가입 플로우의 UX가 독특합니다.

 

우주 배경의 딥 블루 컬러에 윈도우에서 cmd를 눌러 접근하는 도스화면과 같은 폰트와 구성으로 되어있습니다. 
여기부터 남다른 UI 디자인이 돋보입니다.

 

 

---

 

깃허브 UI/UX 회원가입 플로우의 특징

 

1. 비밀번호 중복 확인 없이 1회만 입력

 

최근 UIUX 관련한 어떤 글에서 '비밀번호를 중복 입력하게 하지 말라'는 이야기가 있었고, 최근 토스와 같은 트렌디한 서비스에서 이부분을 수용하고 있는 것을 확인했어요.
깃허브에서도 비밀번호 중복 입력 내용이 없이 1회만 입력하여 체크하도록 해두었네요.
비밀번호 우측에 입력한 비밀번호 보기 토글 버튼(눈모양)을 넣어 내가 입력한 비밀번호가 맞는지만 확인할 수 있도록 하면 오입력을 줄일 수 있을 듯 합니다.

익숙하여 그대로 답습했던 것들이 변화하고 있는 포인트가 아닐까 싶습니다.

 

 

2. 안내문구의 출력을 하단 공통 영역으로

 

필드 + 안내문구 등의 복잡한 구성을 떠나 입력필드만으로 되어있는 상단 패널의 하단에 안내문구 공통 출력 영역으로 잡아 안내문구는 모두 하단에서만 노출되었다가 사라집니다.

상단의 입력 필드가 있는 패널에서 필드가 추가되어도 안내문구는 그대로 패널의 하단에 계속 붙어있습니다.

보고있는 한 화면에서 한가지의 일관된 행동만을 하게 하고(입력), 변화되는 메시지는 변화되는 영역에서 계속 보여지게끔 하여 복잡도를 줄인 듯 합니다.

 

 

3. 체크 박스 대신 y, n 입력

 

 

매력에 사로잡힌 가장 큰 부분은 맨 마지막의 이메일 수신 동의 부분입니다.
보통의 회원가입 플로우에서는 체크박스 또는 라디오버튼으로 표현하지만 DOS화면에서의 명령어를 입력할 때와 동일하게 yes 면 y를 입력하고, no 이면 n 를 입력하라고 합니다.

정말 신박한 UX라는 생각이 들었습니다.
서비스의 아이덴디티를 살리면서 주 타겟 유저에게 피식 하고 한 번 웃을만한 재치있는 포인트를 주는 듯 합니다.

불필요하다고 생각되는 요소는 모조리 없애버린 듯 깔끔하고 센스있고 유머감각까지 겸비한 UIUX 입니다.

 

아직까지 많은 솔루션과 플랫폼들에서는 회원가입 시 비밀번호 입력을 중복확인하는 필드를 유지하고 있고, 이메일이나 SMS 동의 필드 역시 체크박스로 통일하여 제공하고 있습니다만 네이티브 앱에서 새로운 UIUX를 시도하면서 기능과 트렌드가 변화되고 있어 UIUX 기획자, 디자이너 분들이라면 이러한 움직임을 눈여겨볼 필요가 있을 것 같습니다.