2026-07-20

[비교과] 바이브 코딩의 이해와 실제 3회차

바이브 코딩을 이용한 인터랙티브 미디어아트 콘텐츠 제작 수업의 세 번째 시간에는 효율적인 바이브 코딩을 위한 단계를 익히기 위해 비둘기 시뮬레이터를 제작해보고, 각자 작성해온 기획서와 와이어프레임을 공유하였다.

비둘기 시뮬레이터 실습은 MediaPipe를 활용한 포즈 트래킹 기술과 3D 렌더링 엔진을 결합하여, 사용자가 팔을 펄럭이는 행위를 통해 가상의 비둘기를 조종하도록 단계별로 구축하였다.

1단계: 먼저 최적의 빌드 속도를 확보하기 위해 빌드 도구로 Vite, TypeScript, pnpm을 활용하여 초기 개발 환경을 구축하였다.

2단계: 두 번째로는 팔 동작 인식 및 시각화 웹캠에 찍히는 사용자의 팔 동작을 실시간으로 인식하게 하고, 메인화면 우측 하단에 카메라 피드가 항상 노출되도록 UI를 배치하였다.

3단계: 새 모델링 및 애니메이션 연동 화면 중앙에 비둘기 3D 모델을 배치하고, 정교한 날개 움직임을 묘사하기 위해 팔꿈치 관절 구조를 구현하였다. 시점의 경우, '살짝 내려다보는 후방 시점(Slightly Elevated Rear View)'을 카메라 구도로 설정하도록 명확히 AI 에이전트에게 제시하였다.

4단계: 이후 4번째 단계에서는 펄럭임 및 기울임 감지 알고리즘을 구현하고 시각화를 진행한다. 비둘기의 비행 정보를 사용자가 확인할 수 있도록 고도, 속도 등을 보여주는 화면 레이아웃 HUD를 시각화하였는데 이때 혼돈 없는 단계별 진행을 위해서 물리엔진은 아직 구현하지 않도록 명령하였다.

5단계: 초기 단계에서는 테스트를 위해 물리 연산을 제외했지만, 이후 5단계에서는 현실감있는 비행을 위한 기본적인 물리 법칙을 구현하도록 하였다. 사용자가 팔을 빠르게 펄럭이면 양력이 발생하여 비둘기가 중력을 극복하고 위로 떠오르고, 비행 중 몸이나 양팔을 좌우로 기울이면 기울인 방향과 각도에 비례하여 회전이 가능하도록 하였다. 또 이러한 물리 엔진이 적용된 비행 상태를 아까 시각화한 HUD에서 현재 비둘기의 고도, 속도 등의 데이터를 실시간으로 확인할 수 있도록 AI 에이전트에게 요청한다.

6단계: 산, 나무, 건물, 도로, 자동차, 사람 등의 기본 환경을 배치하여 살아있는 듯한 생태계를 연출하였다. 뼈대가 되는 설정을 마친 후에 3D환경의 수준을 높이는 것이 개발의효율성과 리스크를 최소화하는 방법이기 때문이다. 처음부터 고해상도 3D모델을 적용하면 테스트할 때 마다 많은 시간이 소요된다.

7단계: 7번째로는 단순한 시뮬레이션을 넘어 게임의 규칙과 보상 시스템을 도입하였다. 비둘기가 비행 도중 건물, 바닥, 혹은 움직이는 자동차 등의 장애물에 충돌할 경우 게임이 종료되고, 마지막엔 총 비행시간을 측정하여 확인할 수 있도록 하였다.

최종 단계에서는 그림자, 구름, 색채 및 조명 효과, 피드백날개짓 소리, 도심의 환경 소음 등의 사운드를 추가하여 전체적인 완성도를 높였다.

바이브코딩은 정해진 순서 없이 그저 생각의 흐름대로 개발하는 방식이라고 생각했지만, 교수님과 함께 진행한 실습은 ‘기본 기능과 흐름 구현 -> 모델링 -> 게이미피케이션 -> 고도화’ 와 같은 단계별 진행이 훨씬 효율적이며 개발자가 원하는 방향대로 구현이 가능하다는 점을 몸소 체감할 수 있었던 유익한 시간이었다.

비둘기 시뮬레이터 제작 실습이 끝난 후, 수업 후반부에는 학생들이 각자 준비해 온 기획서와 와이어프레임을 상호 공유하는 시간을 가졌다. 각기 다른 재미있는 기획들이 많았는데, 먼저 입을 벌려서 룰렛을 돌리고 선택된 재료로 케이크를 완성하는 게임, 손끝에서 에너지를 쏘아서 화성에 감자를 키우고 감자를 노리는 외계 생명체를 격퇴하는 게임, 손으로 그림을 그리고 그림과 함께 인생네컷을 찍을 수 있는 게임, 입을 벌리는 모션을 감지해 날아오는 초밥들 중 정해진 초밥만 먹는 게임, 손을 움직여 초식을 완성하여 허수아비를 베어내는 게임, 손을 위 아래로 움직여 음악을 연주하는 리듬게임, 손가락으로 귀신들에게 부적을 쏘며 촛불을 지켜내는 게임, 몸의 중심을 맞추며 외줄 위를 달리는 게임, 손으로 담벽을 부숴내며 메세지를 전하는 미디어아트 등의 재미있고 독창적인 아이디어가 많이 나왔다. 교수님께서는 학생들의 기획안에서 구현 가능한 것과 구현이 힘든 것을 알려주시고, 어떤 방향으로 더 보완하면 좋을지 피드백을 주시면서 완성도를 더해주셨다.

다음시간까지 학생들은 교수님의 피드백을 바탕으로 기획안을 수정하고, 각자 기초적인 개발을 마쳐오기로 하였다. 그리고 다음 수업에서는 버셀을 연결하여 실제 웹 상에 배포하는 법을 배우고 인문사회관의 메타존에서 완성된 게임을 실행시켜 보기로 하였다.