회원가입 사용성 개선하기
안녕하세요. 밀리의 서재 프로덕트 디자이너 sally입니다.
오늘은 디자이너의 시선으로 회원가입 플로우를 개선한 과정을 남겨볼까 합니다.
Background
밀리의 서재는 14세 이상의 사용자만 회원가입을 진행할 수 있었습니다. 하지만 앞으로 서비스를 확장해나가기 위해 연령 제한은 없어져야 할 정책이 되었습니다. 우리는 회원의 연령풀을 확대하기로 결정했고 사용자의 정확한 나이를 수집해야 하는 상황을 맞이했습니다. 또한 본인인증을 통해 14세 미만 여부를 확인한 뒤 이들의 법정대리인 인증을 받아야 하는 절차는 필수가 되었습니다.
14세 미만의 회원가입
본인인증 도입
결과적으로 저희 팀에는 2가지 과제가 주어졌습니다. 비즈니스 측면에서도, 수집될 회원 정보의 정확성 측면에서도 해야 할 일이었지만 사실 걱정이 앞섰습니다. 본인인증은 회원가입 플로우의 허들이 될 것을 우려하여 그동안 도입하지 않고 있었던 절차였기 때문입니다.
저는 해당 과제와 함께 직면한 문제들을 해결하기 위해 전반적인 회원가입 사용성 개선을 진행했습니다.
Problem
우선 회원가입 플로우에서 우려되는 문제점 3가지를 꼽았습니다.
회원가입 단계가 길고 부담스러움
가입을 완료하지 못하고 이탈함
부정적인 서비스 첫인상이 우려됨
Solution
절차에 대한 부담 줄이기
사용자가 회원가입 화면에 진입하자마자 필드 4개를 마주하게 된다면 어떨까요? 아마도 매우 부담될 겁니다. 또 쉽게 포기할지도 모릅니다. 불편한 첫인상의 결과는 이탈로 이어지게 됩니다. 이러한 사용자의 심리를 최대한 방어할 수 있는 방법은 무엇일까요?
저는 인터렉션으로 문제를 해결했습니다. 우리는 사용자가 채워야 할 필드를 4개에서 1개로 줄일 수 없습니다. 하지만 꼭 한 번에 다 보여줄 필요도 없겠죠. 화면의 처음에는 하나의 필드만 보여줍니다. 그리고 사용자가 필드를 하나 채우면 다음 필드가 생성되도록 합니다. 이는 필드를 순차적으로 채워 넣게 해주는 동시에 부담도 덜어줄 수 있는 방법입니다.
기존 SMS 인증 방식일 때는 서비스 약관에 대한 동의만 받으면 되는 상황이었습니다. 어느 시점에 동의를 받아도 무방했기에 허들이 되지 않도록 사용자의 가입 완료가 임박한 맨 마지막 단계로 설정했습니다. 하지만 휴대폰 본인인증을 도입하게 되면서 약관에 대한 동의를 먼저 받아야 인증을 진행할 수 있게 되었습니다. 가장 마지막에 있던 단계가 필수적으로 앞단에 와야 하는 것입니다. 게다가 사용자가 본인의 정보를 입력한 화면에서 약관 동의를 함께 받아야 한다는 점 또한 문제였습니다. 4개의 필드와 6개 이상의 약관을 한 화면에 노출하는 것은 매우 부담스러웠기 때문입니다.
이를 해결하는 방법으로 액션 시트를 선택했습니다. 사용자가 필드에 정보 입력을 완료하면 액션 시트로 약관을 노출시켰습니다. 해당 단계를 앞으로 옮기는 동시에 한 화면에서 동의를 받을 수 있게 되면서 두 마리 토끼를 잡아냈습니다.
불필요한 액션 제거하기
회원가입 과정에서 사용자가 넘어야 할 산은 매우 많습니다. 완료까지 가는 여정에 힘들이지 않고 쉽게 갈 수 있도록 해주는 건 어떨까요? 저희는 사용자가 필수로 해야 하는 액션만 남겨두고 나머지는 대신해주기로 했습니다.
우선 사용자가 가입 화면에 진입했을 때 첫 번째 필드에 포커싱 해주었습니다. 사실 매우 간단한 인터렉션이지만, 사용자가 채워야 할 필드에 미리 포커싱 되어 있는 것은 고민하고 생각하는 행위보다 채워 넣는 행위로 유도할 수 있기에 아주 효과적입니다.
다음 필드로 넘어가기 위해 커서를 옮기거나 컨펌 버튼을 누르는 행위가 필요 없도록 했습니다. 별도의 컨펌 없이 휴대폰 번호가 모두 입력되면 다음 필드로 포커싱이 넘어가게 설계했습니다. 예외 케이스도 고려하여 휴대폰 번호의 시작이 010일 경우 11자리, 그 외 011,017,018… 일 경우에는 10자리로 입력 조건을 달리했습니다. 주민등록번호 역시 생년월일 6자리와 성별 1자리가 고정된 값이기에 휴대폰 번호와 동일한 구조로 설계했습니다. 그리고 입력 값의 변수가 있는 이름 필드를 마지막에 배치했습니다. 이제 사용자는 저희가 의도한 순서대로 입력을 한다면 필드를 옮기거나 컨펌 버튼을 클릭할 필요 없이 온전히 정보만 입력하면 됩니다.
모든 사용자가 저희 의도대로 되면 좋겠지만 당연하게도 베이식한 절차에 해당하지 않는 사용자도 존재합니다. 바로 이미 가입한 회원입니다. 이들은 회원가입을 시도하지만 가입 이력이 있어 블락당하게 됩니다. 여기서 안내를 그치면 사용자는 로그인할 수 있는 경로를 직접 찾아 나서야 합니다. 저희는 그런 불필요한 과정을 단숨에 건너뛸 수 있도록 로그인 화면으로 바로 가는 버튼을 제공했습니다. 거기다 회원가입을 시도한 휴대폰 번호(아이디)를 미리 입력해둔 채로 비밀번호 필드에 포커싱을 해줍니다. 귀찮은 일은 저희가 다 했고 사용자는 비밀번호만 입력하면 됩니다.
완료까지 빠르게 도달하기
기존 회원가입 과정에선 필명 설정만 존재했습니다. 프로필 사진을 설정하는 것보다 빠르게 가입 완료시키는 것이 목표였기 때문입니다. 하지만 대부분의 회원들이 서비스 이용 중에도 프로필 사진을 설정하지 않았고 비어있는 프로필이 많아 고민이 되었습니다. 이를 해결하기 위해 회원가입 과정에서 필명과 함께 프로필 사진을 설정할 수 있는 프로필 설정 단계를 개설하기로 했습니다. 여기서 프로필 사진을 필수로 설정하게 만드는 것도 고민했지만, 허들이 될 수밖에 없다고 판단하여 디폴트 이미지를 제공하기로 결정했습니다. 디폴트 이미지로 여러 시안을 제작하여 적용해보니 다채로운 색상의 이미지는 동일 회원으로 보이는 현상이 있었습니다. 논의 끝에 단조로운 톤과 캐릭터 일러스트를 조합한 이미지를 채택하여 랜덤으로 제공해주기로 결론지었습니다.
이제 더 이상 비어있는 프로필이 생성되지 않으며, 사용자는 별도의 편집 없이도 랜덤으로 부여받은 프로필을 가볍게 확인하고 바로 가입을 완료할 수 있게 되었습니다.
구성원 설득하기
위에 언급한 본인인증이 도입되기 전, 멤버들은 회원가입 플로우가 길어지는 것에 대해 매우 우려하고 있었습니다. 저는 멤버들에게 해결 방법으로 인터렉션 활용을 주장했습니다. 주장을 뒷받침하기 위해 인터렉션이 반영될 화면 시안을 피그마에 단계별로 쭉 그려서 설명했으나, 나열된 화면만으로는 쉽게 공감하지 못했습니다.
길게 느껴지지만 사실은 한 화면제 의도를 어떻게 전달하면 좋을지 고민한 끝에 실제로 구동되는 모습을 보여주면 설득이 훨씬 쉬울 것이라고 판단했습니다. 저는 프로토파이를 이용하여 Hi-Fi 프로토타입을 제작했습니다. 3일가량 소요한 끝에 오토 포커싱, 입력 조건 충족 시 다음 필드 생성 등 구상했던 인터렉션을 모두 구현했습니다. 해당 프로토타입을 멤버들에게 공유하고 시연하는 리뷰를 진행했고 이전보다 훨씬 쉽게 설득할 수 있었습니다. 저의 제안은 이의 없이 받아들여졌고 별도의 수정 없이 그대로 반영되었습니다.
또 해당 프로토타입을 가지고 개발자와 협업한 덕분에 소통의 오류 없이 인터렉션을 의도한 대로 구현할 수 있었습니다.
RESULT
개선 후 가입률은 개선 전 대비 0.3%p 하락했습니다. 월별 가입률의 변동폭이 -0.5%p~0.5%p인 것을 감안하면 오차범위 이내에서 잘 방어했다고 볼 수 있습니다. 회원가입 과정이 한 단계 늘어나면서 체류시간도 조금 길어졌지만, 사용성을 개선한 덕에 가입률 하락을 막을 수 있었습니다.
그리고 추가 개선 및 사용성 검증을 위해 UT를 진행한 결과, 테스터 모두 UX 의도를 정확히 파악했으며 긍정적인 평가를 해주었습니다. 뿐만 아니라 생각하지 못한 방면의 인사이트를 제시해주어 이를 토대로 추가 개선을 진행할 수 있었습니다.
서비스의 첫인상을 결정하는 영역이다 보니 많이 고민하며 진행했던 기억이 납니다. 물론 아직도 끊임없이 개선을 진행하고 있는 중이고요. 계속해서 더 좋은 서비스 경험을 만들 것을 다짐하며 글 마치도록 하겠습니다. 마지막으로 밀리의 서재 회원가입이 궁금하시다면, 아래 링크를 통해 직접 경험해보세요!
