2026-07-20

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

바이브 코딩을 이용한 인터랙티브 미디어아트 콘텐츠 제작 수업의 두 번째 시간에는 각자 어떤 콘텐츠를 제작할지 기획해보고 필요한 UI의 대략적인 와이어프레임을 잡아보는 시간을 가졌다. 학생들은 피그마(Figma)라는 온라인 작업공간에서 서로의 아이디어와 기획물을 실시간으로 공유하면서 작업을 시작하였다.

본격적인 기획에 들어가기에 앞서, 웹캠을 이용한 인터랙티브 콘텐츠라는 장르를 학생들이 다소 생소하게 느끼자, 교수님께서는 이해를 돕기 위해 직관적이고 흥미로운 참고 사이트들을 제시해 주셨다. 웹캠 화면에 손 모양을 비추어 가상의 총을 쏘는 게임 (https://pugshunt.com/play), 웹캠으로 얼굴을 인식하여 눈썹의 움직임으로 블록을 조종하는 테트리스 게임(https://eyebrow-tetris.sanderdesnaijer.com/), 사용자의 얼굴 표정과 위치를 추적하여 몰입감을 주는 인터랙티브 시뮬레이터 등이 소개되었다.

아쉽게도 이 수업은 2주 동안만 짧게 진행되는 강의였기에, 엄청나게 복잡한 시스템을 구상하기보다는 주어진 기간 내에 구현 가능하면서도 사용자의 인터랙션 재미를 극대화할 수 있는아이디어에 집중해야했다. 반드시 전형적인 게임 형태가 아니더라도, 카메라와의 인터랙션을 통해 독창적이고 예술적인 결과물을 도출해 내는 미디어아트 중심의 콘텐츠도 가능했다.

구체적인 콘텐츠 개발을 위한 기획서 작성에서는 프로젝트 제목, 한 줄 설명, 사용자 행동, 카메라가 읽는 정보, 화면 반응, 게임/콘텐츠 목표, 성공 조건, 실패 조건, 필요한 화면 구성, 다음 주 구현할 핵심 기능 등을 생각해보아야 했다. 기획서 작성이 완료된 후에는 이를 와이어프레임으로 시각화하는 과정을 거쳤다. 와이어프레임은 메인 플레이 페이지를 가장 먼저 설계한 뒤, 새롭게 만들어야 하거나 도전이 필요한 기능이 포함된 페이지를 순차적으로 풀어나가는 방식으로 구상하였다. 또한 콘텐츠의 시각적 아이덴티티를 명확히 하기 위해 메인컬러, 서브컬러, 배경색, 폰트 등의 UI 디자인 컨셉을 미리 고정하도록 했다. 버튼의 형태 역시 각진 모양을 쓸지 혹은 둥근 느낌을 줄지 미리 정의하고, 아이콘 스타일을 '픽셀 게임 느낌' 등으로 통일하는 등의 전체적인 비주얼의 일관성을 확보하는 과정이 필요로 되었다.

이렇게 정한 전체적인 기획을 피그마에 각자 구상한 콘텐츠의 기획서와 와이어프레임 및 UI 컨셉을 올려보는 활동으로 마무리되었다. 학생들은 자신들이 만들고자 하는 작품의 제목과 핵심 인터랙션 요소를 공유하며 서로 피드백을 주고받았다. 다양한 컨셉의 게임들이 있었는데, 손의 Y좌표를 이용한 리듬게임, 상체의 움직임을 이용한 중심잡기 게임, 손가락 인식을 통해 씨앗을 뿌리고 재배하는 농사게임, 손의 움직임으로 볏짚인형을 베어내는 무협게임 등의 아이디어가 나왔다. 전부 겹치는 것 없이 독창적인 아이디어여서 실제로 기획단계를 거쳐 무사히 개발까지 완료된다면 정말 흥미로운 게임들이 될 것 같아 기대가 된다.

다음 시간은 준비된 기획서를 바탕으로 팀원 및 전체 학생들 앞에서 약 3분간 진행하는 '주제 발표'가 진행될 예정이며, 웹캠 데이터를 다루는 만큼 개인 노트북을 반드시 지참하여 실습에 임하라는 교수님의 안내와 함께 수업이 끝났다. 과제를 진행하며 겪는 기술적 애로사항이나 질문은 피그마에서 교수님 계정을 태그하여 실시간으로 해결하기로 하였다.