디자인 가이드

이 문서는 모바일신분증 연계 기능을 구현할 때 필요한 UI/UX 요소, 버튼, 아이콘, 로고 등을 올바르게 사용하는 방법을 안내해요.
각 항목은 정부에서 정한 규정을 따르며, 임의로 수정하거나 재구성하면 안 돼요.

1. 모바일신분증 BI 기본 체계

1.1 심볼 마크 (Simbol mark)

모바일신분증의 BI(Brand Identity)는 대한민국의 신뢰성과 블록체인 기반 보안을 시각화한 심볼이에요.
아이디카드 두 장이 겹쳐 체크 표시를 형성하는 구조는 안전성과 기술 신뢰도를 전달해요.

기본형 심볼	다양한 적용 예시

시그니처 규정

• 로고타입과 심볼마크를 정해진 비율로 조합해서 사용해요.
• 크기, 자간, 글꼴, 색상 등을 임의로 수정하면 안 돼요.

1.2 전용 색상

전용 색상은 브랜드 이미지 일관성을 유지하는 중요한 수단이에요.
배경색, 텍스트, 버튼 등 주요 구성 요소는 아래 색상 범위 내에서 지정해야 해요.

항목	이미지
전용 색상
배경 규정

1.3 사용 금지 예시

다음과 같이 BI를 임의 변경하면 이미지 신뢰도에 손상이 생기므로 사용하면 안 돼요:

• 비율을 조정하거나
• 색상을 임의 변경하거나
• 외곽선을 추가하거나
• 회전 또는 왜곡하는 경우

1.4 버튼/아이콘 구성

모바일신분증 연계 기능이 있는 앱이나 웹에서는 아래 버튼을 상황에 맞게 골라 써요.
버튼의 배경색은 흰색(#ffffff), 짙은 남색(#091F2C), 회색(#223642) 중에서 골라야 해요.

완성형 (148×42)	축약형 (104×42)	아이콘형 (42×42)	로그아웃형 (104×42)

1.5 전용 서체

• 스포카 한 산스를 국문/영문 로고타입에 맞는 보조 서체로 사용해요.
• 안내문, 동의서 등 인터페이스 내 텍스트에도 활용할 수 있어요.

1.6 리소스 다운로드

• 기본 버튼/로고가 포함된 이미지 세트(PNG, PSD)를 제공해요.
• 공식 리소스를 사용하면 해상도, 배치, 비율 문제를 줄일 수 있어요.

👉 리소스 다운로드

2. QR-MPM 방식 QR 출력 크기

• QR-MPM 방식은 키오스크 등에서 앱이 QR을 스캔하는 구조예요.
• QR 이미지는 가로/세로 4cm 이상 크기로 출력해야 인식률이 높아져요.

3. QR-CPM 방식 UX 가이드

키오스크나 스캐너에서 QR을 인식하는 방식이에요. 사용자가 앱에서 QR을 보여주면, 장비가 이를 스캔해요.

단계별 UX

단계	설명	이미지
1	앱 실행 후 ‘나의 QR’ 표출
2	스캐너에 QR 인식
3	정보 제출 동의 및 선택
4	본인 확인 완료

팁:
“앱에서 제출 정보를 확인하고 [정보 보내기] 버튼을 눌러주세요.”
문구를 안내하면 사용자가 절차를 쉽게 따라올 수 있어요.

4. 표준 UI/UX 샘플 활용

4.1 기본 원칙

• 특별한 사유가 없다면 모바일신분증 검증은 QR 또는 PUSH가 모두 가능한 표준 UI/UX를 사용하는 걸 권장해요.
• App2App 방식에서도 표준 버튼과 UI 구조를 함께 사용하는 것이 좋아요.

4.2 인증 방식별 UI 흐름

Push 방식

1. 앱 선택
2. Push 선택
3. 이름/번호 입력
4. 이용 동의
5. 인증 요청
6. 결과 확인

현재 지원 앱: 정부24, 삼성월렛
2025년부터: 네이버, 카카오, 토스, NH농협, 국민은행 등 추가 예정

QR 방식

1. 개인정보 수집·동의
2. QR 생성 및 표출
3. 앱에서 스캔
4. 인증 결과 수신

QR 검증 방식에서는 앱 선택 화면은 비활성화(음영 처리)돼요.

App2App 방식

단계	설명	이미지
1	기관 앱에 표준 버튼 배치
2	정보 동의 및 인증 요청