로그인 버튼 디자인
- 인쇄
- PDF
로그인 버튼 디자인
- 인쇄
- PDF
기사 요약
이 요약이 도움이 되었나요?
의견을 보내 주셔서 감사합니다.
Classic/VPC 환경에서 이용 가능합니다.
사용자의 애플리케이션에 네이버 클라우드 플랫폼 계정의 로그인 기능을 적용할 때 필요한 로그인 버튼 디자인을 설명합니다. 애플리케이션에 맞게 로그인 버튼의 디자인을 변경할 수 있으나, 디자인 시 네이버 클라우드 플랫폼의 아이덴티티를 유지할 수 있도록 다음의 가이드를 최대한 유지하는 것을 권장합니다.
참고
- 이 가이드에서 제시하는 항목을 모두 적용한 로그인 버튼 파일은 로그인 버튼 다운로드 파일을 다운로드해 주십시오.
- 자체 디자인 가이드가 없는 경우 네이버 클라우드 플랫폼에서 제공하는 마크업을 활용해 로그인 버튼을 배치할 수 있습니다. 자세한 설명은 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, 엔클라우드
잘못된 로그인 버튼 디자인 예시
잘못된 로그인 버튼 디자인의 예시는 다음과 같습니다.
로그인 버튼의 백그라운드에 유채색 적용 후 NAVER Cloud Platform 색의 심볼을 적용한 경우
심볼의 가독성이 확보되지 않은 경우
가이드에서 제시한 색상 이외의 색상을 심볼에 적용한 경우
좁은 영역에 무리하게 긴 레이블을 사용한 경우
이 문서가 도움이 되었습니까?