QR코드로 사용자를 모바일로 전환시키기 - A to Z
오프라인/데스크톱->모바일로 사용자를 전환시킬 때 QR코드를 사용해보세요
(제가 운영 중인 "위클리 UX/UI 분석 챌린지" 스터디 참여를 위해 작성한 글입니다)
(매주 UX/UI분석, 아티클공유, 북리뷰 등 활동을 바탕으로 멤버 분들이 함께 성장하고 있습니다)
https://holix.com/ch/bVaKQMNB (합류해보세요! 초대합니다)
글은 아래 순서로 전개됩니다.
1. QR 코드 , 왜 필요한가요?
2. QR코드 사용 예시 - 배민 오프라인 광고판 / 홀릭스의 앱설치 유도 페이지
3. QR코드 만드는 법 - QR Monkey 소개
4. 요구사항에 따른 적용방법 (단순히 이미지만 넣으면 되는지, 개발이 필요한지.. Firebase dynamic link를 활용하여 개발한 홀릭스 사례 소개 등..)
5. 기타 가이드 / 참고문서 (딥링크 참고문서 / 구글 공식가이드 / 다이나믹링크,유니버셜 링크 등 용어 설명)
<QR코드, 왜 필요한가요? >
Q. 오프라인 광고 (버스, 지하철, 포스터, 엘리베이터 등..) / 데스크톱 웹 사이트를 보고 있는 사람들을 내 앱 / 모바일 웹 페이지로 전환시키고 싶으신가요?
A. QR코드를 사용해보세요!
Before) QR코드가 없이 고객을 모바일로 전환시키려면 ?
- 우리 앱 이름은 홀릭스에요! HOLIX에요! 그리고 저희 앱이 있으니 앱을 설치해주세요! 플레이스토어 /앱스토어에서 모두 제공되고 있으니 "HOLIX 또는 홀릭스"를 검색해서 설치해보세요! 처럼 많은 설명을 해야할 지 모릅니다. 물론 오프라인 공간 / 데스크톱 페이지에서 충분한 설득이 이뤄졌다면 직접 검색해서 설치하는 사용자도 있겠지만 사용자 입장에서 이는 굉장히 번거로운 일입니다.
After) QR 코드와 함께라면?
- 광고 지면에 QR코드가 삽입된 이미지/동영상을 넣거나, 데스크톱 사이트에서 QR코드가 포함된 페이지를 개발하면 사용자가 카메라를 통해 QR코드만 스캔하면 우리 앱 / 모바일 웹 페이지로 이동할 수 있습니다.
- 필요한 설명도 상대적으로 적어지고, 사용자 입장에서도 훨씬 액션이 간단하기 때문에 모바일 전환율을 높일 수 있습니다.
<QR 코드 사용 예시>
1. 오프라인- 배민 지하철 프로모션
배민 지하철 프로모션 이미지- 설명
배달의 민족에서 만든 지하철 광고 이미지입니다. 지하철을 기다리다가 인상깊어서 사진으로 남겨두었습니다. 이처럼 오프라인 공간의 광고용 이미지 /동영상에 QR 코드를 넣으면 사람들이 스캔하여 앱 / 모바일 웹 페이지로 이동하게끔 유도할 수 있습니다.
- QR코드를 스캔하면 어떻게 되는지
QR 코드를 스캔하면 앱 내 프로모션 페이지로 이동을 했고 각각 코드 별로 당첨금액 (5000,10000,꽝) 이 달라서 일일이 스캔해서 당첨결과를 확인했습니다. 뽑기 / 게임 요소를 잘 활용해서 QR코드를 스캔하도록 잘 유도했다고 생각합니다.
2. 데스크톱 웹 페이지 - 홀릭스 앱 설치 유도 페이지
홀릭스 앱 설치 유도 페이지 (QR코드를 스캔해보세요)설명
-위 사진은 홀릭스의 앱 설치 유도 페이지(https://holix.com/app-install)의 UI를 캡쳐한 모습입니다. 설치를 유도하는 문구와 함께, QR코드가 이미지로 삽입되어 있습니다.
목적
- URL에서도 알 수 있듯 APP-INSTALL, 앱 설치를 유도하기 위함입니다. 데스크탑을 통해 홀릭스를 알게된/ 데스크탑에서 홀릭스를 이용하고 있는 사용자들을 앱으로 이동시키기 위함입니다.
- QR코드를 스캔하면 어떻게 되는지
QR코드를 스캔했을 모바일 웹 페이지가 아니라 앱스토어 혹은 앱 내 홈화면으로 이동합니다. 특정 모바일 웹 페이지의 주소가 아니라 앱 내 페이지로 이동시키거나.. 앱 설치 여부에 따라 앱스토어 혹은 앱 내 화면으로 이동시키는 것을 구현하는 방법은 아래에서 다루겠습니다 :) 구체적인 동작방식은 아래와 같습니다.
1) 앱 설치 사용자
- 앱 내 홈화면으로 이동합니다.
2) 앱 미설치 사용자
- QR코드를 스캔한 휴대폰의 운영체제를 판별해서, 안드로이드 사용자는 플레이스토어 내 홀릭스 설치 페이지로 이동하고 IOS사용자는 앱스토어 내 홀릭스 설치 페이지로 이동합니다.
<어떻게 QR코드를 통해 사용자를 앱 / 모바일 웹으로 이동시키나요? QR코드는 어떻게 만드나요? 개발자의 도움이 필요 없나요?>
1. 기본 원리) QR코드를 스캔했을 때 사람들을 원하는 URL(주소)로 보낼 수 있다.
qr코드는 2차원 매트릭스 형태로 이뤄진 정보표기방법으로 Quic response code를 qr코드라고 부릅니다.. 등과 같은 내용이 궁금하다면 나무위키를.!
예를들어 내가 https://holix.com 으로 이동시키고 싶다? 이 URL 정보가 담긴 QR코드를 만들면 됩니다.
2. QR코드 만드는 법 - EX) QR Monkey
qr코드를 무료로 생성해주는 다양한 사이트가 있지만 제가 자주 사용하는 QR Monkey라는 서비스를 예시로 가져오겠습니다.
https://www.qrcode-monkey.com/
아래 사진처럼 QR Monkey 사이트는 다양한 커스터마이징 옵션까지 제공합니다.
1) Enter content 부분에 qr코드를 스캔했을 때 이동하게 될 페이지의 url을 입력
2) 기타 커스터마이징 (color, 가운데 로고를 넣고 싶을 경우 파일 삽입, qr코드 디자인을 특이하게 하고 싶다면 커스텀 가능)
1번, URL 입력만 해도 간단하게 QR코드를 생성할 수 있습니다.
3. 이걸 어떻게 우리 회사에 적용할 수 있나요? 개발자 분들의 도움이 필요없나요?
1) [기본] - 단순히 특정 웹페이지로 사용자를 유도하고 싶은 경우
단순히 URL을 기반으로 특정 페이지로 사용자를 유도하고 싶다면 원하는 URL 정보를 담아 QR코드를 생성하고, 디자이너 분에게 이 QR코드 이미지를 사용해주세요! 라고 요청만 해주시면 됩니다.
2) [심화] ~한 경우 ~로 이동과 같이 조건에 따라 동작을 다르게 만들고 싶다면
- 이때는 개발자분들의 도움이 필요할 수 있습니다. 우선 사용할 URL을 정한뒤에 개발자 분들에게 어떤 경우 어떻게 동작할 지 요구사항을 전달해야하며, 요구사항을 바탕으로 개발이 필요합니다. 홀릭스의 경우 Google Firebase의 Dynamic Link를 활용하였습니다.
EX) 홀릭스
- 요구사항 : 이미 앱을 설치한 사용자는 qr코드를 스캔하면 앱 내 홈화면으로 이동합니다. 미설치 사용자의 경우 안드로이드 사용자는 플레이스토어 내 홀릭스 설치페이지로, ios 사용자는 앱스토어 내 홀릭스 설치페이지로 이동해야 합니다.
- 구현방법 : Google Firebase의 Dynamic Link를 활용했습니다. 아래처럼 설정한 ttps://holix.page.link/app 이라는 Dynamic link를 생성한 뒤에, QR코드에 이 https://holix.page.link/app url을 담아 QR코드를 생성했습니다. 그리고 설정과정에서 기입한 딥링크는 앱에서도 대응이 필요합니다. (코드 개발 필요).
<기타 가이드 / 참고 문서>
1. 딥링크가 뭔지 /개발은 어떻게 하는지에 대해선 이 문서를 참고해보시면 좋을 것 같습니다
- https://www.airbridge.io/blog-ko/deeplink-101-for-marketers-and-developers
2. Google Firebase Dynamic Link에 대한 설명은 공식 가이드 문서를 참고해보세요
- https://firebase.google.com/docs/dynamic-links?authuser=0&hl=ko
3. 딥링크, 다이나믹 링크, 유니버셜 링크 등.. 용어들이 헷갈리신다면 요 문서의 설명을 참고해보세요
https://juneyr.dev/universal-link
