회원가입과 로그인, 어떻게 구성하면 좋을까?

회원가입과 로그인, 왜 중요할까요?

(에디터, 재그마스터) 디바이스와 OS는 점점 발전하고 있지만, 이와 관련 없이 꾸준히(?) 유지되고 있는 기능과 화면이 있다면 '회원가입과 로그인'이 아닐까 싶습니다. '회원'이 된 경우 마케팅 정보를 제공하는 등 비회원에 비해 서비스와의 더 많은 접점을 만들 수 있기 때문입니다. 저 역시 서비스를 기획, 운영하며 회원가입 전환율을 높이기 위한 여러 방법들을 고민했습니다. 오늘은 다양한 사례들을 중심으로 회원가입과 로그인 화면을 어떻게 구성하면 좋을지, 어떤 방법을 활용하면 좋을지 정리해보려고 합니다.

(에디터, 동동) 우리 서비스 사용자라는 것을 증명하기 위한 최초의 진입 단계! 회원가입을 하고 로그인을 하면, 서비스 내 무엇을 하는지, 어떤 관심을 가지고 있는지 살펴볼 수 있는 환경이 마련 되는데요! 때문에 회원가입과 로그인은 허들을 낮춰야하는 첫번째 장벽이 되고, 우리는 이 장벽을 낮추기 위해 끊임없이 고민해야 합니다.


오늘의 00:00 미리 살펴보기

1. 회원가입 이유를 명확하게 알려주기
2. 회원가입과 로그인을 해야 하는 접점 구분하기
3. 쉽게 느껴지게 하기
4. 두 번 입력하지 않게 하기

회원가입과 로그인, 어떻게 구성할까요?

회원가입을 유도하는 방법과 실제 회원이 되는 과정은 서비스 성격에 따라 달라집니다. '커머스'는 일반적으로 배송 받을 '주소'를 입력 받아야 하고, 새벽 배송 등 배송 방법에 따라 공동 현관 출입을 위한 비밀번호를 입력해야 하는 경우도 생기죠. 이 경우 벌써 이름과 연락처 등이 포함된 기본 정보, 배송을 위한 주소지, 배송 방법에 따른 공동 현관 비밀번호 등 3가지 필요 정보 입력 단계가 생기게 됩니다. 그럼 이 정보를 한 번에 받아야 할까요? 아니면 필요 할 때 정보 입력을 요청해야 할까요? 회원가입 화면과 로그인 화면은 이렇듯 필요한 정보가 무엇인지 정의하는 것에서 출발할 수 있어야 합니다. 또 신규 사용자와 비회원을 대상으로 어느 시점에 회원가입을 유도해야 하지? 라는 질문에 대한 답도 생각봐야 합니다. 실행하자마자 회원가입을 유도하는 건, 사용 목적이 명확하지 않은 이상 사용자에게 불필요한 과정으로 느껴질 수 있기 때문입니다.

1. 회원가입 이유를 명확하게 알려주기

아이디어스

아이디어스는 앱 실행과 동시에 회원가입 화면을 띄워줍니다. 일종의 '강제성'을 띄고 있는 모습인데요. 서비스 한줄 소개와 함께 회원가입 후 서비스 이용을 할 수 있도록 유도하고 있습니다. 물론 이를 피해갈 수 있는 기회도 함께 제공합니다. 하단 '회원가입 없이 둘러보기'를 넣어둔 것이죠. 해당 텍스트를 탭하면 가입 시 제공되는 혜택을 알려줍니다. 아이디어스는 쿠폰과 사용자 등급을 높여주는 것을 당근으로 제공하고 있네요. 이 혜택은 내 정보 탭 등 사용자들이 회원가입을 해야 볼 수 있는 화면에서도 동일하게 노출되고 있습니다. 이처럼 회원가입을 해야 하는 '이유'는 반드시 필요합니다. 더 중요한 건 비슷한 기능들이 모여 있는 '커머스'에서는 기능 중심의 회원가입 유도 보다는 회원가입을 했을 때 주어지는 '혜택'에 초점이 맞춰져야 한다는 점입니다.

에디터, 재그마스터의 덧붙임 : 우리 서비스와 가장 잘 어울리는 소셜 로그인 수단이 무엇인지 잘 고려해야 합니다. 국내에서 쓰이는 대표적인 수단은 네이버, 카카오, 페이스북, 구글 등이 있는데요. 네 가지를 다 사용하기 보다 해당 소셜 로그인 수단을 활용했을 때 추가로 가져올 수 있는 정보의 범위가 어디까지 인지, 또 우리 서비스 사용자들이 어떤 서비스를 더 많이 쓰는지 등을 미리 확인하는 것이 좋습니다. 또 플랫폼에서 제공하는 정책이나 가이드 등이 어떻게 바뀌는지도 계속해서 확인해봐야 합니다. 최근 가장 큰 이슈 중 하나는 애플 로그인 적용인데요. iOS 사용자 분들이라면 최근 회원가입 수단 중 애플 로그인을 종종 보셨을 겁니다. 미 적용 시 더 이상 앱을 출시 할 수 없을 정도의 톤으로 공지가 내려왔던 점을 감안했을 때, 놓친다면 정말 끔찍한 상황이!

2. 회원가입과 로그인을 해야 하는 접점 구분하기

에이블리

에이블리의 사례는 1번에도 적용 될 수 있는데요! 회원 = 무료배송이라는 내용을 다양한 접점을 통해 일관성 있게 내보내고 있기 때문입니다. 커머스에서 배송은 두 가지 핵심 요소가 있는데요. 하나는 속도, 그리고 또 하나는 배송비 입니다. 이 중 에이블리는 '배송비'를 회원 가입을 해야 하는 주요 이유로 활용하고 있는 것이죠. 또 회원가입을 해야 사용할 수 있는 기능이 포함된 화면에서는 기능이 어떤식으로 활용 될 수 있는지 세부적으로 안내해주고 있습니다. '찜' 기능이 대표적! 주요 화면을 연결고리 삼아 회원가입을 해야하는 목적을 잘 전달해주고 있는 사례입니다.

에디터, 재그마스터의 덧붙임 : 같은 고민을 한 적이 있었어요. 무료로 배경화면을 받을 수 있는 서비스였고, 회원가입 없이도 배경화면을 다운로드 받을 수 있도록 설계 되어 있어 회원가입을 유도하기 쉽지 않은 구조를 갖고 있었죠. 회원가입 - 로그인을 하지 않으면 하단 탭을 아예 보여주지 않고 있었습니다. 그래서 회원가입과 동시에 쓸 수 있는 기능들을 미리 볼 수 있게 해주고, 핵심 내용을 요약해 내보내면 전환율이 늘어나지 않을까? 라는 가설을 만들었습니다. 그리고 하단 탭을 로그인 여부와 관련없이 노출하고, 각각의 항목을 탭했을 때 어떤 기능을 어떻게 쓸 수 있는지 내보냈습니다. 극적인 수치는 아니었지만, 분명 회원가입 전환율이 높아졌습니다. 어디에서, 어떤 방법으로 회원가입을 유도하지? 라는 질문에 대한 답의 시작은 서비스와 사용자 간 접점을 찾는 것에서 시작되는 것이 그래서 더 중요하다는 사실!

Marpple

UI 뿐만 아니라, 사용자의 주요 흐름도 회원 가입과 자연스럽게 연결 될 수 있어야 합니다. 일단 둘러보기 위해 들어온 사용자들에게 둘러보기를 할 기회조차 앗아가 버리면 그 자체가 허들이 될 수 있기 때문이죠. 자연스레 둘러보고, 마음에 드는 제품이 있을 때 회원가입을 유도 할 수 있다면? 최초 가입에 따른 혜택까지 전달 할 수 있다면? 전환율도 자연스레 높아지지 않을까요?
이 관점에서 Marpple의 사례도 눈여겨볼만 합니다. 상품을 둘러보다, 장바구니에 진입하려는 순간 회원가입과 로그인 페이지로 연결 되고 있는데요! 상품 구매를 위한 자연스러운 흐름을 만들어 가입을 유도하고 있습니다.

에디터, 동동의 덧붙임 : 개인적으로 장바구니까지는 비로그인 사용자들에게도 충분히 제공해줄 수 있는 기능이라고 생각해요! 오히려 장바구니 기능을 쉽게 사용할 수 있도록 열어주면, 담은 상품을 봐서라도 가입을 하게 되는!

3. 쉽게 느껴지게 하기

오늘의 집

소셜 로그인으로 인해 상대적으로 복잡한 회원 가입 과정을 거치지 않아도 된다는 점은 사용자와 서비스 입장에서 모두 만족할만한 환경이지만, 실제 회원가입을 유도하는 것은 또 별개의 문제로 다가갈 필요가 있습니다. 어쨌든 회원가입 화면 또는 단계로 넘어갈 수 있는 장치가 필요하기 때문이죠. 앞서 사례로 나왔던 '에이블리'는 회원가입이라는 표현 대신 '5초 회원가입'을 활용했는데, 이는 회원가입에 걸리는 시간이 짧고 가입 시 무료 배송이라는 혜택을 얻을 수 있다는 점을 동시에 강조하기 위한 방법입니다.
오늘의 집 역시 비슷한 방법을 활용하고 있는데요. 각 소셜 로그인 버튼은 디자인 가이드가 정해져 있기에 '3초만에 빠른 회원가입'이라는 문구를 별도로 띄워 가입을 유도하고 있는 모습입니다.

스타일쉐어

회원가입을 위한 첫 걸음(?)을 내딛었다면, 이제 '완료'까지 이탈하지 않게 만드는 작업이 중요하겠죠? 우리가 일반적으로 생각하는 이메일 회원가입은 한 화면에 필요한 정보를 타이틀 + 입력창 형태로 구성한 것입니다. 스타일쉐어는 이를 5가지 단계로 나누어 단계 별 1개씩의 정보만 입력 가능하게 설계한 모습이네요. 심리적으로 입력해야 할 공간이 여러개 보이면 귀찮게 느낄 가능성이 높습니다. 이탈할 가능성도 함께 높아지겠죠? 설문조사에서도 비슷한 맥락을 확인할 수 있는 사례가 있는데요. 구글독스와 타입폼이 대표적입니다. 구글독스는 기본적으로 입력된 항목을 한 눈에 볼 수 있게 구성되어 있지만, 타입폼은 답변자로 하여금 하나의 질문씩 차례대로 답변할 수 있도록 구성되어 있기 때문이죠. 이처럼 회원가입 과정이 어렵지 않게 느껴지게 만드는 것 역시 꼭 고려해야 합니다.

에디터, 재그마스터의 덧붙임 : 모바일 환경에서는 '키패드'가 정말 중요합니다. 숫자를 입력해야 하는 단계에서 일반 문자를 입력할 수 있는 키패드가 튀어 나왔을 때의 귀찮음과 당황스러움이란.. 그래서 단계별로 입력되는 방식이 무엇인지를 잘 파악한 후 사용자가 바로 입력할 수 있는 환경을 만들어주는 것이 필요합니다. (스타일쉐어가 생년월일 입력 화면으로 진입했을 때 바로 숫자를 입력할 수 있는 키패드를 열어준 것처럼 말이죠)

4. 두 번 입력하지 않게 하기

마켓컬리

기획자의 입장에서 가장 많은 고민을 하게 되는 화면은 소셜 로그인이 아닌 방법 (이제 이메일 회원가입으로 굳혀진)의 경우입니다. 유효성 확인이 들어가기 때문이기도 하고, 여러개의 입력창이 존재하기에 사용자로 하여금 쉽게, 두 번 입력하지 않게 하는 방법을 충분히 고려해야 하기 때문입니다. 마켓 컬리는 플레이스 홀더 텍스트를 활용해 각 입력 창 내 어떤 내용을 입력해야 하는지에 대한 1차 가이드를 제공하고 있습니다. 또 각 입력창을 탭하면 상세한 조건을 확인할 수 있도록 설계 되어 있죠. 이렇게 사례를 보면 당연한 구성이라 생각하기 쉽지만, 입력 후에 어떤 조건으로 입력해야 하는지를 알려주는 경우가 아직은 더 많기에 눈여겨 봐야 할 내용이라고 생각합니다. 입력하는 순간에 조건을 보는 것과, 입력 후 사용자로 하여금 '잘못' 입력했다는 식의 안내 메시지를 띄우는 것에는 사용성에 있어 꽤 많은 차이가 존재하기 때문입니다.

에디터, 재그마스터의 덧붙임 : 유효성 체크의 경우 클라이언트에서 바로 가능한 항목인지, 서버와 통신을 거쳐야 하는지를 잘 구분하는 것도 중요합니다. 예를 들어 최초 입력한 비밀번호와 비밀번호 확인을 위해 추가 입력한 정보가 일치하는지는 클라이언트에서 바로 구분 할 수 있지만 이미 가입된 계정인지는 서버에서 확인을 해야 하기 때문입니다.

팬시(Fancy)

팬시에서 이메일 가입 시, 이메일 주소로 입력한 내용 중 메일 도메인을 제외 한 텍스트를 아이디로 자동 입력해줍니다. 저는 영문의 경우 이메일 주소 중 일부를 아이디로 활용하는 경우가 많기에 입력을 두 번 하지 않게 만들어주는 측면에서 꽤 유용한 기능으로 다가옵니다.

에디터, 재그마스터와 동동의 덧붙임 : 필수 입력값이 무엇인지 알려주는 것도 회원가입을 더 간편하게 인지시킬 수 있는 방법이 됩니다. 필수 정보를 모두 입력하기 전, 완료 또는 다음 화면으로 이동하는 버튼을 비활성화 하는 것도 방법이 될 수 있겠죠? 아니면, 선택 정보는 실제 사용이 필요한 순간에 물어보는 것도 방법이고요!

텐바이텐

선택 정보라는 명목으로 생일, 성별, 관심 키워드 등을 배치를 하는 경우가 있는데요. 회원가입에 입력해야하는 빈칸이 많아 보일 수록 사용자들은 피곤해지기 마련입니다. 물론 관심 키워드 등을 미리 입력받으면, 로그인 이후에 뿌려줄 수 있는 콘텐츠가 많아지는 이점이 있죠. 하지만 사용자에게 많은 질문은 부담스러울 뿐입니다. 그럼에도 불구하고 추가, 선택 정보를 받아야 하는 상황이라면 키패드를 적절히 활용하는 것이 좋습니다. 텐바이텐의 경우, 선택 여부를 표기해주고 있긴 하지만 생년월일을 탭하면 기본 설정값이 1920년으로 되어 있어 80-90년대 생이 본인의 생년을 선택하기 위해서는 꽤 많은 노력(?)이 필요합니다. 스타일쉐어와 같이 직접 입력하게 하되, 숫자를 바로 입력할 수 있는 키패드를 열어줬다면 어땠을까 싶네요!