Wonder 디자인 코드 연결, 실행 중인 앱을 고쳐 코드에 반영하는 법

화면에서 고친 디자인이 실제 코드로 이어지는 과정, 어디까지 가능할까요?

실행 중인 앱에서 버튼을 옮기고 글자를 고친 뒤, 그 결과를 실제 코드에도 반영할 수 있을까요? Wonder는 2026년 10월 27일 이 과정을 한 캔버스에서 처리하는 개편을 공개했어요. Wonder 디자인 툴 안에서 앱을 실행하고, 화면을 편집 가능한 요소로 가져와 수정한 다음 에이전트에게 코드 반영을 맡기는 방식이에요. 11월 3일 기준으로 달라진 점과 기존 프로젝트에서의 활용 가능성, 비용 구분을 살펴볼게요.

화면을 설명하는 대신 같은 대상을 보며 고쳐요

Wonder가 공식 문서에서 짚는 문제는 디자인 파일과 실제 제품이 따로 움직인다는 점이에요. 디자인을 코드로 구현한 뒤 변경이 생기면 두 결과물이 어긋나고, 디자이너는 별도 파일을 다시 관리해야 한다는 설명이에요. Wonder는 실제 제품의 코드에서 출발해 이 간격을 줄이겠다고 해요.

핵심은 양방향 연결이에요. 저장소의 컴포넌트와 색상·간격 같은 토큰을 캔버스로 가져오고, 승인한 디자인 변경을 다시 저장소의 수정 제안인 풀 리퀘스트로 보내는 구조예요. 새 화면을 생성하면서 이미 만든 제품을 시각적으로 다듬는 작업에 초점을 맞춰요.

디자인 코딩 에이전트는 사람이 고른 화면과 요소를 작업 맥락으로 받아요. 공식 개편 공지에 따르면 Claude Code와 Codex를 Wonder 채팅에 연결하고, 평소 쓰던 구독과 스킬·도구를 활용할 수 있어요. 앱은 디자인 옆에서 실행되므로 휴대전화·태블릿·데스크톱 크기로 눌러 보며 확인할 수 있고요. 화면을 확인하고 코드 수정을 요청하는 작업이 같은 공간에서 이어져요.

연결 통로인 MCP를 통해 에이전트는 Wonder 캔버스를 읽고 쓸 수 있어요. 공식 안내에는 Cursor, Claude Code, Codex 등의 연결 방법이 정리돼 있고, 연결하려면 Wonder 계정과 최소 한 개의 파일이 필요해요. 처음에는 브라우저에서 로그인해 연결을 승인하는 절차를 거쳐요. 이미 쓰는 에이전트를 디자인 작업에 연결하는 구조예요.

다만 개발 시간이 얼마나 줄었는지는 확인되지 않았어요. 10월 27일 RuntimeWire 보도도 발표에 성능이나 이용 규모 수치가 제시되지 않았다고 짚었어요. 제공하는 기능과 생산성이 얼마나 높아지는지는 구분해서 살펴봐야 해요.

공식 예제와 초기 이용 후기를 나눠 보면 보여요

구체적인 연결 과정은 공식 코드베이스 안내에서 확인할 수 있어요. Wonder 파일을 열고 GitHub 저장소를 연결한 뒤, 원하는 화면을 캔버스로 가져오라고 요청하는 순서예요. 문서에는 연결한 저장소의 보고·등록 페이지를 가져오는 예시 이미지도 있어요. 처음에는 변수를 불러오기 때문에 첫 요청이 더 오래 걸리거나 토큰을 더 사용할 수 있다고 안내해요.

공식 홈페이지는 Open Gallery라는 갤러리 화면을 예시로 보여 줘요. 작가 목록과 작품 상세 화면을 실행하고, 페이지나 컴포넌트를 편집 가능한 레이어로 가져온 뒤 코드를 수정하도록 요청하는 흐름이에요. 실제 고객사의 성공 사례가 아니라, 실행 화면에서 디자인 작업을 시작하는 방식을 보여 주는 공식 예시예요.

실제 사용자가 남긴 글도 있어요. 프런트엔드 코드를 작성하는 디자이너 Ruchita Iyer는 Wonder 팀의 제안으로 며칠간 도구를 사용했다고 링크드인에 밝혔어요. 여러 화면으로 확장할 때 시각적 일관성이 유지됐고, 기존 화면의 수정 요청을 전체 재생성 없이 반영한 점이 인상적이었다고 해요. React와 Tailwind 코드로 내보내는 흐름도 장점으로 꼽았고요.

이 후기는 팀의 초대로 도구를 써 본 초기 경험을 담고 있어요. 작성자는 다듬어지지 않은 부분도 팀에 전달했다고 밝혔어요. 이번 10월 개편 전체를 검증한 결과보다는 기존 Wonder의 화면 생성·수정·코드 내보내기를 경험한 개인 평가로 보는 게 정확해요.

기존 Figma 작업도 가져올 수 있어요. 선택한 프레임을 복사해 Wonder에 붙이면 편집 가능한 레이어가 돼요. 다만 공식 문서는 붙여 넣은 Figma 컴포넌트와 인스턴스의 연결이 해제된다고 안내해요. 화면을 옮길 수 있는지와 원래 설계 구조를 그대로 유지할 수 있는지는 따로 확인해야 해요.

한 화면을 끝까지 왕복해 보는 것부터 시작해요

처음이라면 자주 수정하는 화면 하나로 시작해 보세요. 저장소를 연결해 화면을 가져온 다음, 문구나 간격처럼 결과를 눈으로 확인하기 쉬운 변경을 정하는 거예요. 원하는 모습이 나왔는지 확인하고, 에이전트가 고친 코드와 실행 결과까지 살펴보면 자신의 작업에 맞는지 판단할 수 있어요.

요청할 때는 대상과 목적, 유지할 조건을 함께 알려 주세요. Wonder의 AI 디자인 안내도 무엇을 만드는지, 어떤 문제를 풀려는지, 기존 컴포넌트 등 고정 조건이 무엇인지 제시하라고 권해요. 같은 화면의 여러 디자인 방향을 나란히 생성해 비교하는 방법도 소개해요. 바꾸려는 범위를 정할 때 참고할 만해요.

비용도 구분해서 보세요. 공식 요금표의 무료 플랜은 편집자 1명, 주당 AI 생성 레이어 3,000개를 제공하며 GitHub 연결과 실행 앱 미리보기, 코드 내보내기를 포함해요. Pro는 연간 결제 시 편집자당 월 환산 16달러이며, 앱 공유와 전체 팀 협업 등이 추가돼요. 에이전트에 별도 인앱 크레딧을 붙이지 않는다는 뜻이지, 기존 Claude Code나 Codex 구독까지 무료로 준다는 뜻은 아니에요.

확인 순서도 미리 정해 두면 좋아요. 캔버스의 모양, 실제 앱에서 눌렀을 때의 동작, 저장소에 생긴 수정 내용을 차례로 보는 거예요. 공식 설명상 코드 반영은 승인한 변경을 풀 리퀘스트로 보내는 흐름이므로, 시안이 완성됐는지와 실제 제품에 병합할지는 각각 판단할 수 있어요.

화면이 마음에 든 뒤에는 코드도 확인하세요. Wonder 이용약관은 생성 결과를 코드에 병합하거나 실제 서비스에 사용하기 전에 검토하고 테스트하도록 명시해요. Wonder에서 디자인과 코드를 연결해 쓸 때도 변경 내용을 이해하고 확인할 수 있는지 살펴보는 게 좋아요. 디자인 수정부터 실행 결과 확인까지 한 차례 마치면 도입 여부를 판단할 근거가 생겨요.

자주 묻는 질문

Q. 기존 프로젝트를 연결해서 수정할 수 있나요? A. 네. 공식 안내에 따르면 GitHub 저장소를 연결해 기존 컴포넌트와 토큰, 화면을 가져올 수 있어요. 처음 연결한 뒤에는 변수를 가져오느라 첫 요청이 더 오래 걸릴 수 있어요.

Q. Wonder 무료 플랜이면 AI도 무료인가요? A. Wonder 무료 플랜과 에이전트 구독은 별개예요. 무료 플랜에서 기존 에이전트 구독을 연결해 쓰며, AI 생성 레이어는 주당 3,000개로 안내돼요.

Q. 디자인을 고치면 실제 서비스에도 바로 적용되나요? A. 캔버스 수정과 서비스 적용은 구분해야 해요. 에이전트에게 코드 반영을 요청하고 변경 내용을 검토하는 과정을 거치며, 병합하거나 실제 서비스에 사용하기 전에는 테스트가 필요해요.

출처: Wonder, RuntimeWire, LinkedIn(Ruchita Iyer)