당신은 주제를 찾고 있습니까 “간편 로그인 – 소셜 로그인이란? 로그인/인터넷 상식. 타계정으로 로그인하기“? 다음 카테고리의 웹사이트 ppa.maxfit.vn 에서 귀하의 모든 질문에 답변해 드립니다: https://ppa.maxfit.vn/blog. 바로 아래에서 답을 찾을 수 있습니다. 작성자 엄마, 내가 알려줄게 이(가) 작성한 기사에는 조회수 7,303회 및 좋아요 225개 개의 좋아요가 있습니다.
간편 로그인 주제에 대한 동영상 보기
여기에서 이 주제에 대한 비디오를 시청하십시오. 주의 깊게 살펴보고 읽고 있는 내용에 대한 피드백을 제공하세요!
d여기에서 소셜 로그인이란? 로그인/인터넷 상식. 타계정으로 로그인하기 – 간편 로그인 주제에 대한 세부정보를 참조하세요
소셜 로그인이란? 직접 예시를 4가지나 준비했습니다^^
오늘은 인터넷 또는 로그인 상식을 짚어봅니다.
어떤 웹사이트나 앱에 회원가입 및 로그인을 해야할 때.마.다. 새로운 계정을 만들고 계신가요? 그럼 우리가 기억해야하는 계정이 너무 많잖아요 ㅜㅜㅜㅜ
일일이 계정을 만드는 것보다, 엄마아빠가 이미 갖고 있는 계정으로 대.신. 로그인 할 수 있으면 정말 편하겠죠? 이 기능은 ‘소셜 로그인’이라고 부릅니다. 다양한 예시로 보여드리겠습니다^^
========================================================
엄마 내가 알려줄게 채널을 후원해주세요^^ 더 알찬 정보와 더 쉬운 설명을 위해 노력하겠습니다.
멤버십 가입하기 : https://www.youtube.com/channel/UCnVRuU0conY38Q4h-JGViWA/join
엄내알 채널 구독하기 : https://www.youtube.com/channel/UCnVRuU0conY38Q4h-JGViWA?sub_confirmation=1
알아야하는 테크/ 지식/ 트렌드가 너~~~무 궁금하신가요?
그런데 물어볼 데가 마땅치 않으신가요?
늘 새로운 것을 배우고싶으신 ‘멋쟁이 엄마아빠들’을 위한 채널입니다! (자녀들도 환영인건 안비밀ㅎㅎ)
우리 어렸을 때 세상을 가르쳐주신 엄마아빠들께, 이제는 저희가 중요 포인트만 콕콕 찝어서 ‘다양한 주제’들을 ‘제일 쉽게’ 전해드리겠습니다!
궁금한 점들은 댓글로 달아주세요. 저희도 열심히 공부해서 최대한 대답해드릴게요^^
엄마아빠들 화이팅!
📒 영상 촬영장비가 궁금하시면 📒
카메라: (이전) Canon G7X mark III (캐논 G7X 마크 III) : https://coupa.ng/bRC4RS
(새것) Sony ZV-1 (소니 ZV-1) : https://coupa.ng/bTZstT
마이크: Rode NT-USB : https://coupa.ng/bOVgJd
조명: (링 라이트) Neewer 링 라이트 : https://coupa.ng/bOVmar
(패널 라이트) LED 조명 https://coupa.ng/bZ1tqU
(패널 라이트) LED 조명 https://coupa.ng/bZ1tKu
(컬러 라이트) LED 조명 https://coupa.ng/bRCYwA ( *110v 라서 변압기가 필요합니다)
컴퓨터: Apple 맥북에어 13인치 (M1 / 8GB RAM) : https://coupa.ng/bRCWkL
Apple 맥북프로 13인치 (M1 / 8GB RAM) : https://coupa.ng/bRCWpj
Apple 맥북프로 15인치 (2019년 제품) : https://coupa.ng/bv5YoF
(이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받을 수 있습니다.)
📒 출처 📒
Music: \”UKULELE\” from Bensound.com
#인터넷상식 #소셜앱 #컴퓨터상식 #소셜로그인 #인터넷강의 @Google @YouTube @TeamYouTube [Help] @YouTube FanFest @YouTube Creators @Apple @Facebook
간편 로그인 주제에 대한 자세한 내용은 여기를 참조하세요.
간편 로그인 디자인 어떻게 할까? _ UX 디자인과 개발
요즘 대세는 간편 로그인, 그런데 디자인이 각기 다르다? … 은 간편하게 기존 SNS나 타 서비스 계정을 연동해 로그인하는 방법으로 바뀌고 있죠.
Source: ditoday.com
Date Published: 9/11/2022
View: 7351
UX 디자인과 개발 6. 간편 로그인 – 브런치
과거엔 해당 서비스 자체에 가입을 하고 로그인하는 방법이 주였지만 지금은 간편하게 기존 SNS, 타 서비스 계정을 연동해서 로그인하는 방법으로 많이 …
Source: brunch.co.kr
Date Published: 12/6/2022
View: 2312
[간편 로그인 설정 및 해제 방법] : 회원정보 고객센터
– 최신 버전의 네이버 앱이 설치돼 있다면 간편 로그인 기능을 사용할 수 있습니다. – 로그아웃해도 휴대기기에 정보가 남아있어 비밀번호를 다시 입력하지 않고 바로 …
Source: help.naver.com
Date Published: 10/7/2022
View: 2856
간편로그인 – kakaoCert – 카카오페이 인증 API
서비스 소개. 카카오페이 인증서만을 사용해 간편하게 회원분들이 로그인할 수 있는 서비스로, ID/PW, 공인인증서, PIN번호 로그인 등을 대체 혹은 병행할 수 있습니다 …
Source: www.kakaocert.com
Date Published: 9/12/2021
View: 1641
SNS 간편로그인 통합 매뉴얼 – 블로그페이
애플리케이션 이름은 쇼핑몰 이름으로,. 사용 API 는 네아로(네이버 아이디로 로그인)을 선택해 주세요. 1. 2. # 간편로그인 > 네이버 로그인 연동. Page 25 …
Source: blogpay.co.kr
Date Published: 9/5/2022
View: 6990
로그인플러스/휴대폰간편로그인
휴대폰번호로 간편하게 로그인, 간편하고 안전한 ID/PW관리, 해킹염려 No, 안심보험 최대 100만원 지원.
Source: chrome.google.com
Date Published: 6/29/2022
View: 6761
드림 간편 로그인 | Shopify 앱스토어
긴 막대 디자인 로그인과 버튼 디자인 로그인을 지원합니다. 색상과 디자인을 변경할 수 있습니다. 대다수의 쇼피파이 테마를 지원합니다. 간편한 사용. 간단하게 앱설치가 …
Source: apps.shopify.com
Date Published: 8/17/2021
View: 7073
주제와 관련된 이미지 간편 로그인
주제와 관련된 더 많은 사진을 참조하십시오 소셜 로그인이란? 로그인/인터넷 상식. 타계정으로 로그인하기. 댓글에서 더 많은 관련 이미지를 보거나 필요한 경우 더 많은 관련 기사를 볼 수 있습니다.
주제에 대한 기사 평가 간편 로그인
- Author: 엄마, 내가 알려줄게
- Views: 조회수 7,303회
- Likes: 좋아요 225개
- Date Published: 2021. 1. 28.
- Video Url link: https://www.youtube.com/watch?v=ovChQmJmccY
간편 로그인 디자인 어떻게 할까? _ UX 디자인과 개발
로그인 대세는 간편 로그인
대부분의 서비스는 로그인이 필요합니다. 과거엔 해당 서비스 자체에 가입 후 로그인해야 했지만 지금은 간편하게 기존 SNS나 타 서비스 계정을 연동해 로그인하는 방법으로 바뀌고 있죠. 이젠 없으면 어색한 간편 로그인, 하지만 서비스별 간편 로그인 UI도 제각기 다릅니다. 그럼 간편 로그인 디자인은 어떻게 해야 할까요?
왓챠
티빙
오늘의 집
1. 카카오
카카오 로그인 디자인 가이드 예제 1
기본적으로 카카오에서 제공하는 UI가 있습니다. 하지만, 무조건 기본 UI를 사용하진 않습니다. 서비스에 맞게 수정하기도 하는데, 이럴 경우 카카오가 싫어할까요? 카카오 로그인 활용 가이드를 살펴보면 ‘서비스 UI·UX에 맞춰 카카오 로그인 버튼의 수정이 필요할 경우, 버튼을 유동적으로 재구성할 수 있으며, 카카오 고유 이미지를 해치지 않는 범위 내에서 아래 버튼 디자인 규정을 따라 제작합니다’라고 명시돼 있습니다. 즉, 카카오도 서비스에 맞게 수정해도 상관없다고 말합니다. 다만 카카오 고유 이미지를 해치지 않는 범위 내라고 제한하고 있죠. 제한 사항으로는 카카오 고유 색상·레이블·심볼·컨테이너·로그인 버튼 크기 변경에 따른 정렬 기준 등이 있습니다.
1) 색상
(1) 컨테이너(바탕색): #FEE500
(2) 심볼: #000000
(3) 레이블: #000000(85%)
* 가이드에 벗어난 컬러를 적용하거나, 버튼 컬러 미적용으로 인해 타사 로그인 버튼이 강조돼서는 안 됩니다.
카카오 로그인 디자인 가이드 예제 2
2) 레이블
(1) 축약형: 로그인 / Login
(2) 완성형: 카카오 로그인 / Login with Kakao
3) 심볼
(1) 기본 사용 심볼: 말풍선 모양
(2) 적용 금지: 카카오 CI를 심볼로 표기, 심볼 없이 ‘카카오 로그인’만으로 구성
(3) 기능 아이콘으로 심볼 아이콘(로그인·로그아웃 아이콘 등 다른 기능 아이콘) 대체 불가
* 예제처럼 기본 심볼은 형태·비율·색상이 달라지면 안되고, 카카오 CI와 카카오톡 심볼은 다르니 주의하세요.
카카오 로그인 디자인 가이드 예제 3
4) 컨테이너
기본 모서리 굴곡: 12px
카카오 로그인 디자인 가이드 예제 4
5) 크기 변경
(1) 컨테이너 가로 길이 변경 시
가. 심볼과 레이블은 유지, 컨테이너 확장구간을 좌, 우 방향 동일 확장
* 심볼은 좌측 정렬 혹은 레이블과 함께 가운데 정렬이 가능합니다.
나. 변경 금지: 레이블 자간 및 크기
(2) 버튼 크기 전체적으로 확대해야 할 경우
가. 비율 유지해 확대
나. 레이블 세로 길이: 컨테이너 세로 길이의 1/3 초과 금지
(3) 표준 디자인보다 더 작은 버튼을 사용해야 할 경우
=> 축약형 ‘로그인’ 버튼 사용
카카오 로그인 디자인 가이드 예제 5
2. 네이버
네이버 로그인 디자인 가이드 예제 1
네이버가 기본적으로 제공하는 디자인에는 완성형, 축약형 및 아이콘형의 로그인과 로그아웃이 있습니다. 더불어, 기본 디자인의 한글과 영문형 ai 파일을 제공하기 때문에 기본 디자인을 사용할 경우 직접 가이드에 따라 제작하지 않고 다운받아 사용할 수 있습니다. 다크 모드에 호환되는 디자인 가이드 예제도 제공해 모드 전환 시 어떻게 적용할지 알려줍니다. 가이드라인으로는 네이버 고유 색상·레이블·심볼·금지 규정 등이 있습니다.
1) 색상
네이버 로그인 디자인 가이드 예제 2
(1) NAVER GREEN:
HEX #03C75A / GRB 3/199/90 / CMYK 72/0/88/0 / PANTONE 7479U
(2) 기존 가이드에서는 흰색 컬러값을 알 수 있었지만, 새롭게 바뀐 가이드에서는 네이버 그린의 지정값만 알려주고 있습니다.
* 권장 흰색 유형(AI 파일에서 추출) #FFFFFF
* 다크 모드에서의 텍스트 컬러(AI 파일에서 추출): #A5A5A7
2) 레이블(메시지) + 버튼 디자인
네이버 로그인 디자인 가이드 예제 3
(1) 메시지: 네이버 아이디로 로그인 목적에 부합한다면 한글, 영문 상관없이 변경 가능
(2) 버튼 디자인: 네이버 고유 이미지를 해치지 않는 범위 내에서 유연하게 디자인 변경 가능
3) 금지
네이버 로그인 디자인 가이드 예제 4
3. 구글 로그인
구글 로그인 디자인 가이드 예제 1
구글 사이트에서 로그인 브랜드 가이드라인을 다운받을 수 있고, 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) 필수 배경: 흰색 배경
구글 로그인 디자인 가이드 예제 2
4) 여백 및 크기
(1) 로고 사이즈: 18px
(2) 로고 여백: 왼쪽 8dp, 오른쪽(텍스트 여백) 24dp
(3) 세로: 40dp
(4) 폰트: Roboto 글꼴
(5) 텍스트 사이즈: 14px
(6) 텍스트 여백: 좌우, 각 8dp
구글 로그인 디자인 가이드 예제 3
5) 잘못된 버튼 디자인 예시
구글 로그인 디자인 가이드 예제 4
(1) 아이콘 단독 사용 금지: 버튼 경계선 및 사용자 작업을 나타내는 텍스트가 없을 경우
(2) 로고 컬러 임의 변경
(3) 배경 컬러 임의 변경 및 로고 배경(흰색) 미사용
(4) 공식 로고 미사용
4. 페이스북 로그인
페이스북 플러그인 구성 도구
페이스북은 플러그인 구성 도구를 지원해 텍스트 선택과 세 가지 버튼 레이아웃 모양을 바로 볼 수 있도록 제공합니다. 가이드라인으로는 페이스북 고유 색상·텍스트 및 로고·크기·금지 규정 등이 있습니다.
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
페이스북 로그인 디자인 가이드 예제 1
2) 텍스트 및 로고
(1) 텍스트: Facebook으로 계속하기, Facebook으로 로그인 등 앱에 가장 잘 어울리는 글꼴, 글꼴 굵기 및 커닝 조절(선택)
(2) 로고: 공식 로고(파일 다운 가능)
페이스북 로그인 디자인 가이드 예제 2
3) 크기
(1) 버튼 종류: 소형, 중형, 대형
(2) 높이: 소형(20px), 중형(28px), 대형(40px)
(3) 너비: 소형(200px), 중형(200~320px), 대형(240~400px)
페이스북 로그인 디자인 가이드 예제 3
4) 금지
(1) 로고 수정: 컬러, 크기, 디자인, 기타 맞춤 변경을 위한 수정
* 기술적 제한으로 정확한 색 사용이 어려울 경우 흑백 사용을 권장합니다.
(2) ‘f’ 로고만 단독 사용: 적절한 행동 유도(Facebook으로 계속하기, Facebook으로 로그인 등) 없이 로고 단독 사용
(3) 행동 유도 카피 문구(예: Facebook으로 계속하기)가 로그인 버튼 밖 이탈
5. 애플 로그인
애플 로그인 디자인 가이드 예제 1
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
애플 로그인 디자인 가이드 예제 2
3) 로고
공식 소스 사용
애플 로그인 디자인 가이드 예제 3
4) 폰트 및 텍스트
(1) 사용 폰트: 시스템 글꼴
(2) 텍스트의 크기: 버튼 높이의 43%
(3) 버튼 높이: 텍스트 글꼴 크기의 233%(가까운 정수로 반올림)
애플 로그인 디자인 가이드 예제 4
5) 금지 및 제한
(1) 로고 수정 금지: ‘검은색 배경 – 흰색 로고’, ‘흰색 배경 – 검은색 로고’만 사용 가능
(2) 44pt PNG 파일 사용: iOS 기본 버튼 높이인 44pt에서만 사용
가이드와 미묘하게 다른 로그인 화면?!
종종 가이드에 없거나, 금지한 항목을 무시하고 디자인된 화면을 만나볼 수 있습니다. 말 그대로 가이드는 ‘가이드’기 때문에 지키지 않으면 배포가 불가능 한 것은 아닙니다. 금지 사항이 체크되면 자동으로 개발되지 않는 첨단 시스템은 아니기 때문에, 개발과 앱 등록은 가능하지만 이후 제재가 들어올 수 있다고 합니다.
특정 간편 로그인 브랜드 규정이 엄격하다는 이야기도 있지만, 규정에 나오지 않거나 큰 차이 없다면 커스텀해 사용해도 무리 없다는 현직 개발자의 경험담도 있습니다. 그래도 추후 문제 되지 않으려면 최대한 가이드를 인지하고, 금지 사항을 피해 디자인하는 게 좋을 것 같습니다.
서비스 별 자세한 가이드라인은 아래 URL에서 확인하세요:)
▶카카오 바로가기
▶네이버 바로가기
▶구글 바로가기
▶페이스북 바로가기
▶애플 바로가기
Favorite
© DIGITAL iNSIGHT 디지털 인사이트. 무단전재 및 재배포 금지 뉴스콘텐츠는 저작권법 제7조 규정된 단서조항을 제외한 저작물로서 저작권법의 보호대상입니다. 본 기사를 개인블로그 및 홈페이지, 카페 등에 게재(링크)를 원하시는 분은 반드시 기사의 출처(로고)를 붙여주시기 바랍니다. 영리를 목적으로 하지 않더라도 출처 없이 본 기사를 재편집해 올린 해당 미디어에 대해서는 합법적인 절차(지적재산권법)에 따라 그 책임을 묻게 되며, 이에 따른 불이익은 책임지지 않습니다.
Tags
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) 로고
(1) 공식 소스 사용
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/
kakaoCert
서비스 소개
카카오페이 인증서만을 사용해 간편하게 회원분들이 로그인할 수 있는 서비스로, ID/PW, 공인인증서, PIN번호 로그인 등을 대체 혹은 병행할 수 있습니다. 간편로그인은 카카오톡 앱을 직접 호출하여 인증하는 APPToAPP 방식과 카카오톡 알림톡 확인 후 인증하는 TalkMsg 방식을 제공합니다.
이용자 1 로그인 시도 5 로그인 완료 이용기관 2 로그인 요청 3 와 이용기관 *이용자 정보 매칭 4로그인 결과값 전달
* 카카오페이는 이용기관과 이용자 개인정보 매칭을 위하여 사전에 이용자의 개인정보 수집 약관동의를 받고 있습니다.
휴대폰번호로 간편하게 로그인, 간편하고 안전한 ID/PW관리, 해킹염려 No, 안심보험 최대 100만원 지원
간편하고 안전한 ID/PW 관리 솔루션! 휴대폰번호로 간편하게 로그인 하세요! 간편하고 안전한 ID/PW관리 – 간편하고 안전한ID/PW관리 솔루션! 휴대폰번호로 간편하게 OK! 사용하시는 여러 개의 ID/PW를 휴대폰간편로그인에 한 번만 등록하세요. 해킹염려 No! – NO! 아이디, NO! 주민번호, NO! 카드번호, 개인정보 입력없이 안전하게! 각종 위험으로부터 정보를 안전하게! 휴대폰번호만으로 유출 걱정 없이 안전하게 이용하세요! 안심보험 최대 100만원 지원 – 불안한 로그인 정보! 안심보험으로 한번 더 보호해드립니다! 해킹, 피싱, 스미싱 등으로 인한 금융 피해 발생 시 최대 100만원까지 보상해드립니다.
드림 간편 로그인
드림 소셜 로그인 정보
타사 인증 서비스를 사용한 간편 로그인(소셜 로그인)
한국에서 가장 많이 사용하는 네이버, 카카오, 구글, 페이스북 아이디로 회원가입 및 로그인이 가능합니다.
어려운 코딩이 필요 없고 자동으로 설치됩니다. 관리자 페이지에서 인터페이스, 디자인, 타이틀을 수정할 수 있습니다. 다른 언어도 사용할 수 있습니다.
한국에서 가장 많이 사용하는 4가지 간편 로그인(소셜 로그인)
구글, 페이스북, 카카오, 네이버
인터페이스, 디자인 수정 가능:
관리자 페이지에서 색상, 모양 등 디자인을 변경할 수 있습니다.
다양한 언어 지원:
다국어 상점을 지원합니다.
로그인 통계 분석:
각 플랫폼별 회원가입자수, 로그인 수를 차트로 제공합니다.
멀티패스 지원:
쇼피파이 플러스 스토어를 위한 멀티패스를 지원합니다.
키워드에 대한 정보 간편 로그인
다음은 Bing에서 간편 로그인 주제에 대한 검색 결과입니다. 필요한 경우 더 읽을 수 있습니다.
이 기사는 인터넷의 다양한 출처에서 편집되었습니다. 이 기사가 유용했기를 바랍니다. 이 기사가 유용하다고 생각되면 공유하십시오. 매우 감사합니다!
사람들이 주제에 대해 자주 검색하는 키워드 소셜 로그인이란? 로그인/인터넷 상식. 타계정으로 로그인하기
- 소셜로그인 구현
- 소셜로그인
- 구글로그인
- 구글로그인방법
- 유튜브로그인
- 아이폰 구글로그인
- 앱 구글로그인
- 페이스북로그인하는법
- 네이버로그인
- 카톡로그인
- 개인정보
- sns로그인
- social login facebook
- social login google
- apple login
- 애플로그인
- 타계정으로 대체
- 네이버 로그인
- 네이버 로그인 하는법
- 안드로이드 소셜로그인
- 인터넷 소셜로그인
- 앱 소셜 로그인
- 앱 소셜 로그인 하는법
- 안드로이드 구글로그인
- 네이버 로그인 방법
소셜 #로그인이란? #로그인/인터넷 #상식. # #타계정으로 #로그인하기
YouTube에서 간편 로그인 주제의 다른 동영상 보기
주제에 대한 기사를 시청해 주셔서 감사합니다 소셜 로그인이란? 로그인/인터넷 상식. 타계정으로 로그인하기 | 간편 로그인, 이 기사가 유용하다고 생각되면 공유하십시오, 매우 감사합니다.