PC와 모바일을 묶는 QR 코드 UX 노트
PC 화면과 스마트폰을 한 세션으로 묶는 QR 온보딩에서 사용자가 가장 자주 막히는 지점과 해결 패턴을 정리했습니다.
QR은 빠르지만 친절하지 않습니다
QR 코드는 PC와 스마트폰을 연결하는 가장 빠른 방법이지만, 처음 사용해보는 사람에게는 의외로 막막한 단계가 많습니다. 어떤 카메라 앱을 써야 하는지, 링크가 어디서 열리는지, 열린 페이지에서 뭘 해야 하는지가 분명하지 않으면 사용자는 “이 사이트는 잘 안 되는 것 같다”고 결론을 내리기 쉽습니다.
Wandcade의 PC 화면은 QR 코드 위에 큰 글씨로 “스마트폰 카메라로 스캔”이라고 명시하고, 옆에 5자리 방 코드를 따로 보여줍니다. QR이 안 되는 환경에서도 컨트롤러 페이지로 가서 방 코드를 직접 입력해 접속할 수 있도록 두 가지 경로를 모두 둡니다.
- QR 옆에 큰 글씨로 “스마트폰 카메라로 스캔”을 같이 보여줍니다.
- QR이 실패하는 환경에 대비해 방 코드 입력 진입을 함께 둡니다.
- 방 코드는 외우기 쉬운 5자리 정도로 제한합니다.
- 연결 성공 시 PC 화면에서 시각적·청각적으로 즉시 피드백합니다.
“연결됨”과 “준비됨”은 다른 상태
QR을 스캔하고 컨트롤러 페이지가 열렸다고 해서 곧바로 게임이 시작되는 것은 아닙니다. 센서 권한이 허용되어야 하고, 영점이 잡혀야 하고, 사용자가 시작 버튼을 눌러야 합니다. 이 과정을 한 단계로 묶어버리면 사용자가 “난 이미 눌렀는데 왜 안 되지” 하고 혼란스러워합니다.
Wandcade는 컨트롤러 페이지에서 “연결됨 → 권한 허용 → 영점 조절 → 준비됨 → 게임 시작” 단계를 작은 진행 표시로 보여줍니다. 사용자는 자신이 어느 단계에 있는지 알 수 있고, 막혔을 때 어디서 막혔는지도 분명합니다.
실패를 침묵하지 않기
온보딩에서 가장 나쁜 경험은 “아무 일도 안 일어남”입니다. 사용자가 버튼을 눌렀는데 아무 반응이 없으면 같은 버튼을 여러 번 누르거나, 페이지를 새로고침하거나, 사이트를 닫아버립니다. 그래서 모든 단계에서 성공·진행 중·실패를 시각적으로 분명히 보여주는 것이 중요합니다.
특히 권한 거절이나 네트워크 실패는 “왜 실패했는지”와 “다음에 뭘 해야 하는지”를 한 줄로 같이 보여줘야 합니다. 단순히 “오류가 발생했습니다”만 보여주면 사용자는 같은 행동을 반복합니다.
- 버튼은 누르자마자 시각적으로 상태가 바뀌어야 합니다.
- 실패 메시지는 원인과 다음 행동을 같이 안내합니다.
- 재시도 버튼은 같은 위치에 일관되게 둡니다.
- 권한 거절 후 안내는 OS·브라우저별로 다르게 작성합니다.
온보딩 데이터로 개선 포인트 찾기
Wandcade는 사용자 식별 데이터를 모으지 않지만, 어느 단계에서 사용자가 가장 많이 이탈하는지는 익명 통계로 볼 수 있습니다. 초기 운영 동안 가장 큰 이탈 지점은 QR 스캔 직후 “권한 허용” 단계였습니다. 권한 다이얼로그가 뜨기 전 안내를 보강했더니 이 단계 통과율이 눈에 띄게 올라갔습니다.
온보딩 UX는 한 번 만들고 끝나는 것이 아니라, 실제 사용자 행동을 보고 계속 다듬는 영역입니다. 광고 심사뿐 아니라 사이트의 “첫인상”이 형성되는 자리이기 때문에 가장 자주 손보는 화면이기도 합니다.