# 서론 – “손으로 비행기를 잡는다”?

2025년, 인공지능(AI) 기술이 일상에 스며들면서 터치리스 인터페이스가 새로운 표준이 되고 있습니다.

하지만 “손으로 비행기를 추적한다”는 말은 아직도 많은 사람에게는 낯선 개념이죠.

이번 포스팅에서는 AI 비행 추적기를 손 제스처로 제어하는 프로젝트를 초보자도 따라 할 수 있게 단계별로 풀어봅니다.

왜 손 제스처가 필요할까?

• 위생 문제: 코로나 이후 비접촉 조작이 선호됩니다.

• 직관성: 손 움직임 하나로 복잡한 UI를 대체합니다.

• 접근성: 물리적 마우스·키보드가 어려운 환경에서도 사용 가능하죠.

이제 직접 “손으로 비행기를 잡고, 움직이는” 경험을 만들어 보세요!

# 1️⃣ 프로젝트 개요 – 어떤 기술을 쓸까?

| 요소 | 설명 | 선택 이유 |

|------|------|-----------|

| AI 모델 | MediaPipe Hands (구글 오픈소스) | 실시간 손 랜드마크 추출, 경량화 |

| 프로그래밍 언어 | Python + Flask | 빠른 프로토타입, 웹 기반 UI |

| 지도 API | Google Maps JavaScript API | 풍부한 지도 데이터와 실시간 항공기 위치 |

| 데이터 소스 | OpenSky Network 실시간 ADS‑B | 무료로 전 세계 항공기 정보를 제공 |

위 구성은 초보자도 쉽게 설치하고 실행할 수 있도록 설계되었습니다.

# 2️⃣ 환경 설정 – 준비물부터 설치까지

1. Python 3.9 이상 설치

bash

   sudo apt-get update

   sudo apt-get install python3 python3-pip

2. 가상환경 만들기

bash

   python3 -m venv venv

   source venv/bin/activate

3. 필수 패키지 설치

bash

   pip install mediapipe opencv-python flask requests

4. Google Maps API 키 발급 – 구글 클라우드 콘솔에서 “Maps JavaScript API”를 활성화하고 키를 복사합니다.

팁: API 키는 config.py 파일에 GOOGLE_MAPS_KEY = 'YOUR_KEY' 형태로 저장하면 보안에 유리합니다.

# 3️⃣ 손 제스처 인식 구현 – MediaPipe 활용하기

MediaPipe Hands는 21개의 손 랜드마크를 30fps 이상 실시간으로 반환합니다. 아래 코드는 웹캠 영상을 받아 손 좌표를 추출하고, ‘손을 펴면 확대, 손을 모으면 축소’ 동작을 매핑합니다.

python

import cv2, mediapipe as mp

mp_hands = mp.solutions.hands

hands = mp_hands.Hands(max_num_hands=1, min_detection_confidence=0.7)

cap = cv2.VideoCapture(0)

while cap.isOpened():

    ret, frame = cap.read()

    if not ret: break

    rgb = cv2.cvtColor(frame, cv2.COLOR_BGR2RGB)

    result = hands.process(rgb)

    if result.multi_hand_landmarks:

        hand = result.multi_hand_landmarks[0]

        # 손목(0)과 중지 끝(12) 거리 계산

        wrist = hand.landmark[0]

        middle_tip = hand.landmark[12]

        distance = ((wrist.x - middle_tip.x)**2 + (wrist.y - middle_tip.y)**2)**0.5

        # 거리 기준으로 확대/축소 신호 전송

        if distance > 0.2:

            gesture = 'zoom_in'

        else:

            gesture = 'zoom_out'

        # 여기서 Flask 서버에 gesture 전송

    cv2.imshow('Hand', frame)

    if cv2.waitKey(1) & 0xFF == 27: break

cap.release()

cv2.destroyAllWindows()

위 코드를 실행하면 손 모양에 따라 gesture 변수가 'zoom_in' 혹은 'zoom_out' 값을 가집니다. 이제 이 값을 Flask를 통해 웹 페이지에 전달하면 지도 UI를 제어할 수 있습니다.

# 4️⃣ Flask 서버와 지도 연동 – 손 제스처가 지도에 반영되다

app.py 파일을 만들고 아래와 같이 작성합니다.

python

from flask import Flask, render_template, jsonify, request

import threading, time

app = Flask(__name__)

# 전역 변수: 현재 제스처 상태

current_gesture = None

@app.route('/')

def index():

    return render_template('index.html')   # 지도와 UI가 들어간 HTML

@app.route('/gesture', methods=['POST'])

def receive_gesture():

    global current_gesture

    data = request.get_json()

    current_gesture = data['gesture']

    return jsonify(status='ok')

@app.route('/status')

def status():

    return jsonify(gesture=current_gesture)

if __name__ == '__main__':

    app.run(debug=True)

templates/index.html 은 Google Maps와 간단한 JavaScript 로직을 포함합니다.

html

<!DOCTYPE html>

<html>

<head>

  <meta charset='utf-8'>

  <title>손 제스처 비행 추적기</title>

  <script src='https://maps.googleapis.com/maps/api/js?key={{ key }}&libraries=visualization'></script>

  <style>#map{height:90vh; width:100%;}</style>

</head>

<body>

<div id='map'></div>

<script>

let map = new google.maps.Map(document.getElementById('map'), {

  center: {lat: 37.5665, lng: 126.9780},

  zoom: 5

});

// 실시간 항공기 표시 (OpenSky API 예시)

function loadFlights(){

  fetch('https://opensky-network.org/api/states/all')

    .then(r=>r.json())

    .then(data=>{

      data.states.forEach(s=>{

        new google.maps.Marker({

          position:{lat:s[6], lng:s[5]},

          map,

          title:s[1]

        });

      });

    });

}
loadFlights();

// 제스처에 따라 지도 확대/축소

setInterval(()=>{

  fetch('/status')

    .then(r=>r.json())

    .then(d=>{

      if(d.gesture==='zoom_in'){

        map.setZoom(map.getZoom()+1);

      }else if(d.gesture==='zoom_out'){

        map.setZoom(map.getZoom()-1);

      }

    });

},500);

</script>

</body>

</html>

이제 손을 펴면 지도 확대, 손을 모으면 축소가 실시간으로 동작합니다. 비행기 마커는 OpenSky에서 5초마다 업데이트되니, 실제 항공 흐름을 눈으로 확인할 수 있습니다.

# 5️⃣ 프로젝트 확장 아이디어 – 더 풍부한 경험 만들기

| 아이디어 | 구현 방법 | 기대 효과 |

|----------|----------|-----------|

| 다중 제스처 (예: 손가락 2개 → 특정 항공편 고정) | MediaPipe 손가락 개수 판단 로직 추가 | 사용자 맞춤형 정보 제공 |

| 음성 피드백 (제스처 인식 시 “확대합니다”) | Google Text‑to‑Speech API 연동 | 접근성 향상 |

| AR 모드 (스마트폰 카메라에 비행기 라인 오버레이) | ARCore 혹은 WebXR 활용 | 몰입감 높은 시각화 |

위와 같은 확장은 AI 비행 추적기를 단순 도구가 아닌 스마트 여행 어시스턴트로 발전시킬 수 있습니다.

# 결론 – 손끝에서 시작되는 AI 비행 추적기의 미래

이번 포스팅을 통해 AI 비행 추적기와 손 제스처 제어, 터치리스 인터페이스라는 세 가지 핵심 키워드를 연결해 보았습니다.

1. MediaPipe Hands 로 손을 인식하고,

2. Flask 로 실시간 제스처를 웹에 전달하며,

3. Google Maps 와 OpenSky 데이터를 결합해 비행기를 시각화합니다.

시작은 간단하지만, 위에서 제시한 확장 아이디어를 적용하면 맞춤형 항공 정보 서비스를 직접 만들 수 있습니다.

지금 바로 코드를 복제하고, 손을 들어 당신만의 터치리스 비행 추적기를 실행해 보세요!

행동 유도: 레포지토리를 포크하고, README.md에 있는 설치 가이드를 따라 실행해 보세요. 실행 후 느낀 점이나 개선 아이디어를 댓글로 남겨주시면, 다음 업데이트에 반영하겠습니다. 🚀