.jpg&blockId=2e15bbc0-e5c2-802a-ae10-f8b3960423ca&width=3600)
안녕하세요, wheres Marketing Service팀의 황라현 입니다!
오늘은 코딩을 하나도 모르는 디자이너의 바이브코딩 도전기를 이야기 해보려 합니다.
코딩을 하나도 모른다는 것은 곧, 그만큼 숱한 시행착오를 거쳤다는 뜻이기도 하죠.
글의 마지막에는 실제로 사용한 프롬프트 예시도 함께 공유할 예정이니, 실패부터 성공까지
저의 좌충우돌 개발여정을 끝까지 봐주신다면 감사하겠습니다.
시작에 앞서 가볍게 왜 바이브코딩을 하게 되었는지부터 먼저 말씀드리겠습니다.
1. 왜 바이브코딩을 하게되었는가?
사실 처음 바이브코딩이라는 개념을 알게 되었을 때는 ‘내가 못하는 코딩을 AI가 뚝딱 해준다니..!’ 라는 생각에
정말 신세계를 맛본 기분이었습니다. 이런저런 아이디어를 가지고 AI와 티키타카를 할 때까지만 해도,
전혀 모르는 분야의 일들을 해낸다는 고양감에 어깨가 으쓱하기도 했습니다.
하지만 현실에서 저는 코드를 볼 줄 몰랐기에, 아무리 AI와 함께한다 하더라도 바이브코딩으로 문제해결은 커녕
답답한 상황만 계속 겪을 뿐이었습니다.
AI와 협업하는 데 있어서 아이디어만 가지고 되는 게 아니라는 것을 깨닫고는 어떻게 해야 원하는 결과물까지 쉽게 도달할 수 있을까? 에 대한 부분을 계속 고민했던 것 같습니다.
그러던 중, Be The Expert라는 사내 자기계발지원제도를 통해 듣게 된 바이브코딩 강의에서 실마리를 찾게 되었습니다.
.jpeg&blockId=2e15bbc0-e5c2-803a-85c1-e31b0c802931)
Generated by Nano Banana Pro
해당 강의에서는 아이디어 상태에서 어떻게 이를 구체화시키는지에 대한 내용을 다루었는데,
먼저 PRD를 작성함으로써 막연한 아이디어를 한번 정리해주는 작업을 거쳐주는 것이 포인트였습니다. 작성한 문서를 토대로 AI에게 코딩을 지시하면 AI가 호환성/작동까지 고려해서 훨씬 더 정교하게 구조를 설계한다는 것을 알게되었죠.
그렇게 저는 ‘바이브코딩과 인연이 아니었나보다…’ 했던 암흑기를 지나, 개인프로젝트(이자 팀을 위한 실험이었던)
광고소재 템플릿 웹앱 구현하기를 다시 도전하게 된 것입니다.
2. 무엇을 만들 것인가
제가 만들고자 한 것은 팀에서 배경이미지/문구만으로 간단하게 다양한 사이즈의 광고소재를 만들 수 있도록
도와주는 템플릿 툴킷 이었습니다.
기존에는 소재제작을 위해서 기획-제작요청과같은 준비과정이 필요했지만, 퍼포먼스광고지면에서 여러가지 시도를 유연하게
해보려면 해당 과정을 생략하고도 소재들을 간편하게 제작하도록 도와주는 툴이 필요하다고 생각했기 때문입니다.
실은, 이미 만들어둔 웹 템플릿이 있기는 있었습니다.
yanolja → NOL 리브랜딩 이전에 능력자이신 사내 개발자분들의 도움으로 몇가지 템플릿을 웹에 구현해두어 잘 사용하고 있었죠.
그러나 리브랜딩 이후 로고변경이나 매체에 따른 사이즈 variation의 종류도 달라지다 보니 유지보수 부담등의 이슈로 자연스럽게 사용하지 않게 된 것입니다.
막연하게 개발자분들의 도움을 기다릴 수만은 없었기에, 피그마의 컴포넌트 기능을 활용한 템플릿을 만들어 사용해보기도
하였는데요.
피그마템플릿은 툴 사용에 대한 진입장벽부터 숙련도 이슈, 공동작업 시 템플릿 변형의 리스크 등 많은 문제를 안고있었습니다.
마스터 컴포넌트에서 이미지와 텍스트만 수정해주면 전체사이즈에 적용되도록 만들어두었지만,
이는 저에게 꽤 골칫거리로 남게 되었습니다.
1.
컴포넌트로 연결한 소재의 특성상, 개별적인 수정을 하기가 어려운 구조였고 이는 곧
상당히 보수적인 결과물밖에 나올수 없다는 뜻이었습니다.
2.
그 와중에 누군가가 마스터 컴포넌트 밖에서 작은 요소라도 수정을 하면, 컴포넌트간의 연결이 풀려서
템플릿의 기능을 하지 못했고… 제작자로서 계속해서 수정 팔로업을 해야했습니다.
피그마 템플릿의 긴 주의사항에서 알 수 있듯이… 템플릿의 연결이 풀리면서 계속 발생되는 유지보수건들,
이미지/텍스트가 특정 사이즈에서 호환되지 않아 다시 만들어야 하는 시안까지… 총체적 난국이었습니다.
위와 같은 이유로 피그마 템플릿의 한계를 뼈저리게 느낀 이후였던 지라, 꼭 성공시키겠다는 일념 하나로
바이브코딩에 뛰어들게 된 것입니다.
3. 준비하기
툴의 구현에 앞서 바이브코딩을 위한 준비를 아래와 같은 순서로 진행했습니다.
1.
PRD 계획 및 작성 (Gemini 활용)
2.
Figma-Cursor MCP 연동을 활용해서 미리 잡아놓은 사이즈별 값(마진,텍스트크기 등…)을
JSON 파일로 추출해달라고 요청
3.
Github에 레포지토리를 생성하고 로컬환경에 클로닝 후 Cursor에게 코딩 의뢰
4.
로컬서버에서 테스트해가며 부족한 부분 보완 및 기능 추가 실행
첫 시도치고 과정을 나름 체계화했음에도, 결과물에는 약간의 문제가 있었습니다.
PRD 작성을 AI에게 위임하고 꼼꼼하게 확인하지 않았더니, 의도와는 다르게 작동하는 부분이 너무 많았던 것입니다.
예를들어 개별 사이즈마다 이미지를 축소/확대하는 등 커스텀할 수 있게 해달라고 했지만
구체적으로 ‘어떻게’를 언급하지 않았더니, Cursor는 스크롤(마우스 휠)로 이미지를 축소/확대하게끔 설정했습니다.
(레이아웃에 대한 디테일을 놓치는바람에) 한번에 모든 사이즈의 시안을 확인하지 못하는것도 불편했지만,
스크롤을 내리고 올릴때마다 미친듯이 들썩대는 이미지들때문에 도저히 사용할수가 없는 상태였습니다.
이렇듯 상세하게 가이드를 주지 않은 부분에 대해서는 임의로 AI가 결정하다보니 많이 엉성한 결과물이 나오게 된것입니다.
처음엔 이걸 내가 만들었다고? 하고 감격했지만, 사용해볼수록 엉성함을 느끼며 무한 오류 수정의 굴레에 빠지게 되었다.
의도와는 다른 결과물을 보며 하나하나 개선을 하다가, 밑빠진 독이 점점 박살나는 기분을 느끼며…
이러다간 완성을 못하고 흐지부지 되겠다 싶은 생각에 PRD부터 다시 쓰기로 결정했습니다…
4. 2차 시도
2차시도 역시 기본적인 프로세스는 동일했습니다.
1.
PRD 계획 및 작성 (Gemini 활용)
2.
Figma-Cursor MCP 연동을 활용한 JSON 파일을 준비
3.
Github에 레포지토리를 생성하고 로컬환경에 클로닝 후 Cursor에게 코딩 의뢰
4.
로컬서버에서 테스트해가며 부족한 부분 보완 및 기능추가 실행
다른점이 있다면 1번 PRD 계획 및 작성에서 예상치못한 결과물을 초래했던 ‘모호한 영역’들을 더 꼼꼼하게
확인했다는 점이었습니다.
이 이미지 제너레이터의 레이아웃은 어떻게 했으면 좋겠고, 컨트롤 가능한 영역은 어디서부터 어디까지인지,
Export시에 어떤 포맷(jpg,png)으로 할건지, 개별로도 다운로드되고 zip형태로도 다운로드 되게 할것이다…
와 같은 스펙들을 최대한 상세하게 적어주고, 누락되는 부분이나 충돌하는 부분이 없는지 문서를 더 면밀히 들여다보았습니다.
당연히 두번째 시도에서도 한번에 완벽한 결과물이 나온 것은 아니었지만, 첫번째 시도와는 달리 고쳐야 할 부분이 적을 뿐만 아니라 눈에 바로 보이기도 해서 Cursor와 함께 조율하며 바로 적용할 수 있었습니다.
배포는 Gemini의 추천에 따라 Vercel의 무료플랜을 활용했고, Github와 연동을 해두니 바로바로 업데이트가 되어
매우 편리했습니다.
로컬서버에서 테스트 - Github에 푸시하고 merge - Vercel에서 자동 업데이트
위 루틴대로 몇가지 기능을 추가 배포하고 나니 어쩐지 자신감도 붙는 기분이었습니다.
텍스트와 이미지의 일괄변경/개별변경을 포함하여 dim처리의 강도와 색상, 브랜드 로고와 생성형AI표시문구 on/off 가능…
이 템플릿은 일괄수정의 편리함을 갖췄으면서도 각각의 시안에서 텍스트나 이미지의 디테일을
수정할 수 있도록 기능을 만들어두었는데, 이는 기존에 겪었던 불편함을 해소할 수 있는 해결책이 되었습니다.
피그마 템플릿을 웹앱으로 옮기면서, 좀 더 유연하게 광고소재를 제작할 수 있게 된 것입니다.
1.
소재에 따른 개별 변경사항이 서버에 기억되지 않아 새로고침 한 번이면 처음 상태를 그대로
유지할 수 있습니다.
2.
레이어 on/off 같은 복잡한 과정 대신 토글버튼이나 바 형태로 직관적으로 시안을 커스텀할 수 있게 되면서 진입장벽을 대폭 낮추었습니다.
이렇게 만든 템플릿은 (팀내에서만 사용중이라 작고 소중한 트래픽이지만…) 월 평균 50회 내외의 방문을 이끌어내며 사용의 편리함과 소재제작의 용이함을 한번에 잡은 효자 노릇을 톡톡히 하고 있습니다.
5. 글을 마치며…
코딩을 전혀 모르는 비개발자로서 바이브코딩만으로 결과물을 구축하는 일은 쉽지만은 않았습니다.
모든 TMI를 다 쏟아낼 수 없었기에 부득이하게 생략된 수많은 구박들(이거 왜이래)과
호소(나는 비개발자니까 알아듣게 설명해줘)가 없었더라면 완성까지 가지 못했을지도 모릅니다.
Generated by Nano Banana Pro
저는 왜 첫 바이브코딩을 실패할 수밖에 없었을까요?
그건 바로 AI에게 모든 일을 맡겨놓고 꼼꼼한 체크는 귀찮아했기 때문입니다.
조금 번거롭더라도 이 부분을 개선하자 결과물의 완성도는 급격히 올라가게 되었습니다.
저와는 달리, 코딩을 할 줄 아는 분들에게는 바이브코딩의 실효성에 대해 갑론을박이 있는 것으로 알고있는데요.
항간에서는 ‘바이브코딩이 기술적 부채로 가득 찬 형편없는 결과물을 낳는다’고도 하고, 누군가는 ‘인터넷 이후 최고의 발명품’ 이라고 칭송한다고도 합니다.
하지만 저는 개인적으로 바이브코딩을 경험해보니 개발자의 도움을 받기 힘든 사각지대에서 이보다 뛰어난 대체재가 있을까? 라는 생각을 했습니다.
사실 제가 만든 웹앱은 기능적으로는 단순할지 몰라도, 실제 개발자가 투입되기에는 리소스 대비 효율이 떨어지는 ‘애매하고 번거로운’ 작업이었을지 모릅니다.
이를 개발자의 방식으로 풀어서 요청하고, 피드백을 주고받고, 디벨롭 하는 일련의 과정들을 AI하고만 전적으로 하다보니
‘누군가의 시간을 빼앗는다’와 같은 부담도 없었고 오롯이 웹앱을 만드는 것에만 더 집중할 수 있었던 것 같습니다.
Generated by Nano Banana Pro
마지막으로 실제 개발에 사용했던 프롬프트 예시를 공유드립니다.
PRD 문서와 함께 이 프롬프트를 참고하여 활용하면 더 구체적인 결과물을 얻으실 수 있을 것입니다.
2차시도 프롬프트 (Gemini ver)
이 글을 읽는 비개발자분들도 꼭 한번 바이브코딩에 도전해보시길 바랍니다. 긴 글 읽어주셔서 감사합니다!
참고자료
작성자
관련된 글 더 보기
.jpg&blockId=2e15bbc0-e5c2-802a-ae10-f8b3960423ca&width=512)
.jpg&blockId=2ce5bbc0-e5c2-8089-9dcd-c449b51eba46&width=512)
.jpg&blockId=2c75bbc0-e5c2-8040-a465-cb50b3ff6052&width=512)
