Wonder

Wonder이란 무엇인가요?

Wonder는 디자인과 프런트엔드 개발을 하나의 워크플로로 통합한 캔버스 기반 디자인 도구입니다. 별도의 핸드오프가 필요한 기존 디자인 도구와 달리, Wonder는 프로덕션에 바로 사용할 수 있는 코드(React + Tailwind)와 1:1로 매핑되는 디자인을 생성합니다. 디자이너는 캔버스 위에서 직접 프롬프트하고, 반복하고, 비주얼을 다듬을 수 있으며 그 사이 코드는 실시간으로 업데이트됩니다. 또한 MCP server를 통해 Cursor, Claude Code 같은 코딩 에이전트와 통합되어, 개발자는 스크린샷이나 재구축 없이도 디자인 컨텍스트를 코드베이스로 바로 가져올 수 있습니다.

주요 기능

• 실시간 디자인-투-코드

  캔버스에서 만든 모든 요소는 실제 HTML/CSS로 뒷받침됩니다. 디자인 포맷이 코드와 1:1로 매핑되어, 디자이너가 보는 것과 개발자가 배포하는 것 사이에 간극이 없습니다.

• 캔버스 기반 AI 생성

  원하는 것을 설명하기만 하면 Wonder가 레이아웃, 컴포넌트, 스타일 변형을 캔버스 위에 바로 생성합니다. 어떤 요소든 선택해 그 자리에서 다듬을 수 있습니다.

• MCP Server 연동

  내장된 MCP server를 통해 Wonder를 Cursor나 Claude Code 같은 코딩 에이전트와 연결하세요. 에이전트가 디자인 컨텍스트를 직접 읽어 들여, 수동으로 다시 그리거나 스크린샷을 찍을 필요가 없습니다.

• 내장 이미지 생성

  도구를 전환하지 않고도 캔버스에서 바로 이미지를 생성합니다. 자리표시용 에셋 없이, 필요한 것을 설명하면 그 자리에 나타납니다.

• 인터랙티브 비주얼을 위한 Shader 지원

  GPU 가속 Shader 효과를 디자인에 더해, 정적 목업을 넘어서는 풍부한 인터랙티브 비주얼을 구현하세요.

• Credit 기반 단계별 요금제

  Free, Pro, Pro+, Max 네 가지 플랜을 제공하며, 월 Credit은 300에서 60,000까지로 실험부터 일상적인 프로덕션 배포까지 모두 커버합니다.

사용 사례

• 제품 UI 디자인 : 웹 앱이나 모바일 인터페이스를 만드는 디자이너는 캔버스를 떠나지 않고 React + Tailwind 컴포넌트를 생성, 반복, 프로덕션 수준으로 내보낼 수 있습니다.
• 디자인-개발 핸드오프 제거 : 디자인을 개발로 옮기는 과정에서 손실을 겪는 팀은 Wonder를 사용해 출시 제품이 디자인과 정확히 일치하도록 보장하고, 수동 재구축을 없앨 수 있습니다.
• 마케팅 & 랜딩 페이지 : 마케터와 그로스 팀은 하나의 캔버스에서 바로 랜딩 페이지, 피치 덱, 프로모션 그래픽을 빠르게 프로토타이핑하고 배포할 수 있습니다.
• 에이전트 기반 개발 : Cursor, Claude Code 같은 AI 코딩 에이전트를 사용하는 개발자는 MCP를 통해 실시간 디자인 컨텍스트를 가져와 프런트엔드 구현을 가속화할 수 있습니다.
• 실제 코드로 만드는 비주얼 프로토타이핑 : 창업자나 1인 개발자는 별도의 디자인·엔지니어링 팀 없이도 초기 아이디어를 인터랙티브하고 배포 가능한 프로토타입으로 바꿀 수 있습니다.

자주 묻는 질문