[SNS 회원가입/로그인] 기획자가 소셜 회원가입/로그인 기획시 알아두어야 할 것 1 (UI 가이드와 타 서비스 소셜계정 연동)

소셜로그인 서비스란?

소셜(SNS) 로그인 서비스는 네이버, 카카오, 구글 등의 서비스에서 사용자 인증 기능을 이용할 수 있도록 하는 서비스로써

별도의 아이디나 비밀번호를 기억할 필요 없이, 소셜(SNS) 아이디로 간편하게 로그인할 수 있는 서비스이다.  

 

소셜 회원가입/ 로그인의 이점

[사용자입장]

- 간편하고 빠른 회원가입이 가능하다. 

- 여러가지 개인정보 입력과 본인인증에 대한 번거로움을 제거할 수 있다. 

- 하나의 소셜계정 로그인을 통해 안전하게 다른 서비스를 이용할 수 있다.

 

 

[소셜 회원가입/ 로그인 제공사 입장]

- 소셜 로그인 기능을 도입한 서비스와 다양한 협업/ B2B 사업을 진행할 수 있다. (결제 연동, 캘린더, 카페 등)

- 사용자가 서비스 이용 시 제공하는 데이터를 통해 사용자 니즈와 감성을 분석할 수 있다. 

 

 

기획자가 소셜 로그인 기획 시 알아두어야 할 것

(1) 가입 과정에서 정보는 최소한으로 수집

 SNS 로그인/회원가입을 기획중인 기획자들에게는  2가지 회원정책으로 나뉠 수 있다. 

첫 번째로는 소셜회원가입으로만 회원가입을 할 수 있는 경우

간편하고 사용성이 높아 이탈율이 적은 설계방식이지만, 서비스 자체에서 수집할 수 있는 데이터 항목이 적고, CI와 DI 값을 수집할 수 없다. 

 

두 번째로는 소셜회원가입과 일반 회원가입 정책이 있는 경우

다소 첫번째 방식에 비해 복잡하게 느껴지지만, 서비스 자체에서 수집할 수 있는 데이터 항목이 많아지고 CI와 DI 값을 수집할 수 있다는 장점이 있다. (개인정보 수집정보 내용에 CI값을 수집한다고 포함되어야한다.)

 

 

 

두 번째의 경우와 같이 일반 회원가입 정책이 있는 경우, 사용자가 이탈하지 않도록 하기 위해 최소한의 정보를 수집해야 한다. SNS에서 수집하는 정보인 '이름, 이메일 주소, 성별' 등 사용자 정보에 대해 중복 입력하지 않도록 해야하고 비밀번호 설정을 하지 않도록 해야 한다. 서비스에 따라 선택 항목을 입력받는 경우에도 a, b, c 등 다양한 데이터 항목을 수집하고 입력받고자 한다면, 꼭 필요한 Data항목인지 검토하고, 최소한으로 수집 하는 것이 중요하다. 

 

 

 

(2) 회원가입과 로그인에 모두 적용할 수 있도록 할 것

간혹 SNS 회원가입은 일반 회원가입 이후 가능하다고 하는 서비스를 본적이 있을 것이다. 이는 사용자가 이탈할 수 있도록 길을 열어주는 것과 마찬가지로써, 회원가입과 로그인에 소셜 로그인을 모두 적용하고 두 화면이 연결시켜야 한다.

회원가입은 계정존재 여부 체크 후 바로 회원가입을 진행하도록 프로세스를 기획해야 한다. 

소셜 회원가입과 소셜로그인 연결

 

 

(3) SNS 로그인 UI 가이드

소셜계정 로그인 UI 디자인 시, 버튼의 크기나 위치가 눈에 띄도록 디자인해야한다. 토글버튼과 같이 특정 버튼을 눌렀을 때 SNS 로그인 UI가 표출된다던지, 크기가 너무 작아 사용자들의 눈에 띄지 않는다면 간편 로그인 기능을 만드는 의미가 없지 않을까?

 

가장 좋은 방법으로는 일반회원 로그인과 SNS 소셜로그인 영역을 분리해서 기획하는것이 가장 좋은 예시이다.

일반 로그인 및 소셜 로그인 영역 분리

 

위의 화면은 필자가 설계한 화면으로써, 일반로그인, 간편로그인 (네이버, 카카오)와 디지털원패스 로그인 영역을 분리한 화면설계서이다. 디지털 원패스 로그인의 경우, 2023년 7월 이후로 신규 공공기관 웹/앱 구축 사업의 경우 디지털원패스로 로그인/ 회원가입 도입이 필수라 들었고, ( 해당 기능을 급하게 추가하느라 개발 측에서 고생을 했다는 일화..)

 

 

 

 

다른 서비스는 SNS 회원가입/ 로그인을 어떻게 구현했을까?

(1) 계정 가입 여부를 위한 구분값

- 아이디어스 (idus) : 전화번호로 구분

- notefolio, mango board : 이메일(email)로 구분

 

 

(2) 소셜계정 연동

- 아이디어스 (idus) 

   전화번호로 계정 가입여부를 확인할 수 있는 아이디어스는 처음 가입한 소셜 계정으로만 로그인 할 수 있었다.

   만약 카카오 계정으로 로그인 했다면, 네이버, 페이스북, 구글 소셜 계정으로 로그인할 수 없다.

 

 

- notefolio, mango board 

   노트폴리오와 망고보드는 이메일로 계정 가입 여부를 확인했는데, 계정연동 방식과 기능적 측면에서 차이가 있었다.

   노트폴리오는 이미 가입된 이메일 계정과 동일한 소셜계정으로 로그인 및 회원가입을 시도할 경우, 연동이 불가능하다는 팝업메시지가 띄워졌다. 소셜계정 연동을 위해서는 1. 동일한 이메일계정의 소셜계정으로 2. 마이페이지에서 연동이 가능하다.

 

  망고보드는 이미 가입된 이메일 계정과 동일한 소셜 계정으로 로그인/ 회원가입을 시도할 경우, 바로 연동처리되며 로그인이 가능했다. 소셜계정 연동을 위해서는 1. 동일한 이메일 계정의 소셜계정인 경우 연동이 가능하다. 

 

	구분값	소셜계정연동 여부	연동된 계정 정보 DATA	최초 회원가입 소셜 계정 탈퇴 여부
notefolio	이메일(email)	△(마이페이지에서 가능)	소셜 아이콘, 최초 회원가입 소셜정보	불가능
mango board	이메일(email)	O(로그인, 마이페이지에서 가능)	소셜 아이콘, 연동 일시, 연동 이메일 정보	가능

 

 

계정연동과 관련된 데이터 항목과 기능을 구분해 놓은 표이다. 

기획자가 기능 설계와 요구사항, 정책을 어떻게 정하는지에 따라서 소셜 로그인은 다양한 방식으로 구현이 가능하다.

 

개인적으로는 망고보드가 로그인 시 바로 계정연동이 가능하다는 점에서 사용성 측면에서 우위에 있다고 생각했다.

연동 이메일 정보와 연동일시 정보는 선택정보인것 같지만, 필요에 따라서는 필수정보 값이 될 수 있다. 

어떤 정보를 어떻게 보여줄 것인가는 기획자의 기획의도에 따라 천차만별이다. 

 

 

노트폴리오

망고보드

 

 

 

다음포스팅은 

[SNS 회원가입/로그인] 기획자가 소셜 회원가입/ 로그인 기획시 알아두어야 할 것 2

(feat. 개발자에게 일 잘하는 기획자로써 인정받고 싶다면)으로 돌아오겠습니다.