[베스트케이스] QR코드 주문 도입 건

[2020년 현대홈쇼핑]

요즘 홈쇼핑 채널을 보면 방송화면 우측상단에 QR코드가 박혀있는걸 흔히 볼 수 있다. 나는 업계 최초로 QR코드 앱 인입부터 결제완료까지 진행되는 내부 프로세스 개발을 했다.

고객담당 현업 : 방송화면 우측상단의 QR코드를 찍으면 현대Hmall 앱이 실행되고, 방송상품 구매페이지로 이동되게 하고싶어요. 이 경로로 인입되면 할인쿠폰도 줄거에요!

코로나 때문에 QR코드에 관심이 많은 시기였는데 업계 최초로 방송쇼핑에 활용하다니 상당히 좋은 아이디어였다고 생각한다.

 

QR코드는 URL을 네모나게 바꾼거다. QR코드 변환 사이트에서 아무나 만들 수 있다.

https://ko.online-qrcode-generator.com/

 

요즘 폰은 카메라앱을 켜고 QR코드를 찍으면 바로 모바일 브라우저로 보내버린다. 구형폰은 카메라앱이 QR코드를 지원을 하지 않아 따로 인식하는 앱을 써야해서 번거로울 수도 있다.

아무튼 결국에 이건 딥링크다. 앱과 웹을 모두 개발하는 나에게는 2가지 옵션이 있었다.

 

① 디퍼드딥링크를 제공하는 Firebase로 붙게 하는 것

 

- 앱 링크 광고에서 Firebase Dynamic Links(디퍼드 딥링크)를 쓰는 경우를 꽤 많이봤다. 고객 입장에서 앱으로의 전환이 자연스러운 느낌이 있다.

 

가운데 저 흰색 로딩바 뜨는 딥링크는 Firebase Dynamic Links 라고 보면 된다

- Firebase의 딥링크를 쓰려다가 트래픽이 몰리면 비용문제도 있고 골치 아파진다. 게다가 접속이 느려지면 매출 손해는 누가책임지나?

② gate페이지로 웹/앱 분기쳐주기

- 현대Hmall 앱에 스키마 호출을 통한 딥링크는 이미 개발되어 있었다. QR코드를 찍었을 때 gate페이지로 들어오게 하고, 스크립트로 스키마 호출을 해서 딥링크로 사용하면 된다.

<!-- WebviewActivity는 외부에서 인텐트 hmallapp으로 시작하는 패턴으로 호출 할 수 있다 --> 
<activity
	android:name=".WebviewActivity">
    <intent-filter>
        <data
            android:path="m"
            android:pathPattern=".*\do"
            android:scheme="hmallapp" />
    </intent-filter>
</activity>

브라우저에서 사용할 수 있는 앱 스키마 호출 패턴은 아래와 같다.

location.href = "hmallapp://m/item.do?itemCode=0001";

 

gate 페이지는 1~2초 가량 의도적으로 머무르는 웹 페이지라고 보면 된다. 여기서 앱 설치유무를 판단하고 모바일 웹으로 보여주거나 앱이 실행되면서 원하는 페이지(액티비티 또는 웹뷰주소)로 이동되게 할 수 있다. 타 사에서는 이걸 허브URL이라고도 부른다.

 

QR코드용 URL은 다음과 같이 만들 수 있다.
(예시) https://www.hmall.com/gate.do?route=QR1&link=/m/item.do?itemCode=0001

이렇게 브라우저로 인입 시, gate 페이지에서는 파라미터 값이 QR1으로 들어온걸 인식하고, 그 이후 스크립트 분기처리를 통해 link 값인 /m/item.do?itemCode=0001 페이지, 즉 0001 상품 구매 페이지로 이동시킬 수 있다.

var route = "QR1";
var link = "/m/item.do?itemCode=0001";
var clickedAt = new Date;

appCheckTimer = setTimeout(function() { 
   if(new Date - clickedAt < 1000){
       if(route == "QR1"){
           location.href = "www.hmall.com" + link;
       } else if(route == "install"){
           if(navigator.userAgent.indexOf("iPhone") > -1 || navigator.userAgent.indexOf("iPad") > -1){
           	location.href = "http://itunes.apple.com/app/id870397981?mt=8";
           } else{
          	location.href = "market://details?id=com.hmallapp";
           }
       }
   } 
}, 500);

location.href = "hmallapp:/ + link.replace(/&amp;/gi, "&");

iOS, 안드로이드 앱 설치 유무에 따른 스크립트 처리

hmallapp 스키마를 호출했는데 아무런 반응이 없다면 앱이 설치되지 않은 것으로 간주한다. 0.5초 후에 의도된 페이지로 이동시키거나 폰 기종에 따라 스토어로 이동 시킬 수 있다.

 

나는 방법②를 택했다. 기존 웹서버랑 WAS를 쓸 수 있기 때문에. 중요한건 QR코드는 URL이 길면 길 수록 조잡하고 네모가 깨알같아진다는 것이다. QR코드는 복잡하면 안된다. 왜냐? 홈쇼핑 방송은 주 타겟연령이 40~60대인데, 보통 구형 핸드폰을 써서 카메라 화질이 구린 경우가 있기 때문이다.

 

예시로 만든 저 QR코드는 단순한 편이지만, 서비스를 하다보면 파라미터가 많이 붙어서 URL이 길어질 수 있다. 웬만하면 길게 하지 않는것을 권장하며, 자체적으로 구축한 단축URL이 있다면 활용하도록 하자. 쿠폰발행이나 주문같은 경우에는 인입 시 경로에 따라 쿠키값을 설정해서 내부로직을 잘 태우게 했다.

그 해 QR코드 주문 도입 건으로 현업은 현대홈쇼핑 사장님 포상을 받았다. 그리고 어느날 부터인가 TV를 켜보니 GS, 롯데, CJ홈쇼핑에서 따라하고 있는 것을 보면서 내심 뿌듯했다.