아카이브사이트맵
© 2026 Rayon. All rights reserved.
DevDay
아티클랭킹스페이스채용
우아한형제들 favicon우아한형제들

카톡 선물, 이제 배민에서 바로 쓰세요!

by DD
2025-12-26
6개월 전
조회수 81

카카오톡 교환권을 배달의민족 앱에서 사용하도록 연동

고객 불편 해소 및 플랫폼 확장을 목표로 프로젝트 시작

바코드 인식 기술 도입, UX 개선 시도

다자간 협업 과정에서 소통의 중요성 강조

이진화 로직 변경을 통해 바코드 인식률 향상

고객 경험 개선을 위한 UX 최적화

카카오톡 교환권의 바코드 이미지 인식을 통해 사용성을 극대화했다.

zxing.js: 오픈소스 바코드 디코딩 라이브러리를 활용하여 이미지에서 바코드 번호 추출

문제점: ‘내 앨범에 저장’된 이미지의 노란색 테두리로 인해 인식 실패

해결: 이진화 로직 변경을 통해 노란색 테두리 문제 해결 및 인식률 향상

결과적으로, 수동 입력의 번거로움을 줄여 고객 만족도를 높였다.

바코드 인식 기술의 원리

zxing.js를 활용한 바코드 인식 과정은 다음과 같다.

이미지 로딩: 이미지를 Canvas에 렌더링하여 픽셀 데이터 추출

그레이스케일 변환: RGBA 값을 밝기값으로 변환

이진화: HybridBinarizer를 사용하여 흑백 이미지 생성

디코딩: OneDReader로 바코드 패턴 분석 및 텍스트 추출

문제 분석: HybridBinarizer의 임계값 설정 문제로 인해 인식 오류 발생

결론적으로, 이진화 방식의 개선을 통해 다양한 환경에서 바코드 인식률을 높였다.

이진화 방식 개선의 기술적 배경

바코드 이미지의 특성에 따라 최적의 이진화 방식이 다르다는 점을 파악했다.

HybridBinarizer: 블록 단위 임계값 계산 방식, 일반 이미지에 적합

중앙값 이진화: 단순 중간값 사용, 얇은 막대 바코드에 유리

개선: 두 가지 방식 모두 시도하여 인식률 극대화

결과: 다양한 바코드 형태에 유연하게 대응 가능

결과적으로, 상황에 맞는 이진화 방식 선택을 통해 인식 오류를 최소화했다.

다자간 협업을 위한 소통 전략

카카오, 쿠폰사, 배민 내부 팀 간의 원활한 소통을 위해 노력했다.

명확한 목표 공유: '플랫폼 간 연결'이라는 본질을 지속적으로 상기

맞춤형 소통: 각 팀의 관심사와 언어에 맞춰 소통 방식 변경

PM의 역할: 기술팀과 비즈니스팀 사이의 가교 역할 수행

문서화: API 명세, 회의록 등 모든 합의 사항을 문서로 기록

결론적으로, 투명한 정보 공유를 통해 오해를 줄이고 효율적인 협업을 이끌었다.

프로젝트 본질 정의의 중요성

프로젝트의 본질을 명확히 정의하고 공유하는 것이 중요했다.

문제 정의: 고객 불편함 해소 및 비즈니스 목표 달성

비즈니스 목표: 신규 고객 유입, 주문 경험 통합

본질: 플랫폼 간 장벽을 넘어선 연결

의사 결정: 본질에 부합하는지 지속적으로 자문

결과적으로, 명확한 비전은 복잡한 논의를 단순화하고 팀을 하나로 묶는 원동력이 되었다.

UX 개선을 위한 인앱 프로모션 전략

새로운 기능에 대한 고객의 이해를 돕기 위해 인앱 프로모션을 기획했다.

목표: 새로운 기능을 쉽고 빠르게 인지

전략: 세 가지 화면으로 단순화

핵심 메시지: '익숙한 교환권, 배민에서 바로 사용'

결과: 고객의 이해도를 높이고 서비스 수용도를 향상시켰다.

결론적으로, 고객 중심의 메시지 전달을 통해 새로운 기능에 대한 거부감을 줄였다.

끊김 없는 사용 경험을 위하여 : 카카오톡 선물함 속 교환권을 배달의민족 주문으로 연결한 여정
중급
아키텍처
JavaScript
ZXing.js
Frontend
원문 읽기
원문 읽기

댓글 0

첫 번째 댓글을 남겨보세요!

관련 추천 글

자바스크립트(JavaScript)를 바꾼 숨겨진 영웅, 제레미 애쉬케너스(Jeremy Ashkenas)를 만나보세요!

파이어쉽 로고

12,000+ 스타 JavaScript 라이브러리 toastr-next v3, 부활!

데브투 로고

ClojureScript, async/await 지원으로 JavaScript 생태계와 더 가까워지다!

해커뉴스 로고

자바스크립트(JavaScript)로 구현한 파라메트릭 CAD, FluidCAD

해커뉴스 로고

자바스크립트(JavaScript) 의존성 팽창, 왜 일어날까?

해커뉴스 로고

자바스크립트(JavaScript) 의존성 붓기(Bloat), 왜 생기는 걸까?

랍스타즈 로고
우아한형제들 favicon우아한형제들
중급
아키텍처
JavaScript
ZXing.js
Frontend

관련 추천 글

자바스크립트(JavaScript)를 바꾼 숨겨진 영웅, 제레미 애쉬케너스(Jeremy Ashkenas)를 만나보세요!

파이어쉽 로고

12,000+ 스타 JavaScript 라이브러리 toastr-next v3, 부활!

데브투 로고

ClojureScript, async/await 지원으로 JavaScript 생태계와 더 가까워지다!

해커뉴스 로고