← 작업 목록

웹캠과 소리

Re:Centers

역할
작품 기획·움직임과 소리의 대응 설계·웹 구현
사용 도구·기술
HTML / CSS / JavaScript, MediaPipe Hand Landmarker, Web Audio API
시기
2026
분류
개인 작업

프로젝트 소개

Vito Acconci의 〈Centers〉(1971)를 바탕으로, 중심을 겨누는 몸의 미세한 움직임과 어긋남을 소리로 드러내는 인터랙티브 웹 작업을 만들었습니다.

구성과 의도

한 점을 정확히 가리키려고 할수록 몸은 작은 움직임을 거듭합니다. Re:Centers는 중심을 겨누는 신체와 그 대상 사이에 남는 미세한 어긋남에서 출발했습니다. 관객이 손의 위치를 계속 조정하는 과정을 통해, 우리가 중심이라고 부르는 지점과 몸의 관계를 살펴보도록 구성했습니다.

관객이 화면의 점을 향해 손을 뻗으면 중심과 손끝 사이의 거리, 손의 움직임에 따라 소리가 달라집니다. 가만히 멈추려는 순간에도 이어지는 움직임을 소리로 드러내어, 정확한 일치를 향해 계속 조정하는 몸의 상태를 느끼도록 했습니다.

직접 체험하기
화면 중앙과 손끝 좌표의 관계를 설명하는 규칙 도해

02 / PROCESS

구성과 제작 과정

01

손끝의 위치와 소리의 대응

중심과 손끝 사이의 거리는 음색에, 프레임 사이의 손끝 이동은 떨림에 대응하도록 구성하였습니다. 좌표가 소수점 다섯 자리까지 일치하면 종이 울리도록 구현하였습니다.

03 / MAKING

기획과 구현

기획 의도

중심을 정확히 겨누려는 동안 계속되는 몸의 조정과 미세한 어긋남을 관객이 소리로 느끼도록 구성했습니다.

구현 방식

웹캠에서 손의 랜드마크를 추적하고 중심과 손끝 사이의 거리를 오디오 파라미터에 연결합니다. Web Audio API로 소리를 생성하며, 좌표가 설정된 정밀도로 일치할 때 종소리가 울리는 조건을 두었습니다.