내가 만드는 새로운 세계

바이브코딩

어느덧 2025년의 절반이 훌쩍 지나 9월이 되었다. 빠르게 흘러가는 시간 속에서 나는 틈틈이 ‘바이브코딩’을 해오고 있다.

이전 회사에서 AI 데이터 라벨링 툴을 만들며 느꼈던 재미를 잊지 못한 탓에 늘 '무언가'를 만들고 싶은 마음을 갖고 있었다. 그러나 개발을 잘 모르는 프로덕트 디자이너가 구현할 수 있는 범위에는 한계가 있었고, 그런 내게 바이브코딩은 새로운 세계였다. 구현을 할 수 없어 매번 머릿속과 손끝에서만 맴돌던 아이디어를 내가 혼자서도 만들어 볼 수 있는 세계를 드디어 만난 것이다.

바이브 코딩을 만나다

재직 중인 회사에서는 AI 활용을 장려한다. 기획전 같은 콘텐츠를 빠르고 쉽게 만들 수 있도록 백오피스용 AI 에디터를 자체 개발하기도 하고, 크루들끼리 자체적으로 스터디 세션을 열기도 한다. 생산성과 효율성에 기여한다면 과감히 시도해 보는 분위기에 가깝다. 직군을 가리지 않고 생성형 AI를 업무에 활용해 보는 풍경도 자연스럽게 볼 수 있었고, 나 역시 그중 하나였다.

동료 PD 브리가 사내에 배포한 라이팅봇 (w/Chat GPT)

같은 팀 PD들과 업무 싱크를 하다 제안받은 아이디어를 LLM으로 체크해보기도 한다. (w/Claude)

사내 슬랙에 AI 스터디 채널이 생기고 아티클과 팁을 서로 공유하던 지난 6월, 사내 전 직원 대상 ‘바이브코딩 스타터 세션’이 열렸다. 신청이 순식간에 마감될 정도였는데 나름 치열한 경쟁을 뚫고 바로 첫 회차에 참여할 수 있었다. 아무래도 사내에서 처음 진행하는 세션이다 보니 세션 자체는 매끄럽게 진행되진 못했지만 시작 환경 구축정도만 익히는 정도였지만 바이브 코딩의 개념을 알게 된 것만으로도 내게는 큰 도움이었다. 세션을 들으며 바로 Cursor를 설치했고, 한동안 잊고 지냈던 Git을 다시 접속했다.

바이브 코딩을 시작하다

나는 평소에도 만들어보고 싶었던 것들이 많았다. 아무래도 내가 가장 많이 사용하는 도구가 피그마이다 보니 피그마 플러그인을 만들어보고 싶었다. 작업 히스토리 기록, 어노테이션, 메모, 커넥터, 컨텐츠 제너레이터 등등.. 하지만 개발을 할 줄 모르는 나에게는 늘 컴포넌트 디자인으로만 존재했다.

그런 내가 바이브 코딩을 알게 되었다. 해보고 싶은 것들을 다시 한번 리스트업을 하고 그중에서 내가 만들어냈을 때 가장 많이 사용할 것 같은 기능을 추렸다. 그것은 플로우를 그리는 커넥터와 컨텐츠 채우기였다.

이 기능들은 기존에 존재하는 플러그인으로도 이미 할 수 있는 것들이지만 내가 사용하기엔 늘 미묘하게 부족했고 아쉬워서 손이 잘 가지 않았다. 그래서 이 두 가지 기능 플러그인을 만들어보기로 결심했다.

1. Fill to Data

여성 타겟 패션 커머스 회사의 B2B 화면을 작업하다 보니 일반적인 데이터로는 한계가 있다. 간단하게는 스토어의 정보부터 상품, 상품 관련 각종 데이터 등등 실제로 입력하기 애매한 더미 데이터들이 항상 필요했다.

나름 이것을 해결해 보고자 챗 GPT로 가상의 정보들을 학습시켜 가상의 스토어와 상품, 상품 정보, 성과를 만든 후 빼곡히 입력한 엑셀 파일로 전해받고, 그것을 피그마에서 스프레드 싱크 플러그인으로 불러왔다. 하지만 매번 이 작업을 반복할 수는 없었다. 다시 이전의 데이터/테이블을 복붙 하다 보니 결국엔 다 똑같은 데이터를 기재해서 실제 데이터와는 거리가 무척 거리가 멀었다. 이미지 데이터도 마찬가지였다. 아무리 가상의 시안이라지만 실제 데이터와 거리감이 크다 보니 구현 화면에서 놓치는 것들이 꾸준히 발생했다.

그러다 5월에 있었던 Figma Maker Collective: Seoul를 참석했고 우아한 형제들의 데이터 브릿지 발표가 무척 인상 깊었다.

이런 플러그인을 나도 사용해보고 싶다는 생각이 한참 들었던 시기, 바이브 코딩을 알게 되고 플러그인을 제작하게 되었다.

Fill to Data의 기능은 간단하다. 원하는 유형의 파일을 업로드하고 데이터 채우기를 실행하면 해당 데이터들이 자동으로 채워진다. Zip 파일도 지원하여 알아서 압축 풀린 데이터가 입력되는 것이 현재의 MVP 기능이다.

다만, 업로드한 데이터의 보관 문제(로컬/클라우드)이나 업데이트된 데이터 반영 문제를 아직 해결하지 못해 작업은 잠시 중단했다. 어차피 사내에서만 이용할 건데 회사의 드라이브 계정을 활용하면 되지 않을까? 싶긴 했는데 API 문제도 있고, 아직 내가 이해하지 못하는 개발 이슈가 연이어 나와서 앞으로도 시일이 걸릴 것 같다.

2. Connect Maker

화면 작업을 하면서 뗄래야 뗄 수 없는 다양한 연결 선들. FigJam에서 몇 개를 복붙 후 커스텀해 쓰거나, 기존의 유/무료 플러그인으로 사용하는 사람이 대부분일 것이다. 내 경우엔 전자를 이용하는데 인스턴스 컴포넌트 등의 내부를 연결할 수 없는 것이 무척 크리티컬 했다. 임시방편으로 보이지 않는 영역을 만들어 그곳을 연결시키는데 레이어 정리할 때도 그렇고 의외로 번거롭다. 기존 플러그인들도 한두 개씩 아쉬운 느낌이기도 해서 작업 우선순위에 항상 있던 아이디어였다.

내가 원하는 커넥터 플러그인의 기능은 다음과 같았다.

1. 오브젝트 유형 상관없이 연결될 것

2. 원하는 스타일로 커넥터 커스텀 디자인이 가능할 것

3. 프리셋으로 저장할 수 있을 것

Connect Maker Readme.md

그래서 저 3가지 기능이 기본 장착된 플러그인을 만들기 시작했다. 같은 회사 동료인 에드(범석)님도 마침 비슷한 플러그인을 제작하기도 해서 더더욱 도전 욕구가 올라왔다.

UI 작업은 회사의 PDS(Partner Design System ⒸKakaostyle)를 기반으로 제작하고 있다.

여러 시도와 삽질 끝에 현재 MVP 기능 자체는 구현했고, UI와 자잘한 케이스 대비 화면을 제작하고 있다. 전체적으로는 약 75% 정도 완성된 느낌이다. 이 작업을 하면서 계속 더 욕심이 생기고 있어 기능 추가 관련해서도 고민하고 있다. 완성 후 어느 정도 안정적으로 작동된다면 프리셋 추가와 어노테이션 기능 중심으로 부분 유료화 또는 도네이션도 생각하고 있다.

---

지금 내가 맞닥뜨린 가장 큰 문제는 개발 진행 속도가 무척 느리다는 것이다. 여가 시간을 쪼개서 작업하다 보니 물리적인 시간 자체가 너무 부족하다. 기본 기능만 입힌 초기 버전만이라도 올해 안에 공개하는 것이 목표이긴 한데, 과연 내가 젤다와 축구 시즌의 유혹을 이겨내고 올해 내 완성할 수 있을까 걱정이 된다. 나의 개발 집중을 위해 대구 FC는 제발...