개발의 경계가 허물어진 시대

‘바이브 코딩(Vibe Coding)’이란, 누구나 전문지식 없이 코딩에 접근할 수 있는 흐름을 의미합니다. 이제는 비개발자도, 혹은 본인이 익숙하지 않은 분야에서도 일정 수준의 개발이 가능해지고 있습니다. 다양한 생성형 AI 툴의 등장으로, 한 명의 개인이 기획부터 디자인, 개발, 배포까지 프로젝트 전 과정을 맡는 것이 더 이상 낯설지 않게 되었죠.

특히 개발 영역에서는 이미 Cursor, Gemini CLI, Windsurf 등 강력한 도구들이 출시되며 시장이 빠르게 성장 중입니다. 그리고 이 흐름은 개발 이전 단계인 디자인 부문으로도 확장되고 있습니다. 디자인에서도 마우스 클릭 몇 번으로 프로토타입을 만들고, UI를 설계할 수 있는 솔루션들이 속속 등장하고 있죠.

이번 글에서는 바이브 코딩을 통한 프로젝트 전 과정 중, 핵심인 "디자인 자동화" 영역에서 어떤 솔루션들이 존재하는지 조사하고, 간단하게 분석해보려 합니다.

stitch

stitch는 2025 Google I/O에서 공개된, AI 앱 디자인 툴 입니다.
현재 베타버전이기 때문에, 자세한 화면 구성이나 인터페이스 흐름은 조금씩 변하고 있을 수도 있습니다.

첫 화면은 단순하게 모바일/웹 플랫폼을 선택한 후 프롬프트를 할 수 있는 창이 존재하고, 입력후에는 해당 플랫폼에 맞는 디자인을 생성합니다.

예시로 생성되어있는 디자인도 확인 가능합니다.

해당 예시 디자인에 접근하게 되면, 어떤 프롬프트를 입력해서 어떤 추론 과정을 통해 Gemini가 해당 UI를 만들어냈는지 채팅 로그도 확인할 수 있습니다.

다음은, 생성된 디자인을 확인하는 페이지 입니다.

왼쪽에는 주고받은 프롬프트를 확인해볼 수 있는 채팅창이 존재, 상단에는 전체적인 색상 톤이나 테마, 폰트 등을 수정할 수 있는 버튼이 존재합니다.

Edit 버튼을 클릭하면 프롬프트를 통해서 해당 디자인을 추가 수정할 수 있습니다.

생성된 디자인을 html 코드로 내보내거나, Figma로 복사할 수 있습니다.

Figma로 복사할 경우, 이미지로 활용하는 것이 아닌 개체별로 쪼개어져 복사되어 아이콘 등 바로 활용 가능합니다.

하지만 결과물의 퀄리티를 보면, 바로 사용할 수 있는 디자인 보다는 초안 제시 정도의 수준이라고 보이는데요, stitch는 아직 베타버전이기도하고, 타 솔루션보다 디자인의 완성도면에서 기능이 떨어진다고 생각합니다.

stitch의 방향성을 보면, 최대한 단순한 프롬프트 입력을 통해 완성된 디자인을 뽑아내는 것을 중점으로 향하고 있는 것 같습니다. 다른 솔루션들은 이것저것 입력할 부분이나 조작해야할 부분이 많은데에 비해, Input의 형태가 가장 단순한 것으로 보입니다.

Relume AI

Relume은 사용자가 원하는 주제와 구조를 설명하면, AI가 이를 와이어프레임으로 생성합니다.

완성된 디자인을 내놓는 것이 아니라 와이어프레임을 내놓는다고 합니다.

또한, 와이어프레임 외에도 프롬프트를 통해 총 세 가지의 항목을 생성 가능합니다.

사이트맵 / 와이어프레임 / 스타일 가이드

사이트맵의 경우 "AI 서비스를 제공하는 회사 홈페이지" 라고 프롬프트를 입력했을 때, 다음과 같이 나타납니다.

총 페이지의 개수는 사용자가 설정할 수 있습니다.

Home, About Us 등 각 페이지의 콘텐츠, 대략적인 구성과 페이지간 연결(이동 가능한 페이지)을 표시해줍니다.

다음은 사이트맵 생성 후 해당 사이트맵 기반으로 생성된 와이어프레임입니다.

대략적으로 어떻게 홈페이지를 구성할지 레이아웃을 보여줍니다. 와이어프레임은 데스크탑, 태블릿, 모바일 화면이 모두 생성됩니다. stitch와는 다르게 구체적인 이미지나 콘텐츠를 나타내진 않지만, 대략적인 화면 구성을 보여줍니다.

다음은 스타일 가이드 입니다.

페이지의 버튼 모양, 카드 섹션 스타일링, 컬러와 폰트 등 화면의 스타일 가이드를 제시해줍니다. 전체적인 페이지의 브랜드 컬러, 폰트 등을 제안하는 기능으로 보입니다. 스타일 가이드 기능은 현재 Beta버전이라고 나와있는데, 계속해서 기능이 추가될 것으로 보입니다.

Relume도 마찬가지로 Figma로 export가 가능한데, Figma에서 Relume Kit이라는 플러그인을 다운받고 Relume에서 생성한 와이어프레임이나 사이트맵, 스타일 가이드를 불러올 수 있습니다. 아래는 Relume Kit을 통해 Figma로 불러온 모습입니다.

처음 Stitch를 사용했을 때는 Figma로 export 할 수 있는 것이 Stitch만의 특징인줄 알았지만, 최근에는 모든 디자인 생성 AI들이 해당 기능을 가지고 있는 것으로 보입니다.

디자이너가 있는 팀에서 생성형 AI를 활용한다고 했을 때는 Relume AI를 선택하는 것도 괜찮을 것 같다고 생각합니다. 어차피 생성형 AI를 통해서 디자인을 얻었을 때, 디자이너가 수정해야할 부분이 많을 것입니다. 그렇기에 AI가 완성된 디자인을 내놓아도 어차피 수정이 많이 들어가야하니, 방향성만 어느정도 제시해주는 Relume처럼, 사이트맵과 와이어프레임 생성을 빠르게 해주고, 디자이너가 이를 수정 및 디자인 해나가는 것도 괜찮은 방향인 것 같습니다.

Visily

Visily는 자연어를 통해 UI를 생성하는 기능 외에도 AI를 활용한 다양한 기능이 존재합니다. 프롬프트 입력으로 flowchart나 다이어그램 생성이나, 홈페이지같은 웹/앱의 캡처본을 수정가능한 상태로 Figma에 export가 가능한다던지, 다른 흥미로운 AI 관련 기술들이 있어 가져와봤습니다.

위 이미저처럼 홈페이지나 앱을 캡처해서 첨부하면, 그 화면을 수정가능한 상태로 만들어주거나 와이어프레임으로 변환이 가능합니다.

사람의 스케치를 입력으로 넣으면 스케치에 맞는 디자인을 생성하는 기능도 제공한다고 합니다.

또,프롬프트를 통해 구체적인 디자인 수정도 가능하다고 합니다. 예를들어, "remove Integrations Button in NavBar" 라고 프롬프트를 입력하면

위 이미지에서 위쪽이 기존 디자인, 아래쪽이 명령어를 실행한 결과. NavBar의 Integrations 버튼이 사라진걸 볼 수 있습니다. 특정 버튼을 제거한 디자인을 반환해주는 것에 성공했습니다.자연어 입력을 통한 디자인 수정이 어느정도 수준까지 가능한지는 무료버전이라 확인해보지 못했습니다만,

이 외의 기능은 Figma같은 디자인 툴에 가까운데, Figma보다 더 가볍게 사용할 수 있도록 한 것 같습니다.

Visily의 UI를 보면, Figma보단 MS의 PPT에 가깝다고 생각합니다.

Visily가 지향하는 점 중 중요한 것이 "No learning curve" 이기도 합니다. 긍정적인 평가에서 내용 또한, "Figma was too much for me, as non-designer, to use"와 같이 다른 툴에 비해 디자이너가 아닌 사람이 사용하기에 편하다고 합니다.

이 외에도 디자인에 들어가는 다양한 유형의 텍스트들을 자동으로 보기좋게 채워준다던가, 들어갈만한 이미지를 자동으로 채워주는 등의 기능도 존재합니다. Visily를 통해 ppt를 만들듯이 디자인을 생성,수정할 수 있기를 기대합니다.

Uizard

Uizard는 프롬프트를 통한 디자인 생성을 베타 테스트 형식으로 기능을 지원 중입니다.

다른 툴과 비슷하게 Desktop / Tablet / Mobile 선택 후 프롬프트 입력하는 것으로 디자인이 생성됩니다.

다른 툴들과 다른 점은, URL을 제공해서 해당 페이지에 대한 스타일을 참고하도록 시킬 수 있다는 점입니다.

저는 프롬프트에 음식 배달 웹 페이지 제작을 입력하고, 토스뱅크 페이지를 참고하도록 했습니다.

여러 산출물 중 하나인데, 무료버전이라 일부분 밖에 볼 수 없었습니다.

완성된 디자인 보다는 와이어프레임 형태에 가까운 것 같습니다. 사실 결과물의 퀄리티를 보면, 토스뱅크에 대한 참조가 올바르게 이루어진지는 잘 모르겠습니다..

Visily처럼 스케치를 UI 화면으로 변환하는 기능도 제공한다고 합니다.

Uizard의 특별한 점으로는 코드 자동 생성 및 특정 버튼의 인터랙션이나 UI의 플로우를 미리 테스트해 볼 수 있는 프리뷰 모드가 있습니다.

전체적으로 Visily와 Uizard가 유사한 서비스라고 판단되었습니다.

현재 생성형 AI를 통한 인터페이스 솔루션 시장에서는 꼭, 자연어를 통한 디자인 생성쪽으로만 AI가 활용되는 것이 아니었습니다. 디자이너가 아닌 사람들이 디자인 툴 접근하기는 진입장벽이 높았었다고 생각하는데, 디자인 자체에 쉽게 접근할 수 있도록 하는 방향으로 AI 솔루션들이 나아가고 있다는 것도 확인할 수 있었습니다.

Figma make

Figma config 2025에서 소개했던, AI 기능이 추가되었습니다. 현재 Beta버전이긴 하지만, 확실히 다른 생성형 AI들보다 많은 기능이 있습니다. (LLM모델은 Claude 4 Sonnet을 지원합니다.)

Figma 자체의 기능들과 연결이 가능하니, Figma 라이브러리나 커뮤니티에서 에셋을 가져온다던가, 코드 관련된 기능도 GA 설정이나 언어, 커스텀 코드 설정 등 높은 확장성과 활용성을 가집니다.

우선, 프롬프트를 통한 디자인 생성입니다. 프롬프트는 다음과 같습니다.

Create an intuitive and visually appealing dashboard that provides users with:
  - Sticky top nav bar with logo, links, search field, new project button, avatar dropdown
  - Hero panel with summary, achievement stats and data visualizations
  - Summary cards
  - A table of entries

FigmaMake의 차별화 된 점은, 코드 생성의 퀄리티가 월등하다는 점입니다. 일단, 코드가 반응형(Desktop/Mobile화면 사이즈 감지)으로 개발되어 있는 상태입니다. 상단 이미지는 서로 다른 두 화면을 캡처한 것이아니라, Figma 윈도우 사이즈 자체를 줄였더니 반응형 웹처럼 자연스럽게 모바일 화면으로 전환된 모습입니다. 이는, FigmaMake가 생성한 코드에 반응형이 적용되어 실시간으로 Figma에서 확인해볼 수 있다는 것 입니다.

사실, Stitch나 Relume 등 다른 툴에서 생성하는 코드는 React같은 프레임워크는 지원하지 않거나, 지원하더라도 파일하나에 모든 코드를 다 넣어버려서 실제로 사용하는 아키텍처와는 거리가 멀었습니다. 예를들면, App.tsx라는 파일 하나에 관련된 모든 코드가 전부 들어가있다던가 하는 형식이었습니다. 실제로는 관심사별로 코드를 분리해놓고 작성하는 경우가 많아서, 바로 사용하기에는 무리가 있는 코드 형태였죠.

위의 Figma make에서 만든 코드를 보면, 우선 실제로 React 개발 하듯이 App.tsx에는 함수형 컴포넌트 호출만 일어나고 실제 각 컴포넌트들은 따로 /components 경로 아래에 Navigation.tsx 등으로 따로 구현되어있습니다(TypeScript와 tailwind같은 CSS관련 프레임워크도 지원하는 것으로 보입니다). Navigation.tsx의 코드를 살펴보면

import { Search, Plus, Bell, Settings, User, LogOut } from "lucide-react";
import { Button } from "./ui/button";
import { Input } from "./ui/input";
import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "./ui/dropdown-menu";

/ui라는 경로에서 DropdownMenu 등 내부 디자인시스템에서 이미 구현되어있는 디자인을 불러오는 듯한 모습을 보입니다.

Figma make 내부에 아래 이미지처럼 Button.tsx 등 여러 구성요소들이 디자인 시스템을 통해 이미 구현되어있고, AI를 통해 디자인을 생성할 때에 해당 디자인 시스템을 이용해서 결과물을 내놓는 것 같습니다.

디자인 시스템을 이용해 AI가 결과물을 만들어내는 것이라면 항상 일관적인 디자인을 내놓도록 하는게 가능할 것이고, 디자인 시스템을 수정 가능하다면, 개발자들은 정말 디자이너와 협업하는듯이 Figma make를 활용할 수 있을 것이라고 예상됩니다.

다른 솔루션을 사용했을 때의 문제는, LLM의 Hallucination 처럼 매 번 다른 디자인을 내놓는다는 것이었는데, 마치 RAG처럼 정해진 디자인 시스템 내에서 결과물을 만들어낼 수 있다는 점이 활용성이 매우 높을 것이라고 생각합니다.

Figma make로 디자인을 생성하는 것에는 크게 4가지 방식이 있습니다.

1. 위와 같은 방식으로 프롬프트만 사용
2. Figma 디자인 붙여넣기
3. 커뮤니티에서 import
4. 팀 라이브러리(프로젝트)에서 import

Figma는 다른 툴에 비해 커뮤니티나 디자인 공유 등 정보와 데이터 공유가 매우 많이 이루어졌을텐데, 그런 디자인이나 에셋들을 불러와서 AI에게 생성을 요청할 수 있다는 것은 엄청난 장점일 것입니다.

프롬프트를 통해 계속해서 디자인을 수정할 수 있는 것 뿐 아니라, GA나 메타태그, 언어설정 등 SEO와 관련된 정보까지 쉽게 설정할 수 있다고 합니다.

심지어는 Favicon, OG이미지(링크 공유 시 보이는 썸네일 이미지) 까지 설정할 수 있다고 합니다.

커스텀 도메인까지도 지원합니다.

여기까지만 봐도 확연하게 다른 AI 툴과 차이가 느껴집니다. 다른 솔루션은 AI를 통한 디자인 생성과 편집을 향해 가고있지만, FigmaMake는 디자인 생성을 넘어 디자인을 코드화 시키고, 노코딩으로 솔루션 배포까지 지향하고 있다는 것을 느낄 수 있었습니다. 이런 서비스가 계속해서 고도화 된다면, 추후에는 아이디어만 가지고 개인만의 서비스를 시장에 내놓을 수 있는 시대가 정말로 올 수 있을 것 같습니다.

다음은, 이번에 소개했던 서비스간의 특징과 비교를 표로 정리한 부분입니다.

	입력 방식	Figma export	HTML export	구현 수준	반응형 구성 여부	활용성	결과물 수정
Stitch	자연어 프롬프트	✅	HTML	下	❌	下	❌
Relume AI	자연어 프롬프트	✅	React	下	❌	上	✅
Visily	템플릿 및 자연어 프롬프트	✅	❌	中	❌	上	✅
Uizard	템플릿 및 자연어 프롬프트	✅	React (Component단위)	下	❌	中	✅
Figma	템플릿 및 자연어 프롬프트	✅	React / Typescript / tailwind CSS 등 지원	上	✅	上	✅

이 외에도, 다양한 인공지능 기반 UI 구현 서비스와 기술들이 등장했고, 등장하게 될 것 입니다. 결국 UI 구축에 대한 접근성이 향상되면서, 누구나 아이디어만 있다면 본인만의 디자인을 구축해낼 수 있을 것 입니다.
midjourney 등의 이미지 생성 AI들, cursor나 gemini cli등 바이브코딩을 지원하는 서비스와의 협업을 통해서, 인공지능으로만 완벽하게 프로젝트 하나를 완성할 수 있는 날을 기대하며 글을 마칩니다.