<div id="readability-page-1" class="page"><div><blockquote><p id="646b">프론트엔드 프로그래머만으로 배민선물하기 내 일부 기능을 개발하는 이야기</p></blockquote></div><div><p id="5a66">배민선물하기가 사용자를 가장 많이 만나는 첫 지면에는 다양한 카드와 상품가 전시된다. 각각 보여주는 방식 차이가 있어서 영역마다 이름을 붙여서 운영/개발하는데 그 중 프로모션 위젯을 개발한 이야기를 해볼까한다.</p><figure><div role="button" tabindex="0"><p><img alt="" src="https://miro.medium.com/max/1400/1*mFDbMFh2fX-3jU3jREB7Yg.png" width="700" height="960" loading="lazy" role="presentation"></p></div><figcaption>선물하기 홈에서 만날 수 있는 프로모션 위젯</figcaption></figure></div><div><p id="207b"><strong>(앞광고)</strong> 6월 말에 프론트엔드 <strong>강의 오픈 </strong>했습니다. 시간되시면 강의 한 번 살펴봐주세요. 🙇🙇 쉽게 살펴보시라고 할인 쿠폰 남깁니다.</p><p id="a4e0">30% 할인 쿠폰코드: <strong>6187-b39efb7bca40</strong></p><blockquote><p id="c287">2022년 8월 31일까지 유효하며, 선착순 100명에게만 유효합니다.</p></blockquote><h2 id="b957">첫 단추: 만화경 카드를 전시해보자</h2><p id="00de">배민선물하기에는 900종 이상의 카드가 있다. 그 중에 만화경 작가님들의 카드는 많은 사용자가 선택하고 있다. 그런데 일반 카드와 섞여 무작위로 노출되고 있었다. 이 카드를 모아서 전시하면 특색있어 보이고 좋겠다고 생각하게 되었다.</p><blockquote><p id="e1e9">우리는 이 영역을 `카드 프로모션` 으로 불렀다.</p></blockquote><p id="9069">그런데 기획 개발 단계에서 백엔드 프로그래머 업무가 많아서 <strong>카드 프로모션</strong> 개발에 참여할 수 없는 상태임을 알게되었다. 상대적으로 더 많은 인원이 있는 프론트엔드 프로그래머만으로 기능 개발할 방법을 고민하게 됐다. 고민한 부분은 다음과 같다.</p><ul><li id="5f54">많은 사용자가 조회해도 데이터 표시에 문제가 없어야한다.</li><li id="1a88">비지니스가 변경될 때 빠르게 대응할 수 있어야한다.</li><li id="1c1b">백엔드에서 해당 비지니스를 대체할 때 손쉽게 제거할 수 있어야한다.</li><li id="73f4">프론트엔드 프로그래머 누구나 데이터를 관리할 수 있어야한다.</li></ul><p id="d95e">이런 고민을 바탕으로 어떻게 구현했는지 살펴보자.</p><h2 id="bed6">트래픽은 Amazon CloudFront가 맡는다</h2><p id="78d4">사람들이 줄서는 맛집 근처에 카페는 덩달아 손님이 많다. 마찬가지 원리로 배민선물하기 서비스도 배민앱 안에 동작하다보니 사용자 방문이 많다. 그리고 <strong>카드 프로모션</strong>은 배민선물하기 안에서 가장 많은 페이지 뷰(Page View)를 가진 첫 지면에 위치한다. 이런 상황이다보니 트래픽이 첫번째 고민사항이었다.</p><blockquote><p id="4e30">방문이 많건 적건 서비스는 안정적이어야한다.</p></blockquote><p id="4bd0">처음에는 Node.js 서버나 Amazon Lambda를 사용할까 했지만 아무리 개발을 최소화해도 백엔드 프로그래머 작업을 동반하게 됐다. 그래서 눈을 돌린게 Amazon S3와 CloudFront다.</p><blockquote><p id="87d1">Amazon S3는 업계 최고 수준의 확장성, 데이터 가용성, 보안 및 성능을 갖춘 클라우드 객체 스토리지입니다.</p></blockquote><p id="3486">말이 복잡하지만 Amazon S3는 각종 파일을 저장할 수 있다. JSON 파일도 저장할 수 있다. 이점을 착안해서 화면에 노출할 카드 프로모션 정보를 JSON 파일로 만들어서 Amazon S3에 넣으면 서버없이 데이터 전송이 가능하다.</p><blockquote><p id="3a67">Amazon CloudFront는 뛰어난 성능, 보안 및 개발자 편의를 위해 구축된 콘텐츠 전송 네트워크(CDN) 서비스입니다.</p></blockquote><p id="ece1">Amazon CloudFront 는 데이터를 전세계 구석구석에 퍼뜨려둬서 어디서 요청해도 빠르게 전달하는 역할을 한다.</p><p id="0b7c">이미 Amazon S3와 CloudFront를 연결하여 사용하고 있어 카드 프로모션 정보만 저장한 뒤, 필요에 따라 CloudFront에 캐싱된 정보를 무효화(invalidation)하면 되겠다! 이렇게하면 트래픽은 모두 Amazon CloudFront가 해결해준다.</p><figure><div role="button" tabindex="0"><p><img alt="" src="https://miro.medium.com/max/1400/1*dqOCPl9peqYwk-AddcH3jA.png" width="700" height="293" loading="lazy" role="presentation"></p></div><figcaption>사용자는 CloudFront를 거쳐서 S3의 데이터를 읽는다.</figcaption></figure><p id="5941">실제 사용자가 만나는 화면은 함께 일하는 우리팀 프론트엔드 프로그래머 동료들이 해결해줬다.</p><blockquote><p id="c5b5">든든한 선물하기팀 동료들 최고다</p></blockquote><h2 id="7d41">원본 데이터는 Cloud Firestore에 담는다</h2><p id="b1c8">사용자가 <strong>카드 프로모션</strong> 위젯을 볼 수 있는 부분은 해결되었지만 여기 노출할 정보를 추가하거나 수정한 원본 데이터를 저장할 곳이 필요했다. 서비스에 내보내면 다양한 요구사항이 쏟아질꺼고 만약 필요없어지면 쉽게 버릴 수 있는 수단이 필요했다. 그러면서도 프론트엔드 프로그래머가 유지보수 할 수 있어야했고, 여차하면 저장된 데이터를 직접 수정할 수단도 있어야한다.</p><ul><li id="16d8">변경에 유연해야한다.</li><li id="b0a2">진입 장벽이 낮아야한다.</li><li id="7bc3">간단한 편집툴을 제공해야한다.</li></ul><p id="1d1f">이 조건을 만족하는 서비스는 여러가지 있겠지만 우선 내 손에 익숙한 Cloud Firestore를 선택했다.</p><blockquote><p id="548c">Cloud Firestore는 Firebase 및 Google Cloud의 모바일, 웹, 서버 개발에 사용되는 유연하고 확장 가능한 데이터베이스입니다.</p></blockquote><p id="e3f5">앞서 고려한 조건에 Cloud Firestore가 얼마나 부합하는지 알아보자.</p><ul><li id="9fe7">변경에 유연해야한다.</li></ul><blockquote><p id="214f">NoSQL 데이터베이스라서 RDB 테이블에 비하면 변경이 자유롭다.</p></blockquote><ul><li id="3f5e">진입 장벽이 낮아야한다.</li></ul><blockquote><p id="7f3b">Javascript SDK가 있고, 튜토리얼도 잘 정리되어 있음. 이미 이걸 많이 다뤄본 사람도 있음.</p></blockquote><ul><li id="722f">간단한 편집툴을 제공해야한다.</li></ul><blockquote><p id="4550">브라우저에서 작동하는 편집기를 제공함.</p></blockquote><figure><div role="button" tabindex="0"><p><img alt="" src="https://miro.medium.com/max/1400/1*yubDWjfbljeiywoOuijNvA.png" width="700" height="785" loading="lazy" role="presentation"></p></div><figcaption>Cloud Firestore는 브라우저에서 데이터를 편집할 수 있는 편집기를 제공한다.</figcaption></figure><p id="f92a">정보를 가공하고 편집할 관리자 웹페이지는 Node.js 서버를 통해 제공되고 있어서 여기에 Cloud Firestore를 제어할 수 있는 로직을 추가한 뒤 웹 API 몇 개 추가하면 되니까 작업도 간단하다.</p><blockquote><p id="5232">Cloud Firestore를 다루는 내용은 <a href="https://inf.run/HmHC" rel="noopener ugc nofollow" target="_blank">https://inf.run/HmHC</a> 이 강의를 통해 살펴보실 수 있습니다. 🙇🙇🙇</p><p id="e0eb">30% 할인 쿠폰코드: <strong>6187-b39efb7bca40</strong></p></blockquote><figure><p><img alt="" src="https://miro.medium.com/max/1376/1*GLcpYBjr9T1Uv_6sheX0oA.png" width="688" height="356" loading="lazy" role="presentation"></p><figcaption>이미 동작중인 서버에 데이터베이스 제어만 가능하도록 추가</figcaption></figure><p id="5eca">NoSQL 데이터베이스였어서 2022년 하반기에 상품도 전시할 수 있도록 프로모션 위젯이 변경될 때도 혼자 수정할만큼 작업량이 적었다.</p><figure><div role="button" tabindex="0"><p><img alt="" src="https://miro.medium.com/max/1400/1*AShQI8d1CAfJckhKWGTiUg.jpeg" width="700" height="644" loading="lazy" role="presentation"></p></div><figcaption>상품도 진열할 수 있는 새로운 프로모션 위젯</figcaption></figure><h2 id="056e">AWS Lambda와 CloudWatch Events로 1분마다 데이터를 갱신한다</h2><p id="d06e"><strong>카드 프로모션</strong> 위젯은 기간을 특정해서 카드가 전시된다. 그러다보니 시간에 따라 노출되는 카드가 변경되도록 누군가 위젯 내용을 바꿔주는 일을 해야만 했다. 이를 해결하기 위해서 Amazon CoudWatch Events를 이용했다.</p><blockquote><p id="9b35">Amazon CloudWatch Events는 Amazon Web Services(AWS) 리소스의 변경 사항을 설명하는 시스템 이벤트의 스트림을 거의 실시간으로 전달합니다.</p></blockquote><p id="92a9">Amazon CloudWatch Events는 Cron 또는 Rate 식을 사용하여 자동 일정에 따라 자체 트리거되는 규칙을 생성할 수 있다. 다시 말해 매 1분 마다 혹은 매주 월요일 아침 9시 등 규칙을 마음껏 만들어서 이벤트를 발생시킬 수 있다.</p><pre><span id="ab68"><strong><em>// 매 시간 20, 30, 45분에 동작하는 Cron 표현식<br>0 20, 30, 45 * ? * *</em></strong></span></pre><p id="db12">이 기능을 활용해서 1분마다 AWS Lambda를 가동하도록 했다.</p><blockquote><p id="0629">AWS Lambda는 서버를 프로비저닝 또는 관리하지 않고도 실제로 모든 유형의 애플리케이션 또는 백엔드 서비스에 대한 코드를 실행할 수 있는 이벤트 중심의 서버리스 컴퓨팅 서비스입니다.</p></blockquote><p id="b61c">Amazon CoudWatch Events를 통해 매 1분마다 확인하는 이벤트를 AWS Lambda로 전달하면 작성해둔 코드가 동작하면서 Node.js 서버로 데이터 갱신 요청을 보낸다. 그럼 Node.js 서버에 작성해둔 로직에 의해 현재 노출할 정보만 정리해서 Amazon S3에 업로드하고, CloudFront에 무효화 요청을 보낸다.</p><figure><div role="button" tabindex="0"><p><img alt="" src="https://miro.medium.com/max/1400/1*GnqFUdjJhPZkeoxm3UgDtg.png" width="700" height="454" loading="lazy" role="presentation"></p></div><figcaption>위에서 설명한 과정을 그림으로 나타나면 이렇다.</figcaption></figure><p id="6c69">AWS Lambda를 통해 직접 Cloud Firestore 정보에 접근해서 데이터를 갱신할 수 있지만 이렇게하면 정보를 조작하는 로직이 흩어져서 관리하기 힘들었다. 그래서 추가, 수정, 갱신하는 모든 로직을 Node.js 서버에 몰아준 뒤 필요에 따라 Web API를 호출하도록 했다.</p><h2 id="f2cb">맺음말</h2><p id="36a0">백엔드 프로그래머 참여가 불가능한 상태라서 배포 시점을 조절해야하는지 고민도 필요했다. 그렇지만 그 가운데 남는 자원만으로 기능을 개발했고 지금까지 큰 탈없이 운영해오고 있다.</p><p id="62b2">연전 연패하는 야구팀을 응원하다보면 누가 부상당하지 않았다면, 드레프트에서 A를 지목했다면, 감독이 투수 교체 시기를 앞당겼다면 등등 이런 저런 조건을 바꿔가며 소설을 쓰곤한다. 이런 망상과 달리 현실의 스포츠는 늘 어떤 어려움이 있는 상태 시즌을 치룬다.</p><figure><p><img alt="" src="https://miro.medium.com/max/1200/1*7Dv9-Ac5eeozMf4_nojHDw.jpeg" width="600" height="302" loading="lazy" role="presentation"></p><figcaption>최강한화</figcaption></figure><p id="72d9">프로모션 위젯 개발 과정을 돌아보니 IT 서비스 개발에도 스포츠팀과 비슷하다는 생각이 든다. 이런 저런 조건이 모두 맞으면 좋겠지만 그렇지 못한 때도 있다. 이때 나는 어떤 플레이를 할 수 있을까 고민한다.</p></div><div><p id="2148"><strong>(뒷광고)</strong> 6월 말에 프론트엔드 <strong>강의 오픈 </strong>했습니다. 시간되시면 강의 한 번 살펴봐주세요. 🙇🙇 쉽게 살펴보시라고 할인 쿠폰 남깁니다.</p><p id="e4a8">30% 할인 쿠폰코드: <strong>6187-b39efb7bca40</strong></p><blockquote><p id="53de">2022년 8월 31일까지 유효하며, 선착순 100명에게만 유효합니다.</p></blockquote></div></div>

Stories by 송요창 on Medium

totuworld

프론트엔드 프로그래머만으로 배민선물하기 내 일부 기능을 개발하는 이야기
배민선물하기가 사용자를 가장 많이 만나는 첫 지면에는 다양한 카드와 상품가 전시된다. 각각 보여주는 방식 차이가 있어서 영역마다 이름을 붙여서 운영/개발하는데 그 중 프로모션 위젯을 개발한 이야기를 해볼까한다.
(앞광고) 6월 말에 프론트엔드 강의 오픈 했습니다. 시간되시면 강의 한 번 살펴봐주세요. 🙇🙇 쉽게 살펴보시라고 할인 쿠폰 남깁니다.
30% 할인 쿠폰코드: 6187-b39efb7bca40
2022년 8월 31일까지 유효하며, 선착순 100명에게만 유효합니다.
만들면서 배우는 프론트엔드 DO IT 코딩 (Next.js, Typescript) - 인프런 | 강의
첫 단추: 만화경 카드를 전시해보자
배민선물하기에는 900종 이상의 카드가 있다. 그 중에 만화경 작가님들의 카드는 많은 사용자가 선택하고 있다. 그런데 일반 카드와 섞여 무작위로 노출되고 있었다. 이 카드를 모아서 전시하면 특색있어 보이고 좋겠다고 생각하게 되었다.
우리는 이 영역을 `카드 프로모션` 으로 불렀다.
그런데 기획 개발 단계에서 백엔드 프로그래머 업무가 많아서 카드 프로모션 개발에 참여할 수 없는 상태임을 알게되었다. 상대적으로 더 많은 인원이 있는 프론트엔드 프로그래머만으로 기능 개발할 방법을 고민하게 됐다. 고민한 부분은 다음과 같다.
많은 사용자가 조회해도 데이터 표시에 문제가 없어야한다.
비지니스가 변경될 때 빠르게 대응할 수 있어야한다.
백엔드에서 해당 비지니스를 대체할 때 손쉽게 제거할 수 있어야한다.
프론트엔드 프로그래머 누구나 데이터를 관리할 수 있어야한다.
이런 고민을 바탕으로 어떻게 구현했는지 살펴보자.
트래픽은 Amazon CloudFront가 맡는다
사람들이 줄서는 맛집 근처에 카페는 덩달아 손님이 많다. 마찬가지 원리로 배민선물하기 서비스도 배민앱 안에 동작하다보니 사용자 방문이 많다. 그리고 카드 프로모션은 배민선물하기 안에서 가장 많은 페이지 뷰(Page View)를 가진 첫 지면에 위치한다. 이런 상황이다보니 트래픽이 첫번째 고민사항이었다.
방문이 많건 적건 서비스는 안정적이어야한다.
처음에는 Node.js 서버나 Amazon Lambda를 사용할까 했지만 아무리 개발을 최소화해도 백엔드 프로그래머 작업을 동반하게 됐다. 그래서 눈을 돌린게 Amazon S3와 CloudFront다.
Amazon S3는 업계 최고 수준의 확장성, 데이터 가용성, 보안 및 성능을 갖춘 클라우드 객체 스토리지입니다.
말이 복잡하지만 Amazon S3는 각종 파일을 저장할 수 있다. JSON 파일도 저장할 수 있다. 이점을 착안해서 화면에 노출할 카드 프로모션 정보를 JSON 파일로 만들어서 Amazon S3에 넣으면 서버없이 데이터 전송이 가능하다.
Amazon CloudFront는 뛰어난 성능, 보안 및 개발자 편의를 위해 구축된 콘텐츠 전송 네트워크(CDN) 서비스입니다.
Amazon CloudFront 는 데이터를 전세계 구석구석에 퍼뜨려둬서 어디서 요청해도 빠르게 전달하는 역할을 한다.
이미 Amazon S3와 CloudFront를 연결하여 사용하고 있어 카드 프로모션 정보만 저장한 뒤, 필요에 따라 CloudFront에 캐싱된 정보를 무효화(invalidation)하면 되겠다! 이렇게하면 트래픽은 모두 Amazon CloudFront가 해결해준다.
실제 사용자가 만나는 화면은 함께 일하는 우리팀 프론트엔드 프로그래머 동료들이 해결해줬다.
든든한 선물하기팀 동료들 최고다
원본 데이터는 Cloud Firestore에 담는다
사용자가 카드 프로모션 위젯을 볼 수 있는 부분은 해결되었지만 여기 노출할 정보를 추가하거나 수정한 원본 데이터를 저장할 곳이 필요했다. 서비스에 내보내면 다양한 요구사항이 쏟아질꺼고 만약 필요없어지면 쉽게 버릴 수 있는 수단이 필요했다. 그러면서도 프론트엔드 프로그래머가 유지보수 할 수 있어야했고, 여차하면 저장된 데이터를 직접 수정할 수단도 있어야한다.
변경에 유연해야한다.
진입 장벽이 낮아야한다.
간단한 편집툴을 제공해야한다.
이 조건을 만족하는 서비스는 여러가지 있겠지만 우선 내 손에 익숙한 Cloud Firestore를 선택했다.
Cloud Firestore는 Firebase 및 Google Cloud의 모바일, 웹, 서버 개발에 사용되는 유연하고 확장 가능한 데이터베이스입니다.
앞서 고려한 조건에 Cloud Firestore가 얼마나 부합하는지 알아보자.
변경에 유연해야한다.
NoSQL 데이터베이스라서 RDB 테이블에 비하면 변경이 자유롭다.
진입 장벽이 낮아야한다.
Javascript SDK가 있고, 튜토리얼도 잘 정리되어 있음. 이미 이걸 많이 다뤄본 사람도 있음.
간단한 편집툴을 제공해야한다.
브라우저에서 작동하는 편집기를 제공함.
정보를 가공하고 편집할 관리자 웹페이지는 Node.js 서버를 통해 제공되고 있어서 여기에 Cloud Firestore를 제어할 수 있는 로직을 추가한 뒤 웹 API 몇 개 추가하면 되니까 작업도 간단하다.
Cloud Firestore를 다루는 내용은 https://inf.run/HmHC 이 강의를 통해 살펴보실 수 있습니다. 🙇🙇🙇
30% 할인 쿠폰코드: 6187-b39efb7bca40
NoSQL 데이터베이스였어서 2022년 하반기에 상품도 전시할 수 있도록 프로모션 위젯이 변경될 때도 혼자 수정할만큼 작업량이 적었다.
AWS Lambda와 CloudWatch Events로 1분마다 데이터를 갱신한다
카드 프로모션 위젯은 기간을 특정해서 카드가 전시된다. 그러다보니 시간에 따라 노출되는 카드가 변경되도록 누군가 위젯 내용을 바꿔주는 일을 해야만 했다. 이를 해결하기 위해서 Amazon CoudWatch Events를 이용했다.
Amazon CloudWatch Events는 Amazon Web Services(AWS) 리소스의 변경 사항을 설명하는 시스템 이벤트의 스트림을 거의 실시간으로 전달합니다.
Amazon CloudWatch Events는 Cron 또는 Rate 식을 사용하여 자동 일정에 따라 자체 트리거되는 규칙을 생성할 수 있다. 다시 말해 매 1분 마다 혹은 매주 월요일 아침 9시 등 규칙을 마음껏 만들어서 이벤트를 발생시킬 수 있다.
// 매 시간 20, 30, 45분에 동작하는 Cron 표현식
0 20, 30, 45 * ? * *
이 기능을 활용해서 1분마다 AWS Lambda를 가동하도록 했다.
AWS Lambda는 서버를 프로비저닝 또는 관리하지 않고도 실제로 모든 유형의 애플리케이션 또는 백엔드 서비스에 대한 코드를 실행할 수 있는 이벤트 중심의 서버리스 컴퓨팅 서비스입니다.
Amazon CoudWatch Events를 통해 매 1분마다 확인하는 이벤트를 AWS Lambda로 전달하면 작성해둔 코드가 동작하면서 Node.js 서버로 데이터 갱신 요청을 보낸다. 그럼 Node.js 서버에 작성해둔 로직에 의해 현재 노출할 정보만 정리해서 Amazon S3에 업로드하고, CloudFront에 무효화 요청을 보낸다.
AWS Lambda를 통해 직접 Cloud Firestore 정보에 접근해서 데이터를 갱신할 수 있지만 이렇게하면 정보를 조작하는 로직이 흩어져서 관리하기 힘들었다. 그래서 추가, 수정, 갱신하는 모든 로직을 Node.js 서버에 몰아준 뒤 필요에 따라 Web API를 호출하도록 했다.
맺음말
백엔드 프로그래머 참여가 불가능한 상태라서 배포 시점을 조절해야하는지 고민도 필요했다. 그렇지만 그 가운데 남는 자원만으로 기능을 개발했고 지금까지 큰 탈없이 운영해오고 있다.
연전 연패하는 야구팀을 응원하다보면 누가 부상당하지 않았다면, 드레프트에서 A를 지목했다면, 감독이 투수 교체 시기를 앞당겼다면 등등 이런 저런 조건을 바꿔가며 소설을 쓰곤한다. 이런 망상과 달리 현실의 스포츠는 늘 어떤 어려움이 있는 상태 시즌을 치룬다.
프로모션 위젯 개발 과정을 돌아보니 IT 서비스 개발에도 스포츠팀과 비슷하다는 생각이 든다. 이런 저런 조건이 모두 맞으면 좋겠지만 그렇지 못한 때도 있다. 이때 나는 어떤 플레이를 할 수 있을까 고민한다.
(뒷광고) 6월 말에 프론트엔드 강의 오픈 했습니다. 시간되시면 강의 한 번 살펴봐주세요. 🙇🙇 쉽게 살펴보시라고 할인 쿠폰 남깁니다.
30% 할인 쿠폰코드: 6187-b39efb7bca40
2022년 8월 31일까지 유효하며, 선착순 100명에게만 유효합니다.
만들면서 배우는 프론트엔드 DO IT 코딩 (Next.js, Typescript) - 인프런 | 강의

신(臣)에게는 Amazon S3와 CloudFront가 남아있사옵니다

댓글