우아한선물하기 초초초 클로즈 베타 개발이야기
안녕하세요. 라이브선물스쿼드에서 프론트엔드 개발하는 송요창입니다.
우아콘2021에서 발표했던 우아한선물하기 초초초 클로즈베타 개발 이야기 내용을 바탕으로 재구성하여 저희가 어떻게 일하는지 소개하려고 합니다.
첫 돌 지난 배민선물하기
우아한선물하기를 소개하려면 먼저 배민선물하기를 설명해야합니다. 자세한 소개는 강미경님의 배민선물하기 다시 만들기 발표를 보시면 더 자세히 아실 수 있습니다. 여기서는 간단히 소개하겠습니다.
배민선물하기는 작년(2020년 10월)에 선보인 서비스입니다. 첫 돌 지나고 걸음마하는 아이라고 볼 수 있습니다.
최초의 배민선물하기
처음 출시했을 때 배민선물하기는 선물과 편지를 함께 보내듯 받는 사람 1명 정보를 입력하도록 되어있었습니다. 많은 분들이 서비스 출시 후 한 번 결제로 여러명에게 선물하고 싶다고 하더군요.
지금은 이미 적용된 다중 선물하기라는 기능입니다.
// TODO: 최초 모습 왼쪽
계속 선물하기
많은 요청을 받을 때 이미 다중선물하기를 개발중이었지만, 중간 단계로 계속 선물하기 기능을 먼저 선보였습니다. 이 기능을 설명하기 앞서 한번도 배민선물하기를 사용해보지 못한 분들을 위해 선물을 선택해서 발송하는 부분을 먼저 소개하겠습니다.
선물 보낼 카드를 먼저 선택한 뒤,
가격을 선택해요.
1명의 받는 사람 정보를 입력하고 내용을 입력합니다.
여기서는 내용은 고치지 않을께요.
그리고 보낸 사람을 멍멍이로 변경한 뒤에 결제 후 선물 보내기 버튼을 눌러요.
결제 지면에서 원하는 결제 수단으로 결제하면 됩니다. 여기서는 배민페이머니를 이용해서 결제합니다.
그럼 비밀번호 입력하는 화면이 나와요.
앞선 단계를 모두 거치면 결제 완료 화면으로 진입하게 됩니다. 여기서 계속 선물하기 버튼을 누르면 편지를 쓰는 화면으로 보내줍니다. 이때 앞서 입력한 편지 내용과 상품을 그대로 유지해서 여러명에게 선물할 때 입력 시간을 줄일 수 있습니다. 코드 몇 줄 안고치고 해볼 수 있는 기능이었는데 결과는 좋았습니다.
// TODO: 개선 된 화면
다중 선물하기
계속 선물하기 배포 후 약 두 달 후 최대 10명의 받는 사람 정보를 입력할 수 있는 다중 선물하기 기능을 선보였습니다.
// TODO: 여러명의 받는 사람 정보가 나온 사진
받는 사람 10명으로 늘리는 단순한 작업인줄 알았는데 시작해보니 고칠 곳이 많아서 시간이 오래걸렸습니다. 계속 선물하기를 중간에 선보이길 잘했단 생각이 들더라고요.
다중 선물하기 이후의 세계
다중 선물하기가 배포된 후 우아한형제들 내부에서도 배민선물하기를 이용하는 사례가 많아졌습니다. 예를들면 피플실에서 이벤트 참가자에게 상품으로 선물하기를 보내기도 했고 조직장 분들이 조직 내부에 고마운 마음을 전할 때도 사용하시더라고요.
// TODO: 피플실 이미지, 조직장 이미지 추가
새로운 문제
이렇게 내부에서 사용하는 분들이 많아지자 새로운 문제가 생겼습니다. 피플실이 진행하는 이벤트는 매번 받는 사람이 달라지니까 배민선물하기 내에서 지원하는 간편 연락처 입력 기능(최근 연락처, 주소록)을 사용하지 못하고, 일일히 이름과 연락처를 입력해야했습니다.
말로만 들어서는 이게 얼마나 어려운 작업인지 느낄 수 없을테니 예시를 준비했습니다. 간단한 이름과 같은 휴대전화 번호를 반복해서 입력해봤습니다. 대략 1명당 9~10초 정도 시간이 소요됩니다.
Winter is Coming
이런 상황인데 올 6월 온라인 사내 행사 때 엄청 많은 사람에게 선물 보낼 일이 생겼습니다. 우아한형제들 전원이 참여하는 행사다보니 참가자가 많았어요. 전체에게 선물을 보낸다고하면 최악의 경우 1000명 이상 선물을 보내야합니다.
쉽게 생각할 수 있게 대상자가 100명이라고 해보죠. 빨라야 9~10초 걸리는 입력을 10명씩 10번 반복해야합니다. 그리고 이를 10번 반복해야 100명에게 보낼 수 있습니다.빨라도 입력에만 15~17분이 소요됩니다. 이름이 올바르게 입력되었는지, 휴대전화번호는 틀리지 않았는지 확인하며 입력하면 훨씬 오래 걸리겠죠.
Help!!!
이런 상황이다보니 피플실에서 연락이 왔어요.
// TODO: 요청 사진
이 내용을 팀장님을 통해 전해들었을 때 저희팀 업무가 가득찬 상태였습니다. 도와드리려고해도 개발 기간이 너무 없었어요.
그리고 생각해보면 불편하지만 기존 서비스로 처리할 수 있긴합니다.
여러분이 이런 상황이라면 어떻게 답하셨을지 궁금하네요.
우아한 인재상
3장의 사진은 저희 회사에서 엘리베이터를 타거나 계단오르 내릴 때 혹은 회의실, 카페를 갈 때 볼수 있는 문구입니다. 비전, 핵심가치, 인재상 등을 표현한 것입니다. 그중 우아한 인재상에는 배려와 협동이 있습니다. 말그대로 배려하고 협동하면서 성과를 만들어나가는 거죠.
이런 문화에 익숙해서든 뭔가에 홀렸든 저희팀은 안된다는 말대신 어떻게하면 도울 수 있을까 고민했습니다.
작업 범위 및 동작 방법 점검
백엔드 API는 다중 선물하기 작업 후라서 1번 결제에 100명까지도 선물을 보낼 수 있는 상태였습니다. 백엔드 개발은 필요없었습니다.
// TODO: 스프레드 시트
이름과 연락처를 쉽게 입력할 방법으로 떠오른건 엑셀이었습니다. 휴대전화와 모니터를 오가며 이름과 연락처를 올바로 입력했는지 확인하는 수고가 줄어들 수 있겠더라고요. 이미 익숙한 도구라서 별도의 교육도 필요없습니다.
// TODO: QR 코드
입력한 정보를 가지고 빠르게 선물을 보내려면 데스크탑 환경에서 결제까지 가능해야 했습니다. 그런데 배민선물하기는 배민앱을 떠나 결제할 수 있는 상태는 아니었습니다. 부득히 데스크탑에서 입력한 정보를 전달해서 결제해야만 하는거죠. 이때 떠오른게 QR코드 였습니다. 데스크탑에서 입력한 정보를 모두 담아서 QR코드를 만든 뒤 휴대전화로 촬영하면 정보를 그대로 전달할 수 있겠더라고요.
동작 흐름
살펴본 상황을 토대로 사용자 동작 흐름을 정의해 봤습니다. 사용자는 데스크탑 환경에서 선물과 가격을 고른 뒤, 이름과 연락처를 스프레트시트로 업로드하여 입력합니다. 정보 입력이 끝나면 QR코드를 통해 배민앱 내 결제 화면으로 진입하도록하여 결제 단계를 진행하도록 하는 겁니다.
작업 확정
결론적으로 데스크탑에서 선물을 고르고 이름과 연락처를 입력할 수 있는 웹 페이지를 만든 뒤, 기존 코드를 일부 수정해서 QR코드로 전달 받은 정보를 입력만 하면 되겠더라고요. 프론트엔드 프로그래머 한 명으로 개발 가능한 정도의 작업이었습니다.
// TODO: 쓰레드~
단계별로 설명하니까 많은 날짜를 고민한 듯하죠. 사실은 이 모든 단계가 앞서 보여드린 쓰레드 하나에서 모두 논의된 내용이에요. 참고로 저 쓰레드 안에 111개의 답변이 있어요.
우아한선물하기:프로토타입
개발 방향에 대해 논의한 뒤 우아한선물하기 프로토타입을 개발했습니다. 프로토타입을 만드는데는 얼마 안걸렸어요. 오전 10시에 논의한 내용을 오후 4시에 보여줄 수 있었습니다. 아주 단순한 형태지만 가능성은 확인할 수 있었습니다.
// TODO: 험블함 초기 모습
그렇지만 이 프로토타입에는 문제가 많습니다.
- 카드 선택은 카드 번호를 직접 입력해야함 👉 내부 구성원이라도 카드 번호 확인이 어려움
- 가격도 사용자가 직접 입력해함 👉 내부 구성원이라도 지원되는 가격 범위 확인이 어려움
- 이름과 전화번호 입력하는 부분도 10명으로 고정된 상태
이 프로토타입을 기준으로 개선해서 우아한선물하기 v0.0.1 버전을 배포했습니다.
배포도 잘되었고 행사도 잘 치뤘지만 이렇게만 마무리되진 않았어요.
// TODO: 타이슨 이미지
사용자 피드백
여러가지 피드백 중에서 주된 부분이 QR코드 스캔이 잘 안된다는 거였어요. 정환님 외에 저희 회사 CEO인 범준님 피드백에도 같은 얘기가 있습니다. 30명 한도라서 아쉽다는 얘기도 같이 있습니다.
// TODO: 피드백 사진
이를 바탕으로 2가지를 개선점을 확인했습니다.
- 낮은 QR코드 인식율을 개선
- 30명이란 아쉬운 한도를 100명까지 상향
낮은 QR코드 인식율 개선
우아한선물하기는 입력한 정보를 모두 URL에 담아서 QR코드를 생성합니다. 이렇게 생성된 QR코드는 평소에보던 QR코드와 다르게 엄청 자글자글하죠. 이러니 휴대전화 카메라로 찍을 때 인식이 잘 되지 않더라고요.
카메라를 앞으로 갔다 뒤로 갔다 이러면서 촛점을 맞추느라 애 먹었습니다.
// TODO: 자글자글 QR과 url 예시
그래서 데이터베이스를 이용하기로 했어요. 입력한 정보를 저장한 다음에 난수 ID를 생성했습니다. 배민 앱에서 이 난수 ID를 이용해 정보를 조회하는거죠.
// TODO: 개선 아이디어 이미지
난수 ID만 포함하니 URL이 대폭 짧아졌습니다. 짧은 주소로 QR코드 만드니 시원시원해졌죠? 자연히 인식율이 좋아지더라고요. 오른쪽에 있는 예전 QR코드와 비교하면 차이가 큽니다.
// TODO: before/after 이미지
낮은 QR코드 인식율을 개선하면서 데이터베이를 도입했더니 최대 100명까지 입력받는 문제도 간단히 해결되었습니다.
우아한선물하기는 아직 살아있나?
우아한선물하기가 이후에 얼마나 사용되고 있는지 살펴보겠습니다.
// TODO: 지표 사진
그래프의 Y축을 보면 체감이 확 오죠. 많이 쓰이지 않더라고요. 위로가 될만한 부분은 그래도 꾸준히 사용되고 있다는 점입니다. 데이터가 별로 없지만 구매건수와 결제금액을 배민앱에서 배민선물하기 사용자와 비교하면 구매건수는 9배, 결제금액은 6배가 높은 패턴이 확인되었습니다.
라이브선물스쿼드 PO인 강미경님이 “B2B 선물하기가 열렸을 때 기대하는 사업적인 임팩트를 내부 프로덕트을 통해 미리 가늠해볼 수 있었다” 고 하더군요. 피플팀 도와주려고 시작한 일인데 예상치못한 인사이트도 함께 얻을 수 있어 더 힘이 납니다.
배민 개발자 그리고 열린 TO
제가 경험한 이야기라서 라이브선물스쿼드만 이렇게 일하는게 아닐까? 의심하실 수 있는데요. 제가 1년 넘게 지켜본바로는 대부분 개발자는 업무를 하면서 안된다, 바쁘다는 말 대신 할 수 있는 방향을 함께 고민했습니다. 긍정적으로 피드백하는 모습을 볼 때마다 저 자신도 자극받고 감동받습니다. 이 자리를 빌어 도움을 주셨던 많은 분들께 감사 인사를 전합니다.
이런 분위기에서 함께 일해보고 싶으시다면 우아한형제들 채용 사이트 한번 살펴봐주세요.
감사합니다.
