웹디자인, UI/UX 설계, Figma 등 디자인 도구 활용법을 다룹니다. AI 기반 디자인 생성, 레이아웃 구성, 사용자 경험 개선까지 실무 중심으로 분석합니다.
| 서비스명 | 한줄평 | 핵심 기능 | 요금제 | 장점 | 단점 | 추천 대상 |
|---|---|---|---|---|---|---|
| Figma AI (피그마 AI) | 전 세계 UI/UX 디자이너의 표준 작업 공간에 탑재된 가장 실무적인 디자인 어시스턴트 | First Draft(프롬프트로 편집 가능한 와이어프레임·UI 시안 생성), 레이어 이름 자동 정리, 프로토타입 자동 연결 및 실제 텍스트·이미지 채우기 | 무료(Starter 제한) / Professional 월 $15 (부분 유료) | 별도 외부 툴 없이 현업 디자이너가 매일 쓰는 Figma 캔버스 안에서 바로 편집 가능한 오토레이아웃 컴포넌트로 생성 | Figma 기본 툴 조작법(Auto Layout 등)을 알고 있어야 100% 활용 가능 | 프로덕트 디자이너(UI/UX), 웹·앱 기획자, 프론트엔드 협업 팀 |
| Framer AI (프레이머) | 디자인 시안이 곧바로 살아 움직이는 실제 웹사이트가 되는 디자이너들의 꿈의 웹빌더 | Figma처럼 자유롭게 디자인하면 코딩 없이 즉시 고성능 반응형 웹사이트로 퍼블리싱, AI 레이아웃·번역·카피라이팅 내장 | 무료(서브도메인) / Mini 월 $5 / Basic 월 $15 / Pro 월 $30 (부분 유료) | 개발자 도움 없이 디자이너 혼자서 Apple급 인터랙션 웹사이트를 디자인부터 실제 도메인 배포·SEO까지 완결 가능 | 복잡한 회원제 백엔드 로직보다는 브랜드 사이트·랜딩페이지·블로그 CMS에 특화 | 웹 디자이너, 스타트업, 크리에이티브 에이전시, 포트폴리오 제작자 |
| v0 by Vercel (UI 디자인 시스템) | 정적인 목업을 넘어 실제로 클릭하고 반응하는 고품격 웹 UI를 즉시 빚어내는 생성기 | 텍스트 설명이나 레퍼런스 스크린샷을 넣으면 트렌디한 타이포그래피·여백·반응형 그리드가 적용된 실제 웹 UI 즉시 렌더링 | 무료 / Premium 월 $20 (부분 유료) | 정적인 그림이 아니라 실제로 버튼이 눌리고 탭이 전환되는 고감도 웹 UI를 몇 초 만에 확인 가능 | 생성된 결과물을 Figma 원본 레이어로 역변환하기보다는 코드로 바로 쓰는 워크플로우에 적합 | UI/UX 디자이너, 기획자, 프론트엔드 개발자 |
| Relume AI (렐룸) | 웹사이트 기획부터 와이어프레임과 피그마 연동까지 에이전시 작업 속도를 5배 높여주는 기획 엔진 | 비즈니스 설명 한 줄로 전체 웹사이트 사이트맵(Sitemap) 자동 설계 후, 수천 개의 검증된 컴포넌트로 와이어프레임과 스타일가이드 즉시 생성 | 무료(1개 프로젝트) / Starter 월 $38 / Pro 월 $48 (부분 유료) | 기획자가 며칠씩 걸리던 사이트맵 설계와 와이어프레임 구성을 단 몇 분 만에 끝내고 Figma로 완벽하게 넘겨줌 | 단발성 소규모 프로젝트만 하는 개인에게는 월 구독료가 다소 높게 느껴질 수 있음 | 웹 에이전시, UX 기획자, 프리랜서 웹 디자이너 |
| Google Stitch (구 Galileo AI) | 머릿속 앱 아이디어를 단 몇 초 만에 피그마에 붙여넣을 수 있는 UI 화면으로 바꿔주는 구글의 디자인 실험실 | 자연어 프롬프트나 손그림 와이어프레임을 입력하면 완성도 높은 모바일·웹 UI 디자인과 프론트엔드 코드(HTML/CSS)를 동시에 생성 및 Figma 복사 지원 | 무료 (Google Labs 제공) (무료) | 구글의 Gemini 멀티모달 모델과 결합되어 무료로 깔끔한 UI 화면과 Figma 붙여넣기 레이어를 동시에 얻을 수 있음 | 세부 디자인 시스템 규칙이 엄격한 대규모 엔터프라이즈 제품에는 후보정이 필요 | PM·기획자, 주니어 디자이너, 앱 아이디어를 빠르게 시각화하고 싶은 창업자 |
| Lovable (UI/UX 프로토타이핑) | 기획자와 디자이너가 말로 지시해 실제 살아 움직이는 웹 프로덕트를 완성하는 UX 빌더 | 디자인 감각이 뛰어난 모던 웹 레이아웃 자동 구성, 클릭하여 특정 UI 요소만 시각적으로 직접 수정(Visual Edits) 지원 | 무료(일일 메시지) / Pro 월 $25부터 (부분 유료) | 가짜 화면 연결이 아니라 실제 데이터 입력과 화면 전환이 작동하는 프로토타입으로 UX를 검증할 수 있음 | 네이티브 iOS/Android 앱 디자인보다는 반응형 웹 애플리케이션 UI에 초점 | 서비스 기획자, 프로덕트 디자이너, 스타트업 대표 |
| Uizard (유이자드 Autodesigner) | 손그림 스케치와 스크린샷을 순식간에 편집 가능한 디지털 기획서로 바꿔주는 마법 스케치북 | 종이에 그린 손그림 스케치나 기존 앱 스크린샷을 찍어 올리면 편집 가능한 디지털 UI 화면과 클릭 시선 히트맵(Focus Predictor)으로 변환 | 무료 / Pro 월 $12 / Business 월 $39 (부분 유료) | 디자인 툴을 전혀 다룰 줄 모르는 기획자도 파워포인트 만지듯 쉽게 앱 화면 플로우를 설계 가능 | 전문 디자이너가 보기에는 세부 그리드 정밀도가 Figma 대비 단순한 편 | 비디자이너 PM·기획자, 마케터, 초기 스타트업 창업자 |
| Webflow AI (웹플로우) | 대규모 기업 웹사이트와 CMS까지 코드 한 줄 없이 완벽하게 제어하는 전문가용 웹 스튜디오 | HTML/CSS 박스 모델 기반 정밀 웹 디자인, AI 페이지 섹션 생성, CMS 콘텐츠 자동 작성·최적화 및 엔터프라이즈 호스팅 | 무료(스타터) / Basic 월 $14 / CMS 월 $23 (부분 유료) | 코드 품질과 SEO·성능·CMS 확장성 면에서 노코드 웹빌더 중 가장 탄탄한 엔터프라이즈 신뢰도 보유 | Framer보다 CSS 박스 모델(Flex/Grid) 개념 이해가 필요해 초기 진입장벽이 다소 있음 | 전문 웹 에이전시, 글로벌 B2B 마케팅 팀, 퍼블리싱 지식이 있는 웹 디자이너 |
| Spline AI (스플라인 3D) | 평면적인 웹사이트에 단숨에 시선을 빼앗는 입체 3D 인터랙션을 불어넣는 디자인 툴 | 브라우저 기반 가벼운 3D 모델링·애니메이션, AI 3D 텍스처·오브젝트 생성, 마우스 반응형 3D 씬을 React/Framer/Webflow에 코드 한 줄로 임베드 | 무료 / Super 월 $20 (부분 유료) | 무거운 Blender나 Three.js 코딩 없이도 웹사이트에 즉시 돌아가는 경량 인터랙티브 3D 요소를 손쉽게 제작 | 복잡한 3D 씬을 과도하게 넣으면 모바일 웹 로딩 속도에 영향을 줄 수 있으므로 최적화 필요 | 웹·인터랙션 디자이너, 브랜드 웹사이트 제작자, 크리에이티브 개발자 |
| Locofy.ai | 디자이너가 끝낸 피그마 시안을 클릭 한 번에 깔끔한 프론트엔드 코드로 번역해 주는 브릿지 | Large Design Model(LDM) 기반으로 완성된 Figma 디자인 시안을 반응형 React, Next.js, Vue, React Native, Flutter 코드로 정밀 변환 | 무료 체험 / 유료 토큰제 (연간·월간 플랜) (부분 유료) | 새로 디자인을 만드는 것이 아니라 우리 팀 디자이너가 짠 Figma 원본을 그대로 코드로 옮겨준다는 점에서 실무 밀착도가 높음 | Figma 레이어 구조가 정돈되어 있을수록 변환 품질이 높아짐 | 디자인 시안은 이미 Figma에 완성되어 있고 이를 퍼블리싱할 개발 공수를 줄이고 싶은 팀 |
한줄평: 전 세계 UI/UX 디자이너의 표준 작업 공간에 탑재된 가장 실무적인 디자인 어시스턴트
핵심 기능: First Draft(프롬프트로 편집 가능한 와이어프레임·UI 시안 생성), 레이어 이름 자동 정리, 프로토타입 자동 연결 및 실제 텍스트·이미지 채우기
요금제: 무료(Starter 제한) / Professional 월 $15 (부분 유료)
장점: 별도 외부 툴 없이 현업 디자이너가 매일 쓰는 Figma 캔버스 안에서 바로 편집 가능한 오토레이아웃 컴포넌트로 생성
단점: Figma 기본 툴 조작법(Auto Layout 등)을 알고 있어야 100% 활용 가능
추천 대상: 프로덕트 디자이너(UI/UX), 웹·앱 기획자, 프론트엔드 협업 팀
한줄평: 디자인 시안이 곧바로 살아 움직이는 실제 웹사이트가 되는 디자이너들의 꿈의 웹빌더
핵심 기능: Figma처럼 자유롭게 디자인하면 코딩 없이 즉시 고성능 반응형 웹사이트로 퍼블리싱, AI 레이아웃·번역·카피라이팅 내장
요금제: 무료(서브도메인) / Mini 월 $5 / Basic 월 $15 / Pro 월 $30 (부분 유료)
장점: 개발자 도움 없이 디자이너 혼자서 Apple급 인터랙션 웹사이트를 디자인부터 실제 도메인 배포·SEO까지 완결 가능
단점: 복잡한 회원제 백엔드 로직보다는 브랜드 사이트·랜딩페이지·블로그 CMS에 특화
추천 대상: 웹 디자이너, 스타트업, 크리에이티브 에이전시, 포트폴리오 제작자
한줄평: 정적인 목업을 넘어 실제로 클릭하고 반응하는 고품격 웹 UI를 즉시 빚어내는 생성기
핵심 기능: 텍스트 설명이나 레퍼런스 스크린샷을 넣으면 트렌디한 타이포그래피·여백·반응형 그리드가 적용된 실제 웹 UI 즉시 렌더링
요금제: 무료 / Premium 월 $20 (부분 유료)
장점: 정적인 그림이 아니라 실제로 버튼이 눌리고 탭이 전환되는 고감도 웹 UI를 몇 초 만에 확인 가능
단점: 생성된 결과물을 Figma 원본 레이어로 역변환하기보다는 코드로 바로 쓰는 워크플로우에 적합
추천 대상: UI/UX 디자이너, 기획자, 프론트엔드 개발자
한줄평: 웹사이트 기획부터 와이어프레임과 피그마 연동까지 에이전시 작업 속도를 5배 높여주는 기획 엔진
핵심 기능: 비즈니스 설명 한 줄로 전체 웹사이트 사이트맵(Sitemap) 자동 설계 후, 수천 개의 검증된 컴포넌트로 와이어프레임과 스타일가이드 즉시 생성
요금제: 무료(1개 프로젝트) / Starter 월 $38 / Pro 월 $48 (부분 유료)
장점: 기획자가 며칠씩 걸리던 사이트맵 설계와 와이어프레임 구성을 단 몇 분 만에 끝내고 Figma로 완벽하게 넘겨줌
단점: 단발성 소규모 프로젝트만 하는 개인에게는 월 구독료가 다소 높게 느껴질 수 있음
추천 대상: 웹 에이전시, UX 기획자, 프리랜서 웹 디자이너
한줄평: 머릿속 앱 아이디어를 단 몇 초 만에 피그마에 붙여넣을 수 있는 UI 화면으로 바꿔주는 구글의 디자인 실험실
핵심 기능: 자연어 프롬프트나 손그림 와이어프레임을 입력하면 완성도 높은 모바일·웹 UI 디자인과 프론트엔드 코드(HTML/CSS)를 동시에 생성 및 Figma 복사 지원
요금제: 무료 (Google Labs 제공) (무료)
장점: 구글의 Gemini 멀티모달 모델과 결합되어 무료로 깔끔한 UI 화면과 Figma 붙여넣기 레이어를 동시에 얻을 수 있음
단점: 세부 디자인 시스템 규칙이 엄격한 대규모 엔터프라이즈 제품에는 후보정이 필요
추천 대상: PM·기획자, 주니어 디자이너, 앱 아이디어를 빠르게 시각화하고 싶은 창업자
한줄평: 기획자와 디자이너가 말로 지시해 실제 살아 움직이는 웹 프로덕트를 완성하는 UX 빌더
핵심 기능: 디자인 감각이 뛰어난 모던 웹 레이아웃 자동 구성, 클릭하여 특정 UI 요소만 시각적으로 직접 수정(Visual Edits) 지원
요금제: 무료(일일 메시지) / Pro 월 $25부터 (부분 유료)
장점: 가짜 화면 연결이 아니라 실제 데이터 입력과 화면 전환이 작동하는 프로토타입으로 UX를 검증할 수 있음
단점: 네이티브 iOS/Android 앱 디자인보다는 반응형 웹 애플리케이션 UI에 초점
추천 대상: 서비스 기획자, 프로덕트 디자이너, 스타트업 대표
한줄평: 손그림 스케치와 스크린샷을 순식간에 편집 가능한 디지털 기획서로 바꿔주는 마법 스케치북
핵심 기능: 종이에 그린 손그림 스케치나 기존 앱 스크린샷을 찍어 올리면 편집 가능한 디지털 UI 화면과 클릭 시선 히트맵(Focus Predictor)으로 변환
요금제: 무료 / Pro 월 $12 / Business 월 $39 (부분 유료)
장점: 디자인 툴을 전혀 다룰 줄 모르는 기획자도 파워포인트 만지듯 쉽게 앱 화면 플로우를 설계 가능
단점: 전문 디자이너가 보기에는 세부 그리드 정밀도가 Figma 대비 단순한 편
추천 대상: 비디자이너 PM·기획자, 마케터, 초기 스타트업 창업자
한줄평: 대규모 기업 웹사이트와 CMS까지 코드 한 줄 없이 완벽하게 제어하는 전문가용 웹 스튜디오
핵심 기능: HTML/CSS 박스 모델 기반 정밀 웹 디자인, AI 페이지 섹션 생성, CMS 콘텐츠 자동 작성·최적화 및 엔터프라이즈 호스팅
요금제: 무료(스타터) / Basic 월 $14 / CMS 월 $23 (부분 유료)
장점: 코드 품질과 SEO·성능·CMS 확장성 면에서 노코드 웹빌더 중 가장 탄탄한 엔터프라이즈 신뢰도 보유
단점: Framer보다 CSS 박스 모델(Flex/Grid) 개념 이해가 필요해 초기 진입장벽이 다소 있음
추천 대상: 전문 웹 에이전시, 글로벌 B2B 마케팅 팀, 퍼블리싱 지식이 있는 웹 디자이너
한줄평: 평면적인 웹사이트에 단숨에 시선을 빼앗는 입체 3D 인터랙션을 불어넣는 디자인 툴
핵심 기능: 브라우저 기반 가벼운 3D 모델링·애니메이션, AI 3D 텍스처·오브젝트 생성, 마우스 반응형 3D 씬을 React/Framer/Webflow에 코드 한 줄로 임베드
요금제: 무료 / Super 월 $20 (부분 유료)
장점: 무거운 Blender나 Three.js 코딩 없이도 웹사이트에 즉시 돌아가는 경량 인터랙티브 3D 요소를 손쉽게 제작
단점: 복잡한 3D 씬을 과도하게 넣으면 모바일 웹 로딩 속도에 영향을 줄 수 있으므로 최적화 필요
추천 대상: 웹·인터랙션 디자이너, 브랜드 웹사이트 제작자, 크리에이티브 개발자
한줄평: 디자이너가 끝낸 피그마 시안을 클릭 한 번에 깔끔한 프론트엔드 코드로 번역해 주는 브릿지
핵심 기능: Large Design Model(LDM) 기반으로 완성된 Figma 디자인 시안을 반응형 React, Next.js, Vue, React Native, Flutter 코드로 정밀 변환
요금제: 무료 체험 / 유료 토큰제 (연간·월간 플랜) (부분 유료)
장점: 새로 디자인을 만드는 것이 아니라 우리 팀 디자이너가 짠 Figma 원본을 그대로 코드로 옮겨준다는 점에서 실무 밀착도가 높음
단점: Figma 레이어 구조가 정돈되어 있을수록 변환 품질이 높아짐
추천 대상: 디자인 시안은 이미 Figma에 완성되어 있고 이를 퍼블리싱할 개발 공수를 줄이고 싶은 팀