로그인 버튼 디자인

인쇄
공유
PDF

Article Summary

Share feedback

Thanks for sharing your feedback!

Classic/VPC 환경에서 이용 가능합니다.

사용자의 Application에 네이버 클라우드 플랫폼 계정의 로그인 기능을 적용할 때 필요한 로그인 버튼 디자인을 설명합니다. Application에 맞게 로그인 버튼의 디자인을 변경할 수 있으나, 디자인 시 네이버 클라우드 플랫폼의 아이덴티티를 유지할 수 있도록 다음의 가이드를 최대한 유지하는 것을 권장합니다.

Symbol
Color
Label
잘못된 로그인 버튼 디자인 예시

이 가이드에서 제시하는 항목을 모두 적용한 로그인 버튼을 아래에서 다운로드할 수 있습니다.

로그인 버튼 다운로드: NAVER Cloud Platform_Signin_Button.zip

참고

자체 디자인 가이드가 없는 경우 네이버 클라우드 플랫폼에서 제공하는 마크업을 활용해 로그인 버튼을 배치할 수 있습니다. 자세한 설명은 Ncloud Single Sign-On 로그인 버튼 마크업 가이드를 참고해 주십시오.

Symbol

네이버 클라우드 플랫폼 로그인 버튼 내 사용되는 네이버 클라우드 플랫폼의 심볼은 3가지 색상 중 하나로 적용해 주십시오.

흰색 또는 회색: 로그인 버튼이 어두운 색상일 경우 적용
검정색: 로그인 버튼이 흰색 또는 회색 같이 밝은 색상일 경우 적용
NAVER Cloud Platform 색: 네이버 클라우드 플랫폼 공식 색상으로 로그인 버튼 색상이 밝은 색상일 경우 적용

참고

네이버 클라우드 플랫폼 심볼은 자체 가이드에 맞게 크기를 조절할 수 있지만 가로와 세로의 비율은 유지해야 하며, 형태를 변형하거나 다른 형태와 조합하지 않습니다.

Color

네이버 클라우드 플랫폼 로그인 버튼의 색상은 Basic Line 타입과 NAVER Cloud Platform Color Gradation 타입 중 선택할 수 있습니다. 자사 로그인 페이지 구성 시 타사 로그인 옵션과 비교하여 동등한 가독성을 위해 알맞게 적용해 주십시오.

Basic Line 타입의 색상 구성
- Background/HEX: #F9F9F9, RGB: 249/249/249
- Border/HEX: #AAAAAA, RGB: 170/170/170
NAVER Cloud Platform Color Gradation 타입의 색상 구성
- Green HEX: #00C3C8, RGB: 3/199/90
- Cyan HEX: #03C75A, RGB: 0/195/200

다음은 로그인 버튼의 색상 가이드를 적용한 예시입니다.

Label

화면에 알맞게 들어갈 수 있도록 레이블을 넣어 주십시오. 로그인 버튼 크기에 따른 레이블은 기본형과 축약형 중 선택하여 적용할 수 있습니다.

유형	한국어	영어	일본어
기본형	네이버 클라우드 플랫폼 로그인	NAVER Cloud Platform Login	NAVERクラウドプラットフォーム・ログイン
축약형	Ncloud 로그인	Ncloud Login	Ncloud でログイン

또한, 사용자의 자체 디자인 가이드에 따라 아래와 같이 레이블을 수정하여 적용할 수 있습니다.

유형	한국어	영어	일본어
기본형	네이버 클라우드 플랫폼으로 로그인	Log in with NAVER Cloud Platform	NAVERクラウドプラットフォームでログイン
축약형	Ncloud 아이디로 로그인	Log in with Ncloud ID	Ncloud ID でログイン

참고

레이블 내 '네이버 클라우드 플랫폼' 및 'Ncloud'는 네이버 클라우드 플랫폼을 상징하는 레이블이므로 임의로 변경할 수 없습니다. <예시> nCloud, 엔클라우드