# 서론 – “손을 흔들면 비행기가 보인다!”

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 (

    <>

      <video ref={videoRef} style={{display:'none'}} />

      <canvas ref={canvasRef} width={640} height={480} />

    </>

  );

}

• 캔버스에 터치리스 인터페이스를 구현해 손동작에 따라 비행 정보가 자동으로 업데이트됩니다.

# 결론 – 직접 만들어 보는 손동작 기반 AI 비행 추적기

이번 포스트를 통해 AI 비행 추적기를 손쉽게 구현하는 방법을 살펴보았습니다. 복잡한 코딩 지식 없이도 MediaPipe와 OpenAI, FlightAware API만 있으면 누구나 핸드 제스처로 비행 정보를 제어할 수 있습니다.

행동 유도: 지금 바로 프로젝트 폴더를 만들고, 위 단계대로 따라해 보세요. 구현이 끝나면 친구들에게 공유하고, 더 다양한 제스처를 추가해 나만의 터치리스 인터페이스를 완성해 보는 건 어떨까요? 댓글에 여러분의 결과물을 남겨주시면, 함께 피드백하고 개선 아이디어를 나눌 수 있습니다!

---

키워드: AI 비행 추적기, 핸드 제스처, 터치리스 인터페이스.