# AI 시대의 혁신, 손동작으로 조작하는 터치리스 비행 추적기 만들기 (55자) # # 서론 – “손을 흔들면 비행기가 보인다!” 2025년 AI 기술이 일상에 스며들면서, **터치리스 인터페이스**가 새로운 표준이 되고 있습니다. 이번 포스트에서는 *Advent of AI 2025* 시리즈 중 Day 5에서 소개된 **핸드 제스처** 기반 비행 추적기 프로젝트를 한국어 초보자도 쉽게 따라 할 수 있도록 풀어봅니다. 손을 살짝 움직이는 것만으로 전 세계 항공편을 실시간으로 확인할 수 있다면, 여행 준비나 공항 대기 시간이 얼마나 편리해질까요? # # 1️⃣ 프로젝트 개요 – AI와 컴퓨터 비전이 만나 만든 비행 추적기 - **목표**: 손동작만으로 비행 정보를 조회하고, 화면에 실시간으로 표시하는 웹 애플리케이션 구현 - **핵심 기술** 1. **MediaPipe Hands** – 손의 21개 랜드마크를 실시간으로 추출 2. **OpenAI GPT‑4 API** – 사용자의 제스처를 자연어 명령으로 변환 3. **FlightAware API** – 전 세계 항공편 데이터를 제공 - **SEO 키워드**: *AI 비행 추적기*, *핸드 제스처*, *터치리스 인터페이스* # # 2️⃣ 환경 설정 – 초보자도 10분이면 준비 완료 1. **Node.js 설치** ``` bash brew install node # macOS 예시 ``` 2. **프로젝트 폴더 생성 & 초기화** ``` bash mkdir touchless-flight-tracker && cd touchless-flight-tracker npm init -y ``` 3. **필수 패키지 설치** ``` bash npm install @mediapipe/hands @tensorflow/tfjs-node express axios dotenv ``` 4. **API 키 준비** - **OpenAI**와 **FlightAware**에서 각각 API 키를 발급받아 `.env` 파일에 저장 ``` env OPENAI_API_KEY=your_openai_key FLIGHTAWARE_KEY=your_flightaware_key ``` # # 3️⃣ 손동작 인식 구현 – MediaPipe Hands 활용법 ``` js const hands = new Hands({ locateFile: (file) => `https://cdn.jsdelivr.net/npm/@mediapipe/hands/${file}` }); hands.setOptions({ maxNumHands: 1, modelComplexity: 1, minDetectionConfidence: 0.8, minTrackingConfidence: 0.8 }); ``` - **핸드 제스처 정의**: - **오픈 손** → “전체 항공편 보기” - **엄지와 검지 피스** → “특정 항공편 검색” - **손을 위로 올리기** → “다음 페이지” 각 제스처를 인식하면 해당 동작을 텍스트 명령으로 변환하고, GPT‑4에 전달해 자연어 처리 결과를 받습니다. # # 4️⃣ 비행 정보 가져오기 – FlightAware API 연동 ``` js async function getFlightInfo(icao) { const response = await axios.get(`https://flightaware.com/api/flight/${icao}`, { headers: { 'x-apikey': process.env.FLIGHTAWARE_KEY } }); return response.data; } ``` - 사용자가 “대한항공 620편”을 손동작으로 요청하면, **AI 비행 추적기**는 해당 항공편의 현재 위치, 예정 도착 시간, 지연 여부 등을 실시간으로 반환합니다. # # 5️⃣ 프론트엔드 구현 – 손동작과 화면을 연결하기 React와 Canvas를 이용해 손 랜드마크와 비행 정보를 시각화합니다. ``` jsx function App() { const videoRef = useRef(); const canvasRef = useRef(); useEffect(() => { // MediaPipe Hands와 비디오 스트림 연결 const camera = new Camera(videoRef.current, { onFrame: async () => { await hands.send({ image: videoRef.current }); }, width: 640, height: 480 }); camera.start(); }, []); return ( <>