[회고록] 김해국제공항에 머무르는 시간을 단축해보자

고등학생으로서 마지막 겨울방학 (1.10 ~ 3.3)에는 꼭 사용자가 언제나 유입할 수 있는 사이트를 만들고 싶었고, 프로젝트 아이디어를 생각하던 도중 서찬(서희찬)님의 인천국제공항 승객 현황이라는 사이트를 발견하게 되었습니다. 사이트 상단에는 사용한 공공데이터 링크가 걸어져있었고, 저도 공공데이터를 활용해서 사이트를 만들어보자는 생각을 가지게 되었습니다.
그 사이트가 김해국제공항의 모든 정보를 한번에 볼 수 있는 사이트 airport-pus가 되었습니다.

• 사이트 바로가기

1. 공항X 지하철일뻔 했다?!

처음에 공공데이터에서 찾았을 때 공항에 대한 쟈료가 정말 많았지만 희찬님께서 이미 인천공항과 관련된 서비스를 개발하셨기 때문에 저는 공항과 관련되어서는 개발하면 안되겠다고 생각했습니다. 그러고 찾게된 정보들이 서울 지하철과 관련된 정보였습니다.
서울지하철 관련 서비스는 이번역은, 레일-블루, 카카오맵, 네이버, 네이버 지도 등 정말 많았습니다. 하지만 이 서비스들에서도 UI적 단점이 있었기에 모든 단점을 보완한 서비스를 개발하려고 했습니다.

아이디어를 가지고, 프론트엔드 1, 백엔드 1명과 팀을 구성하게 되었습니다. (합: 프2, 백1)

문제는 지금부터였습니다. 백엔트 팀원이 공공데이터 API를 확인해보고 이 데이터만으로는 정확히 어떤 역에 00분00초 후에 도착한다라고 정의하지 못한다고 했습니다. 추가로 팀은 역간 소요되는 시간 API를 찾았고, 더 심각한 문제를 발견했습니다.

1. 서울교통공사 (Seoul Metro)

• 1호선 (서울교통공사 구간: 서울역~청량리 / 나머지는 코레일 운영)
• 2호선 (전 구간)
• 3호선 (서울교통공사 구간: 대화~오금 / 나머지는 코레일 운영)
• 4호선 (서울교통공사 구간: 당고개~남태령 / 나머지는 코레일 운영)
• 5호선 (전 구간)
• 6호선 (전 구간)
• 7호선 (전 구간)
• 8호선 (전 구간)

2. 한국철도공사 (코레일, Korail)

• 1호선 (서울교통공사 구간 제외: 병점~소요산, 인천~광명)
• 3호선 (지축~대화)
• 4호선 (남태령~오이도)

3. 서울시메트로9호선 (서울9호선운영)

• 9호선 (개화~중앙보훈병원)

위 자료를 보면 호선별 또는 역별로 관리하는 기관이 달랐습니다.
팀이 사용하고자한 공공데이터는 서울교통공사에서 개발을 했고, 그 말은 즉, 서울교통공사 관리가 아닌 역, 호선은 API에 없었습니다. 이런,, 망했네

2. 김해국제공항 개발 여부

결국 팀원과 의논한 끝에 김해국제공항 서비스를 만들기로 결정했습니다.
개발하기 전 공항 서비스를 먼저 개발하고, 출시하신 희찬님께 김해공항으로 서비스를 개발해도 되는지 여쭤보자는 생각을 가졌고, 결과는 완전 해피였습니다. 개발을 진행해도 되고, 개발이 끝나면 인스타 스토리를 통해 홍보까지 해주신다고!!

3. 디자인 < 개발

그동안 제가 개발한 모든 서비스는 디자인 -> 개발과 같은 형식으로 진행이 되었습니다. 하지만 airport-pus에서는 차트나 표를 넣어야하는 부분이 많았기에 피그마를 통해 간단한 틀만 잡고, 개발을 진행했습니다. 사실 차트를 피그마에서 그려봤지만 너무 못생겼습니다...
디자인이 없으니 팀원들과 부분부분 요소들에 대해 의논하는 시간이 많았고, 더 신중했었던 것 같습니다.

4. 효율적인 기술

그동안의 프로젝트와 가장 달랐던 점은 '효율적인 기술'이였습니다. 프로젝트를 시작할 때 제가 규민이 (프론트엔드 팀원)에게 기업이 쓰고 있는 좋은 기술들 다 써보자라고 말했습니다. 이제 곧 취업을 앞둔 고3이였기에 경쟁력을 가지고 싶었습니다.

도입한 효율적인 기술은 아래와 같습니다.

• Skeleton UI (isLoading)
• useSWR
• chart.js
• useEffect Hook + inputValue
• Infinite Scroll (무한스크롤)
• pwa

Skeleton UI는 지금 여러분이 보고 있는 벨로그에도 적용 되어있습니다. 아래 영상을 보면
'아 이거군아'라고 말하실겁니다.

Skeleton UI를 추가하면 사용자에게 더 좋은 UX를 제공할 수 있어 도입하였습니다. 구현 방법은 여러가지가 있었고, 저는 isLoading 함수를 통해 isLoading이 true면 로딩 중 False면 로딩 끝으로 생각해 False가 반환되면 화면이 렌더링 되도록 구현하였습니다.

useSWR은 실시간 정보가 중요한 서비스에서 많이 사용하는 라이브러리입니다. 간단하게 설명하자면 새로고침 버튼을 누르지 않아도 API에서 정보가 바뀌면 실시간으로 업로드가 됩니다.
airport-pus에서는 출/도착 주기장 부분에 적용 되었습니다. 데이터의 가장 상단 정보를 보면 자동으로 바뀌는 것을 보실 수 있습니다.
출/도착 주기장은 실시간 정보이고, 비행기 탑승시 중요한 정보이기에 useSWR을 추가하였습니다.

chart.js는 npm 라이브러리입니다. 차트를 직접적으로 개발하지 않고, 라이브러리를 사용한 이유는 단순한 라이브러리로써 끝이 아니라 색상, 점 크기 및 에니메이션, 점 위에 마우스를 올리면 세부 정보 표시 가능 듯 엄청난 커스텀 기능을 제공하고 있었습니다.
작년 학교 위키인 부마코인에 선배들이 사용한 것을 보고, 깔끔하고, 그 어느 차트보다 좋다 생각해 airport-pus에서도 chart.js를 사용했습니다.

useEffect Hook + inputValue은 항공편명 검색에 사용되었습니다. 서비스에서 검색은 항공편명+Enter로 구현한 것이 아닌 검색창에 a로 검색하면 a로 시작하는 항공편명이 나오며 글자를 입력하면 입력할수록 검색한 항공편명과 관련없는 정보는 화면에 렌더링 되지 않습니다. 이 기능이 가져오는 api에서 항공편명이 있었기 때문에 가능했고, useEffect를 사용해 항공편명과 비교하는 방식으로 개발하였습니다.

Infinite Scroll(무한 스크롤)은 많은 데이터를 불러올 때 로딩 시간을 줄이기 위해 사용하였습니다. airport-pus에서는 출/도착 주기장 정보를 가져오는 데 활용되었습니다. 적용 전 에는 최대 60개 정도의 데이터만 불러와서 굳이 필요할까 싶었지만, 적용해보니 초기 렌더링 속도가 크게 줄어드는 효과를 보였습니다.

pwa 도입은 서비스를 개발하면서 스토어 등록에도 도전해보고 싶었습니다. 하지만 저희 팀이 Next.js로 개발을 진행하다 보니 플레이스토어나 앱스토어에 등록하는 과정이 쉽지 않았습니다. 얼마 전 졸업한 우빈이형에게 "사용자가 다운로드해 앱처럼 사용할 수 있도록 하려면 어떻게 해야 할까요?"라고 하소연했더니 PWA 기술을 추천해주었습니다. 검색해보니 정말 앱처럼 다운로드도 할 수 있다는 걸 알게되었고, 덕분에 서비스에 PWA를 적용할 수 있었습니다. PWA는 스토어에 등록하지 않아도 크롬이나 사파리 브라우저에서 바로 다운로드가 가능했습니다.

5. 배포...할 때 돈쓰라구요?

프로젝트에서 최대한 돈을 쓰지 않고(무료로) 배포를 해보기로 다짐하였습니다.
먼저, 저는 Vercel에서 베포를 시도해보았지만 깃허브 조직 베포량을 모두 써서 베포할 수가 없었습니다. 부계정을 만들어 시도 했지만 14일로 베포 기한 제한이 있었습니다.
두 번째, 네트리파이에서 베포를 성공했습니다. 하지만 네트리파이 서버는 한국이아닌 해외에 있다보니 서비스 렌더링 속도가 엄청 느렸고, 매핑한 로고들이 뜨는데 까지는 20초가 넘게걸렸습니다.

네트리파이로 배포는 했지만 사용자들에게 불편함을 줄거라 생각하고, 네트리파이 마저 포기했습니다.

이때 마침 규민이(프론트엔드 팀원)가 render.com이라는 걸 저에게 알려주었습니다. 큰 기대는 없었지만 이게 왠걸 완전 무료였습니다. 그리고 구매한 도메인까지 연결할 수 있는 엄청난 서비스였습니다.

하지만 이 엄청난 서비스도 문제가 있었습니다. 배포하고 아침에 자고 일어나니 링크에 들어가는 시간이 50초정도 걸렸습니다. 검색해보니 사용자 유입이 없으면 서버가 자동으로 절전이 됩니다!! 라고 명확하게 나와있었습니다.

구글에 검색을 해보았고, render.com에 있는 Cron Job을 사용하면 문제가 해결된다.는 말을 찾게되었습니다. 아쉽지만 돈이 든다는 점에서 다른 방법을 찾기로 결정하게 되었습니다.

이제는 정말 포기하고 돈을 지불할려고 고민하던 찰나 GPT한테 물어보기로 결정했습니다. GPT는 uptimerobot이라는 사이트를 사용하면 문제가 해결된다. 라고 말해주었습니다.

uptimerobot은 설정한 시간 단위로 지정한 사이트를 모니터링 해주는 사이트였습니다. 그러면 왜? 이걸 쓰면 해결되냐구요???!

모니터링을 하기위해서 지정한 시간 단위로 사이트에 트래픽을 발생시켜주기 때문이였습니다. 사용자 유입 자체가 사용자 트래픽이였고, uptimerobot이 사용자 대신 5분단위로 트래픽을 발생시켜주었기에 GPT가 추천해준 것이였습니다. GPT 똑똑해

정말 다행히도 uptimerobot에 사이트를 등록하니 다시는 서버가 자동 절전되는 문제는 발생하지 않았습니다!!! 야호

6. 사이트 소개

처음 사이트에 들어가게 되면 위와 같은 화면이 나오게 됩니다. 타이틀에 명시한 것과 같이 주차장 혼잡도, 예상 주차요금 조회를 상단에서 알려주고, 하단에서는 구간별 혼잡도와 시간별로 저장한 구간별 그래프가 나와있습니다.

여기서 공항 주차장 혼잡도와 주차요금 조회는 고정입니다!!

김해공항에서 출발하는 항공편 정보입니다.

공항에 가면 커다란 화면에 나와있어 내 항공편은 어디있지? 하며 찾고, 주기적으로 본 주기장을 이제 데스크탑과 모바일에서 볼 수 있고, 어렵게 항공편 찾지 않고, 검색으로 쉽게 찾을 수 있습니다!

김해공항에 도착하는 항공편 정보입니다.

출발 항공편 정보와 반대로 김해 공항에 도착하는 항공편 정보입니다. 이 정보가 있다면 가족, 친구를 맞이할 때 예상 시간을 보고, 공항에 도착하면 덜 기다릴 수 있습니다!!

글 읽어 주셔서 정말 감사하고,

https://www.airport-pus.kr/

많이많이 방문해주세요!!!

+5월 14일

기존에 사용하던 프론트(render.com) + 백엔드 (Heroku) 서버를 5월 14일 AWS로 바꾸면서 각 데이터 로딩 속도가 매우 빨라졌습니다.