노래방 일본 노래 검색 서비스 | 제 2부 - 디자이너 없이 디자인 하기(feat. google stitch를 이용하여 AI로 디자인하기)

 

안녕하세요, 펭귄 뮤지업입니다!

지난번 프로젝트 구상 포스팅에 이어, 이번에는 실제 개발을 위한 디자인 과정에 대해 이야기하려 합니다.

 

일반적인 서비스 개발 과정은 프로젝트 구상 > 디자인 > 데이터베이스 모델 구성 > 백엔드 개발 > 프론트엔드 개발 > 배포 순으로 진행됩니다. 종종 프론트엔드 개발자들이 디자인 단계를 건너뛰고 바로 코드를 작성하는 경우가 있는데, 이는 "디자인이 마음에 들지 않으면 코드로 빠르게 수정하면 된다"는 생각 때문일 수 있습니다.

(저 또한 🐥삐약이 시절 그랬습니다!)

 

하지만 디자인을 한 번 수정하게 되면 전체적인 코드 수정이 필요하기 때문에, 무턱대고 개발부터 시작하면 프로젝트 기간만 늘어날 수 있습니다. 따라서 저는 디자인 과정이 필수적이라고 생각합니다.

 

"나는 Figma나 Sketch 같은 디자인 툴을 전혀 다룰 줄 모르는데, 어떻게 디자인을 할 수 있지?"라고 걱정하는 분들이 있을 겁니다. 걱정 마세요! 대(大) AI 시대인 요즘, 원하는 것은 모두 AI에게 요청할 수 있습니다. 지금부터 디자이너 없이 어떻게 디자인을 완성할 수 있을지 함께 고민해 봅시다!

 

---

 

다양한 디자인 AI 툴 살펴보기

AI를 활용한 디자인 툴에는 보통 다음과 같은 "삼대장"이 있습니다.

• V0(https://v0.dev/)
• Lovable(https://lovable.dev/)
• Stitch(https://stitch.withgoogle.com/)

저는 지금까지 V0와 Lovable을 사용해 봤는데요, 각각의 특징과 장단점은 다음과 같습니다.

 

V0

 

특징

• Vercel(Next.js 개발사)에서 만든 프론트엔드 AI 코드 생성 툴입니다.
• 자연어 프롬프트로 원하는 UI를 설명하면, Next.js 및 Tailwind 기반의 리액트 컴포넌트 코드를 즉시 생성합니다.
• 실시간 미리보기 및 코드 커스터마이징, Figma 플러그인을 지원합니다.
• 생성된 코드는 바로 복사하여 프로젝트에 붙여넣거나, npx를 통해 다운로드할 수 있습니다.

장점

• 개발자에게 익숙한 코드(React, Tailwind)로 출력되어 친숙합니다.
• Next.js, Vercel 등 최신 프론트엔드 생태계와 연동이 최적화되어 있습니다.
• 반복 작업, 프로토타입, MVP 제작 속도를 극대화할 수 있습니다.
• 코드 일관성, 가독성, 유지보수성이 우수합니다.

단점

• 백엔드(데이터베이스, 인증 등) 기능은 지원하지 않습니다.
• 비개발자에게는 접근성이 떨어질 수 있습니다.
• 복잡한 커스터마이징은 수동 작업이 필요합니다.

 

Lovable

 

특징

• AI 기반 노코드 웹 앱 빌더로, 자연어 프롬프트나 이미지(스케치 등)로부터 즉시 웹 앱을 생성합니다.
• Supabase 등 백엔드 연동, 데이터베이스, 사용자 인증, API 관리 등 풀스택을 지원합니다.
• 생성된 UI는 컴포넌트 단위로 편집 가능하며, GitHub 연동 및 자체 호스팅, 배포를 지원합니다.
• 아름다운 디자인과 UX 모범 사례를 적용하여 MVP 제작에 최적화되어 있습니다.

장점

• 비개발자도 쉽게 사용 가능하며, 빠른 프로토타이핑 및 MVP 제작에 유리합니다.
• 백엔드와의 통합 및 다양한 기능(로그인, DB, API)을 자동화합니다.
• 손그림/이미지로부터 UI 생성, 세밀한 편집이 가능합니다.
• GitHub, Supabase 등 주요 툴과 연동됩니다.

단점

• Next.js의 page router 친화적이며 app router는 지원하지 않습니다.
• 복잡한 커스텀 로직이나 특수한 디자인에는 한계가 있습니다.
• 초기에는 일부 에러 보고가 있었으나, 전반적으로 사용성은 높습니다.
• 개발자 관점에서는 코드의 세밀한 제어가 제한적일 수 있습니다.

 

Stitch

 

특징

• Google Labs에서 공개한 Gemini AI 기반의 차세대 디자인-개발 통합 툴입니다.
• 자연어/이미지 입력만으로 UI 디자인 생성 및 다양한 스타일 변형이 가능합니다.
• Figma 연동 및 HTML/CSS 등 코드 추출이 가능합니다.
• 디자인-개발 경계를 허물고, 팀 협업 및 반복적 디자인 탐색에 강점이 있습니다.

장점

• 디자이너와 개발자 모두에게 효율적이며, 빠른 시안 생성 및 다양한 변형을 제공합니다.
• Figma 등 기존 디자인 툴과의 강력한 연동이 가능합니다.
• 반복적인 디자인 탐색, 프로토타이핑 속도가 비약적으로 향상됩니다.
• 코드 내보내기를 통해 개발 생산성을 증대할 수 있습니다.

단점

• 백엔드 기능은 지원하지 않습니다(프론트엔드 디자인/코드에 집중).
• 실무 적용 및 생태계는 아직 초기 단계입니다.
• 복잡한 앱 로직 구현에는 한계가 있습니다.

기본적으로 V0.dev와 Stitch는 개발자에 특화된 툴이라고 생각합니다. 비개발자라면 백엔드까지 지원하는 Lovable이 가장 좋은 선택일 것입니다.

 

---

 

제가 Stitch를 선택한 이유

보통 프로젝트 빌더들은 백엔드까지 지원하는 Lovable을 선택할 것입니다. 저 또한 이전 프로젝트에서 수려한 UI와 백엔드를 모두 만들어주는 Lovable로 프로젝트를 진행했었습니다.

 

하지만 Lovable을 사용하면서 이 부분이 장점이자 단점으로 다가왔습니다. 웹 서비스라면 Lovable이 가장 강력한 것이 맞습니다. Lovable에서 만든 프로젝트를 그대로 가져다가 배포하면 되니까요.

 

하지만 웹뷰 기반의 앱 애플리케이션을 만들 때는 많이 달라집니다. 웹뷰 기반 앱은 보통 네이티브 앱과 통신하여 그 값을 기반으로 백엔드를 처리해야 하고, 앱의 로직을 이해하면서 웹을 개발해야 하므로 비즈니스 로직이 많이 달라지게 됩니다. 이는 비즈니스 로직을 이해해야 하는 번거로움으로 다가왔고, 저에게는 큰 단점이었습니다.

(Next.js가 App Router로 전환되었음에도 Page Router를 사용한다는 점 또한 단점으로 다가왔습니다.)

 

그렇다면 V0와 Stitch 중 어떤 것을 선택해야 할까요? 제가 V0 대신 Stitch를 선택한 이유는 단순합니다. 2025년 6월 1일 현재 V0는 유료인 반면, Stitch는 무료이기 때문입니다. V0도 꽤 좋은 AI 툴입니다. 다만 이미 많은 AI 서비스에 유료 구독을 하고 있었고, 추가로 늘리고 싶지 않았기에 V0는 선택지에서 배제했습니다. 만약 Stitch라는 무료 선택지가 없었다면 저도 사용 경험이 있는 V0로 개발을 진행했을 것이라고 확신합니다.

 

---

 

Stitch로 디자인 추출하기

Stitch를 선택했으니, 이제 Stitch를 이용해 디자인을 추출해 봅시다. Stitch를 사용하는 방법은 생각보다 간단합니다.

 

Stitch 공식 웹사이트에 접속합니다.

Stitch - Design with AI

 

원하는 디자인이 모바일인지 웹인지 선택합니다.

 

참고할 디자인이나 와이어프레임이 있다면 Experimental Mode를, 없다면 Standard Mode를 선택한 후 원하는 디자인을 요청합니다.

 

Stitch의 가장 좋은 점은 디자인을 작성하기에 정보가 부족할 경우, 되려 사용자에게 필요한 정보를 요구하여 보다 정확한 디자인 요소를 제공한다는 것입니다.

 

만약 특정 디자인만 수정이 필요하다면, 상단의 "Edit" 버튼을 클릭하고 해당 디자인에 대한 요구사항을 요청하면, AI가 Edit 버튼이 눌린 디자인에만 요구사항을 적용합니다.

 

 

여기서 추가로 제가 원하는 디자인을 좀 더 직관적으로 변경하기 위해 전체 테마 컬러, 다크 모드, Radius, 폰트를 컨트롤할 수 있는 컨트롤러도 존재합니다.

 

 

그렇게 만들어진 디자인 이미지는 다음과 같습니다.

 

012345

잘 안보이니 클릭해서 보세요!!

 

이제 이 디자인을 Figma로 추출하기 위해 Figma 버튼을 클릭하여 디자인을 복사한 후 Figma 프로젝트에 붙여넣기하면 디자인 작업이 끝납니다.

 

---

 

Stitch 사용 경험 공유

Stitch를 사용해 보면서 생각보다 좋은 디자인을 제공해 주어서 놀랐습니다.

특히, 제가 부족한 정보를 주면 다시 물어 필요한 정보를 요구하는 점이 좋았고, 디자인 요구사항을 추가하면 AI가 한 번 더 정리하여 이것이 맞는지 확인 및 진행 여부를 물어보는 과정이 꽤 좋은 사용자 경험을 남겼습니다.

(마치 CLien의 플랜 모드 및 액트 모드처럼 말이죠.)

 

다만, 간혹 Stitch가 변경했다고 하지만 실제 디자인을 보면 변경되지 않은 이슈가 존재했습니다. 흔히 말하는 AI의 환각(hallucination) 현상인데, 이런 현상만 잘 해결된다면 좋은 경험으로 남을 것 같습니다.

 

또한, 이번에는 Standard Mode를 사용하여 디자인을 진행했지만, 추후 와이어프레임을 생성한 후 Experimental Mode도 사용해보고 싶다는 생각이 들게 만드는 AI 툴이었습니다.

 

다음 포스팅에서는 이 디자인을 기반으로 실제 개발을 어떻게 진행했는지 다뤄볼 예정입니다.

기대해 주세요!