Wonder

Wonder란 무엇인가요?

Wonder는 AI 디자인 생성, 채팅 기반 반복, 단일 캔버스 내 편집을 결합한 디자인 도구입니다. 핵심 목적은 별도의 핸드오프 단계를 거치지 않고 팀이 초기 아이디어에서 프로덕션 준비 UI로 이동할 수 있게 돕는 것입니다.

Wonder는 실제 코드를 디자인 형식으로 사용합니다. 캔버스에서 생성한 내용이 배포하는 코드로 매핑되는 워크플로로 위치지어지며, React + Tailwind 복사 기능도 포함됩니다.

캔버스에서 AI로 디자인 생성: 디자인하고 싶은 것을 설명하면 즉시 시각 자료를 생성해 왕복을 줄입니다.
편집 중 디자인 시스템과 채팅: 동일 캔버스에서 작업과 함께 채팅 인터페이스로 반복·정제합니다.
정밀 편집 및 변형: 스타일 변경, 변형 생성, 간격 조정, 이미지 자산 교체를 동일 워크플로로 처리합니다.
코드로 빌드, 프로덕션 준비: 디자인은 “실제 코드”이며 React + Tailwind로 복사 가능해 수동 재구축을 피합니다.
이전 작업 활용 반복 (플로우 상태 유지): 이전 디자인을 기반으로 옵션 탐색 시 진행 중 편집 컨텍스트를 잃지 않습니다.
코드 컨텍스트 및 에이전트 워크플로와 연동: “Code and Canvas, Finally connected”로 설명되며, 내보내기나 에이전트 전송 포함; “Explore Wonder MCP”와 “Wonder Toolkit”도 언급됩니다.

0-to-1 UI 레이아웃 생성: 원하는 디자인 설명으로 새 플로우의 첫 버전 빠르게 생성 후 의도 방향에 맞게 반복.
컨텍스트 잃지 않는 디자인 반복: 이전 옵션 재방문 및 새 변형 탐색 시 이전 캔버스 작업의 편집/플로우 상태 유지.
디자이너 주도 프로덕션 핸드오프 축소: Wonder에서 생성한 것을 React + Tailwind로 직접 복사해 디자인에서 구현 코드로 이동.
다양한 테마/스타일용 변형 제작: 테마와 스타일 변경 후 간격 등 레이아웃 세부 조정으로 여러 버전 생성.
에이전트 지원 디자인-to-코드 워크플로: 내보내기나 작업 전송으로 코딩 에이전트와 함께 동일 프로젝트에서 구현 계속.

Wonder에서 “what you see is what you ship”이 무엇을 의미하나요? 디자인 형식이 코드와 1:1 매핑되며, 디자인은 React + Tailwind로 복사 가능한 실제 코드로 재구축과 핸드오프를 줄인다고 페이지에 명시.
생성 후 디자인을 편집할 수 있나요? 네. AI와 함께 정밀 편집 지원으로 스타일 변경, 변형 생성, 간격 조정, 이미지 콘텐츠 교체 가능하다고 설명.
Wonder는 디자이너만 위한 도구인가요, 개발자도 관련되나요? 디자이너가 전체 루프를 소유하는 워크플로를 강조하면서 코드 컨텍스트와 에이전트 작업도 언급해 두 역할 모두 동일 워크플로 사용 가능.
Wonder가 여러 버전 간 반복 워크플로를 지원하나요? 이전 디자인을 기반으로 반복 탐색 시 플로우 상태를 잃지 않는다고 설명.

디자인-to-코드 내보내기 지원 웹 기반 UI 디자인 도구: 전용 캔버스에서 디자인 후 자산이나 코드 내보내기 중심; Wonder의 “실제 코드” 접근과 달리 디자인/코드 매핑에 추가 단계 필요할 수 있음.
AI 지원 디자인 및 프로토타이핑 도구: 프롬프트로 모형이나 프로토타입 생성 후 별도 구현 필요; Wonder는 직접 배포 가능한 코드 기반 디자인 강조.
컴포넌트 중심 UI 개발 워크플로 (예: 디자인 시스템, 코드 우선 접근): 디자인 캔버스 대신 코드 컴포넌트부터 시작; Wonder 대비 채팅-캔버스 중심이 덜하고 구현 우선일 수 있음.
IDE + UI 라이브러리 자동 코드 생성: 개발 환경에서 UI 코드 생성·수정 도움; Wonder는 코드로 매핑되는 공유 캔버스에서 생성·편집 중심.