공항 혼잡도 문제

해외여행 인기가 계속 오를 때마다, 공항 속 인파로 체크인이 힘들다는 뉴스가 자주 보도되고 있습니다.
공항에 도착하기 전 미리 인파를 파악할 수 있다면 어떨까요? 이러한 문제의식에서 출발하여 Airport-PUS를 개발하게 되었습니다.

프로젝트 배경

이 프로젝트는 겨울방학 중 친구의 협업 제의로 시작되었습니다.
저희는 실사용자를 유치할 수 있는 실용적인 서비스를 개발하고자 했습니다.
초기에는 지하철 환승 안내 서비스를 기획했으나, 서울의 복잡한 지하철 시스템(환승, 급행, 노선별 열차 등)을 완벽히 구현하는 데 한계를 느끼고 이에 대안으로 다른 교통 서비스를 모색하게 되었습니다.

프로젝트 선정 과정

여러 논의 끝에 김해국제공항 서비스를 개발하기로 결정했습니다.
이 서비스는 복잡한 시스템 없이 이륙, 착륙, 혼잡도, 주차장 요금 계산 등 명확하고 간결한 기능만을 필요로 했기 때문에 효율적으로 개발할 수 있을 것으로 판단했습니다.

역할 분담

디자인과 퍼블리싱은 팀원인 희성이 주도적으로 담당했습니다.
저는 개인 프로젝트를 마무리한 후 합류하여, 주로 기능 개발에 집중했습니다. 백엔드는 팀원인 승빈이 담당했습니다.

기술 스택 및 구현 방식

Airport-PUS 개발에 활용된 주요 기술들을 소개합니다:

1. Skeleton UI (isLoading)

사용자 경험(UX) 향상을 위해 Skeleton UI를 도입했습니다.
구현 방식으로는 isLoading 상태 변수를 활용했습니다. 이 변수가 true일 때는 로딩 중 상태를, false일 때는 로딩 완료 상태를 표시합니다.
데이터 로딩이 완료되면 실제 콘텐츠가 렌더링되도록 설계했습니다.

2. useSWR

useSWR은 실시간 데이터 갱신이 중요한 서비스에서 널리 활용되는 라이브러리입니다.
이 라이브러리의 핵심 기능은 페이지 새로고침 없이 API 데이터가 변경될 때 자동으로 UI를 업데이트하는 것입니다.
Airport-PUS에서는 특히 출/도착 주기장 정보 표시에 이 기술을 적용했습니다.

useSWR 적용

위 이미지에서 볼 수 있듯이, 데이터의 최상단 정보가 자동으로 갱신됩니다.

3. chart.js

데이터 시각화를 위해 chart.js 라이브러리를 선택했습니다. 이 라이브러리를 채택한 이유는 다음과 같습니다:

색상, 점 크기, 애니메이션 등 다양한 요소의 세밀한 커스터마이징이 가능합니다.
데이터 포인트에 마우스를 올리면 상세 정보가 표시되는 직관적인 인터랙션을 제공합니다.
간결한 API로 복잡한 차트도 쉽게 구현할 수 있습니다.

학교 위키 프로젝트인 부마코인에서 선배들이 활용한 사례를 참고했으며, 그 세련된 시각적 효과와 사용성에 감명받아 Airport-PUS에도 도입했습니다.

4. useEffect Hook + inputValue (항공편명 검색)

검색 기능은 전통적인 "검색어 입력 후 엔터" 방식이 아닌, 실시간 필터링 방식으로 구현했습니다.
사용자가 검색창에 a를 입력하면 즉시 a로 시작하는 항공편명만 표시되며, 추가 입력에 따라 검색 결과가 더욱 정교하게 필터링됩니다.

이 기능은 API에서 제공하는 항공편명 데이터를 활용했으며, useEffect 훅을 통해 입력값 변화에 따른 실시간 비교 및 필터링을 구현했습니다.

항공편명 검색

5. Infinite Scroll (무한 스크롤)

대량의 데이터를 효율적으로 로드하기 위해 무한 스크롤 기법을 도입했습니다.
Airport-PUS에서는 특히 출/도착 주기장 정보 조회 시 이 기술을 활용했습니다.

초기에는 데이터 양이 많지 않아(약 60개) 무한 스크롤이 불필요할 것으로 예상했으나, 실제 적용 결과 초기 로딩 속도가 현저히 개선되는 효과를 확인했습니다.

6. PWA (Progressive Web App)

앱 스토어 등록을 고려했으나, Next.js 기반으로 개발된 프로젝트의 특성상 네이티브 앱 변환 과정이 복잡했습니다.

이에 대한 대안으로, 졸업한 선배에게 조언을 구했고 PWA 기술을 추천받았습니다.
PWA는 웹 애플리케이션이지만 네이티브 앱과 유사한 사용자 경험을 제공하며, 별도의 스토어 등록 없이도 크롬이나 사파리 브라우저에서 직접 설치가 가능합니다.

이 기술 덕분에 사용자들은 Airport-PUS를 일반 앱처럼 설치하고 사용할 수 있게 되었습니다.

배포 과정과 문제 해결

초기 배포 시도: Netlify

처음에는 Netlify를 통해 배포를 진행했습니다.
그러나 Netlify의 서버가 해외에 위치해 있어 한국 사용자들에게는 현저한 속도 저하가 발생했습니다.
특히 로고 및 이미지 로딩에 20초 이상이 소요되어 사용자 경험이 크게 저하되었습니다.

Render.com으로의 전환

속도 문제 해결을 위해 최종적으로 Render.com으로 배포 플랫폼 을 변경했습니다.
그러나 여기서도 예상치 못한 문제가 발생했습니다.

배포 후 다음 날 아침, 서비스 접속 시 약 50초라는 비정상적인 로딩 시간이 확인되었습니다.
원인을 조사한 결과, Render.com의 "일정 시간 트래픽이 없으면 서버가 자동으로 절전 모드로 전환"되는 정책 때문이었습니다.

AI의 도움: UptimeRobot 활용

비용 지출을 고민하던 중, GPT에 해결책을 문의했고, UptimeRobot이라는 서비스를 추천받았습니다.

UptimeRobot은 설정한 주기마다 지정 웹사이트를 모니터링하는 서비스로, 이 과정에서 발생하는 트래픽이 서버의 절전 모드 진입을 방지합니다.

이 서비스를 적용한 결과, 서버 절전 문제가 완벽히 해결되어 사용자들에게 안정적인 접속 환경을 제공할 수 있게 되었습니다.

방문 안내

김해국제공항을 이용하시는 분들께 도움이 되길 바라며, 아래 링크로 서비스를 이용해 보세요:

www.airport-pus.kr

많은 이용과 피드백 부탁드립니다! ✈️

[프젝] Airport-PUS