정보들을 모아보자

AI UI 디자인 도구 정리

(•ө•) — Wed, 11 Mar 2026 13:00:12 +0900

최근 웹사이트와 앱을 만드는 방식이 빠르게 바뀌고 있습니다.
예전에는 기획 → 디자인 → 개발 순서로 진행되었다면, 이제는 프롬프트만으로 UI와 코드까지 생성하는 시대가 되었습니다.

이번 글에서는 요즘 많이 언급되는 AI UI 도구 6가지를 정리해 보겠습니다.

Relume
Uizard
Figma Make
Stitch
Framer AI
v0

각 서비스가 어떤 역할을 하는지, 그리고 실무에서 어떻게 활용되는지 중심으로 살펴보겠습니다.

1. Relume

한 줄 요약

웹사이트 사이트맵과 와이어프레임을 자동 생성해 주는 AI 도구입니다.

주요 기능

텍스트 입력 → 사이트맵 자동 생성
사이트맵 → 와이어프레임 자동 생성
디자인 시스템(Style Guide) 생성
Figma / Webflow / React export
다양한 웹 UI 컴포넌트 제공

실무 활용 방식

웹사이트 제작 초기 단계에서 많이 사용됩니다.

Relume
→ 사이트맵 생성
→ 와이어프레임 생성

Figma
→ 디자인 작업

Webflow / 개발
→ 실제 구현

사용 예시

예를 들어 다음과 같은 프롬프트를 입력합니다.

피트니스 센터 홈페이지

그러면 AI가 다음과 같은 사이트 구조를 생성합니다.

Home
Programs
Trainers
Pricing
Contact

장점

웹사이트 구조 설계 시간을 크게 단축
클라이언트 제안서 제작에 유용

단점

디자인 완성도는 기본 수준

2. Uizard

한 줄 요약

아이디어를 앱 UI 디자인으로 자동 생성해 주는 도구입니다.

주요 기능

텍스트 → UI 화면 생성
스케치 → UI 변환
스크린샷 → UI 변환
여러 화면이 포함된 프로토타입 생성

실무 활용 방식

스타트업이나 기획 단계에서 많이 사용됩니다.

아이디어 입력
→ 앱 UI 생성
→ 프로토타입 제작

사용 예시

food delivery app

생성되는 화면 예시

Home
Menu
Cart
Profile

장점

비디자이너도 UI를 만들 수 있음
MVP 제작 속도가 빠름

단점

디자인 완성도는 제한적

3. Figma Make

한 줄 요약

프롬프트를 통해 UI 디자인을 생성하는 Figma의 AI 기능입니다.

주요 기능

텍스트로 UI 생성
Figma 파일 기반 작업
프로토타입 생성 지원

실무 활용 방식

프롬프트 입력
→ UI 생성
→ Figma에서 수정
→ 개발 전달

사용 예시

todo app with sidebar and dark theme

장점

Figma 환경에서 바로 작업 가능
기존 디자인 워크플로 유지

단점

아직 발전 중인 기능

4. Stitch

한 줄 요약

UI 디자인과 프론트엔드 코드를 동시에 생성하는 AI 도구입니다.

주요 기능

텍스트 → UI 생성
이미지 / 와이어프레임 입력 가능
프론트엔드 코드 생성

실무 활용 방식

프롬프트 입력
→ UI 생성
→ 코드 생성
→ 개발 적용

사용 예시

dashboard with charts

장점

디자인과 코드 동시 생성

단점

아직 실험적인 단계

5. Framer AI

한 줄 요약

프롬프트만으로 실제 웹사이트를 생성하고 배포까지 가능한 도구입니다.

주요 기능

텍스트 → 웹사이트 생성
반응형 디자인 자동 적용
CMS 기능
바로 배포 가능

실무 활용 방식

프롬프트 입력
→ 사이트 생성
→ 디자인 수정
→ 배포

사용 예시

portfolio website for photographer

장점

빠르게 웹사이트 제작 가능
디자인과 배포가 한 번에 해결

단점

복잡한 서비스 구축에는 한계

6. v0

한 줄 요약

텍스트 입력으로 React UI 코드를 생성하는 도구입니다.

주요 기능

텍스트 → React 컴포넌트 생성
Tailwind CSS 기반
shadcn/ui 컴포넌트 사용
실제 프로젝트에서 사용 가능한 코드 생성

실무 활용 방식

프롬프트 입력
→ UI 코드 생성
→ 프로젝트에 적용

사용 예시

admin dashboard with sidebar and table

장점

실제 사용 가능한 코드 생성
프론트엔드 개발 속도 향상

단점

복잡한 로직은 직접 구현 필요

AI 디자인 도구 실무 워크플로

요즘 가장 현실적인 AI 디자인 워크플로는 다음과 같습니다.

Relume
→ 사이트 구조 설계

Figma
→ 디자인 작업

v0
→ UI 코드 생성

개발
→ Next.js / React

또는 MVP 제작에서는 다음과 같이 사용됩니다.

Uizard
→ 초기 UI 제작

Figma
→ 디자인 정리

v0
→ 코드 생성

도구 역할 정리

도구	역할	주요 사용자
Relume	사이트 구조 / 와이어프레임	웹 디자이너
Uizard	UI 생성	기획자
Figma Make	디자인 자동 생성	디자이너
Stitch	UI + 코드 생성	개발자
Framer AI	웹사이트 생성	마케터
v0	React UI 코드 생성	프론트엔드 개발자

마무리

AI 디자인 도구는 점점 디자인과 개발의 경계를 허물고 있습니다.

예전 방식

기획 → 디자인 → 개발

현재 흐름

프롬프트 → UI 생성 → 코드 생성 → 서비스

앞으로는 디자이너와 개발자 모두 AI 도구를 활용해 더 빠르게 제품을 만드는 능력이 중요한 시대가 될 것입니다.

Affinity.studio는 어떤 사이트일까? 디자이너가 알아야 할 서비스 차이

(•ө•) — Fri, 6 Mar 2026 09:00:42 +0900

최근 디자인 커뮤니티나 개발자 커뮤니티에서 Affinity라는 이름을 자주 볼 수 있습니다.

특히 Adobe 대체 프로그램으로 많이 언급되면서 관심을 갖는 사람들이 늘고 있습니다.

그렇다면 Affinity와 Adobe는 어떤 차이가 있을까요? 그리고 Affinity.studio 사이트는 무엇을 하는 곳일까요?

이번 글에서는 두 서비스의 특징과 차이를 쉽게 정리해 보겠습니다.

Affinity.studio는 어떤 사이트인가

Affinity.studio는 그래픽 디자인 소프트웨어 Affinity를 소개하고 다운로드할 수 있는 공식 웹사이트입니다.

이 프로그램은 원래 세 가지 디자인 프로그램으로 구성되어 있었습니다.

Affinity Designer – 벡터 디자인 (Illustrator와 유사)
Affinity Photo – 사진 편집 (Photoshop과 유사)
Affinity Publisher – 출판 및 레이아웃 작업 (InDesign과 유사)

이 세 프로그램은 원래 각각 따로 제공되었지만, 최근에는 하나의 통합 플랫폼으로 발전했습니다.

Affinity는 벡터 그래픽, 사진 편집, 출판 기능을 모두 지원하는 전문 그래픽 편집 소프트웨어입니다.

또한 이 프로그램은 영국의 소프트웨어 회사 Serif가 개발했으며, 2024년에 Canva에 인수되었습니다.

Adobe와 Affinity의 차이

그래픽 디자인 분야에서 가장 유명한 회사는 역시 Adobe입니다.
Affinity는 바로 이 Adobe 프로그램의 대안으로 등장했습니다.

대표적인 대응 관계는 다음과 같습니다.

Adobe	Affinity
Adobe Photoshop	Affinity Photo
Adobe Illustrator	Affinity Designer
Adobe InDesign	Affinity Publisher

즉, Adobe가 제공하는 주요 디자인 프로그램을 Affinity도 거의 동일하게 제공합니다.

가장 큰 차이: 가격 정책

두 서비스의 가장 큰 차이는 가격 정책입니다.

Adobe

월 구독 방식
Creative Cloud 구독 필요
장기적으로 비용이 많이 발생

Affinity

과거에는 한 번 구매 방식
최근에는 기본 기능을 무료로 제공하는 방향으로 변화

최근에는 Affinity가 무료 제공 정책을 발표하면서 디자인 업계에서 큰 관심을 받았습니다.

성능과 기능 차이

두 프로그램 모두 전문 디자이너가 사용할 수 있는 수준이지만, 약간의 차이가 있습니다.

Affinity 장점

빠른 성능
가벼운 프로그램
벡터 + 이미지 편집을 동시에 처리 가능
비교적 낮은 비용

Adobe 장점

플러그인 생태계가 매우 크다
협업 기능이 강하다
디자인 업계 표준

그래서 현재까지 기업이나 디자인 회사에서는 Adobe가 더 많이 사용됩니다.

Affinity가 주목받는 이유

Affinity가 빠르게 성장한 이유는 다음과 같습니다.

Adobe보다 저렴한 가격
높은 성능
디자이너 친화적인 인터페이스
통합 디자인 환경

특히 프리랜서 디자이너나 개인 창작자에게는 매우 매력적인 선택지가 되고 있습니다.

Affinity.studio는 디자인 프로그램 Affinity를 제공하는 공식 사이트이며, Adobe와 경쟁하는 그래픽 디자인 소프트웨어 플랫폼입니다.

Adobe → 업계 표준, 구독 기반
Affinity → 저렴하거나 무료, 개인 창작자에게 인기

앞으로 디자인 시장에서는 Adobe와 Affinity의 경쟁이 더욱 치열해질 가능성이 높습니다.

Affinity | Professional Creative Software, Free for Everyone

Powerful, precise, and free forever. Discover Affinity — the next generation of professional photo, design, and layout software built for creative freedom.

www.affinity.studio

유튜브 수익화

(•ө•) — Sat, 17 Jan 2026 09:00:46 +0900

일단 에드센스 광고비

멤버쉽 - 유료 구독

슈퍼챗

제휴마케팅

쇼핑스토어

채널판매

레이아웃 분기를 위한 폴더 구조

(•ө•) — Tue, 18 Nov 2025 11:00:36 +0900

Next.js는 전체 레이아웃을 공유하기 때문에 각 레이아웃별로 폴더를 나누어주어야 합니다.

폴더명에 ()를 사용하는 경우 URL에 반영되지 않습니다.

폴더 구조의 변경에 따라 layout.tsx 파일 내에 있는 globals.css 파일경로 수정이 필요합니다.

app/
  (dashboard)/
    layout.tsx
    home/
      page.tsx         ← /home
  (open)/
    layout.tsx
    page.tsx           ← /
    about/
      page.tsx         ← /about

대시보드 유무에 따른 폴더 분기였습니다.

Shadcn/ui 설치

(•ө•) — Mon, 17 Nov 2025 05:00:32 +0900

Shadcn/ui는 React + Tailwind 기반의 UI 컴포넌트 라이브러리입니다.

컴포넌트가 프로젝트 안으로 복사되기 때문에 직접 수정해서 쓸 수 있어 쉽게 수정할 수 있습니다.

/projrct 폴더에 Shadcn/ui를 설치합니다.

옵션은 기본으로 설치합니다.

npx shadcn@latest init

간단하게 설치가 완료되었습니다.

The Foundation for your Design System - shadcn/ui

A set of beautifully designed components that you can customize, extend, and build on. Start here then make it your own. Open Source. Open Code.

ui.shadcn.com

Next.js 설치

(•ө•) — Sun, 16 Nov 2025 05:00:48 +0900

Next.js는 React 기반의 풀스택 프레임워크입니다.

/ 폴더에 Next.js를 설치합니다.

설치 과정 중에 project 폴더가 생성됩니다.

나머지 옵션은 기본으로 설치합니다.

npx create-next-app@latest

간단하게 설치가 완료 되었습니다.

Next.js by Vercel - The React Framework

Next.js by Vercel is the full-stack React framework for the web.

nextjs.org

콘텐츠 확장

(•ө•) — Tue, 11 Nov 2025 08:00:14 +0900

기본적으로 블로그에 작성

블로그 섬네일을 인스타에 적용

블로그 내용을 인스타에 요약

블로그 내용을 유튜브로 적용

사진을 편집해서 유튜브 쇼츠 제작

쇼츠를 릴스와 틱복에 적용

아이콘 사이트입니다.

(•ө•) — Thu, 16 Oct 2025 07:00:03 +0900

아이콘 입니다.

https://icons8.com/

Free Icons, Clipart Illustrations, Photos, and Music

Get all graphics at hand Comprehensive library of graphics at your fingertips

icons8.com

목업사이트 입니다.

(•ө•) — Wed, 15 Oct 2025 07:00:36 +0900

목업사이트 입니다.

https://wannathis.one/

High Quality Mockups and 3D Illustrations for Design Projects

High-quality mockups and 3d illustrations for digital products. Free and premium assets to help creators work faster and make projects standout.

wannathis.one

포즈 참고하기 좋은 사이트

(•ө•) — Tue, 14 Oct 2025 07:00:29 +0900

웹에서 포즈를 만들어 볼 수 있는 사이트입니다.

https://justsketch.me/

JustSketchMe

Character posing for artists

justsketch.me