[QR결제설계] QR결제 서비스 화면설계서 작성법

모바일 결제 시장이 급속히 성장하면서 QR코드를 활용한 결제 서비스는 이제 필수가 되었습니다.
특히 식당이나 푸드코트에서의 간편 결제 니즈가 높아지면서, 사용자 친화적인 QR결제 서비스 기획의 중요성이 더욱 커지고 있습니다. QR결제 서비스의 핵심 화면들을 어떻게 설계해야 하는지, 실무에서 바로 활용할 수 있는 화면설계서 작성법을 상세히 알아보겠습니다.

QR결제 서비스 화면 구조 개요

QR결제 서비스는 크게 4개의 핵심 화면으로 구성됩니다:

1. QR코드 생성 화면 - 결제를 위한 QR코드 생성
2. QR코드 표시 화면 - 생성된 QR코드를 시각적으로 노출
3. QR코드 인식 화면 - 카메라를 통한 QR코드 스캔
4. 결제 정보 확인 화면 - 인식된 정보 표시 및 결제 진행

각 화면별로 필요한 정보와 인터페이스 요소들을 체계적으로 정리해보겠습니다.

1. QR코드 생성 화면 설계

화면 목적

사용자가 결제 금액을 입력하고 QR코드 생성을 요청하는 화면

필수 정보 요소

• 결제 금액 입력 필드
  • 숫자 키패드 제공
  • 천 단위 콤마 자동 표시
  • 최소/최대 금액 제한 설정
• 매장 정보
  • 매장명 (자동 표시)
  • 매장 고유번호
• 결제 옵션
  • 할인/쿠폰 적용 여부
  • 부가세 포함/별도 선택

인터페이스 설계 포인트

네이버 QR

 

데이터 연동 요구사항

• 매장 마스터 정보 조회 API
• QR코드 생성 요청 API
• 결제 세션 생성 API

2. QR코드 표시 화면 설계

화면 목적

생성된 QR코드를 고객이 스캔할 수 있도록 명확하게 표시

필수 정보 요소

• QR코드 이미지
  • 충분한 크기 (최소 200x200px)
  • 고해상도 렌더링
  • 오류 정정 레벨 설정
• 결제 정보 요약
  • 결제 금액 (강조 표시)
  • 매장명
  • 유효 시간 (카운트다운)
• 상태 정보
  • QR코드 유효성 상태
  • 결제 대기 상태

인터페이스 설계 포인트

현대카드 라이페이 참고

 

기술적 고려사항

• QR코드 자동 새로고침 (보안)
• 화면 밝기 자동 조절
• 절전 모드 비활성화
• 실시간 결제 상태 폴링

3. QR코드 인식 화면 설계

화면 목적

카메라를 통해 QR코드를 스캔하고 결제 정보를 인식

필수 정보 요소

• 카메라 뷰파인더
  • 실시간 카메라 피드
  • QR코드 인식 가이드 라인
  • 스캔 영역 표시
• 안내 메시지
  • 스캔 방법 안내
  • 오류 상황별 가이드
• 기능 버튼
  • 플래시 온/오프
  • 갤러리에서 이미지 선택

인터페이스 설계 포인트

풀스크린 카메라 뷰:
- 스캔 가이드 오버레이 (사각형 테두리)
- 상단: 안내 텍스트
- 하단: 플래시, 갤러리 버튼
- 뒤로가기 버튼 (좌상단)

사용성 개선 요소

• 자동 초점 조절
• 스캔 성공 시 진동/사운드 피드백
• 조도에 따른 플래시 자동 제안
• QR코드 인식 후 자동 화면 전환

4. 결제 정보 확인 화면 설계

화면 목적

인식된 QR코드 정보를 바탕으로 결제 세부사항을 확인하고 최종 승인

필수 정보 요소

• 매장 정보
  • 매장명 (신뢰성 확인용)
  • 매장 주소
  • 사업자 정보
• 결제 상세
  • 결제 금액 (세전/세후)
  • 부가세 내역
  • 할인 적용 내역
• 결제 수단
  • 등록된 카드 목록
  • 포인트/쿠폰 사용 옵션
• 보안 정보
  • 암호화된 거래 ID
  • 타임스탬프

인터페이스 설계 포인트

토스 QR 결제

보안 및 검증 요소

• 매장 정보 실시간 검증
• 결제 금액 한도 체크
• 사용자 인증 (생체 인증/PIN)
• 중복 결제 방지 로직

화면 간 연동 및 데이터 플로우

핵심 데이터 흐름

1. 생성 → 표시: QR코드 데이터, 세션 ID 전달
2. 인식 → 확인: 디코딩된 결제 정보, 매장 검증 데이터
3. 확인 → 완료: 결제 승인 결과, 영수증 데이터

API 연동 설계

POST /api/qr/generate - QR코드 생성
GET /api/qr/status/{sessionId} - 결제 상태 조회
POST /api/qr/decode - QR코드 디코딩
POST /api/payment/process - 결제 처리
GET /api/merchant/verify - 매장 정보 검증

예외 상황 및 오류 처리

주요 예외 시나리오

• QR코드 생성 실패: 네트워크 오류, 서버 장애
• 카메라 권한 거부: 권한 요청 재시도, 수동 입력 대안
• QR코드 인식 실패: 재스캔 유도, 수동 코드 입력
• 결제 승인 실패: 오류 원인별 안내, 재시도 옵션

---

QR결제 서비스의 성공은 사용자가 얼마나 쉽고 안전하게 결제를 완료할 수 있느냐에 달려 있습니다.
각 화면별로 사용자의 행동 패턴을 깊이 이해하고, 기술적 제약사항과 비즈니스 요구사항을 균형 있게 반영한 설계가 필요합니다.

특히 식당이나 푸드코트처럼 빠른 회전율이 중요한 환경에서는 결제 프로세스의 속도와 직관성이 더욱 중요합니다.
지속적인 사용자 테스트와 데이터 분석을 통해 화면 설계를 개선해 나가는 것이 성공적인 QR결제 서비스 기획의 핵심이라 할 수 있겠습니다.

---

QR 결제의 원리는 QR코드(Quick Response 코드)를 이용해 결제 정보를 주고받는 방식으로, 아래와 같은 흐름으로 작동합니다.

기본 개념

QR코드는 결제 정보를 담고 있는 2차원 바코드입니다. 사용자가 QR코드를 찍거나 생성해 결제를 진행하는 방식입니다.

QR 결제 방식은 크게 2가지입니다:

1. 정적 QR (Static QR)
2. 동적 QR (Dynamic QR)

1. 정적 QR 방식 (고정 QR)

• 가맹점이 고정된 QR코드를 출력해놓고, 소비자가 이걸 스캔해서 결제
• QR코드에는 가맹점 식별 정보만 들어 있음 (예: 상점 ID)
• 소비자가 금액을 직접 입력 후 결제

예시:

• 카페 계산대 앞에 붙은 QR코드 (카카오페이, 네이버페이 등)

2. 동적 QR 방식 (일회용 QR)

• 가맹점이 결제 금액 포함된 QR코드를 생성해 제시
• 소비자가 QR코드를 스캔하면 금액까지 자동 입력되어 바로 결제 가능
• 주로 POS 연동형 QR 결제에 사용

예시:

• 무인 키오스크, QR오더 앱, 배달앱 등

3. 결제 흐름 (동적 QR 예시)

(1) 가맹점 POS에서 금액 입력

→ POS가 QR 결제 서버에 요청 → QR코드 생성

(2) 고객이 QR코드를 스캔

→ QR코드는 결제 요청 URL 포함
→ 고객 앱(카카오페이, 페이코 등)에서 결제 승인

(3) 결제 서버가 결제 처리

→ 결제 성공 여부를 가맹점에 전달
→ POS는 결제 완료 상태로 처리

장점과 단점

장점

• 비접촉 결제 가능 (안전, 위생)
• 비용이 저렴 (NFC 단말 필요 없음)
• 도입이 쉬움 (인쇄물만 있어도 됨)

단점

• 스캔 환경이 나쁘면 오류 발생
• 정적 QR은 보안 위험 (QR 변조 가능)

---

 

위·변조 방지 (QR 코드 자체 보안)

디지털 서명	동적 QR코드는 **전자서명(SHA256, RSA 등)**으로 생성되어 위변조를 막습니다.
유효 시간	QR코드에 만료 시간이 포함되어 있어 일정 시간 후 무효 처리됩니다.
1회용 토큰	결제 요청마다 고유의 세션/트랜잭션 ID를 부여해 재사용을 방지합니다.

 

사용자 인증

앱 인증	결제는 반드시 본인 명의의 **결제 앱(카카오페이, 토스 등)**을 통해 진행됩니다.
생체 인증 / 비밀번호	결제 승인 시 지문, 얼굴 인식, 비밀번호 등을 요구합니다.
2FA (이중 인증)	일부 고액 결제의 경우 문자 인증, OTP를 추가로 요구할 수 있습니다.

데이터 암호화

HTTPS/SSL 통신	QR코드에 포함된 링크 접속 시 반드시 SSL 암호화된 HTTPS 통신을 사용합니다.
AES/RSA 암호화	결제 정보 및 카드 정보는 AES, RSA 등의 암호화 방식으로 처리되어 서버 간 송수신됩니다.
민감정보 미포함 QR	QR코드 자체에는 카드번호, 계좌번호 등 민감 정보는 포함하지 않음 (토큰 기반 링크만 포함).

서버·단말 보안

POS 보안 강화	POS 시스템은 화이트리스트 도메인만 통신 허용, 방화벽 적용, 로그 암호화 등 운영
결제 서버 인증	결제 요청은 반드시 인증된 API 키, 시크릿 키 기반 서버만 허용
접근 제어	관리자 권한 제어, 이상 접근 탐지 시스템(FDS)을 통해 비정상 결제 차단

추가 보안 체계

FDS (Fraud Detection System)	비정상 패턴 탐지: 갑자기 큰 금액, 낮은 위치 신뢰도 등 이상 거래 탐지
QR 코드 진위 확인	고객 앱에서 QR코드가 인증된 가맹점에서 생성된 것인지 확인함
백엔드 거래 검증	결제 이후 반드시 서버 간 결제 상태 재검증을 통해 처리 완료 여부를 확인함

 

요약 흐름

1. QR 생성 시
   • 고유 ID, 타임스탬프, 금액, 전자서명 포함 → QR 생성
   • 정적 QR은 별도 보호 체계 없이 유효 범위 제한
2. 사용자 스캔 및 결제
   • 사용자 인증 (앱 로그인 + 생체/비밀번호)
   • 앱 내부 HTTPS 통해 결제 서버와 통신
3. 서버 처리 후 POS로 응답
   • 응답 메시지 위조 방지 → 디지털 서명 검증
   • 결제 상태 재검증 및 UI 처리

---

기획은 검정색입니다.

"졸업 가운의 색이 검정인 이유는 검정이 성취와 권력의 색이기 때문입니다."

 

질문 환영합니다. 댓글 남겨주세요.
thinkhub