Wonder
Wonder (Aquila Lab) · 이미지 · 코딩
Wonder는 캔버스와 코드베이스가 같은 것인 AI 디자인 도구다. 목업을 그려 엔지니어에게 넘기는 대신, 한곳에서 AI 디자인에서 코드로 넘어가 서비스용 React와 Tailwind(또는 순수 CSS)를 내보낸다. AI로 UI를 생성하고, 익숙한 캔버스에서 직접 손보고, 번역 단계 없이 결과물을 출시하려는 프로덕트 팀을 위한 디자인 도구다. Wonder는 Claude, Cursor 같은 코딩 에이전트에 연결되는 MCP 서버도 제공한다. 디자인 수정과 코드 수정은 계속 동기화된다.
Wonder 소개
Wonder란 무엇인가
Wonder는 하나의 발상 위에 세워진 디자인 도구다. 캔버스에서 보이는 것이 곧 출시하는 것이다. 디자인 포맷이 코드와 일대일로 대응하므로, 시각적으로 배치한 컴포넌트가 프로젝트의 실제 React 컴포넌트가 된다. 눈대중으로 화면을 다시 짜던 마크업 단계가 사라진다. 번역 단계도, 추측도 없다.
이 제품은 혼자 쓰는 취미 사용자가 아니라 프로덕트 팀을 겨냥한다. 디자이너가 이미 아는 도구(캔버스, 레이어, 컴포넌트)에 AI 생성과 내장 채팅을 결합하고, GitHub 저장소에 연결해 AI가 기존 코드를 읽고 캔버스에 실제 UI를 다시 만들어 내도록 한다. MCP를 통해 코딩 에이전트로 같은 캔버스에 접근할 수 있으니, 앱의 나머지를 작성하는 사람이 편집기를 떠나지 않고 Wonder를 다룰 수 있다.
주요 한계는 범위와 가격이다. Wonder가 출력하는 것은 React와 Tailwind(또는 순수 CSS)라서 다른 프런트엔드 스택을 쓰는 팀은 내보내기에서 얻는 이득이 적다. 무료 계정에도 상한이 있다. 제한된 AI 채팅 토큰, 비공개 파일 3개, 25MB 이미지 업로드다. 금방 바닥난다.
시작하기
- app.wonder.so에서 계정을 만들고 새 파일을 연다. 공개 파일은 무제한이고, 무료 요금제의 비공개 파일은 3개로 제한된다.
- 원하는 화면이나 컴포넌트를 AI 채팅에 설명하거나, 기존 레이아웃에서 시작해 AI가 옆에서 생성하도록 한다.
- 결과물은 여느 디자인 도구에서처럼 편집한다. 캔버스에는 레이어, 컴포넌트, 디자인 변수, 그리드, 셰이더와 아이콘 라이브러리가 있다.
- 인계를 위해 워크스페이스를 연결한다. GitHub 저장소를 연결해 실제 UI를 캔버스로 가져오거나, Wonder MCP 서버를 Claude, Cursor, Codex에 추가해 변경을 양방향으로 움직인다.
- 서비스용 React와 Tailwind 코드를 프로젝트로 내보내거나 동기화한다.
제품 정보
Wonder의 요금, 지원 플랫폼, 성능을 한눈에 확인해 보세요.
추천 대상
이 도구가 가장 잘 맞는 사용자, 작업, 상황입니다.
사용자
- 프로덕트 디자이너
- 디자인 엔지니어와 프런트엔드 개발자
- 작은 프로덕트 팀
- 첫 UI를 만드는 창업자
작업
- 텍스트 지시로 UI 생성하기
- 기존 제품 UI 다시 만들기
- 디자인을 React와 Tailwind로 내보내기
- 디자인과 코드 동기화 유지하기
- 인터랙티브 레이아웃 시제품 만들기
활용 상황
- 새 기능 화면 착수하기
- 엔지니어링으로 인계하기
- 코딩 에이전트 안에서 작업하기
- 기존 페이지 재디자인하기
- 팀 리뷰 세션
주요 기능
코드에 대응하는 캔버스
Wonder의 핵심 주장은 디자인 포맷이 코드와 일대일로 대응한다는 것이다. 캔버스 위의 컴포넌트는 프로젝트 안의 컴포넌트와 같은 것이다. 요소를 시각적으로 배치하면 결과물은 그 이미지가 아니라 진짜 React 컴포넌트다. 화면을 손으로 다시 만드는 데 지친 팀에게 바로 그 점이 이 도구의 목적이다.
AI 생성과 내장 채팅
편집기에는 캔버스에서 UI를 생성하고 수정하는 AI 채팅이 있다. 원하는 것을 설명하고, 레이아웃을 다듬으면서 계속 대화할 수 있다. Pro 계정은 초대한 사용자 한 명당 매달 20달러어치 AI 토큰을 받는다. 무료 등급은 토큰이 제한된 상태로 유지된다.
React와 Tailwind 내보내기
완성한 작업은 서비스용 React와 Tailwind로 내보내지고, 대안으로 순수 CSS도 쓸 수 있다. 코드는 실제 프로젝트에 곧바로 들어가도록 만들어졌다. 인계용 폴더가 아니다. 스택이 React 기반이 아니라면 바로 여기서 Wonder의 적합성이 떨어진다.
Wonder MCP 서버
mcp.wonder.so의 MCP 서버는 Wonder를 Claude, Cursor, Codex 같은 코딩 에이전트에 연결한다. 에이전트는 캔버스에 대한 읽기와 쓰기 권한을 얻어, 디자인을 코드로 가져오거나 코드를 디자인으로 되돌릴 수 있다. 설정은 표준 OAuth 로그인을 쓴다. 관리할 API 키가 없다. 무료 등급을 포함해 모든 요금제에서 무료다.
GitHub와 데스크톱 앱
GitHub 저장소를 연결하면 AI가 기존 코드를 읽고 실제 제품 UI를 캔버스에 다시 만든다. Wonder는 Mac과 Windows 데스크톱 앱으로도 돌아가므로, 브라우저 탭에서 일하고 싶지 않은 사람에게 맞는다. 브라우저가 좋다면 그쪽도 된다.
협업과 디자인 변수
파일은 공개나 비공개로 둘 수 있고, 보기 전용 초대나 전체 편집 권한으로 공유하며, 라이브 세션을 위한 접속 표시 제어도 갖춘다. 변수 패널에는 디자인 토큰이 담기고, 파일마다 자체 아이콘 라이브러리가 주어진다. 그리드와 블록, 인라인 레이아웃 덕분에 처음부터 다시 만들지 않고 구조 변경을 시험할 수 있다.
장단점
장점
- 디자인과 코드가 하나의 포맷을 공유해 캔버스와 제품 사이에 수작업 재구성이 없다.
- 실제 React와 Tailwind 내보내기가 기존 코드베이스에 들어가 정리가 필요 없다.
- MCP 지원이 Claude, Cursor, Codex 등과 동작하고 모든 요금제에서 무료다.
- 연간 결제 기준 사용자당 월 16달러 정액이라 팀이 커져도 비용을 예측하기 쉽다.
- Mac과 Windows 데스크톱 앱에 더해 역할과 권한을 갖춘 실시간 협업을 제공한다.
단점
- 내보내기가 React와 Tailwind에 묶여 있어 다른 프런트엔드 스택을 쓰는 팀은 이득의 대부분을 잃는다.
- 무료 요금제는 AI 채팅 토큰, 비공개 파일 3개, 25MB 이미지 업로드를 제한해 실제 프로젝트를 막는다. 비공개 파일 3개는 많지 않다.
- 무료 등급에는 월 토큰 할당량이 명시되지 않아 AI를 많이 쓰면 금방 Pro로 밀려난다.
- 도구가 아직 어리다. 2026년 4월에 나왔으니 꾸준한 변화와 이따금의 거친 부분을 예상해야 한다. 팀이 몇 주마다 새 기능과 수정을 계속 내놓는 중이다.
자주 묻는 질문
Wonder는 캔버스 작업을 서비스용 코드로 바꾸는 AI 디자인 도구다. 익숙한 캔버스에서 UI를 디자인하고, AI로 생성하고 편집한 뒤, 정적인 목업이 아니라 진짜 React와 Tailwind를 내보낸다.
관련 콘텐츠
Wonder와 관련된 도구, 스킬, 아티클을 살펴보세요.
Wonder 대안
X Ray Interpreter
X-ray Interpreter · 이미지X Ray Interpreter는 X선, CT, MRI, 초음파, PET 이미지를 쉬운 말의 리포트로 바꾸는 웹 기반 AI 영상의학 도구다. 스캔 이미지를 올리면 X선 예비 판독 결과가 곧바로 나오고, 설명이 필요한 부분이 있으면 이후에 추가 질문도 할 수 있다. 이 도구의 위치는 2차 소견과 학습 보조이며, 의료 진단은 아니다.
Aieasypic
AIEasyPic · 이미지AIEasyPic은 단순한 텍스트 프롬프트를 몇 초 만에 완성된 예술 작품으로 바꾸는 AI 이미지 생성기다. 자신의 사진으로 맞춤 모델을 훈련하고, 기존 이미지에서 얼굴을 바꾸고, 텍스트로 짧은 영상 클립을 만들 수도 있다. 모두 브라우저에서 끝난다. 빠른 비주얼을 원하는 가벼운 창작자에게도, 코드를 전혀 건드리지 않고 개인 모델을 만들고 싶은 취미 사용자에게도 어울린다.
Chargen
Chargen · 이미지Chargen은 던전 앤 드래곤과 다른 탁상용 롤플레잉 게임을 위해 만든 AI 캐릭터 생성기이자 세계관 구축 툴킷이다. 한 줄 아이디어를 그려진 캐릭터 초상화로 바꾸고, 같은 세션에서 NPC, 몬스터, 지도, 조우를 만들어내며, 모든 생물의 세부 정보를 손 가까이에 둔다. 탁상용 롤플레잉 아트 부분은 Gold라는 크레딧 시스템으로 돌아가고, 텍스트 생성기는 모두에게 무료로 남는다.