[바이브코딩] 노션, 아임웹, 그 다음으로 바이브코딩
기획자의 노션, 아임웹에서 시작한 나의 노코딩 개발 스토리
기획자의 노코드는, 노션에서 시작되었다!
기획자인 제가 처음 노션, 아임웹을 시작으로 직장인 동아리의 이벤트페이지, 예매 신청사이트를 만들어온지 벌써 1년이 넘었습니다. 많은 기획자와 PM분들이 사업 전략적으로 필요시에 빠르게 웹 사이트나 프로토타입을 만들어야 한다고 느끼실텐데, 아직 시중에는 많은 사례들이 부족한 것 같아 저의 경험을 공유해 봅니다.
노션과 우피로 시작한 랜딩페이지 제작
브런치에 글을 썼던 내용을 찾아보니, 2023년 1월에 제가 노션과 우피로 기획자 컨퍼런스의 랜딩페이지를 만든 글이 있었습니다. 그때에는 피그마로 상세페이지처럼 내부 콘텐츠를 직접 디자인했고, 그 내용을 빠르게 외부에 공개하기 위해서 노션을 썼습니다. 실제로 활용이 되었기에 유의미한 작업이고, 노션의 UXUI 커스텀 한계가 있었기 때문에 oopy를 한 달 유료로 결제해서 사용했었습니다.
* 노션은 무료 버전으로 가능했고, oopy.io의 경우에도 당시에는 무료 체험판이 있었지만 한 달 1만원대를 결제해서 사용했었습니다.
피그마에서 기획/디자인을 시작하며, 노션으로 만들었던 랜딩페이지관련 글 : https://brunch.co.kr/@loreenkim/34
기획자, 아임웹으로 웹사이트 제작
그 다음에 몇 개월 이후에는 저는 국내 노코드, 웹 사이트 빌더인 '아임웹'을 학습하기 시작했는데요. 노션의 UXUI 한계를 벗어나기 위해서 '드래그앤드랍' 방식의 웹 빌더를 사용했고, 2023년 1월 16일, 아임웹을 배우고 공연 소개 & 예매페이지를 처음 만들고 사용했습니다. 기획자 입장에서는 기획, 디자인, 배포와 관리자 연동까지 쉽게 된다는 점이 강점이라고 생각했었어요.
관련 게시글 : https://brunch.co.kr/@loreenkim/35
실제 티켓 예매를 위한 비즈니스 활용도는 전혀 문제는 없었습니다. 하지만, 기획자 입장에서는 아임웹은 '이커머스(쇼핑몰)'을 위한 UXUI가 강점이어서인지, 원하는대로 사용자 흐름(유저플로우)를 커스텀하기에는 한계가 있었고 무조건 상품 결제를 위한 페이지를 거쳐서 결제를 해야한다는 점이 아쉬웠어요.
* 재밌는 시도는 당시에 미드저니를 통해서 이미지를 생성형AI로 만들고 적용했습니다. 클래식한 공연이었기에 그 공연에 맞는 클래식, 모차르트, 오케스트라와 같은 이미지를 생성형AI (당시 미드저니 무료 체험판)으로 만들 수 있었고 저비용으로 디자인을 만들 수 있어서 그 점은 만족스러웠어요.
*그 다음 해도 몇 개의 공연예매 1~2개 정도 더 아임웹으로 사용해왔습니다. 1천명 이하의 이용자들이 사용해야하는 수준의 작은 이벤트에는 아임웹/노션 정도는 충분하다고 느꼈습니다.
기획자, 바이브코딩을 만나다.
그리고 2025년 6월, 저는 Bolt.new(클로드 모델 기반의 바이브코딩 툴)을 드디어 만났습니다!
저와 Bolt.new와의 인연은, 6월에 직장인 뮤지컬 동아리에서 열렸던 '갈라콘서트 공연 예매사이트'에서 시작되었는데요. 당시에는 피그마.ai 기능이 출시 되기 전이었고, Bolt.new + Supabase + Netlify 조합으로 코딩하고 사이트를 출시했습니다.
생성형AI를 통해 디자인한 웹사이트 결과물기획자이면서, 디자인과 콘텐츠를 직접 작성하넌 저의 입장에서는 빠르게 원하는 결과물을 만들 수 있는 엄청난 툴을 만난 것이었어요. (물론 순식간에 무료 토큰을 다 사용했기에, 과금의 늪에 빠지기도 했습니다..)
기획자, 초기 스타트업의 니즈를 발견하다.
그 와중에 또 우연히 고객을 발굴하는 과정에서 UXUI디자인 프로토타입을 초창패, 예창패에 제출해야하는 기업이 있었습니다. 빠르게 원하는 기능의 목업이 필요했는데, 바이브코딩이 어떨지 제안을 하게 되었죠. 합리적인 구축 시간과 비용을 제안하고, 해당 프로젝트는 기업용 첫 프로젝트가 되었습니다. 이미지를 공개하기는 어렵지만, UXUI 디자인, 유저플로우 동작, 웹사이트 형태로 배포한 첫번째 결과물이었죠. 1인 작업으로 기획 - 디자인 - 개발 - 배포/개선까지 약 1~2주 정도 걸렸습니다.
이렇게 저는 1인 기업으로 고객이 원하는 경우에는, 피그마 프로토타입 애니매이션을 사용하지 않고도 바이브코딩으로 UXUI프로토타입을 만들 수 있겠다는 사실을 깨달았습니다. 물론 AI활용 과정에서는 무료로만 가능하지는 않았고, 비용이 확실히 들어갑니다. 또한 아직까지 사례나 유즈케이스가 부족하기 때문에 많은 테스트가 필요하죠. 하지만 핵심적인 것은 필요에 따라서, 필요하다면 우리가 노션+우피로 웹사이트를 만들거나 구글 설문지를 사용했던 것처럼 피그마를 거치지 않고도, 바로 웹 페이지에서 UXUI목업을 만드는 새로운 가능성을 발견하게 되었다고 보았습니다.
ChatGPT/Claude + 그리고 Bolt.new까지 조합하다.
요즘의 활용 사례는 저는 웹 페이지를 짜고, 구글 스프레드시트나 Supabase 데이터베이스 플랫폼을 연결시켜 예매데이터를 저장시키거나, 또는 구글 설문로는 아쉬웠던 점을 대폭 개선해서, 화면에 보이는 웹 사이트 디자인 & 설문 결과 실시간 공유를 위한 관리자용 대시보드를 제공하는 방향은 기본적으로 접목하고 있습니다.
바이브코딩 학습을 시작하고 3개월이 지난 지금, 제 입장에도 커스텀에 대한 사례, 데이터베이스 연동과 관리자 페이지 개발까지 많은 것들이 축적되고 있다고 느낍니다. 또 한편으로는 하고 있던 원래의 일을 다 놓아야할 저도로, 새로 배울 기술과 부족한 프로그래밍 스킬에 아쉬운 마음이 들기도 합니다.
하지만, 늘 우리가 안전하고 평화롭게 일하는 날이 있었나요? 늘 부딪히고, 필요하면 문제해결을 해나가는 게 저의 기획자의 마인드이자 저의 성장 동력이었던 것 같습니다. 특히나 저는 실용주의적 기획자이고 '매일 하나씩 새로 배우고, 배운 것은 비즈니스에 써 봐야 결과를 안다'라고 생각하며 여전히 서로의 니즈가 맞는 조직, 스타트업, 단체들을 만나러 다니고 있습니다.
기획자, 더 많은 사례를 만들어나가기
한편으로는 회사 내부에서 사용할 시스템 사례를 만들면서 써보고 있습니다. 제가 IT강사이기도 하기 때문에 교육현장에서 사용하고 있는 교육생 설문-구글스프레드시트 연동, 강사용 일정 관리 시스템, 회사 홈페이지 등을 만들어서 사용해보고 있어요.
종종 저에게 '무료로 만들 수 있나요?' 또는 '어떤 AI코딩툴이 제일 좋아요?'라는 질문들을 주시는데요. 첫번째는 '무료'는 한계가 현실적으로 있습니다. 또한 'AI코딩툴 1순위'의 정답은 없어요. 기술적으로만 효과를 따진다면, 개발자가 직접 개발하는 것이 더 장기적으로는 나을 수 있지만, 실무/현장에서의 니즈를 해결 해줄 수 있는 새로운 대안이라는 점에서는 또 강력하지 툴이기도 하죠.
또 이런 툴의 사용자가 개발자인지, 기획자/디자이너인지를 고려하면 사용성적인 측면에서도 툴마다 차이가 존재합니다. 저는 기획자/디자이너 입장에서 사용할 수 있는 결과물을 만들어보고 있어요. 결국은 사용자, 지속가능성이나 호환성, 확장성까지도 고려해야 최선의 선택이 되지 않을까 싶습니다.
아직까지 사례가 부족하기 때문에 국내에도 얼리어답터들이 연구/실험가들이 만들어내고 이제서야 사용해나가고 있는 단계라고 보여지구요. 재피어, Make, N8n, 러버블, 커서 등 정말 많은 툴들이 시장에서 활발하게 업데이트 되는 과정에서는 기획자 입장에서는 어떤 걸 또 써볼까? 하는 부분이 참 재밌구요. 그 과정에서도 안정성, 지속가능성을 고려해서 내가 개발자인 관점에서는 어떤 것을 사용하는 게 나에게/회사에게 이득일까? 하는 고민들도 함께 하고 있어요.
앞으로 좋은 사례와 정보가 있다면 또 정리해서 공유드려보겠습니다.
기획, UXUI디자인, 바이브코딩 정보를 먼저 알고 싶으시다면
저의 인스타그램 팔로우하시고 소식을 전해들으실 수 있습니다.
김로린 인스타그램 : https://www.instagram.com/loreenkim.ceo/
