Frontend

여기어때 항공서비스 소개🛫

이지희Rosie(로지)/상품개발팀여기어때

2022년 8월 23일

원문에서 보기 ↗

안녕하세요😀

여기어때 T플랫폼개발실 개발1팀에서 백엔드 개발을 하고있는 로지입니다.

T플랫폼개발실은 여기어때에서 비 숙박 분야인 항공, 공간대여, 맛집 관련 서비스를 운영하고 있습니다. 개발1팀은 그 중 항공 서비스를 개발, 운영하고 있습니다.

여기어때에서 해외/국내 항공 서비스가 2022년 5월에 오픈하고 지금 세 달이 지났는데요, 현재 큰 문제 없이 원활한 서비스를 하고 있습니다.

이 포스트를 통해 개발1팀에서 개발한 항공 서비스를 소개하려고 합니다. 포스트 작성을 위해 많은 도움을 주신 개발1팀 팀원 분들 모두 정말 감사하다고 말씀드리고 싶습니다👍

Infrastructure

여기어때 항공 서비스는 위 그림과 같이 AWS 환경으로 구성되어 있습니다.

웹뷰 리소스는 S3에 존재하고 해당 리소스는 CloudFront를 통해 캐싱되어 클라이언트에게 전달합니다.

API는 Amazon API Gateway를 통해 여기어때 내부 endpoint로 proxy하여 요청에 대한 응답을 전달합니다.

S3 + CloudFront

프론트엔드 소스를 빌드하여 S3에 올리고 S3의 자체 배포가 아닌 CloudFront 배포를 이용했습니다.

CloudFront는 AWS에서 제공하는 컨텐츠 전송 네트워크(CDN) 서비스입니다. CloudFront는 전 세계 이곳저곳에 Edge Location(Server)를 두고 Client에 가장 가까운 Edge Server를 찾아서 콘텐츠를 전송하기 때문에 성능이 향상될 수 있습니다. Edge Server에서는 요청받은 데이터를 캐싱하는데 과정 순서는 아래와 같습니다.

사용자의 요청이 들어오면 가까운 Edge Location으로 라우팅된다.
해당 Edge Server에 요청의 캐시 사본이 있으면 빠르게 응답하여 사용자에게 전송한다.
캐싱되어 있지 않으면 S3 버킷 Origin Server에서 파일을 가져와 Edge Server에 캐싱 데이터를 생성한다

CloudFront를 쓰면 S3에서 직접 파일을 제공하는 것보다 더욱 효율적으로 서비스를 할 수 있습니다.

웹뷰로 화면 구현

프론트엔드는 Vue.js와 Typescript를 써서 웹뷰로 구현하였습니다.

개발1팀이 여기어때에서 기존에 많이 쓰던 네이티브앱으로의 개발이 아닌 웹뷰로 개발한 이유는 팀 안에서 프론트 레이어까지 개발하여야 했고, 버그 수정 후 배포가 덜 번거롭다는 등의 장점이 있기 때문입니다. 그래서 저희는 하이브리드 웹뷰로 개발하게 되었습니다.

네이티브앱에 웹뷰로 들어가면서 웹뷰에서는 구현할 수 없는 네이티브 관련 기능들이 있었습니다. 대표적으로 로그인 성공 여부가 있는데 이러한 네이티브앱 관련 기능을 앱개발팀에서 친절하게 처리해주시고 많이 도와주셔서 이 자리를 빌려 감사하다고 전해드리고 싶습니다.👍

프론트엔드를 Vue.js로 개발하면서 컴포넌트화를 하게 되어 디자인팀에도 재사용 할 수 있는 컴포넌트로 가이드 잡아달라고 요청했습니다. 이 이후로는 개발1팀과 디자인팀은 컴포넌트를 이용해 가이드 잡는 것으로 업무 프로세스를 확립했습니다. 이로 인해 개발 단계에서도 재사용 할 수 있는 부분은 재사용 하고 ,디자인 QA 할 때도 재사용 하는 부분은 다시 검증 할 필요 없게 되었습니다.

마케팅 툴 적용

A/B테스트를 진행 할 두 가지 버전

항공 서비스를 런칭하면서 더 높은 마케팅 효과를 위해 Product Owner와 같이 A/B 테스트를 진행하였습니다. A/B 테스트는 두 개의 변형 A와 B를 사용해 같은 기간 동안 두 변수 중 어떤 것이 더 효과적인지를 데이터로 판단함으로써 비교하는 방법입니다.

위의 사진과 같이 발권 수수료 할인 정보를 어느 방식으로 알리는 것이 좋은지도 A/B 테스트를 통해서 결정하였습니다.

저희는 A/B 테스트 툴로 핵클(Hackle)을 사용하였습니다. 핵클은 npm으로 쉽게 설치할 수 있고, 대시보드를 이용해서 테스트를 편리하게 실행할 수 있고, 테스트 결과도 그래프로 한눈에 볼 수 있습니다.

클라이언트단에 핵클을 적용하고 예약전환율을 확인하여 어떤 방식으로 할인 정보를 알리는 게 좋은지 결정합니다.

GTM(Google Tag Manager)도 전사에서 제일 처음으로 적용하였습니다. 원래는 마케팅 로그 툴로 Appsflyer와 Braze, Amplitude 등 4가지 정도를 쓰고 있었는데 GTM을 사용하여 다른 마케팅 툴로 한 번에 데이터를 전송하고, 원하는 대로 데이터를 만들어 로그로 저장할 수 있게 되었습니다.

Amazon API Gateway

여기어때 API Gateway는 Netflix Zuul을 기반으로 커스터마이징하여 사용하고 있습니다. 현재 여기어때 Gateway도 사양이 좋지만 로그인, 회원가입, 쿠폰, 예약, 전시, 결제, 상품조회 등등 이 모든 서비스들이 다 의존되어 있어서 부담이 있습니다.

만약 한 서비스에서 이벤트를 한다고 했을 때, 트래픽이 순식간에 몰리면 auto-scaling으로는 대응하기 어렵습니다. auto-scaling이라도 인스턴스 배포 후 핫로드 -> 서비스 스탠바이 되기까지 적지 않은 시간이 발생합니다. 그렇기 때문에 미리 트래픽을 계산하여 스케일업/아웃으로 인스턴스 사양 및 수량을 조절해야 합니다. 이것 또한 트래픽 계산이 잘못되거나 하면 문제가 발생할 수 있습니다.기존 여기어때 Gateway에서는 로그인 검증 및 여러 가지 필터가 탑재되어 있으나 blocking 기반의 Zuul로는 한계가 있습니다.

항공 서비스는 기존 숙박 서비스와 의존성이 낮으므로 서비스를 시작할 때 새로운 API Gateway를 사용할 수 있겠다고 생각해 AWS 기반의 Amazon API Gateway를 도입하게 되었습니다.

Amazon API Gateway는 트래픽 관리, 권한 부여 및 액세스 제어, 모니터링, API 버전 관리를 포함해 최대 수십만 개의 동시 API 호출 허용 및 처리에 관련된 모든 작업을 다룹니다. 추가로 AWS WAF를 앞에 적용할 수 있어 보안적인 측면에서도 우수합니다. 물론 사용한 만큼 Amazon API Gateway 비용이 부과되지만 기존 인프라에서 신경 써 줘야 했던 많은 작업들을 대신해 주고 있어 리소스 관리에서도 유리합니다.

기존에 특정 이벤트 진행 시 트래픽을 대비해 여기어때 Gateway 스케일업/아웃 과정들을 생략할 수 있게 되었습니다.

Amazon API Gateway에서는 클라이언트의 요청을 받아 항공 비즈니스 API 요청을 proxy하여 데이터를 처리합니다.

전시관리를 위한 항공 CMS(Content Management System: 콘텐츠 관리 시스템) 구축

여기어때 항공 홈 화면, 공항 검색 화면

항공 홈에 있는 공지사항, 배너, 인기 공항 데이터는 CMS에서 관리가 필요한 부분이므로 항공 CMS를 구축하게 되었습니다.

해당 데이터들은 모두 Redis 캐시를 이용했습니다. Redis는 인메모리 키 값 데이터 구조 저장소로 데이터를 RAM에 올려서 사용하므로 빠른 속도를 낼 수 있습니다. 또 Redis는 Single Thread로 원자성을 보장하므로 안전한 데이터 전송이 가능합니다.

CMS에서 공지사항 등록 시 웹에디터가 필요합니다. 여러 에디터를 비교해본 결과 Typescript와도 호환이 되고, 대부분의 에디터 기능을 지원하고, 테이블 기능도 미흡하지 않은 TinyMCE를 사용하게 되었습니다. TinyMCE의 커뮤니티 버전은 Vue 컴포넌트를 제공하지 않아서 따로 랩핑하여 적용하였습니다.

항공CMS에서 공지사항 등록하는 에디터 화면

마치며

해외/국내 항공 서비스를 런칭하면서 크고 작은 우여곡절들이 많았습니다.

스마트 오피스 공사 등으로 본사 건물에 자리가 부족하여 지하 1층에 카페테리아가 생기기 전의 그 곳에서 매연과 추위와 싸우면서 일하기도 하였고, 프론트엔드 개발자가 부족하여 백엔드 개발자들도 Vue.js와 Typescript를 스터디해 프론트엔드 업무를 진행하기도 했습니다. 고생하였지만 그로 인해 백엔드 개발자들과 프론트엔드 개발자들끼리 더 이해도가 높아지고, 소통도 더 원활해지는 장점도 있었습니다.

지하 임시 사무실에서 일했던 모습

항공 서비스는 성공적으로 오픈하였지만 개발1팀에는 여전히 많은 할 일들이 남아있습니다. 외부에 있는 항공데이터 코어 비즈니스 서비스를 AWS로 이관하는 작업과 CMS에 뱃지관리, 팝업관리 추가 등 개선 및 신규 개발을 진행할 예정입니다.

사용자들에게 원활한 서비스를 하기 위해 오늘도 열심히 노력하고 있습니다. 더욱 발전해나갈 여기어때 항공 서비스에 많은 관심 부탁드리겠습니다!👏