🌴 Takeaways
- 소셜 로그인에서 얻은 데이터를 사용자에게 다시 입력받는 것을 문제로 정의.
- 소셜 로그인에서 받은 데이터로 간편 인증하여 사용자가 다시 정보를 입력하지 않는 개선안 제안.
- 개선안을 통해 페이지 전환률, 인증 완료율 5% 제고.
📢 적용 가능 서비스
오늘 소개드리는 프로젝트는 카카오 소셜로그인이 구현되어 있고, 고객 정보를 직접 입력 받아야 하는 서비스에 적용이 가능해요.
🧘🏻 문제 의식
“카카오 소셜로그인에서 얻은 데이터로 고객을 더 편리하게 만들 수 없을까?”였어요.
그래서 카카오 소셜 로그인으로 부터 DB에 저장하는 데이터가 무엇인지 확인했어요. 이미 얻고 있는 데이터는, 이름, 생년월일, 휴대폰번호 였어요. 그럼에도 불구하고 간편인증을 위해 이름, 주민번호, 휴대폰번호를 다시 입력받고 있었어요.
🎯 목표 정의하기
레버지표 : 페이지 전환률 높이기
목표 지표: 인증전환률 높이기, 레버 지표를 올림으로써 인증 전환률이라는 목표지표를 올려요.
💊 솔루션
아시다시피, 모바일 서비스는 작은 화면에서 우리가 의도하는 사용자의 액션을 만들어야해요. 화면안에서 단 한가지의 액션만을 요구하는게 필요하죠. 자사의 서비스는 간편인증 정보 입력을 받는 페이지에서 이름, 주민번호, 휴대폰번호를 다시 입력 받고 있었어요.
이름, 생년월일, 휴대폰번호를 자동으로 채워주고 맞는지 확인만 시켜주면 편리하지 않을까요?
👍 다른 시나리오 고려
하지만, 서비스의 특성상 고령 사업자들의 유입이 많고, 부모 사용자 대신 인증을 도와주는 자녀 사용자가 있어요. 그래서 카카오 로그인은 자녀의 계정으로 하더라도, 간편 인증정보는 부모님의 것을 입력하는 케이스를 고려해야 했어요.
서비스가 자동으로 이름, 생년월일, 휴대폰번호를 채워두되 손쉽게 삭제하고 다시 채울 수 있게 해두었어요.
🏃🏼♂️🏃🏼♂️실행하기
1️⃣ 현재 서비스 상태 다시 체크하기
힘들게 논의하여 하기로 한것이 사실은 불필요한 일이었을때 모두 힘이 빠져요. 그래서 정말 간편인증 정보 입력 페이지를 처음 방문하는 사용자가 이름, 생년월일, 휴대폰번호를 모두 입력해야하는지 다시 한번 검증이 필요해요.
웹 서비스라면, 브라우저의 시크릿 모드를 여시거나 최근의 쿠키&캐시 정보를 모두 삭제하고 처음 방문한 사용자의 관점에서 우리 서비스를 가입해봐요.
앱 서비스라면, 앱을 모두 지우고 캐시까지 모두 삭제하고 앱을 새로 설치한 후 처음 방문한 사용자의 관점에서 우리 서비스를 가입해봐요.
2️⃣ 데이터 소스 확보하기
우리가 필요한 이름, 생년월일, 휴대폰번호라는 데이터가 어떤 흐름을 통해 모바일 디바이스로 접속하는 사용자에게 보여지를 확인해요.
고객이 모바일 UI에서 이름, 생년월일, 휴대폰 번호를 보기위해서는,
프론트엔드에서 API의 식별키로 API를 호출할때, 이름, 생년월일, 휴대폰 번호 포함된 응답이 와야해요.
백엔드는 이름, 생년월일, 휴대폰번호를 응답으로 주기 위해 어디선가 이름, 생년월일, 휴대폰번호 데이터를 받아와야 해요.
바로, 카카오 싱크의 API 서버이죠. 카카오 싱크 API 서버는 이름, 생년월일, 휴대폰 번호를 어떻게 알고 있을까요?
사용자가 카카오 소셜 로그인 버튼을 누르고, 고객이 약관 동의하는 순간 카카오 싱크 API 서버는 이름 등 고객 데이터를 자사의 서버로 제공해요.
출처 : kakaodevelopers
그러나, 이름, 생년월일, 휴대폰 번호를 모두 카카오 API 서버로부터 받아오려면 고객이 이 3가지 데이터를 모두 전달해도 된다는 동의를 해야해요. 사용자가 제공을 거부하면, 자사 서버가 데이터를 받을 수 없어요.
따라서 카카오 싱크 설정에서 이름, 생년월일, 휴대폰 번호를 필수 동의정보로 등록해야했어요.
구체적으로 설명 드리면, 카카오 싱크는 기본 필수 동의 정보가 닉네임과 프로필 이미지에요. 추가적으로 카카오 계정 이메일, 이름, 성별, 생년월일, 휴대폰번호 등을 카카오 API 서버로부터 받아오려면, 간편 로그인시 사용자가 동의할 수 있게 선택 동의 항목으로 설정해두어야 해요.(설정하는 방법은 다른 글을 통해 소개드릴게요.)
자사 서비스는 이미 이름과 휴대폰번호를 필수정보로 되어 있었고, 생년월일 새로운 필수 정보로 설정해두었어요.(필수 정보로 등록하려면 카카오의 검수를 받아야해요.)
이름, 생년월일, 휴대폰번호 데이터 소스는 확보되었어요.
3️⃣ 구현하기
스쿼드(크로스 펑셔널 조직) 멤버들과 함께 어떻게 구현할지 논의해요.
UX/UI 디자이너
이름부터 휴대폰번호까지 모두 입력했던 경험과 다르게, 이름부터 휴대폰번호까지 우리가 채워준 것이 맞는지 확인하는 경험을 제공해요. 간편 인증시 다른 정보를 입력하고 싶으면 쉽게 바꿀수 있게 사용자 경험을 고려해요.
FE 개발자
API 응답으로 이름, 생년월일, 휴대폰번호가 포함되어 올때, 그 데이터를 고객이 확인할 수 있게 화면에 미리 채워둬요. 그리고 개선된 UI를 고객이 경험할 수 있게 만들어요. 특별히 추적하고 싶은 이벤트(클릭, 조회 등)가 있다면 미리 코드에 추적할 수 있게 심어둬요.
BE 개발자
카카오 API 서버가 제공하는 데이터에 이름, 생년월일, 휴대폰번호가 DB 서버에 저장해요. 그리고 자사 프론트가 요청하는 자사 API를 변경해요. API 응답에 이름, 주민번호 앞자리, 휴대폰번호를 포함해서 프론트에 전달해요.
4️⃣ 테스트하기
메이커 분들이 구현한 제품이 우리가 의도한대로 됐는지, 여러 브라우저와 모바일 환경에서 접속하면서 테스트해요. 이번 프로젝트는 테스터가 따로 안계셔서 제가 직접 인수 테스트를 진행했어요.
5️⃣ 배포하기
FE, BE 개발자들과 배포할 일정을 협의해요. 트래픽이 많은 시간대는 피하는게 좋아요.
6️⃣ 사용자 반응보기
운영서버에 구현한 코드를 배포하고 사용자의 반응을 측정해요.
A/B 테스트를 통해 변경된 제품과 이전 제품을 비교하려면, 3)구현하기 단계부터 개발자들과 논의해야 해요.
최종 결과
Amplitude를 활용해 레버 지표와 목표 지표의 증가율을 추적했어요. 이번 배포를 통해, 페이지 전환률이 5%p 이상 상승했고, 인증 완료율도 4% 상승했어요.
마치며
A/B 테스트를 매 배포때 마다 해야할까요? 이 물음에 대한 답은 조직의 상황에 따라 달라진다고 생각해요. A/B테스트를 하려면 대조군과 실험군에 무작위 또는 특정조건의 트래픽을 각각에 출력해야하기 때문에 개발에 들이는 시간이 더 들어요. 여기에 필요한 시스템도 만들어야 해요. 하지만 사내 A/B 테스트 환경이 구축되어 있고, 구현에 시간이 적게 든다면 더 자주 활용할 수 있을 것 같네요.
다음은 다른 소셜 로그인 서비스에서 얻을 수 있는 데이터와 적용할 수 있는 것에 대해 알아볼게요.
__
📌 초기 창업가를 무료로 상담해드리고 있어요. 궁금하신 분은 여기를 봐주세요.
📌 저에 대해 궁금하신 분은 제 링팅을 봐주세요.