소셜 로그인 화면을 디자인 할 때 지켜야하는 내용을 정리해 봤습니다. Show 소셜 로그인 디자인하기 - 브랜드 가이드 라인 지키기1. 버튼 디자인 가이드1-1. 제공 로고와 버튼 이미지 (권장 예시) 로고 뿐만 아니라 각종 사례에 알맞게 사용 할 수 있는 버튼 png까지 제공하고 있다. 컬러, 서체를 폰트로 사용하기 어려운 경우 이미지 폰트(수정할 수 없는 이미지 글자)로 사용하면 된다. 각 브랜드 기준 폰트는 무료로 다운받아 쓸 수 있다. 네이버는 "나눔바른고딕 볼드" 구글은 "로보토"를 쓰면 된다. 1-2. 크기 (허용 범위)머테리얼 가이드 제공자이기도한 구글 답게 아주 상세하게 가이드를 제공하고 있다. 대부분의 계정 연동 버튼이 네이티브앱에서는 위 기준을 지키고 있는 것으로 보인다. 가이드는 분명히 있지만, 모든 앱이 상세 내용을 모두 지키고 있지는 않다. 각 앱에 맞게 변형이 가능하다. 브랜드 로고가 비율이 찌그러지지 않고 일정 여백을 침해 받지 않는 선에서 꽤 자유롭게 허용하고 있다. 1-3. 문구 안내 (허용 범위)디자인적인
허용과 별개로 버튼의 목적은 분명하게 사용하는 것이 좋다. 특히, 이메일 회원가입을 병행해서 사용하는 경우 특별히 놓치지 않고 안내 문구를 적어 주는 것이 좋겠다. 1-4. 다른 버튼과 디자인 차별 두지 않기어느 SNS 연동사만 눈에 띄지 않도록 같은 크기와 문구로 안내합니다. 1-5. 브랜드 로고를 유지하기브랜드를 대표하는 로고 중에서도 로그인에 알맞는 버전의 BI를 따로 지정해 두고 있습니다. 각 연동사에 들어가서 확인해보고 사용합시다.
@네이버 로고 받으러 가기 @구글 로고 받으러 가기 ... 2. 연동으로 사용할 수 있는 계정 정보
로그인 버튼 구현에 있어서 각각 디자인 가이드가 명시 되어 있다. |
구글 로그인 디자인 - gugeul logeu-in dijain
관련 게시물
저작권 © 2024 ko.apacode Inc.
