01. 로그인, 회원가입 프로세스 설계

회사에서 갑작스럽게 d-day가 정해졌다. 

기존에 있던 서비스를 2.0 버전으로 개발하여 2주 후에 배포하라는 것.

 

2.0 버전에 대한 아이디어들을 기획하여 개발하는 것은 지난 스프린트들을 통해 어느정도 진행된 상황이었지만, 

실제 사용자들에게 배포하는 것은 또다른 얘기였다.

 

서비스 특성상 보안이 중요하였고, 일단 우리가 개발중인 서비스는 로그인 프로세스조차 없는 상황이었다. 

서비스를 누구에게 어떤 상황에 보여줄 것인지, 어디에 어떻게 오픈할 것인지, 비로그인 유저에게는 어떤 정보를 제한할 것인지 등등.

고려해야할 사항들이 많았다. 

 

이미 2.0을 배포한지 약 3주가 지난 시점이지만, 프로덕트의 2.0을 배포하기까지의 과정을 블로그에 기록해보고자한다.

 

그 첫번째 단계는 로그인, 회원가입 프로세스 설계.

책 '기획은 2형식이다'에 따르면 좋은 솔루션을 만들어내기 위해서는 기존의 좋은 사례를 '훔치기(steal)'할 줄 알아야 한다고 했다. 

대신 '훔치기'를 제대로 해서 그 누구도 훔친줄 모르게해야 한다고. 그럼 완전 새로운 기획으로 보일 수 있다고 했다. 

하수들은 '배끼기'방식을 선택한다. 말그대로 이미 있는 것을 그대로 배껴오는 것.

나는 하수니까.. 일단 '배끼기'를 먼저 해보기로 했다. 

 

그 첫번째 단계는 다양한 서비스의 로그인,회원가입 프로세스 조사하기.

다양한 아티클을 읽고, 여러가지 프로덕트에 로그인과 회원가입을 시도해보면서 우리 프로덕트에 가장 적합한 프로세스를 찾기 시작했다. 

 

스터디하면서 도움이 되었던 글:

🌈가입/로그인화면, 어떻게 구성하면 좋을까?

전환율 유도를 위한 심리 요소들: ②회원가입 | 요즘IT

앱 시작 경험: ①회원가입 화면 | 요즘IT

 

가장 공감이 되었던 것은 "로그인과 회원가입의 진입장벽이 낮아야 한다"는 것이었다.

사용자로써 지나치게 입력창이 많거나 번거롭다고 느끼면 그 서비스 자체를 이용하지 않았던 기억이 있어서 더욱 공감이 되었던 것 같다. 

그래서 회원가입에서는 최소한의 사용자 정보로 '이메일'과 '이름'만 수집하도록 설계하였다. 

 

이메일을 필수 정보로 지정한 목적은 다음 두 가지이다. 

1. 계정 인증이 가능하여 가짜 계정이 가입하는 것을 방지할 수 있을 것.
2. 회사 이메일로 가입을 유도할 수 있을 것.

그리고 구글 소셜 로그인을 추가하여 회원 가입 전환을 높이고자했다.

 

두 번째로 Flow chart를 그려서 본격적으로 프로세스를 설계했다.

 

 

이 Flow를 설계할 당시 [이메일 인증]을 [회원가입 성공 및 자동 로그인] 뒤에 배치하였다. 

그 이유는 '비인증 계정도 우리 서비스를 둘러볼 수 있으면 실제로 서비스를 이용할 확률이 높지 않을까?'하는 생각에서 출발했다.

(언젠가 트래픽이 많아지면 검증해볼 수 있기를..🙏)

 

마지막으로 Flow chart를 토대로 Wire frame을 그렸다.

개발 편의를 위해 Figma를 활용해 Hi-fi wireframe을 그렸다. 

(아래 이미지는 실제 우리 서비스에서 보여지는 화면은 아니고, 일부 요소를 각색한 것이다.)

 

 

 

 

로그인/프로세스를 설계하면서 거의 모든 프로덕트에 있는 가장 기본이 되는 기능이 이렇게도 생각할게 많구나를 느낄 수 있었다. 그리고 Flow chart를 그리면서 로직과 흐름의 구멍을 발견할 수 있어서 좋았다.