소셜로그인 버튼 회사별 가이드라인
소셜로그인 버튼의 회사별(네이버, 카카오 등) 가이드라인
한윤석 (두블링 DOBLING, UI/UX 디자이너)
현재 1년차 주니어에서 미래 프로 디자이너를 꿈꾸는 사람으로써 같은 상황의 모든 신입, 주니어, 초보, 입문, 예비 디자이너들을 위해 매주 제가 경험한 디자인 인사이트를 업로드 합니다.
로그인 페이지를 디자인하다가 소셜 로그인 버튼을 디자인하게 되었습니다. 찾아보니 소셜 로그인 버튼은 네이버로그인, 카카오 로그인, 구글 로그인 등 다 가이드가 따로 정해져 있다는 것을 알았습니다. 그래서 각 회사별 소셜 로그인버튼을 어떻게 표현할지 가이드가 나와있는데 그것에 대해서 이야기해보도록 하겠습니다.
소셜 로그인 버튼 가이드라인
가이드 라인비교
네이버
네이버의 가이드라인 입니다.
이 가이드라인은 피그마에 나와있습니다. 아래 링크는 네이버 가이드라인 링크입니다. 네이버는 원형으로도 소셜 로그인 버튼을 만들 수있고 유동적으로 잘 만들어져 있습니다.
단점은 버튼 검수를 하는데 그 검수가 상당히 꼼꼼합니다. 거절당할 수도 있습니다.
https://developers.naver.com/docs/login/bi/bi.md#로그인-버튼-사용-가이드
카카오
아래 링크는 카카오 가이드라인 링크입니다. 카카오는 버튼을 만들고 가이드 라인 검수하는게 없어서 비교적 가이드라인을 지키되 자유롭게 디자인 할 수 있습니다.
단점은 카카오는 가이드라인이 상당히 딱딱합니다.
https://developers.kakao.com/docs/latest/ko/kakaologin/design-guide
가이드라인 준수하는 법
공통화
네이버, 카카오 등의 모든 소셜 로그인 버튼을 공통화 시켜서 어느것 하나 눈에 띄거나 차별화되게 디자인하지만 않으면 검수를 통과하고 디자인도 괜찮게 되는 것 같습니다.
명확한 명시
이메일이나 다른 회원가입 경로가 아닌 다른 계정으로 로그인이라는 확실하고 명확한 명시를 해둬야 합니다.
고유함
브랜드 고유의 로고를 망치면 절대 안됩니다.
아래 링크를 통해 피그마에서 바로 버튼을 가져다가 만들 수 있습니다. 어느정도 가이드를 준수하되 서비스에 맞게 자유롭게 변형할 수 있는 것 같습니다!!
다양한 기업들 가이드라인(피그마)
카카오 네이버 가이드라인(피그마)
