AI 툴을 활용한 디자이너의 바이브 코딩일기
AI 툴(CURSOR, GPT-4o, MCP)로 프로토타입 서비스 만들기
아이디어만 있으면 뭐든지 할 수 있는 시대가 왔구나.
과장 아주 조금 보탠 결론이다.
오점뭐 진입 시 바로 만날 수 있는 화면AI 툴(CURSOR, GPT-4o, MCP)을 활용해 디자이너(비개발자)가 직접 프로토타입 서비스를 만든 과정과 느낀 점을 공유합니다.
요즘 AI가 그렇게 좋다던데,,
Chat GPT로 지브리 스타일의 사진을 생성하고, Figma AI를 활용해 다국어 디자인을 구현하고, Notion AI로 중요한 문서들을 요약하고, Chat GPT로 무의식을 탐구하고…
AI 홍수 속에서 헤엄치던 올해, 디자이너 단톡방에 이런 메시지가 왔다.
사실 더클라임 빨강, 킬터보드 v2 까지는 한다…LLM(대규모 언어 모델)로 프로토타입을 생성하는 Figma AI, Galileo AI 등, 몇가지 서비스명은 이미 들어봤지만, 한국의 감성과 맞지 않는 UI 때문에 실제로 사용하기엔 무리라는 생각을 했던 기억이 있다.
그래서 대수롭지 않게 반응했었지만, 실험 삼아 만들어본 이벤트 응모 페이지에 살짝 놀랐다. 자연스러운 텍스트, 입력 값들의 유효성 검사, 완료 페이지까지 깔끔하게 구현되어있어, 개발자가 조금만 손 보면 바로 사용할 수 있을 정도였다.
“이 정도 성능이면 간단한 개발은,,, 나도 할 수 있겠는데?”
무지한 상태에서 프로젝트 초기 셋팅
v0로 생성한 이벤트 응모 페이지, 심지어 작동한다.유튜브를 엄청 봤다.
Cursor to Figma, Figma to Cursor, V0 사용법 등..
그 중에서 ‘개발동생’ 이라는 분의 이 영상을 가장 많이 참고했고, 결론적으로 V0보다 Cursor를 메인으로 활용하는 게 가장 쉽고 빠르게 개발할 수 있다고 판단했다.
뭐가 뭔지도 모르고 무작정 따라하다보니, 이전의 영상들을 다시 보고 오기도 했고, 영상과 다른 결과물 때문에 프로젝트 폴더만 10개가 넘게 생기기도 했다. 여러 시행착오를 겪어, Cursor를 개발 전문가로 만들고, Next.js 기반의 프로젝트를 생성했다.
커서의 Rules 기능을 이용해 전문가로 가스라이팅한 모습그래서, 뭐 만들지?
내가 몰랐던 것들을 배우면서도 실현 가능한 정도. 거창한 프로젝트를 하고 싶진 않았다. 연습이기도 하고, 복잡한 개발은 결국 개발지식이 필요할 것 같았기 때문에.
마침 사내에서 진행하는 식사조가 눈에 띄었다. 신입사원과 어색한 상황에서 서로 어디갈지 고민하던 모습, 모인 팀원 4명이 “아무거나 괜찮아요” 파였던 기억이 났다.
결정, AI가 메뉴를 추천해주고, 해당 메뉴를 판매하는 근처 맛집을 보여주는 간단한 서비스를 만들어보자. 자주 말하던 “오늘 점심 뭐 먹지” 를 가져와서 ‘오점뭐’가 빠르게 기획되었다.
지브리 유행의 주범, GPT 4o의 Image Generation로 한글 PNG 로고를 생성하고, Recraft의 Vectorize 기능을 이용해 SVG로 변형, 마지막으로 피그마를 통해 약간 손을 봤다. 대략 15분만에 로고가 완성되었다.
ChatGPT에게 한글 텍스트 로고 요청, 한 번 삐끗해서 혼냈더니 잘 만들어줬다.
완성된 텍스트 로고제대로 일 하려면, 맥락을 파악해야한다
인간도 도메인 지식이 있으면 더 좋은 인사이트와 결과물이 나오듯, AI에게도 맥락을 제공하는 것이 가장 중요했다. AI는 대본만 있으면 어떤 역할이든 소화할 수 있는 만능 배우다. 앞선 과정에서 Cursor를 개발 전문가로 만들었듯, 상세한 기능들을 요구할 때도 마찬가지였다.
어떤 입력 값을 주더라도 메뉴를 추천해주는 OpenAI API가 필요했고, 나는 지식이 없으니, Cursor의 ‘add context’ 기능을 이용해 OpenAI의 문서를 학습시켰다.
또한, Sequential Thinking MCP를 활용해, 복잡한 요청을 하더라도 Cursor AI가 순차적인 사고로 올바르게 기능을 구현하게끔 유도했다.
OpenAI를 연동하는 방법을 알려주는 Quickstart 링크를 Cursor에게 맥락으로 제공하며 기능구현을 요청한다.그렇게 동일한 방식으로 Naver의 음식점을 검색할 수 있는 Search API, 좌표를 반환할 수 있는 Maps API 까지 셋팅하고, 기본적인 구현을 완료했다.
디자인이나 디테일은 부족하지만, 내가 원하는 구색이 갖춰졌다.
OpenAI 5천원 충전했는데, 폭탄 맞는거 아니냐며 호들갑그래도 디자이너니까, 디테일은 챙겨야지
핵심 기능들은 문제없이 사용할 수 있지만, 디자이너의 눈에는 부족한 점과 추가하고 싶은 디테일이 너무나도 많았다.
Inter로 적용된 기본 폰트를 Pretendard로 바꾸고, 로고와 어울리는 포인트가 될 타이포를 추가하고 싶다
입력하지 않아도 Placeholder에 늘 새로운 입력값이 입력되어있으면 좋겠다
API 응답 호출 시간을 고려해 재밌는 문구로 체감되는 로딩 시간을 줄이고 싶다
모바일 디바이스(반응형) 에서는 패딩이 어쩌구, 뱃지간 간격이 어쩌구,,,
생각보다 UI의 디테일한 수정들은 간단했다. Cursor가 page.tsx 파일을 건드릴 때마다 실시간으로 바뀌는 모습을 보며, 감탄스러우면서도 미묘한 감정이 느껴졌는데, 아직까지 일할 수 있는 환경에 감사.. 정말로…
수정을 통해 바뀐 메인화면, ChatGPT를 통해 적당한 문구 모음을 생성하고 삽입
수많은 디테일 수정 끝에 원하는 결과 화면을 얻어낼 수 있었다.배포, 그리고 공개
Vercel과 Git 연동부터 환경변수를 셋팅하는 데 까지는 채 10분도 걸리지 않았고, 배포는 30초 만에 끝났다.
빌드 오류를 몇 번 겪었지만, Cursor와 주변 개발자의 도움을 받아 금방 해결할 수 있었고, 문제 없이 기능이 실행되는 걸 확인, 이제 서비스에 실제 도메인이 생겼다.
이 모든 과정에 단 4일이 걸렸다.
디자이너도 개발자도, 살아남기
최근 Shopify의 CEO가 “AI를 업무에 기본적으로 활용하길 기대하고, 이를 평가에도 반영하겠다”고 말했다. 그 만큼 AI는 이미 생활 속에, 실무 속에 파고들었고, 이는 피할 수 없는 흐름이다.
비개발자가 무에서 서비스 출시하는 데까지 5일이 채 걸리지 않았고, 어느 개발자들과 디자이너들은 새 일자리를 알아봐야겠다며 우스갯소리로 말하곤 한다.
하지만 실제로 AI를 활용해 서비스를 만들어 본 소감은 조금 다르다.
AI의 발전은 무기력보다는 가능성에 가까웠고, 디자이너가 프로토타입을 코드로 전달하는 시대, 개발자가 디자인 레퍼런스를 찾아와서 자기 코드에 스타일을 입히는 시대, 간단한 아이디어를 직접 구현하는 시대가 왔을 뿐이다.
빠르게 개발하고 디테일을 챙길 수 있었던 이번 프로젝트처럼, 반복되는 큰 문제들은 AI를 통해 쉽게 해결하고, 본질에 집중해보자.
Open API 비용이 무서워서 링크는 공개 못했다.
Written by Alldesignstomine
Contact : alldesignstomine@gmail.com
