2026-07-20

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

여름방학 중에 진행된 바이브 코딩을 이용한 인터랙티브 미디어아트 콘텐츠 제작 수업의 첫번째 시간에는 이지윤 교수님, 이수현 교수님과 함께 웹의 개념에 대하여 배우고 각자의 노트북에 앞으로의 제작을 위한 개발 환경을 설정하는 시간을 가졌다. 첫 수업이니만큼 간단한 이론 수업을 먼저 진행하였는데, 저자가 생산한 콘텐츠를 독자가 일방적으로 소비하는 고정적 HTML 중심의 환경에서부터 AI 기반 추천 시스템과 전통적인 서버-클라이언트 구조에서 벗어나는 새로운 시도가 시행되고 있는 오늘날 웹까지의 발전을 배웠다.

그 뒤로는 이 수업의 핵심 키워드인 바이브 코딩에 대하여 알아보았다.

바이브 코딩(Vibe Coding)이란 OpenAI의 초기 창립 멤버 안드레이 카파시가 제시한 개념으로, 사람이 직접 문법에 맞춰 텍스트 코드를치고 디버깅하던 기존 방식에서 벗어나, 사람이 원하는 결과와 분위기(Vibe)를 자연어로 설명하면 AI 에이전트가 실시간으로 코드를 생성해 주는 혁신적인 개발 패러다임을 의미한다. 전통적인 코딩 문법을 마스터하지 않았더라도 기획력과 논리적 표현력만 있다면 누구나 개발자가 될 수 있다는 점이 무척 인상 깊었다.

서울여자대학교의 학생들이 금전적 제약 없이 이러한 바이브 코딩을 경험해 볼 수 있도록 AI융합콘텐츠전공 학과에서 지원을 해주신 덕분에 학생들은 각자 클로드와 커서 등의 AI 에이전트를 활용해 바이브 코딩을 경험해 볼 수 있었다. AI 에이전트를 사용하기 위해서 학생들은 교수님들의 도움을 받아가며 Github를 연결하는 등의 기초적인 개발 환경을 설정해나갔다.

그리고 우리의 수업은 인터랙티브 미디어 아트를 만드는 수업이기에, MediaPipe라는 구글이 제공하는 기능을 사용하고, Three.js를 통하여 웹브라우저에서 3D모델링을 구현하기로 하였다. 본격적으로 자신들만의 개인 웹사이트를 만들기 전, 학생들은 지금까지 배운 이론과 환경 설정을 바탕으로 간단하게 데모로서 비눗방울을 부는 사이트를 만들어보는 시간을 가졌다. 이 사이트는 사용자의 카메라 권한 동의를 거쳐 화면에 사용자의 모습이 보이도록 한다. 사용자가 카메라에 보이게 손가락으로 집는 핀치 동작을 취하면 비눗방울의 틀이 생기고, 입바람을부는 입모양을 취하면 MediaPipe가 사용자의 포즈 및 안면 형태를 실시간으로 감지해 비눗방울이 생성되어 날아가도록 하는 인터랙티브 사이트였다. 여기서 더 나아가 핀치 동작을 취한 손가락 개수에 따라 동그라미(손가락 2개), 삼각형(3개), 사각형(4개), 별(5개) 모양으로 비눗방울 형태가 달라지도록 설계하였다. 특히 단순한 도형에 그치지 않고 실제 비눗방울처럼 표면이 꿀렁거리는 효과와 반투명하면서 무지개 빛이 감도는 간섭 현상 효과를 내기 위해 AI 에이전트와 수십 차례 피드백을 주고받으며 디버깅(입 끝 위치 활용, 랜드마크 표시, 좌표 반전 해결 등)을 수행하는 과정을 거쳐야했다.

원하는 결과를 얻기 위해서 AI 에이전트에게 자세하게, 끊임없이 프롬프트를 입력할수록 결과물이 좋아졌다. 오류가 발생했을 시에는 오류 메시지를 복사하거나 캡처하여 AI 에이전트에게제공하면 대부분 오류를 해결할 수 있었으며, 맥락이 꼬였을 때는 과감하게 새 창을 열어 다시 질문하는 것이 효과적이었다. "중요한 건 꺾이지 않는 마음"으로 구현될 때까지 지속적으로 피드백을 주는 태도를 갖는 것이라고 교수님들께서는 강조하셨다.

이번 1주차 첫 번째 수업은 닥쳐오는 AI라는 거대한 시류 속에서, '바이브 코딩'이라는 새로운 개발 패러다임의 기초가 되는 내용을 다루어보는 시간이었다. 막막했던 환경 설정부터 MediaPipe를 활용한 손가락 개수별 비눗방울 구현까지, AI 에이전트와 수십 차례 피드백을 주고받으며 하나의 완성된 데모를 만들어낸 과정은 값진 경험이었다. 맥락이 꼬이고 오류가 날 때마다 포기하지 않고 지속적으로 피드백을 주는 과정이 마냥 쉽지만은 않았지만, 머릿속으로 상상하던 아이디어가 눈앞에 그대로 실현되었을 때의 쾌감은 앞으로 진행될 본격적인 개인 인터랙티브 사이트 제작 과정을 기대하게 만드는 큰 원동력이 되었다.