SCOPE 사용 가이드
SCOPE 진입 UI는 서비스를 식별하는 시그니처 로고와 동작을 실행하는 버튼형 로고로 구분합니다. 파트너 화면의 다른 주요 요소와 동일한 위계로 배치하고, 라벨·SCOPE 로고·비율은 이 가이드에 따라 유지합니다.
로고와 아이콘 파일은 브랜드 자산, 구현 코드는 UI 구현에서 확인합니다.
1. 동작 방식
SCOPE Connect는 목적에 따라 지갑 연결(Connect)과 결제(Payment) 두 가지 유형을 지원합니다.
- 지갑 연결(Connect): 사용자가 원하는 지갑을 직접 선택해 연결합니다. 지갑이 아직 연결되지 않았거나, 여러 지갑 중 하나를 선택해야 할 때 사용합니다.
- 결제(Payment): 가맹점, 금액, 토큰, 네트워크, 수취 주소가 이미 정해진 요청을 승인합니다. 지갑을 선택하는 것이 아니라 결제 승인 자체가 목적입니다.
| 동작 | 기본 표시 | 연결되는 화면 | 사용 시점 |
|---|---|---|---|
| 지갑 연결 | SCOPE 로고(시그니처 로고) 또는 Connect with + SCOPE 로고 (버튼형 로고) | <ScopeConnect /> 지갑 선택창 | 사용자가 지갑을 직접 골라 연결할 때 |
| 결제 | SCOPE 로고(시그니처 로고) 또는 Pay with + SCOPE 로고 (버튼형 로고) | <PaymentRequest /> 결제 요청창 | 가맹점·금액·토큰·네트워크·수취 주소가 확정되었을 때 |
버튼에는 동작 라벨과 SCOPE 로고만 사용합니다. 전체 제품명인 SCOPE Connect, 파트너 로고, 별도의 아이콘 또는 프로모션 문구를 버튼 안에 추가하지 않습니다.
지갑 연결 흐름
결제 흐름
Pay with SCOPE는 지갑 선택 버튼이 아닙니다. 연결된 지갑이 있으면 결제 요청창을 바로 열고, 미연결 상태에서는 사용 가능한 기본 지갑에 직접 연결한 뒤 같은 결제 요청창을 엽니다. 직접 연결할 지갑을 결정할 수 없을 때만 지갑 선택창을 폴백으로 제공합니다.
2. 시그니처 로고
시그니처 로고는 여러 지갑·결제 수단이 함께 표시되는 목록에서 SCOPE를 구분하는 용도로 사용합니다. 단독 버튼으로는 사용하지 않으며, SCOPE 선택 시 지갑 연결 흐름으로 이어집니다.
| 항목 | 규격 |
|---|---|
| 높이 (Height) | Min. 20px, 원본 비율 유지 |
| 최소 여백 (Clear space) | 로고 높이를 x라 할 때, 네 면에 각각 Min. 0.5x |
| 색상 (Color) | 밝은 배경에는 Dark Logo, 어두운 배경에는 Light Logo 사용 |
다른 지갑 또는 결제 수단과 함께 표시하는 경우, 각 브랜드 로고가 시각적으로 동등한 수준으로 인식되도록 크기와 정렬을 조정합니다. SCOPE 로고를 임의로 확대하거나 축소하여 강조하지 않으며, 지정된 최소 높이와 여백을 유지합니다.
적용 예시
시그니처 로고는 여러 결제 수단 중 SCOPE를 식별하는 선택 요소로 사용하며, 독립적인 액션으로 사용하지 않습니다.
주의사항
SCOPE 로고 임의 변형은 브랜드의 식별력을 저하시키고 이미지를 왜곡시킵니다. 본 규정은 브랜드 자산의 일관성을 유지하기 위한 지침으로, 어떠한 경우에도 로고의 형태, 비율, 색상을 임의로 변경하여 사용할 수 없습니다.
비율 변경을 금지해 주세요
지정 색상을 준수해 주세요
형태 임의 삭제를 금지해 주세요
임의 재조합을 금지해 주세요
효과 적용을 금지해 주세요
지정 서체를 준수해 주세요
아웃라인 사용을 금지해 주세요
배경 간섭에 주의해 주세요 (1)
배경 간섭에 주의해 주세요 (2)
3. 버튼형 로고
버튼형 로고는 SCOPE의 지갑 연결 및 결제 흐름으로 진입하는 액션 요소입니다. 각 버튼은 실행되는 동작에 따라 Connect with SCOPE 또는 Pay with SCOPE를 구분하여 사용합니다.
크기와 여백
| 항목 | 추천 규격 |
|---|---|
| 높이 (Height) | 48px |
| 모서리 (Radius) | 8px |
| 좌우 안쪽 여백 (Horizontal padding) | Min. 14px |
| 라벨–로고 간격 (Label–logo gap) | Min. 8px |
| SCOPE 로고 높이 | 20px |
| 바깥 최소 여백 (Minimum margin) | 8px |
| 라벨 (Label) | Min. 14px |
버튼 너비는 사용 환경에 따라 확장할 수 있으며, 라벨과 로고는 하나의 그룹으로 중앙 정렬합니다. 너비와 관계없이 높이, 내부 여백, 간격 및 로고 크기는 지정된 규격을 유지합니다. 좁은 화면에서는 컨테이너 너비에 맞춰 확장할 수 있습니다.
색상
| 사용 환경 | 유형 | 배경 | 텍스트·로고 | 테두리 |
|---|---|---|---|---|
| Light Mode | Primary | #3280FF | #FFFFFF | — |
| Outline | — | #040C1D | #040C1D | |
| Dark | #040C1D | #FFFFFF | — | |
| Disabled | #D7DDE7 | #A3A8B8 | — | |
| Dark Mode | Primary | #3280FF | #FFFFFF | — |
| Outline | — | #FFFFFF | #FFFFFF | |
| Light | #FFFFFF | #040C1D | — | |
| Disabled | #373E4C | #6B7281 | — |
배경과 가장 잘 대비되는 유형 하나를 선택해 같은 서비스에서 일관되게 사용합니다. 로고에는 별도의 색, 투명도, 그림자 또는 그라데이션을 적용하지 않습니다.
적용 예시
지갑 연결
지갑 연결이 필요한 시점에 배치합니다. GNB의 계정 영역과 같이 서비스 전반에서 지속적으로 접근할 수 있는 위치 또는 랜딩 페이지의 히어로 영역처럼 첫 방문자의 주요 행동을 유도하는 지점에 배치하는 것을 권장합니다.
결제
결제 정보가 확정되고 사용자의 최종 승인만 필요한 시점에 배치합니다. 가맹점, 금액, 토큰, 네트워크 등 결제 조건이 확정된 상태에서 체크아웃 또는 주문 요약 영역과 같이 사용자가 결제 내용을 확인하고 최종 승인하는 지점에 배치합니다.
SCOPE는 파트너 서비스의 기존 UI 체계와 일관되게 적용합니다. 주변의 동일한 수준의 요소와 시각적 균형을 유지하고, 서비스의 정렬 및 배치 규칙을 따릅니다. SCOPE를 임의로 확대하거나 별도의 영역으로 분리해 강조하지 않습니다.
주의사항
SCOPE Connect 버튼의 임의 변형은 브랜드의 일관성과 식별성을 저해합니다. 일관된 브랜드 경험을 위해 지정된 라벨과 로고의 구성, 순서, 간격 및 색상 유형을 그대로 사용하며, 로고를 일반 텍스트로 대체하거나 개별 요소를 분리·변형하여 사용할 수 없습니다.
전체 제품명을 넣지 않습니다.
SCOPE를 글꼴로 입력하지 않습니다.
로고 비율을 변경하지 않습니다.
임의의 색을 적용하지 않습니다.
로고와 라벨 순서를 바꾸지 않습니다.
대비가 낮은 배경에 놓지 않습니다.