로그인 버튼 디자인

Prev Next

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

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

참고

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

Symbol

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

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

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

Color

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

  • 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

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

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, 엔클라우드

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

잘못된 로그인 버튼 디자인의 예시는 다음과 같습니다.

  • 로그인 버튼의 백그라운드에 유채색 적용 후 NAVER Cloud Platform 색의 심볼을 적용한 경우
    sso-button-design-guide_error_example1

  • 심볼의 가독성이 확보되지 않은 경우
    sso-button-design-guide_error_example2

  • 가이드에서 제시한 색상 이외의 색상을 심볼에 적용한 경우
    sso-button-design-guide_error_example3

  • 좁은 영역에 무리하게 긴 레이블을 사용한 경우
    sso-button-design-guide_error_example4