Airport Dashboard
인천국제공항의 실시간 혼잡도와 주차 정보를 한눈에 보여주는 모바일 대시보드. 마이리얼트립의 플라이보드 사례를 보고 직접 재현한 프로토타입입니다.
Overview
프로젝트 개요
마이리얼트립 기술 블로그에 공개된 "플라이보드 — AI로 4일 만에 만든 실시간 공항 정보 서비스" 글을 읽고, 같은 결과물을 AI 툴 파이프라인으로 직접 재현해 본 프로젝트입니다.
고객 여정(공항 도착 → 출국) 중 필요한 정보를 한 화면에 모아 제공하는 것이 핵심입니다. data.go.kr의 공공 API(여객 혼잡도, 주차 현황)를 활용하여 Perplexity로 가이드를 작성하고, Gemini CLI로 초안을 생성한 뒤, v0.dev와 Cursor로 UI를 완성하는 방식으로 이틀 만에 완성했습니다.
Architecture
프로젝트 구조
mobile-airport-dashboard/
├── app/
│ ├── page.tsx # 메인 페이지 (탭 라우팅)
│ ├── layout.tsx # 루트 레이아웃
│ └── api/
│ ├── congestion/ # 혼잡도 프록시 API
│ └── parking/ # 주차 프록시 API
├── components/
│ ├── FlightCard.tsx # 항공편 정보 카드
│ ├── CongestionSection.tsx # 혼잡도 섹션 (터미널/출국장 전환)
│ ├── CongestionChart.tsx # Chart.js 바 차트
│ ├── ParkingSection.tsx # 주차장 현황
│ └── Navigation.tsx # 탭 네비게이션
└── ecosystem.config.js # PM2 프로세스 관리API 프록시 레이어
Next.js API Routes로 data.go.kr 공공 API를 프록시합니다. API 키를 서버 사이드에서 관리하고, 5분 캐시로 요청을 최적화합니다.
CongestionChart
Chart.js Bar 차트로 24시간 혼잡도를 시각화합니다. 원활/보통/혼잡/매우혼잡 4단계 색상으로 직관적으로 표시하고, 터미널·출국장별 데이터를 한 번 로드 후 필터링으로 전환합니다.
Key Features
주요 기능
공항 혼잡도 시각화
T1/T2 터미널별 24시간 혼잡도를 바 차트로 실시간 표시합니다. 입국장+출국장 합산 데이터를 4단계 색상(원활~매우혼잡)으로 구분합니다.
출국장별 혼잡도
T1 4개, T2 2개 출국장을 개별 선택하여 혼잡도를 확인합니다. 출국장마다 다른 기준(T1: 175명, T2: 250명 단위)으로 레벨을 산정합니다.
주차장 실시간 현황
단기/장기/주차타워별 이용중·이용가능·전체 주차면수를 표시합니다. 주차율 프로그레스 바와 여유/보통/혼잡 상태 배지로 직관적으로 안내합니다.
항공편 정보 카드
항공사, 편명, 출발/도착 공항, 터미널, 게이트, 수하물 수취대 정보를 한 장의 카드로 요약하여 보여줍니다.
Flow
제작 흐름
마이리얼트립 플라이보드 블로그 글을 읽고 필요한 공공 API 확보
API 데이터 구조를 분석하고 웹 페이지 구성 가이드 작성
HTML 초안 생성 후 v0.dev로 모바일 최적화 UI 디자인
Next.js 프로젝트로 전환, API 프록시 및 차트 컴포넌트 구현
PM2로 백그라운드 실행, ngrok으로 외부 URL 공개
Gallery
스크린샷
Comments
댓글
불러오는 중...