[TouchDesigner Vol.5] 인터랙티브 디자인: MediaPipe 맛보기

INTRO 왜 하필 ‘MediaPipe’일까?

멋진 미디어 파사드나 관객의 움직임에 반응하는 전시를 보면 ‘나도 내 제스처에 반응하는 멋진 공간이나 그래픽을 만들고 싶다’ 생각합니다. 하지만 막상 시작하려 하면 비싼 키넥트(Kinect) 센서, LiDAR, 혹은 복잡한 카메라 세팅과 고난도의 개발 지식 앞에서 좌절하곤 하죠.

미디어파이프의 시그니처 ‘손 랜드마크’ 이미지 (0~20번 숫자가 매겨진 클래식 가이드) (출처: MediPipe)

MediaPipe는 구글에서 개발한 오픈소스 프레임워크로, 이 모든 장벽을 허물어줍니다. 노트북에 달린 기본 웹캠 하나만 있으면 끝이거든요. 딥러닝이나 복잡한 수학적 연산을 몰라도, 인공지능이 알아서 사람의 손가락 마디, 얼굴 표정, 몸의 관절 위치를 실시간 (X, Y, Z) 좌표로 계산해 줍니다. 우리는 그저 이미 잘 준비된(Pre-trained) 모델을 가져다 쓰기만 하면 되는 것이죠!

“이걸로 도대체 뭘 할 수 있는데?” 하시는 분들을 위해, 우리 주변과 건축/공간/미디어아트 분야에서 쓰이는 직관적인 예시들을 소개합니다.

화려한 입자(Particle)들이 사람의 손길을 따라 실시간으로 일렁이는 미디어아트 전시 레퍼런스 이미지 (출처: @nicholaspjm)

* 인터랙티브 파라메트릭 디자인: 관객이 손을 뻗거나 움직이면, 벽면에 투사된 디지털 입자들이 사람을 피해 움직이거나 공간의 파라메트릭 그래픽이 실시간으로 일렁이는 전시.

사람의 얼굴에 반응하여 물리적으로 움직이는 키네틱 파사드, MEGAFON Pavillion (출처: Metalocus)

키네틱 건축 & 공간 제어: 사람의 시선이나 손동작을 인식하여 자동으로 열리고 닫히는 키네틱 루버(Louver) 시스템, 혹은 보행자의 걸음걸이에 맞추어 밝기와 색상이 동기화되는 인터랙티브 조명.

비접촉식 인터페이스(UI/UX): 허공에서 손가락을 짚는 제스처만으로 화면의 가상 버튼을 누르거나 키오스크를 조작하는 프로토타입.

이처럼 MediaPipe는 상상 속 아이디어를 현실 공간과 매끄럽게 연결해 주는 가장 훌륭한 통로입니다.

어려운 코딩이나 로직은 전부 생략합니다. 오늘은 딱 ‘다운로드하고 내 손가락 데이터 확인하기’까지만 달성해 봅시다.

Step 1. 파일 다운로드하기

우선 실시간 비주얼 환경인 터치디자이너(TouchDesigner)에서 MediaPipe를 곧바로 쓸 수 있도록 도와주는 외부 플러그인(컴포넌트) 파일이 필요합니다.

터치디자이너용 MediaPipe 컴포넌트(.tox)를 받을 수 있는 깃허브 릴리즈 페이지 캡처

오픈소스 공유 플랫폼(GitHub 등)의 공식 릴리즈 페이지에 접속합니다

(TD Plugin Credit: @torin_tb (GitHub: torinmb)

밑에 Assets에서 release.zip 파일을 다운로드합니다.

Step 2. 환경 구성 및 웹캠 연결

터치디자이너를 열어줍니다. Step 1에서 다운로드한 MediaPipe 컴포넌트 파일을 작업 창으로 드래그 앤 드롭하여 가져옵니다.

웹캠 영상 노드를 MediaPipe 노드의 인풋(Input)에 슥 연결해 줍니다. 그럼 준비가 끝났습니다! 이제 카메라를 향해 손을 흔들어 보세요.

터치디자이너 내부에서 내 손을 인식하여 손가락 마디마디마다 스켈레톤 라인과 네온 컬러 점들이 착 달라붙어 움직이는 실제 구동 화면

화면 속 내 손가락 마디마디마다 번호가 매겨진 디지털 점(Landmarks)들이 자석처럼 착 달라붙어 움직이는 것을 볼 수 있습니다. 이후 CHOP (초록) 노드들을 사용해 구체적으로 움직임들을 데이터화 할 수 있습니다.

화면을 반으로 나누어 왼쪽에는 손 비주얼(TOP), 오른쪽에는 X,Y,Z 수치 데이터(CHOP)가 다다닥 바뀌는 대조 캡처 화면

TOP (Texture Operators 보라): 웹캠으로 들어오는 눈에 보이는 이미지 데이터

CHOP (Channel Operators 초록): 미디어파이프가 분석해 준 손가락 마디의 실시간 숫자(좌표) 데이터

터치디자이너는 결국 눈에 보이는 비주얼(TOP)을 움직이는 숫자 데이터(CHOP)로 바꾸고, 그 숫자로 다시 무언가를 제어하는 툴입니다. 화면 속 내 손가락 끝이 움직일 때마다 X, Y, Z 값이 실시간으로 변하는 숫자가 보이시나요? 이 데이터를 손에 쥐었다면 여러분은 이미 인터랙티브 디자인의 메커니즘을 이해한 셈입니다. 손가락별 움직임, 얼굴의 부분적 모션들도 데이터화 할수 있으니 꼭 해보세요!

OUTRO: 건축과 공간, ‘움직임’으로 확장하기

이번 달은 복잡한 프로그램 응용 대신, 내 몸의 움직임이 디지털 공간 속으로 어떻게 데이터화되어 들어올 수 있는지 알아 보았습니다.

“그럼 이 손가락 숫자로 이제 뭘 하면 되나요?” 라는 질문이 생기실 텐데요. 원리를 알았으니 여기에서부터는 여러분의 상상력과 필요한 기능들을 이것저것 자유롭게 추가해 나가시면 됩니다. 특히 건축이나 공간 디자인을 고민하시는 분들이라면 활용도가 무궁무진합니다.

내 손의 움직임] ➔ [X, Y, Z 숫자 데이터] ➔ [루버 각도 / 공간 조명 제어]로 이어지는 다이어그램

키네틱 입면 시뮬레이션: 손가락 끝의 X 좌표 숫자를 그대로 라이노/grasshopper 터치디자이너 내 파라메트릭 모델의 루버 각도 변수에 대입해 보세요.

인터랙티브 공간 조명: 손과 카메라 사이의 거리(Z 좌표)를 키네틱 구조체의 높낮이나 조명 밝기 값에 연결해 보세요. 사람이 공간에 가까이 다가올 때 아래로 스르륵 내려오거나 은은하게 밝아지는 인터랙티브 공간을 미리 시뮬레이션해 볼 수 있죠.

결국 미디어파이프가 추출해 준 ‘움직임의 숫자 데이터’를 어떤 공간적 요소(조명, 구조체, 그래픽, 사운드)의 파라미터에 연결하느냐에 따른 싸움입니다.

오늘 웹캠 앞에 손을 올려 통로를 열어보신 분들이라면, 이제 여러분만의 멋진 공간적 움직임을 그 위에 얹어보세요.

본 아티클에 사용된 MediaPipe

컴포넌트 다운로드 링크: [https://github.com/torinmb/mediapipe-touchdesigner/releases/tag/v0.3.3

(TD Plugin Credit: @torin_tb (GitHub: torinmb)

메뉴