UX 디자인과 개발 6. 간편 로그인
요즘 대세는 간편 로그인! 근데 디자인이 다 달라...
로그인의 대세는 간편 로그인
대부분의 서비스는 로그인이 필요하다. 과거엔 해당 서비스 자체에 가입을 하고 로그인하는 방법이 주였지만 지금은 간편하게 기존 SNS, 타 서비스 계정을 연동해서 로그인하는 방법으로 많이 바뀌고 있다.
이제 없으면 어색한 간편 로그인, 하지만 서비스 별로 간편 로그인 UI도 제각기 다르다.
그럼 간편 로그인 디자인은 어떤 식으로?
1. 카카오
카카오 로그인 디자인 가이드 예제기본적으로 카카오에서 제공하는 UI가 있다.
하지만, 모두가 기본 UI를 사용하는 게 아니다. 서비스에 맞게 수정을 하는 경우도 있다. 이럴 경우 카카오가 싫어할까? 카카오 로그인 활용가이드를 살펴보면 '서비스의 UI/UX에 맞춰 카카오 로그인 버튼의 수정이 필요할 경우, 버튼을 유동적으로 재구성하여 사용할 수 있습니다. 카카오 고유의 이미지를 해치지 않는 범위 내에서 아래 버튼 디자인 규정을 따라 제작합니다.'라고 명시해두었다. 즉 카카오에서도 서비스에 맞게 수정해도 상관없다고 말한다. 다만 카카오 고유 이미지를 해치지 않는 범위 내라고 제한을 하고 있다.
제한 사항으로는 카카오 고유 색상, 레이블 표기, 심볼 사용, 컨테이너 박스의 굴곡, 로그인 버튼 크기 변경에 따른 정렬 기준이있다.
1) 색상
(1) 컨테이너(바탕색) : #FEE500
(2) 심볼 : #000000
(3) 레이블 : #000000(85%)
*버튼의 색상을 지정하지 않아 타사 로그인 버튼이 강조돼서는 안 됩니다.
카카오 로그인 디자인 가이드 예제2) 레이블
(1) 축약형 : 로그인 / Login
(2) 완성형 : 카카오 로그인 / Login with Kakao
3) 심볼
(1) 기본 사용 심볼 : 말풍선 모양의 심볼(형태, 비율, 색상 변경 금지)
(2) 적용 금지 : 카카오 CI를 심볼로 표기, 심볼없이 '카카오 로그인'만으로 구성
(3) 기능 아이콘 (로그인, 로그아웃 아이콘 등의 기능 아이콘)으로 심볼 아이콘 대체 불가
* 예제 중 오른쪽 상단 예제에서 확인 할 수 있듯 카카오 CI와 카카오톡 심볼은 다르다.
카카오 로그인 디자인 가이드 예제4) 컨테이너
(1) 기본 모서리 굴곡 : 12px
카카오 로그인 디자인 가이드 예제5) 크기 변경
(1) 컨테이너 가로 길이 변경 시
가. 심볼과 레이블 유지, 컨테이너 확장 구간 균일 좌우 확장
* 심볼은 좌측 정렬 혹은 레이블과 함께 가운데 정렬 가능
나. 변경 금지 : 레이블 자간 및 크기
(2) 버튼 크기 전체적으로 확대해야 할 경우
가. 비율 유지하여 확대
나. 레이블 세로 길이 : 컨테이너의 세로 길이의 1/3 초과 금지
(3) 표준 디자인보다 더 작은 버튼을 사용해야 할 경우
가. 축약형 '로그인' 버튼 사용
카카오 로그인 디자인 가이드 예제2. 네이버
네이버 로그인 디자인 가이드 예제기본적으로 제공하는 디자인은 완성형, 축약형 및 아이콘형의 로그인과 로그아웃이 있다.
더불어, 기본 디자인의 한글, 영문형 ai 파일을 제공하기 때문에 기본 디자인을 사용할 경우 직접 가이드에 맞게 제작하지 않고 다운받아 사용할 수 있다.
다크모드에 호환되는 디자인 가이드 예제를 제공해서 다크모드 전환 시에도 어떻게 적용할지 알려준다.
1) 색상
(1) Naver Green : HEX #03C75A GRB 3/199/90. CMYK 72/0/88/0. Pantone 7479U
(2) 구버전에서는, 흰색에 대한 컬러값을 가이드로 노출해주기도 했지만 새롭게 바뀐 가이드에서는 네이버 그린의 지정값만 알려주고 있다.
* 권장 흰색 유형(AI 파일에서 추출) #FFFFFF
* 다크 모드에서의 텍스트 컬러(AI 파일에서 추출) : #A5A5A7
2) 레이블(메시지) + 버튼 디자인
네이버 로그인 디자인 가이드 예제(1) 메시지 : 네이버 아이디로 로그인 목적에 부합한다면 한글, 영문 상관없이 변경 가능
(2) 버튼 디자인 : 네이버 고유 이미지를 해치지 않는 범위 내에서 유연하게 디자인 변경 가능
3) 금지
네이버 로그인 디자인 가이드 예제3. 구글 로그인
구글 가이드 사이트에 다운받을 수 있는 Sketch, SVG, EPS 파일이 포함되어 있다. 앞서 카카오와 네이버와 다르게 사용 글꼴을 제한하고 있기 때문에 사용 글꼴인 Roboto 글꼴이 필요하다.
추가적인 범위를 요청하는 경우, 단계적 승인 (Android, iOS, 웹)을 사용하여 사용자가 API 액세스가 필요한 기능과 상호작용을 시작할 때만 승인 요청 메시지를 표시하기.
1) 색상
(1) 밝은 버튼 색상 : #FFFFFF(흰색)
(2) 눌리지 않은 어두운색(파란색) 버튼 색상 : #4285F4
(3) 기타 컨테이너 색상 : #FEE500
* 항상 흰색 타일에 표시된 표준 색상의 Google 'G' 로고 포함
2) 레이블
(1) 완성형 : Google 계정으로 로그인, Google 계정으로 가입
(2) 참고 : 앱에서 Google 계정에 가입하거나 등록하는 것이 아니라, Google 사용자 인증 정보를 사용해 앱에 로그인하거나 가입하게 된다는 점을 사용자가 명확하게 알 수 있어야 합니다
(3) 'Google'만 넣기 : 어떤 작업인지 명확하게 안내하는 텍스트가 가까이 있는 상황에서만 가능
3) 로고
(1) 기본 사용 심볼 : G 모양의 심볼(형태, 비율, 색상 변경 금지)
(2) 필수 배경 : 흰색 배경
4) 여백 및 크기
(1) 로고 사이즈 : 18px
(2) 로고 여백 : 왼쪽 8dp, 오른쪽(텍스트 여백) 24dp,
(3) 세로 : 40dp
(4) 폰트 : Roboto 글꼴
(5) 텍스트 사이즈 : 14px
(6) 텍스트 여백 : 좌우, 각 8dp
구글 로그인 디자인 예제5) 잘못된 버튼 디자인 예시
구글 로그인 디자인 예제(1) 아이콘 단독 사용 금지 : 버튼 경계선 및 사용자 작업을 나타내는 텍스트 없을 경우
(2) 로고 컬러 임의 변경
(3) 배경 컬러 임의 변경 및 로고 배경(흰색) 미사용
(4) 공식 로고 미사용
4. 페이스북 로그인
페이스북 플러그인 구성 도구페이스북은 플러그인 구성 도구를 지원해서 텍스트 선택과 3가지 버튼 레이아웃 모양을 바로 볼 수 있도록 제공해주고 있다.
1) 색상
(1) CMYK 코팅: 83 / 52 / 00 / 00
(2) CMYK 비코팅: 77 / 36 / 00 / 00
(3) PMS : 2727C
(4) PMS : 2382U
(5) Hex : #1877F2
(6) RGB : 24 /119 / 242
페이스북 로그인 디자인 예제
2) 텍스트 및 로고
(1) 텍스트 : Facebook으로 계속하기, Facebook으로 로그인 등 앱에 가장 잘 어울리는 글꼴, 글꼴 굵기 및 커닝 조절(선택)
(2) 로고 : 공식 로고(파일 다운 가능)
페이스북 로그인 디자인 예제
3) 크기
(1) 버튼 종류 : 소형, 중형, 대형
(2) 높이 : 소형(20px), 중형(28px), 대형(40px)
(3) 너비 : 소형(200px), 중형(200~320px), 대형(240~400px)
페이스북 로그인 디자인 예제4) 금지
(1) 로고 수정 금지 : 컬러, 크기, 디자인, 기타 맞춤 변경을 위한 수정 금지
* 기술적 제한으로 정확한 색 사용이 어려우면 흑백 사용 권장
(2) "f" 로고만 단독 사용 : 적절한 행동유도(Facebook으로 계속하기,Facebook으로 로그인 등) 없이 로고 단독 사용 금지
(3) 금지 행동 유도 문구 이탈 금지 : 행도 유도 문구(예: Facebook으로 계속하기)가 로그인 버튼 밖 이탈 금지
5. 애플 로그인
애플 로그인 디자인 예제이제 iOS 서비스라면 필수가 되어버린 애플 로그인. 가이드 페이지에서는 모바일 환경 뿐만 아니라 웹, 워치 환경도 함께 서술해주고 있다.(현재 글에서는 모바일 위주로 요약. 자세한 웹, 워치는 가이드라인을 참고)
1) 컨테이너(배경) 색상
(1) 흰색 : White(#FFFFFF) - 로그인 버튼이 위치한 배경과 대비가 확실할 경우 사용
* 흰 색, 회색 기본 배경에서는 단독 흰색 사용 불가(2)번 방법 사용
(2) 흰색 또는 밝은색의 배경 : White with Outline
(3) 검은 색 : Black(#000000) - 로그인 버튼이 위치한 배경과 대비가 확실할 경우 사용
* 검은 색, 어두운 배경에서는 사용 불가
대비가 확실할 경우
흰색 또는 밝은 색의 배경
대부분의 경우, 대비가 확실할 경우
2) 최소 버튼 사이즈 및 굴곡
(1) 최소 가로 사이즈 : 140pt(140px @1x, 280px, @2x)
(2) 최소 세로 사이즈 : 30pt(30px @1x, 60px,@2x)
(3) 최소 마진 : 버튼 높이의 1/10
애플 로그인 디자인 예제
3) 로고
4) 폰트 및 텍스트
(1) 사용 폰트 : 시스템 글꼴
(2) 텍스트의 크기 : 버튼 높이의 43%
(3) 버튼 높이 : 텍스트 글꼴 크기의 233%(가까운 정수로 반올림)
애플 로그인 디자인 예제4) 금지 및 제한
(1) 로고 수정 금지 : 검은색 배경 - 흰색 로고', '흰색 배경 - 검은색 로고'만 사용 가능
(2) 44pt png파일 사용 : iOS 기본 버튼 높이인 44pt에서만 사용
가이드와 미묘하게 다른 로그인 화면?!
종종 가이드에 나오지 않거나 금지한 항목을 무시하고 디자인된 화면을 만나볼 수 있다. 디자인할 때 '가이드'이기 때문에 지키지 않으면 릴리즈 당시 금지 사항을 체크해서 개발되지 않는 첨단 시스템은 아니기 때문에, 일단 개발, 앱 등록은 가능하지만 이후에 제재가 들어올 수 있다고 한다.
특정 간편 로그인 브랜드가 규정이 엄격하다는 이야기도 있지만 규정에 나오지 않거나, 크게 차이가 나지 않는다면 커스텀 해서 사용해도 무리가 없다는 현직 개발자분의 경험담도 들었지만 추후 문제를 만들지 않으려면 최대한 가이드를 인지하고, 금지 사항을 피해서 디자인하는 게 좋지 않을까?
참고(출처)
카카오 로그인 가이드
https://developers.kakao.com/docs/latest/ko/reference/design-guide
네이버 로그인 가이드
https://developers.naver.com/docs/login/bi/
구글 로그인
https://developers.google.com/identity/branding-guidelines#sign-in-button
페이스북 로그인
https://developers.facebook.com/docs/facebook-login/userexperience
애플 로그인
https://developer.apple.com/design/human-interface-guidelines/sign-in-with-apple/overview/buttons/
