--- title: "로그인 버튼 디자인" slug: "sso-button-design-guide" tags: ["Single Sign-On"] updated: 2026-09-17T09:09:31Z published: 2026-09-17T09:09:31Z canonical: "guide-fin.ncloud-docs.com/sso-button-design-guide" --- > ## Documentation Index > Fetch the complete documentation index at: https://guide-fin.ncloud-docs.com/llms.txt > Use this file to discover all available pages before exploring further. # 로그인 버튼 디자인 사용자의 Application에 네이버 클라우드 플랫폼 계정의 로그인 기능을 적용할 때 필요한 로그인 버튼 디자인을 설명합니다. Application에 맞게 로그인 버튼의 디자인을 변경할 수 있으나, 디자인 시 네이버 클라우드 플랫폼의 아이덴티티를 유지할 수 있도록 다음의 가이드를 최대한 유지하는 것을 권장합니다. - [Symbol](/docs/sso-button-design-guide#Symbol) - [Color](/docs/sso-button-design-guide#Color) - [Label](/docs/sso-button-design-guide#Label) - [잘못된 로그인 버튼 디자인 예시](/docs/sso-button-design-guide#%EC%9E%98%EB%AA%BB%EB%90%9C%EB%A1%9C%EA%B7%B8%EC%9D%B8%EB%B2%84%ED%8A%BC%EB%94%94%EC%9E%90%EC%9D%B8%EC%98%88%EC%8B%9C) 이 가이드에서 제시하는 항목을 모두 적용한 로그인 버튼을 아래에서 다운로드할 수 있습니다. - 로그인 버튼 다운로드: [NAVER Cloud Platform_Signin_Button.zip](https://cdn.document360.io/0406ed95-101f-4cde-8dd8-308d03444a94/Images/Documentation/NAVER%20Cloud%20Platform_Signin_Button.zip) 참고 자체 디자인 가이드가 없는 경우 네이버 클라우드 플랫폼에서 제공하는 마크업을 활용해 로그인 버튼을 배치할 수 있습니다. 자세한 설명은 [Ncloud Single Sign-On 로그인 버튼 마크업 가이드](/docs/sso-markup-guide)를 참고해 주십시오. ## Symbol 네이버 클라우드 플랫폼 로그인 버튼 내 사용되는 네이버 클라우드 플랫폼의 심볼은 3가지 색상 중 하나로 적용해 주십시오. ![sso-button-design-guide_symbol_color_guide](https://cdn.document360.io/0406ed95-101f-4cde-8dd8-308d03444a94/Images/Documentation/sso-button-design-guide_symbol_color_guide.png) - 흰색 또는 회색: 로그인 버튼이 어두운 색상일 경우 적용 - 검정색: 로그인 버튼이 흰색 또는 회색 같이 밝은 색상일 경우 적용 - NAVER Cloud Platform 색: 네이버 클라우드 플랫폼 공식 색상으로 로그인 버튼 색상이 밝은 색상일 경우 적용 참고 네이버 클라우드 플랫폼 심볼은 자체 가이드에 맞게 크기를 조절할 수 있지만 가로와 세로의 비율은 유지해야 하며, 형태를 변형하거나 다른 형태와 조합하지 않습니다. ## Color 네이버 클라우드 플랫폼 로그인 버튼의 색상은 Basic Line 타입과 NAVER Cloud Platform Color Gradation 타입 중 선택할 수 있습니다. 자사 로그인 페이지 구성 시 타사 로그인 옵션과 비교하여 동등한 가독성을 위해 알맞게 적용해 주십시오. ![sso-button-design-guide_button_color_guide](https://cdn.document360.io/0406ed95-101f-4cde-8dd8-308d03444a94/Images/Documentation/sso-button-design-guide_button_color_guide.png) - 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](https://cdn.document360.io/0406ed95-101f-4cde-8dd8-308d03444a94/Images/Documentation/sso-button-design-guide_button_color_example.png) ## 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](https://cdn.document360.io/0406ed95-101f-4cde-8dd8-308d03444a94/Images/Documentation/sso-button-design-guide_error_example1.png) - 심볼의 가독성이 확보되지 않은 경우 ![sso-button-design-guide_error_example2](https://cdn.document360.io/0406ed95-101f-4cde-8dd8-308d03444a94/Images/Documentation/sso-button-design-guide_error_example2.png) - 가이드에서 제시한 색상 이외의 색상을 심볼에 적용한 경우 ![sso-button-design-guide_error_example3](https://cdn.document360.io/0406ed95-101f-4cde-8dd8-308d03444a94/Images/Documentation/sso-button-design-guide_error_example3.png) - 좁은 영역에 무리하게 긴 레이블을 사용한 경우 ![sso-button-design-guide_error_example4](https://cdn.document360.io/0406ed95-101f-4cde-8dd8-308d03444a94/Images/Documentation/sso-button-design-guide_error_example4.png)