[클론 코딩] 스카이 스캐너(Skyscanner) 클론 코딩 - 시작하기

주제 정하기

저번 쇼핑몰 프로젝트에 이어 실제 서비스중인 웹사이트의 핵심 기능을 구현해 보는 클론 코딩 프로젝트를 진행해 보기로 했다.

 

클론 코딩 하면 가장 많이 대상으로 삼는 곳인 카카오톡, AirBnB, 유튜브 등은 관련 자료가 많기도 하고

 

많이 보기도 해서 다른 사람들이 잘 하지 않는 사이트를 찾다가 스카이 스캐너를 클론 코딩 해보기로 의견을 모았다.

 

핵심 기능 탐색

스카이 스캐너는 전 세계의 항공 티켓 및 차량 렌트와 숙박을 검색하고, 예약할 수 있는 기능을 제공하는 사이트이다.

 

이 모든 기능들을 다 구현하기에는 시간의 제약이 있으며, 세 기능 모두 예약 가능한 데이터들만 제공하고, 예약 및 결제를 진행한다는 

 

유사성을 가지고 있으므로, 항공 티켓 예약 기능을 먼저 구현해 보기로 했다.

 

유저는 출발지와 도착지, 출발 일자를 선택하고, 여러 항공편을 본 후 그 중 하나를 선택, 동행 인원을 설정 후 예약, 구매를 진행하게 된다.

 

Database 도식화

 

시작 부터 문제 발생

출처: 스카이 스캐너 / 항공편 예약 화면

전 세계 공항은 많고도 많다. 정기 운행이 이뤄지는 공항만 해도 약 3천여 개가 넘는다.

 

그 중 특정 공항 2개 (출발, 도착) 를 선택했을 때, 항공표를 보여주기 위해서는 팀원들과 함께 데이터 베이스를 채워서는 택도 없다는 결론이 나왔다.

 

만에 하나, 데이터를 넣었다고 해도 프론트엔드에서 기획중인 기능 (오늘 이전 데이터 확인 불가능) 으로 인해 많은 데이터가

 

조회 조차 되지 않을 수 있어, 주기적으로 데이터를 만들어줘야 했기 때문에 다른 방법을 생각해 보아야 했다.

 

이 문제의 해결 대안으로 생각한 것은 백엔드에서도 항공 운행 정보 API를 사용하는 것이었다. 국가에서 공공 데이터를 무료로 제공하는

 

'공공데이터포털'에서 항공 정보와 관련된 API를 탐색하였고, 그 중에서 우리가 원한 것과 완전히 같지는 않지만, 니즈를 충족시켜줄 API를 찾았다.

 

국토교통부에서 제공하는 국내 항공 운항 정보로, 국내 공항 정보 (이름과 코드), 운행 정보 등을 조회할 수 있는 API이다.

 

문제 해결 시도

처음 데이터 테이블 구성을 어떻게 할 것이냐를 고민했다. 남은 기한까지 매일 같이 국내 모든 출발, 도착지 별 데이터를 추가할 것인가

 

위의 방법은 시연 단계에서 데이터를 쓸 일이 없으므로, 불필요한 데이터를 쌓는 것을 지양하기 위해서 아래와 같이

 

데이터를 축적하는 것으로 정리했다.

1. 공항 개수는 쉽게 늘거나 줄지 않으므로 개발 단계에서 공항 정보만 먼저 API로 호출하고, DB에 저장
2. 1의 결과로 인해 유저가 사이트 초기 화면에 접근하면 출발지와 도착지는 선택할 수 있음
3. 유저의 선택(출발지, 도착지, 출발일자)을 기준으로 항공편 DB 검색
4. (없는 경우) 공공데이터 API를 호출하여 조건에 맞는 데이터를 호출, DB 저장 후 결과 값 전달
   이 과정에서 남은 좌석 수 (공공 API에서는 제공하지 않는 정보) 데이터를 추가
5. (있는 경우) 항공편 DB에서 데이터 전달

속도는 조금 떨어질 수 있으나, 실제 서비스하는 페이지는 아니며, DB를 무겁게 보유할 필요가 없으므로 위와 같이 정리했다.

 

다음 과정

서비스 구현에 앞서, 이전 프로젝트에서 해보지 못 했던 것을 먼저 진행하려고 한다.

 

코드를 성격 별로 분리하여 관리하는 '계층화'의 뼈대를 잡은 후 API 호출하는 코드를 작성할 계획이다.

 

이전 프로젝트에서도 최종적으로는 코드 계층화를 하려고 했지만, 당장의 구현에 급급해서 결국 하지 못한 작업이다.

 

계층화 작업을 해 두면 코드가 기능별로 명확하게 나눠져있어 작업해야 할 포인트를 찾기 쉬워진다는 장점이 있다.