카카오톡 선물함의 브랜드 교환권을 배달의민족 앱에서 바로 쓸 수 있게 연동한 프로젝트다. 카카오·F&B 브랜드사·쿠폰 연동사·배민 내부 팀이 얽힌 다자간 협업의 진행 방식과, zxing.js가 특정 바코드 이미지를 못 읽던 문제를 이진화 단계까지 파고들어 해결한 과정을 함께 다룬다.
핵심 포인트- 카카오톡 '내 앨범에 저장'으로 받은 이미지의 노란 테두리 때문에 바코드 인식이 실패했다. 원인은 HybridBinarizer의 블록 단위 임곗값 계산이었다.
- 임곗값을 128 고정으로 바꿔 노란 테두리는 해결했지만, 이번엔 얇은 막대가 많은 바코드가 인식되지 않았다.
- 최종적으로 중앙값 이진화를 먼저 시도하고 실패하면 HybridBinarizer로 재시도하는 듀얼 방식을 택했다. 디코딩이 빨라 두 번 시도해도 체감 성능 영향이 없었다.
- 조직마다 KPI가 달라(카카오는 안정성, 쿠폰사는 정산 명확성, 배민은 고객 경험) "고객 경험 개선"이라는 본질로 되돌아가 부수 요구사항을 잘라냈다.
- 프로모션 쿠폰 1만 개가 예상 14일이 아닌 9일 만에 소진됐고, 카카오톡에서 랜딩한 고객의 90% 이상이 재방문했다.
상세 정리- 문제 정의: 카카오톡으로 받은 교환권을 쓰려면 브랜드 자사 앱을 설치하거나 매장을 직접 찾아야 했다. 플랫폼 경계에 머물던 수요를 배민 앱 안으로 들이는 것이 목표였다.
- 본질 합의: "플랫폼 간 장벽을 넘어 끊김 없는 연결을 제공한다"를 팀 전체가 먼저 합의해두고, 의사결정이 충돌할 때마다 이 기준으로 되돌아갔다.
- 협업 원칙 ①: 각 사의 KPI가 다르므로 공통의 '왜'를 반복해 상기시키고, 핵심이 아닌 요구사항은 과감히 제외했다.
- 협업 원칙 ②: 백엔드 개발자에게는 API 응답 속도로, 비즈니스팀에는 정산 프로세스로 같은 사안을 상대의 언어로 바꿔 설명했다.
- 협업 원칙 ③·④: 조율자를 넘어 우선순위를 정하고 대안을 내는 주도적 역할을 맡았고, API 명세부터 정책 회의록까지 합의를 문서로 남겨 정보 비대칭과 재확인 비용을 줄였다.
- 바코드 라이브러리 선택: Google 오픈소스 디코더를 자바스크립트로 포팅한 zxing.js를 썼다.
- 1차 장애 발견: 화면 캡처 이미지로만 테스트한 탓에, 카카오톡에서 저장한 노란 테두리 이미지가 인식되지 않는 케이스를 배포 전까지 놓쳤다.
- 1차 근본 원인: HybridBinarizer는 8×8 블록 단위로 임곗값을 계산하는데, RGB(255,222,33)의 밝은 노란색이 블록 평균 밝기를 끌어올렸다. 임곗값이 함께 올라가면서 막대 가장자리의 회색 픽셀이 흰색으로 넘어가 막대가 얇아지고 흑백 비율이 왜곡됐다.
- 1차 해결: 블록별 계산 대신 임곗값을 128로 고정한 중앙값 이진화로 바꿔 해당 케이스를 통과시켰다.
- 2차 장애: 배포 전 추가 테스트에서 흰 영역 비율이 높은 바코드가 이번엔 중앙값 이진화로 인식되지 않았다. 얇은 막대가 과도하게 얇아져 흑백 비율 정보가 손실된 것이다.
- 2차 해결: 다양한 환경을 전제로 설계된 HybridBinarizer는 이 바코드를 읽을 수 있었으므로, 두 방식을 순차로 시도하는 듀얼 이진화를 택했다.
- 디버깅에서 얻은 것: 1차 때 임시방편 대신 이진화 단계까지 원인을 파고든 덕분에 2차 문제의 성격을 즉시 파악할 수 있었다는 회고다.
- 고객 메시지: 기능 설명 대신 "카톡에서 받은 선물, 배민앱에서 주문 가능"처럼 이미 가진 것을 활용한다는 이점을 앞세웠고, 플로우를 선물함·등록·주문 적용 세 지면으로 압축했다.
- 프로모션 결과: 카카오페이 쿠폰으로 등록에 그치지 않고 실제 주문까지 유도했다. 5천 원 쿠폰 1만 개가 9일 만에 소진됐고 랜딩 고객 재방문율은 90%를 넘었다.
- 남은 과제와 이후: 유의사항 안내 문구가 길다는 피드백이 있었고, 오픈 후 2개월 VOC에서 가장 큰 요구는 브랜드 확대였다. 11~12월에 상품군과 교환권 유형을 늘리고 6개 브랜드의 잔액권을 추가했다.
우아한형제들·
Vercel Blog·
LINE Engineering·