<div id="readability-page-1" class="page"><div><div><h2 id="bf4c" data-testid="storyTitle">배민우리동네 서비스 런칭기</h2><div><a rel="noopener follow" href="/@totuworld?source=post_page-----340499534559--------------------------------"><div aria-hidden="false"><p><img alt="송요창" src="https://miro.medium.com/v2/resize:fill:88:88/1*nAMOvHeZTqTZjdz33jQ2Ag.jpeg" width="44" height="44" loading="lazy" data-testid="authorPhoto"></p></div></a></div></div><p id="2d38">야놀자에서 레저 카테고리를 오픈했고, 우아한형제들에서 브랜드관 개편, 사전예약 오픈, 배민선물하기 개편을 지나 올 해 8월 1일 배민우리동네 서비스를 오픈했다.</p><blockquote><p id="08c2">송파구에만 오픈한 서비스로 대부분의 사용자는 이런 서비스가 있는지도 모른다.</p></blockquote><figure></figure><h2 id="1d37">올 해 만들어진 목적 조직</h2><p id="1977">배민우리동네팀은 올 해 만들어졌다. PM, BO, BE, FE가 모두 한 팀에 있는 조직 구성인데 한 분도 함께 일해 본적 없는 분들과 팀을 이뤄서 올 해 새로운 회사에 다니는 기분도 조금 들었다. 만나서 이야기도 나누고 밥도 먹고 하다보니 지금은 많이 편해졌다.</p><p id="c55b">발령이 나고 한 동안 정신없이 시간이 지났다. 만들어야하는 제품에 대한 논의가 다각도로 진행되고 상위 의사결정권자들과 의견을 교환하며 지내다보니 언제 5월이 되었나 했다.</p><blockquote><p id="f8b8">이 안에 많은 일들이 있었지만 이건 팀에서 회고하기로 하고 이 글에서는 자세히 다루지 않겠다.</p></blockquote><p id="6a40">아무튼 좋은 사람들이 많은 조직이라 그런지 우리 팀에도 일 잘하는 좋은 사람들이 많다. 나만 잘하면 되는 조직에 속하는건 언제나 즐거운 일이다.</p><h2 id="b359">초기 제품 제작</h2><figure><figcaption>4개 페이지를 만드는 일이 이렇게 어려웠다니</figcaption></figure><p id="0283">초기 제품에 어떤 기능이 들어갈지 정하고, 디자인팀에서 본격적으로 작업이 시작되면서 야근비로 통장이 두둑해지기 시작했다. 가이드도 나오지 않은 디자인가지고 우선 돌아가게 만들어보고 싶어서 달리고 또 달렸다. 일정이 안나와서 중간에 어드민도 병렬로 진행했는데, 급하게 진행한게 아쉽다. 일정당기려고 달리다보니 기획을 놓쳐서 중간에 기능 하나를 드러내야했고, 후반에 QA 이슈도 엄청나게 생산했다.</p><blockquote><p id="5231">백엔드 QA 티켓보다 프론트 QA 티켓이 압도적으로 많았다.</p></blockquote><p id="239c">그렇지만 잘했다. 처음 손발을 맞춰보는 팀이 첫 제품을 만들기까지 제작기간은 총 2개월 정도밖에 안된다. 이 기간안에 API 다 뽑고, 운영에 필요한 어드민 만들고, 고객향 서비스 지면까지 만들었다. 솔직히 1개월 정도 지났을 때 제품 배포 일정을 1달은 더 늦출줄 알았다. 그런데 이 폭주기관차는 멈춤을 몰랐다.</p><h2 id="37d5">PM, BO 맹활약</h2><p id="2fcc">서비스 지면이랑 어드민 만든다고 정신없는 와중에 PM, BO 맹활약이 대단했다. 각종 기능에 관해 여러 팀과 논의를 진행하고 필요한 의사 결정을 해내갔다. 이 과정을 볼 때마다 코딩이 얼마나 쉬운 일인가 생각하게 된다. 유관부서가 많다보니 회의가 사방에서 열리고, 각종 맥락이 떠다니는 와중에 정신을 잡고 있다니 대단하다. 2가지 기능 개발만 동시에 진행해도 커밋 꼬이는 하찮은 나는 상상도 못할 일이다.</p><p id="ebbd">초기 제품도 없는 상태로 가이드를 만들고, 배포하고, 교육하기 까지 놀라움의 연속이었다. 가장 놀랐던 부분은 영업이 시작되었을 때 목표한 숫자보다 매장이 부족했을 때 대면 영업을 나가는 일이었다. 책상물림인 나는 감히 상상도 못할 일이었다. 일면식도 없는 장소에서 호의없는 공기를 깨고 누군가의 마음을 돌리는 일을 해내고야만 동료들에게 다시 한번 박수를 보낸다.</p><blockquote><p id="4213">글자로 몇 줄 적었지만 정말 정말 대단하다고 생각합니다.</p></blockquote><h2 id="f8ee">오픈 그리고 Hotfix</h2><p id="db5e">서비스를 하루 전 날 운영 환경에 배포해두고 운영 테스트를 진행했다. 실제 운영 지역을 사용할 수 없어서 테스트 데이터로 확인했는데 큰 탈없이 지나갔다.</p><figure><figcaption>오픈 당일 6시. 운동가는 그때는 앞으로 어떤 일이 펼쳐질지 몰랐다.</figcaption></figure><p id="3144">그런데 오픈 당일 문제가 터져나왔다.</p><h2 id="3cda">이미지가 깨져😱요</h2><p id="6461">당장 직면한 가장 큰 문제는 로딩이 되다가 이미지가 깨져버린다는 점이었다. 너무 큰 이미지를 많이 다운받아서 발생한 문제인줄 알았는데 아니었다. 고작해야 400kb 정도되는 이미지뿐이었다. 자세한 원인을 찾기전에 페이지 로딩에 얼마나 많은 용량을 쓰는지 확인했더니 250MB 수준이었다.</p><p id="f169">원인은 화면에 나타나지 않는 모든 이미지를 로딩하고 있었기때문이었다. 여러 가지 해결책이 있겠지만 당장 서비스가 화면에 나타나야하니까 최대한 빠르게 실행할 수 있는 방법이 필요했다. 그래서 각 매장당 이미지는 최대 3개까지만 노출하도록 제한하여 Hotfix했다. 250MB 정도 다운받던게 25MB 수준으로 줄어들었다. 물론 높은 수치이지만 일단 이미지가 깨지는 빈도가 줄었다.</p><h2 id="5e1f">이미지 업로드하는데 반응이 없어요🤮</h2><p id="ba8f">다음 문제는 매장 이미지를 업데이트하면서 발생했다. 고화질의 이미지를 보유했지만 어째서인지 운영 어드민으로 이미지 업로드를하면 응답이 없었다. 이미지 업로드는 AWS Cloudfront를 타고, API Gateway, Lambda 순서로 흘러서 최종 사내의 이미지 플랫폼으로 흘러들어간다. Lambda 로그를 확인했으나 뭔가 동작한 흔적이 없었다. 그 앞 어딘서가 설정을 제대로 못해서 끊겼을게다.</p><p id="0bf9">이 문제는 애초에 어드민에서 고화질 이미지를 받아도 리사이즈를 해서 업로드하는 기능을 넣었으면 발생하지 않았테지만 오픈 당일 그 기능을 구현할만한 시간은 없었다. 당장 떠오른 방법은 각자의 컴퓨터에서 이미지 사이즈를 조절해서 운영 어드민으로 업로드하는 방법이었다. 하지만 디자인 관련 도구를 팀 전체가 가지고 있지 못했다. 뭔가 방법이 필요했다.</p><p id="35d2">그러다가 생각한게 명령줄 도구(Command Line Interface)였다. 배포할 때 파일 하나 건내주면 정해진 명령어만 입력해서 리사이즈할 수 있겠더라. 익숙한 JavaScript로 만들까하다가 배포가 발목을 잡을 듯했다. 이때 스치듯 들었던 내용이 떠올랐다.</p><blockquote><p id="1758">‘Rust가 명령줄 도구 만들 때 편하다’</p></blockquote><p id="ad49">이게 언제 어디서 어떻게 들었는지 기억은 안나는데 아무튼 그랬다고 했던 기억이 있어서 ChatGPT에게 코드를 의뢰했다. 그럴 수 밖에 없는게 Rust를 로컬에서 돌려본 적도 없고 공식 문서를 읽어본 적도 없었기 때문이다.</p><figure></figure><p id="f2e9">그런데 이 녀석 대단했다. brew로 Rust 설치한 뒤 디버깅 조금 하니까 바로 동작가능해졌다. 내가 코드에 익숙하지 않아서 디버깅에 30분 이상 소요했지만 Rust 코드에 익숙했다면 대략 10분 안에 일을 마쳤을 듯 하다. 아무튼 스팰링까지 틀려가며 휘뚜루마뚜루 만든 명령줄 도구를 나눠주고 각자 이미지 리사이즈한 뒤 업로드해서 한 숨 돌릴 수 있게됐다.</p><h2 id="af97">맺음말</h2><p id="b835">문앞으로 배달되는 일상의 행복을 전하는 서비스 비전을 가진 우아한형제들. 그 안 여러가지 서비스를 품었지만 아마 가장 연관관계가 떨어지는게 배민우리동네라고 생각된다. 앞으로 어떻게 발전해갈지 모르겠지만 첫발을 떼는 그 자리에 함께한 모든 동료들에게 이 자리를 빌어서 감사의 인사를 전한다.</p><p id="765c">여러분이 있어서 가능했습니다.</p><p id="b97c">배민우리동네 힘내라!</p></div></div>

Stories by 송요창 on Medium

totuworld

야놀자에서 레저 카테고리를 오픈했고, 우아한형제들에서 브랜드관 개편, 사전예약 오픈, 배민선물하기 개편을 지나 올 해 8월 1일 배민우리동네 서비스를 오픈했다.
송파구에만 오픈한 서비스로 대부분의 사용자는 이런 서비스가 있는지도 모른다.
올 해 만들어진 목적 조직
배민우리동네팀은 올 해 만들어졌다. PM, BO, BE, FE가 모두 한 팀에 있는 조직 구성인데 한 분도 함께 일해 본적 없는 분들과 팀을 이뤄서 올 해 새로운 회사에 다니는 기분도 조금 들었다. 만나서 이야기도 나누고 밥도 먹고 하다보니 지금은 많이 편해졌다.
발령이 나고 한 동안 정신없이 시간이 지났다. 만들어야하는 제품에 대한 논의가 다각도로 진행되고 상위 의사결정권자들과 의견을 교환하며 지내다보니 언제 5월이 되었나 했다.
이 안에 많은 일들이 있었지만 이건 팀에서 회고하기로 하고 이 글에서는 자세히 다루지 않겠다.
아무튼 좋은 사람들이 많은 조직이라 그런지 우리 팀에도 일 잘하는 좋은 사람들이 많다. 나만 잘하면 되는 조직에 속하는건 언제나 즐거운 일이다.
초기 제품 제작
초기 제품에 어떤 기능이 들어갈지 정하고, 디자인팀에서 본격적으로 작업이 시작되면서 야근비로 통장이 두둑해지기 시작했다. 가이드도 나오지 않은 디자인가지고 우선 돌아가게 만들어보고 싶어서 달리고 또 달렸다. 일정이 안나와서 중간에 어드민도 병렬로 진행했는데, 급하게 진행한게 아쉽다. 일정당기려고 달리다보니 기획을 놓쳐서 중간에 기능 하나를 드러내야했고, 후반에 QA 이슈도 엄청나게 생산했다.
백엔드 QA 티켓보다 프론트 QA 티켓이 압도적으로 많았다.
그렇지만 잘했다. 처음 손발을 맞춰보는 팀이 첫 제품을 만들기까지 제작기간은 총 2개월 정도밖에 안된다. 이 기간안에 API 다 뽑고, 운영에 필요한 어드민 만들고, 고객향 서비스 지면까지 만들었다. 솔직히 1개월 정도 지났을 때 제품 배포 일정을 1달은 더 늦출줄 알았다. 그런데 이 폭주기관차는 멈춤을 몰랐다.
PM, BO 맹활약
서비스 지면이랑 어드민 만든다고 정신없는 와중에 PM, BO 맹활약이 대단했다. 각종 기능에 관해 여러 팀과 논의를 진행하고 필요한 의사 결정을 해내갔다. 이 과정을 볼 때마다 코딩이 얼마나 쉬운 일인가 생각하게 된다. 유관부서가 많다보니 회의가 사방에서 열리고, 각종 맥락이 떠다니는 와중에 정신을 잡고 있다니 대단하다. 2가지 기능 개발만 동시에 진행해도 커밋 꼬이는 하찮은 나는 상상도 못할 일이다.
초기 제품도 없는 상태로 가이드를 만들고, 배포하고, 교육하기 까지 놀라움의 연속이었다. 가장 놀랐던 부분은 영업이 시작되었을 때 목표한 숫자보다 매장이 부족했을 때 대면 영업을 나가는 일이었다. 책상물림인 나는 감히 상상도 못할 일이었다. 일면식도 없는 장소에서 호의없는 공기를 깨고 누군가의 마음을 돌리는 일을 해내고야만 동료들에게 다시 한번 박수를 보낸다.
글자로 몇 줄 적었지만 정말 정말 대단하다고 생각합니다.
오픈 그리고 Hotfix
서비스를 하루 전 날 운영 환경에 배포해두고 운영 테스트를 진행했다. 실제 운영 지역을 사용할 수 없어서 테스트 데이터로 확인했는데 큰 탈없이 지나갔다.
그런데 오픈 당일 문제가 터져나왔다.
이미지가 깨져😱요
당장 직면한 가장 큰 문제는 로딩이 되다가 이미지가 깨져버린다는 점이었다. 너무 큰 이미지를 많이 다운받아서 발생한 문제인줄 알았는데 아니었다. 고작해야 400kb 정도되는 이미지뿐이었다. 자세한 원인을 찾기전에 페이지 로딩에 얼마나 많은 용량을 쓰는지 확인했더니 250MB 수준이었다.
원인은 화면에 나타나지 않는 모든 이미지를 로딩하고 있었기때문이었다. 여러 가지 해결책이 있겠지만 당장 서비스가 화면에 나타나야하니까 최대한 빠르게 실행할 수 있는 방법이 필요했다. 그래서 각 매장당 이미지는 최대 3개까지만 노출하도록 제한하여 Hotfix했다. 250MB 정도 다운받던게 25MB 수준으로 줄어들었다. 물론 높은 수치이지만 일단 이미지가 깨지는 빈도가 줄었다.
이미지 업로드하는데 반응이 없어요🤮
다음 문제는 매장 이미지를 업데이트하면서 발생했다. 고화질의 이미지를 보유했지만 어째서인지 운영 어드민으로 이미지 업로드를하면 응답이 없었다. 이미지 업로드는 AWS Cloudfront를 타고, API Gateway, Lambda 순서로 흘러서 최종 사내의 이미지 플랫폼으로 흘러들어간다. Lambda 로그를 확인했으나 뭔가 동작한 흔적이 없었다. 그 앞 어딘서가 설정을 제대로 못해서 끊겼을게다.
이 문제는 애초에 어드민에서 고화질 이미지를 받아도 리사이즈를 해서 업로드하는 기능을 넣었으면 발생하지 않았테지만 오픈 당일 그 기능을 구현할만한 시간은 없었다. 당장 떠오른 방법은 각자의 컴퓨터에서 이미지 사이즈를 조절해서 운영 어드민으로 업로드하는 방법이었다. 하지만 디자인 관련 도구를 팀 전체가 가지고 있지 못했다. 뭔가 방법이 필요했다.
그러다가 생각한게 명령줄 도구(Command Line Interface)였다. 배포할 때 파일 하나 건내주면 정해진 명령어만 입력해서 리사이즈할 수 있겠더라. 익숙한 JavaScript로 만들까하다가 배포가 발목을 잡을 듯했다. 이때 스치듯 들었던 내용이 떠올랐다.
‘Rust가 명령줄 도구 만들 때 편하다’
이게 언제 어디서 어떻게 들었는지 기억은 안나는데 아무튼 그랬다고 했던 기억이 있어서 ChatGPT에게 코드를 의뢰했다. 그럴 수 밖에 없는게 Rust를 로컬에서 돌려본 적도 없고 공식 문서를 읽어본 적도 없었기 때문이다.
totu 🥩🔥👨‍💻 on Twitter: "오늘 서비스 오픈 후 급히 운영 이미지 리사이즈가 필요해졌다.CLI로 만들어서 배포할 생각하니 rust가 떠올랐는데 프로그래밍 한 적이 없다. 🤔🤔🤔그래서 ChatGPT랑 대화하여 뚝딱 해결했다! pic.twitter.com/9GpHnGLHsW / Twitter"
오늘 서비스 오픈 후 급히 운영 이미지 리사이즈가 필요해졌다.CLI로 만들어서 배포할 생각하니 rust가 떠올랐는데 프로그래밍 한 적이 없다. 🤔🤔🤔그래서 ChatGPT랑 대화하여 뚝딱 해결했다! pic.twitter.com/9GpHnGLHsW
그런데 이 녀석 대단했다. brew로 Rust 설치한 뒤 디버깅 조금 하니까 바로 동작가능해졌다. 내가 코드에 익숙하지 않아서 디버깅에 30분 이상 소요했지만 Rust 코드에 익숙했다면 대략 10분 안에 일을 마쳤을 듯 하다. 아무튼 스팰링까지 틀려가며 휘뚜루마뚜루 만든 명령줄 도구를 나눠주고 각자 이미지 리사이즈한 뒤 업로드해서 한 숨 돌릴 수 있게됐다.
맺음말
문앞으로 배달되는 일상의 행복을 전하는 서비스 비전을 가진 우아한형제들. 그 안 여러가지 서비스를 품었지만 아마 가장 연관관계가 떨어지는게 배민우리동네라고 생각된다. 앞으로 어떻게 발전해갈지 모르겠지만 첫발을 떼는 그 자리에 함께한 모든 동료들에게 이 자리를 빌어서 감사의 인사를 전한다.
여러분이 있어서 가능했습니다.
배민우리동네 힘내라!
(글쓴이가 직접 작성한 광고)
글쓴이가 직접 만든 강의!
리뷰 1
리뷰 2
스스로 탐색해가면서 학습하고 피드백을 통해 점검하고 싶다면 제 강의가 좋은 선택이 될거라고 생각합니다.
할인된 금액으로 시작해보세요(강의 작성 후기)
만들면서 배우는 프론트엔드 DO IT 코딩 (Next.js, Typescript) - 인프런 | 강의
60,000원 할인 쿠폰코드
12038-99c38fd66ab5
2023년 8월 말까지 유효하며, 선착순 100명에게만 유효합니다.
(글쓴이가 직접 작성한 광고22)
찐 문과생 2명과 피드백만 2개월 이상하며 만들어낸 정말 쉬운 업무 자동화 강의!
코드 편집기 필요없습니다.
그저 웹 브라우저와 구글 계정만 있다면 누구나 시작할 수 있습니다!
8월 한 달간 오픈 기념으로 30% 할인 중입니다!
Google Apps Script로 시작하는 업무 자동화 - 인프런 | 강의

배민우리동네 서비스 런칭기

댓글