로그인 버튼 디자인
    • PDF

    로그인 버튼 디자인

    • PDF

    기사 요약

    사용자의 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 LoginNAVERクラウドプラットフォーム・ログイン
    축약형Ncloud 로그인Ncloud LoginNcloud でログイン

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

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


    이 문서가 도움이 되었습니까?

    Changing your password will log you out immediately. Use the new password to log back in.
    First name must have atleast 2 characters. Numbers and special characters are not allowed.
    Last name must have atleast 1 characters. Numbers and special characters are not allowed.
    Enter a valid email
    Enter a valid password
    Your profile has been successfully updated.