UIUX 디자인 AI 툴 5종 비교
5개의 AI에게 같은 프롬프트를 던져봤다
시작하며
너무 늦은 감이 있다.
AI 디자인 툴에 대한 이야기는 이미 2024년부터 한참 돌았고, 주변 디자이너 분들도 각자 나름의 스택을 정리해둔 눈치다. 그런데도 굳이 이 글을 쓰는 이유는, 내가 실제로 업무에서 써본 툴과 써볼까 말까 고민만 하던 툴들을 한 번은 같은 선상에 올려두고 정리하고 싶었기 때문이다.
툴마다 잘하는 게 다르고, 쓰는 맥락도 다르기 때문이다. 그래서 오늘은 같은 프롬프트를 다섯 개의 AI 툴에 동일하게 던져보고, 어떤 결과가 나오는지 직접 비교해보려고 한다.
미리 말씀드리면, 이 글은 어디까지나 내 개인의 주관적인 견해다. 써본 기간도, 작업한 프로젝트 성격도 다르다 보니 같은 툴을 써도 사람마다 느끼는 게 완전히 다를 수 있다. 이 글은 주니어 디자이너 한 명의 체감 리포트 정도로 가볍게 읽어주시면 좋겠다.
프롬프트 일부
브런치는 코드 블록을 지원하지 않기 때문에 이미지로 대체했다.
재미있는 아이디어가 하나 떠올라서 프롬프트로 만들어봤다. "디자이너와 개발자 사이의 번역기" 라는 가상의 SaaS 서비스.
디자이너가 "여기 좀 더 깔끔하게요"라고 하면, CSS, Tailwind, Jira 티켓, Slack 메시지로 변환해주는 웹앱이다. 반대 방향 번역도 된다.
물론 이제는 AI한테 그냥 물어보면 된다. 그런데도 굳이 이걸 고른 건 내가 실무에서 제일 자주 겪는 장면이라 결과물이 쓸만한지 바로 판단이 설 것 같아서였다. 프롬프트는 브랜드 컬러, 페이지 구성, 컴포넌트 스타일, 마이크로카피까지 기획서 쓰듯이 구체적으로 적었다.
1. Readdy.ai
readdy.ai의 작업물장점
이 친구의 장점은 뚜렷하다.
피그마로 가져갈 수 있다는 것. 유료 플랜부터 Figma export가 가능한데, 레이아웃과 타이포그래피가 보존된 채로 넘어온다. readdy에서 피그마 플러그인도 지원해서 쉽게 복사 붙여넣기 할 수 있다. 피그마로 가져가서 후보정을 할 수 있다는 건 디자이너 입장에선 정말 큰 장점이다.
또 하나는 가격이다. 다른 AI 툴들에 비해 저렴한 편이고, 토큰 소모도 심하다고 느끼진 못했다.
단점
과도한 그라데이션 사용한국 정서랑 안 맞는 건지, 아니면 쓰고 있는 UI 라이브러리 자체가 그런 건지는 모르겠다. 어쨌든 결과물을 받아 들고 "오 예쁘다"라는 생각이 든 적이 거의 없었다. Figma로 가져와서 후보정을 한다는 전제가 있어야 쓸 수 있는 툴이라는 뜻이기도 하다.
프로젝트 개수 제한도 있다.
제일 저렴한 요금제를 쓰면 프로젝트를 최대 10개까지만 만들 수 있다. 그 이상 작업하려면 기존 프로젝트를 삭제해야 하는 구조다.
사실 내 첫 UIUX AI 툴이 readdy였는데, 지금은 쓰지 않고 있다.
이유는 결국 앞서 말한 것과 같다. 디자인이 정말 예쁘지 않기 때문이다. 과한 그라데이션이 기본으로 깔려 있고, Pretendard 같은 한글 폰트도 제대로 적용되지 않는다. 디자이너로서 결과물을 볼 때마다 "이걸 또 처음부터 다듬어야 하나" 싶은 피로감이 쌓였다.
가끔 인스타그램에서 인플루언서들을 통해 홍보가 돌고 있던데, 솔직히 잘 이해되진 않는다.
2. Lovable.dev
장점
이 친구의 장점은 현 이미지에서 잘 드러나진 않지만 디자인을 정말 깔끔하게 잘한다.
한국 정서와 잘 맞는 건가? AI가 만든 거 같다 싶은 애들 느낌이 다 lovable 디자인과 유사하다.
그래서 이건 장점이자 단점이다.
그리고 컬러 시스템을 제공해준다.
원하는 색 계열을 체계적으로 펼쳐서 볼 수 있어서, 디자인 시스템을 잡아가면서 작업할 때 편하다. 단순히 색을 뱉어주는 게 아니라 구조를 보여준다는 점이 좋다.
또 하나는 크레딧 이월.
이번 달에 다 못 쓴 크레딧이 그냥 사라지지 않고 다음 달로 넘어간다 (유료 플랜 기준). 다른 AI 툴들이 월말에 크레딧을 강제로 소멸시키는 걸 생각하면 고마운 정책이다.
단점
피그마로 옮겨올 수 없다.
lovable은 결과물이 코드 기반으로 나오기 때문에, 피그마로 가져가려면 html.to.design 같은 플러그인을 거쳐야 한다. 이 플러그인도 한도가 있기 때문에 힘든 부분이 있다. readdy가 Figma export를 정식으로 지원하는 것과 가장 크게 대비되는 지점.
크레딧이 빨리 닳는다.
롤오버가 된다고 해도 기본 소모 속도가 워낙 빠르다. 여러 후기에서 "정작 중요한 시기에 크레딧이 부족해진다"고 한다. 디자인을 예쁘게 다듬으려고 반복 요청을 하면 순식간에 없어진다.
그리고 앞서 말한 AI스러운 획일성
어떤 프롬프트를 넣어도 lovable 특유의 그 깔끔한 무드가 기본값으로 나온다. 처음엔 오 예쁘다 싶지만, 여러 개 만들다 보면 전부 같은 사람이 만든 것처럼 보인다. 브랜드 아이덴티티가 중요한 프로젝트에는 오히려 방해가 되는 지점.
3. Stitch
장점
이 친구의 가장 큰 장점은 무료라는 것이다. (물론 월 총 550회로 제한이 있긴 하다)
Google Labs에서 내놓은 실험 프로젝트라 별도 구독 없이 쓸 수 있다. 크레딧 걱정 없이 마음껏 돌려볼 수 있다는 게 꽤 크다.
그리고 또 하나, 디자인 시스템을 만들어준다는 것. 이게 정말 큰 장점인 것 같다.
대부분의 AI 툴은 "예쁜 화면 한 장"을 뽑아주는 데 집중한다. 그런데 디자이너가 실무에서 필요한 건 그 한 장이 아니라, 여러 화면에 걸쳐 일관되게 적용할 수 있는 컬러 팔레트, 타이포 스케일, 컴포넌트 규칙이다. Stitch는 그걸 정리된 형태로 뽑아준다. 화면을 생성할 때 그 뒤에 깔린 시스템을 같이 보여주는 셈이다.
마지막으로 내보내기 경로가 진짜 다양하다.
결과물을 하나의 툴 안에 가둬두지 않는다. Figma, AI Studio, Jules, .zip 다운로드, 클립보드로 코드 복사, MCP 연동, 프로젝트 요약, 인스턴트 프로토타입까지.
화면 오른쪽 내보내기 패널을 열어보면 선택지가 8개나 된다. 원하는 다음 작업에 따라 꺼내갈 수 있다는 뜻이다. 디자이너면 Figma, 개발자 넘길 거면 .zip이나 코드 복사, 프로토타입 보여줄 거면 바로 링크. 앞서 본 lovable이 피그마로 못 옮겨와서 답답했던 것과 비교하면 훨씬 자유롭다.
단점
디자인 퀄리티가 아쉽다.
"와 예쁘다"는 인상보다는 "이걸 어떻게 써먹어야 할지" 고민하게 되는 결과물이 더 많다. 결국 얘도 후보정이 필수다. 받은 결과물을 그대로 쓸 수는 없고, 디자이너가 한 번 갈아엎어야 그나마 쓸만해진다.
한글 지원은 더더욱 부족하다.
영어로 뽑으면 그나마 봐줄 만한데, 한글 UI를 요청하면 폰트도 어색하고 자간, 행간도 정돈되지 않은 상태로 나온다. 한국어 서비스에 바로 갖다 쓸 수준은 아니다.
4. Figma Make
장점
사실 나는 아직 발견하지 못했다. 피그마에 있어서 이동이 편하다는 정도이다.
단점
결과물 품질도 아쉽다.
lovable이나 v0 같은 경쟁 툴보다 뽑는 디자인이 평범하다. 제네릭하고, 어디서 본 것 같은 결과물이 자주 나온다. Figma가 디자인 툴의 표준인데 정작 AI가 뽑는 디자인은 경쟁 툴보다 못한 셈이다.
피그마로 가져오려면 유료 플랜이 필요하다.
readdy나 Stitch는 Figma export를 당연하게 지원하는데, 정작 Figma가 만든 Make만 그게 안 된다.
프리뷰가 웹사이트처럼 돌아가지 않는다.
readdy나 lovable은 도메인을 연결해서 실제 웹사이트로 배포할 수 있다. 링크를 공유하면 다른 사람이 브라우저에서 바로 접속해서 눌러볼 수 있다. 근데 Figma Make는 다르다. 프리뷰가 Figma 환경 안에서만 돌아간다. 공유 링크를 누르면 결국 Figma의 프리뷰 창이 열리는 거지, 진짜 웹사이트가 뜨는 게 아니다.
5. Claude Code
사실 클로드 코드는 디자인 툴이 아니다. 개발자들이 터미널에서 코드 작업할 때 쓰는 AI 도구다. 근데 역설적으로 나는 요즘 디자인 작업에 이걸 가장 많이 쓴다.
장점
개발이 디자인 의도대로 된다.
이게 클로드 코드를 쓰는 가장 큰 이유다. 디자이너가 시안을 넘기면 개발 단계에서 의도와 다르게 구현되는 일이 정말 많다. 여백이 미묘하게 어긋나거나, hover 상태가 빠지거나, 모바일에서 레이아웃이 무너지거나. 근데 Claude Code는 디자인 시스템을 먼저 이해시키고 작업에 들어가기 때문에, 내가 처음에 의도한 톤과 규칙이 끝까지 유지된다. 디자인에서 개발로 넘어가는 전통적인 핑퐁 과정에서 발생하던 의도 손실이 거의 없다.
실제 개발자처럼 협업한다.
readdy나 lovable처럼 프롬프트 한 방에 받아내는 구조가 아니다. 미리 디자인 시스템을 입력해두고, 그걸 기반으로 대화하면서 작업을 쌓아간다. 섹션을 다시 짜거나 컴포넌트를 추가하는 요청이 쌓이면서 프로젝트가 발전한다. 일회성 결과물을 받는 게 아니라, 진짜 개발자랑 같이 프로젝트를 키워가는 감각이다.
디자인 시스템을 벗어나지 않는다.
한번 시스템을 세팅해두면 그 다음부터는 이탈이 거의 없다. Stitch가 디자인 시스템을 만들어주는 거라면, Claude Code는 내가 만든 시스템 안에서 일관되게 작업해준다. 프로젝트가 커질수록 이 안정성의 가치가 드러난다.
맥락을 기억한다.
기존 파일들을 다 이해한 상태에서 작업한다. 이전에 만든 컴포넌트를 참조해서 같은 스타일로 확장해달라는 요청도 그냥 된다. readdy나 lovable은 대화가 쌓일수록 맥락이 흐트러지는데, Claude Code는 오히려 쌓일수록 정확해진다. 디자이너와 개발자 사이에서 반복되던 확인 커뮤니케이션이 사라지는 감각.
반응형을 기본으로 짠다.
모바일 대응을 따로 요청하지 않아도 반응형을 고려한 코드가 나온다. 브레이크포인트도 합리적으로 잡아준다.
세밀한 수정이 진짜 잘 된다.
여백을 몇 px만 줄이거나 버튼 hover 상태만 바꾸는 등의 디테일한 요청이 정확하게 먹힌다. 다른 AI 툴들이 약한 지점을 유일하게 제대로 해결해준다.
단점
개발 지식이 어느 정도 필요하다.
이게 유일하면서도 결정적인 진입 장벽이다. Claude Code는 터미널에서 돌아가고, 결과물이 코드로 나오고, 브라우저를 띄워서 직접 확인해야 한다. Git이나 npm 같은 걸 아예 모르면 세팅부터 벽이 된다.
디자이너로서 HTML/CSS 정도는 만질 줄 알고, 터미널에 명령어 몇 개 치는 것에 거부감이 없다면 괜찮다. 근데 그게 안 되는 상태라면 다른 툴부터 시작하는 게 맞다.
그래서
Claude Code는 내가 지금 가장 자주 손이 가는 툴이다.
예쁜 결과물을 한 방에 뽑아내는 툴은 아니지만, 내 디자인 시스템 안에서 오래 같이 작업할 수 있는 툴이다. 결국 디자이너한테 필요한 건 예쁜 한 장이 아니라 일관된 여러 장이고, 그게 가능한 유일한 툴이 지금으로선 Claude Code였다.
마무리하며
AI 툴을 쓰면서 점점 느끼는 건, 이 툴들이 디자이너를 대체하는 게 아니라 디자이너가 뭘 잘해야 하는지를 더 선명하게 만든다는 점이다.
프롬프트를 잘 쓰려면 결국 내가 뭘 원하는지를 명확하게 언어화해야 하고 결과물을 판단하려면 좋은 디자인에 대한 감각이 필요하고, 후보정을 하려면 기본기가 있어야 한다. AI가 아무리 발전해도 이 부분은 디자이너 몫이다.
너무 늦은 비교일지 몰라도, 5개 툴을 한 번에 늘어놓고 비교해본 건 나한테도 도움이 됐다. 뭘 어디에 쓰는 게 맞는지 이제야 좀 정리가 된 느낌. 같은 고민 중인 주니어 디자이너에게 작은 참고가 되길 바란다.