A. 쿠키cookies와 리버스 프록시 서버Reverse proxy server를 활용해서 구현할 수 있습니다.
개발자를 위한 튜토리얼로 문제에 대한 접근법과 만났던 이슈를 기록해 뒀습니다.
각 쇼핑몰마다 디자인도 다 다르고 코드도 다 다를 수 있어서요.
포스트백(Postback)이란?
매체사한테 광고주가 수집된 데이터를 전달하는 것을 포스트백이라고 합니다.
아프리카TV의 포스트백 구현 요청을 받게 되어서 저도 알게 되었네요.
매체사는 아프리카TV가 되고요. 광고주는 광고 해달라고 요청한 회사가 됩니다.
포스트백 사례
제가 mymall.co.kr 이란 쇼핑몰을 adtv란 회사에 광고를 의뢰한 경우를 생각해 봅시다.
adtv의 라이브방송을 통해서 구매가 발생할 경우에 전 구매 금액의 10%를 수수료로 주기로 계약을 맺었습니다.
1. adtv는 생방송에 쇼핑몰 이미지를 달아 줍니다. 해당 이미지 링크에는 http://mymall.co.kr?adtv=123456 처럼 파라미터 정보가 끝에 달려 있게 됩니다. adtv=123456의 123456은 해당 영상을 시청하고 있는 사용자의 id입니다.
2. 사용자가 링크를 클릭합니다. 제 쇼핑몰로 들어오게 됩니다. 이때 adtv=123456 정보도 같이 옵니다.
3. 쇼핑몰에서 사용자가 물건을 구매합니다. 구매를 완료합니다.
3번에서 끝나면 adtv는 adtv를 통해서 어떤 사용자가 얼마나 몇명이 물건을 구매했는지 알 방법이 없습니다. 그래서 포스트백이 필요합니다.
4. 구매한 주문번호와 사용자 id, 구매 금액 정보를 adtv.com 으로 전송합니다.
5. 주문을 취소할 경우에도 구매 때와 마찬가지로 주문번호와 사용자 id, 취소 금액 정보를 adtv.com 으로 전송합니다.
바로 4번과 5번 과정이 포스트백입니다.
6. 총 100건의 주문이 발생했고, 총 구매금액은 200만원으로 집계가 되었습니다.
7. 200만원의 10%인 20만원을 adtv사한테 지급합니다.
포스트백 구현
1. adtv에서 추가해 준 정보를 계속 붙어 다니게 하기
2. 구매 완료 시점에 주문번호, 구매 금액 정보를 얻어서 adtv에 정보 발송하기
3. 구매 취소 시 주문번호와 취소 금액 정보를 얻어서 adtv에 정보 발송하기
위 3가지만 하면 된다고 생각했습니다. 그리 어렵지 않겠다고 판단했죠. 모든 일이 그렇지만 그리 간단하지는 않았습니다. 계속 이슈가 발생했죠.
구현하다 마주친 이슈
1번 관련 이슈
1-A. 처음에 1번을 구현할 때 그냥 document.referrer을 통해서 전 페이지의 주소를 얻어서 adtv=123456을 추출하고 다시 현재 페이지에 붙여 주는 식으로 자바스크립트로 구현했습니다. 고도몰의 경우 구매 완료 직전에 php 서버측에서 바로 리디렉션이 발생하여 자바스크립트가 실행이 안 되더군요. 그래서 adtv=123456이 사라져 버렸습니다.
1-B. 1-A 이슈를 해결하기 위해서 쿠키를 활용했습니다. 전 페이지에 adtv=123456이란 정보가 있다면 쿠키에 저장하고, 해당 정보가 없다면 저장했던 정보를 불러와서 붙였습니다.
2번 관련 이슈
2-A. 웹에서 바로 자바스크립트로 전송했더니 CORS 이슈가 발생했습니다.
아래와 같은 에러가 발생합니다.
Access to XMLHttpRequest at 'https://adtv.com/app/api/postback' from origin 'http://mymall.co.kr' has been blocked by CORS policy
내용은 저희 쇼핑몰에서 보낸 메시지는 차단되었다는 거죠. 그래서 광고사한테 요청했습니다. 쇼핑몰 도메인 좀 추가해 달라고. 할 수 없다고 하네요. 서버 대 서버로 메시지를 보내라고 답변이 왔습니다.
2-B. 2-A 이슈를 해결하기 위해서는 서버 구현이 필요하게 되었죠. 조사를 해보니 이런 경우를 위한 리버스 프록시 서버가 있었습니다. 다행히 누군가 CORS-Anywhere 란 코드를 올려 놓은 저장소를 찾았습니다. 간단히 서버 만드는 예제도 찾았죠. 그래서 heroku로 바로 만들어서 해결했습니다.
https://mymall-cors-anywhere.herokuapp.com/https://adtv.com/app/api/postback?adtv=123456&orderNo=202202231122001&type=purchase&sum=20000
위처럼 heroku로 만든 앱 주소에 매체사 주소를 입력하고 여러 파라미터를 붙여서 날리면 CORS 차단 없이 전송이 됩니다.
3번 관련 이슈
3-A. 취소할 경우에는 한 주문번호에 각 물품별로 금액이 적혀 있고, 합계 금액은 없었습니다. 주문번호를 기준으로 물품별 합계를 따로 구해야 했습니다. 이게 좀 번거로웠습니다. 각 목록에 orderNo와 orderPrice란 클래스를 추가해서 취소하려던 주문번호orderNo와 동일한 경우 orderPrice를 합산하는 식으로 구현했습니다.
실제 구현 과정
1. 공통 함수 구현
setCookie, getCookie, appendParameter, purchase, cancelOrder 함수를 구현했습니다. 함수명 뒤에다가 forAdtv를 붙여서 다른 js 파일의 함수와 겹치지 않도록 처리했죠. 이 함수를 js 파일로 담아서 고도몰에 업로드했습니다.
appendParameter는 기본 실행했습니다. 그래야 계속 파라미터가 붙어 다니게 되니까요.
2. 고도몰 디자인 메뉴에서 구매 완료 페이지 수정
구매 완료 페이지가 따로 있더군요. 구매 완료 페이지가 모드 로드되어야 합계 금액 등을 얻을 수 있어서, 페이지 맨 하단에 purchase 함수를 실행하도록 했습니다.
3. 취소 페이지 수정
취소 시에는 코드를 보니 팝업이 뜨더군요. 해당 팝업 띄우는 코드에서 취소 버튼 클릭 시 cancelOrder 함수를 실행하도록 구현했습니다.
추가 이슈
1. js파일에서 signature 서명값 구현 방식 숨기기
매체사로부터 js 파일은 포스트백 signature 서명값 구현 방식이 노출되므로 숨겨달라는 요청이 왔습니다. 그래서 서버를 구현하게 되었습니다. 서버를 간단히 flask로 개발해서 구글 app engine에 배포했습니다. https가 지원되고 배포도 간단하기 때문이었습니다.
2. 데스크탑과 모바일 디자인의 구분
당연히 반응형인줄 알고 데스크탑 위주로 테스트를 진행했습니다. 나중에야 모바일을 위한 디자인이 따로 있다는 것을 알게 되었고, 부랴부랴 구매시 취소 시 포스트백을 구현해야 했습니다.
3. 환불 구현 필요
고도몰의 경우, 신용카드 결제, 가상계좌 결제 등 결제 방식이 다양했습니다. 가상계좌의 경우에는 취소 시 팝업이 뜨지만, 신용카드 결제한 경우에는 환불 신청 화면이 따로 있었습니다. 환불 신청 완료 화면이 없고 고도몰 내부 서버 코드는 건들 수 없는 상황이라 구현에 어려움이 있었습니다.
교훈
내부 서버 코드를 볼 수 없고, 어떻게 구현한지 알 수 없는 고도몰 같은 경우 구현상, 테스트상 어려움이 많았습니다.
또 타사(매체사)와 용어 혼용 등 의사소통 문제로 어려움이 많았습니다. 취소라고 얘기해서 당연히 취소만 생각하고 있었는데 매체사 입장에서 취소는 고도몰 상에서 환불을 포함한 것이란 것을 나중에 알게 되었습니다.
사용자가 구매 및 취소할 수 있는 다양한 경로에 대해서 미리 정리하고, 해당 모든 가능성에 대해서 미리 충분히 테스트를 해야 합니다. 실제 제 경우 계속 생각하지 못한 이슈가 터져서 구매 구현은 완료했지만, 취소/환불은 당일 이슈를 발견해서 시간내 구현하지 못했습니다.