Agentic Canvas: AI 에이전트와 함께 디자인하기2 min read

AI 에이전트는 몇 분 만에 웹사이트를 만들 수 있습니다. 하지만 그다음에는 버튼을 옮기고, 두 가지 레이아웃을 비교하고, 스크린샷을 모으거나 간격을 직접 고치고 싶어집니다. 그러다 보면 시각적인 변경 사항을 또 다른 프롬프트로 설명하게 됩니다. 때로는 프롬프트보다 드래그가 더 쉽습니다.

그래서 저희는 AgentGrid.io의 Agentic Canvas를 만들었습니다. 여러분과 MCP를 지원하는 에이전트가 동일한 실제 HTML 및 CSS 페이지에서 함께 작업하는 무료 AI 디자인 캔버스입니다. HTML을 가져오거나, 디자인 또는 이미지로 시작하거나, 에이전트에게 페이지 제작을 요청하세요. 그런 다음 만들어진 결과를 선택하고 이동하고 크기를 조절하고 편집할 수 있습니다. 계정을 만들지 않고도 Agentic Canvas를 열 수 있습니다.

사용법은 간단합니다. HTML 페이지나 이미지를 가져와 시각적으로 배치하고 편집한 다음, Claude나 ChatGPT에 애니메이션이나 인터랙션을 다듬어 달라고 요청하고 HTML을 내보내세요. 새 프롬프트로 처음부터 다시 시작하지 않고도 언제든 직접 수정할 수 있습니다.

Agentic Canvas란 무엇인가요?

AI 에이전트와 함께 실제 웹페이지를 디자인하는 시각적 작업 공간입니다. 캔버스에는 익숙한 프레임, 레이어, 인스펙터, 레이아웃 컨트롤이 있지만, 프레임은 정적인 그림이 아닌 코드 기반입니다. MCP로 연결된 에이전트는 현재 페이지를 읽고 변경할 수 있습니다. 여러분은 결과를 확인하고 직접 조정한 뒤, 업데이트된 디자인부터 에이전트가 이어서 작업하게 할 수 있습니다.

무엇을 고쳐야 하는지 알아보는 사람과 코드를 작성하는 에이전트가 같은 결과물에서 함께 작업하는 공간이라고 생각하면 됩니다.

AI 에이전트를 위한 캔버스가 필요했던 이유

1. 프롬프트를 반복하지 않는 시각적 협업

Claude나 ChatGPT로 랜딩 페이지, 제품 화면, 마케팅 자료를 만들 때 첫 초안은 시작일 뿐입니다. 히어로 영역의 버전 세 개, 더 촘촘한 그리드, 다른 클릭 유도 문구가 필요할 수 있습니다. 무엇을 바꿔야 할지 이미 정확히 알고 있는데 모든 시각적 결정을 채팅으로 설명하기는 느립니다.

Canvas에서는 변경을 직접 할 수 있습니다. 그러면 에이전트는 이미 바뀐 이전 버전에 대한 말로 된 설명이 아니라 지금 존재하는 페이지를 읽습니다. 에이전트가 어려운 작업을 맡고, 여러분이 직접 최종 결정을 내리면, 에이전트가 그 지점부터 이어 갑니다.

2. 시각적 맥락을 모으는 공간

어떤 아이디어는 명세서가 아니라 무드보드에서 시작합니다. 스크린샷, 참고 페이지, 이미지와 텍스트를 모아 공간에 배치하고, 무엇을 만들려는지 설명하는 데 도움이 되는 자료를 추가하세요. AI 에이전트는 긴 채팅 기록에서 추측하는 대신 눈앞의 디자인을 바탕으로 작업할 수 있습니다.

브랜드 작업에서는 특히 중요합니다. 레이아웃 참고 자료, 문구 한 줄, 스크린샷 하나가 원하는 분위기를 설명하는 또 다른 문단보다 의도를 더 빨리 전달할 수 있습니다.

3. 캔버스에 실제 HTML과 CSS를 사용하는 이유

왜 HTML과 CSS로 디자인 도구를 만들었을까요? 코딩 에이전트는 이미 코드를 능숙하게 읽고 쓰기 때문입니다. 제게 별도의 디자인 형식으로 에이전트에게 작업을 시키는 것은 영어 원어민에게 영어로 생각하면서 중국어로 읽고 쓰라고 하는 것과 같습니다. 추가 변환 과정에서 세부 사항이 사라질 수 있고, 시간과 토큰도 듭니다. 저는 이전부터 디자인은 코드라고 주장해 왔습니다. 여기에서는 말 그대로 그렇게 됩니다.

Agentic Canvas에서 프레임은 실제 페이지이고, 자동 레이아웃은 CSS flexbox에, 그리드는 CSS grid에 대응합니다. 버튼을 시각적으로 편집하고, 에이전트에게 애니메이션이나 인터랙션을 추가해 달라고 요청한 뒤, 준비되면 코드를 내보낼 수 있습니다. 캔버스의 실제 페이지는 스크립트, 호버 상태, 반응형 동작을 실행할 수 있습니다. 나중에 다시 구현해야 하는 그림이 아닙니다.

일반적인 디자인 캔버스와 어떻게 다른가요?

일반적인 디자인 캔버스는 시각적 아이디어를 구성하는 데 유용하지만, 결과물을 동작하는 웹페이지로 만들려면 별도 구현 단계가 필요한 경우가 많습니다. Agentic Canvas는 HTML 디자인 도구입니다. 프레임이 실제 페이지이므로 에이전트는 여러분이 시각적으로 편집하는 바로 그 HTML과 CSS를 읽고 변경할 수 있습니다. 그렇다고 성숙한 디자인 제품군의 모든 기능을 갖췄다는 뜻은 아닙니다. AI가 만든 웹사이트를 다듬든 새 사이트를 만들든, 시각적 결정과 동작하는 코드를 한데 두는 것이 핵심입니다.

Agentic Canvas에서 Claude 또는 ChatGPT와 웹사이트 디자인하기

1. 가지고 있는 것부터 시작하세요. 캔버스를 열고 HTML을 붙여 넣거나, Figma에서 복사해 붙여 넣거나, 이미지나 디자인을 가져오거나, 에이전트가 생성한 페이지에서 시작하세요. 지원하는 시작 방법은 가져오기 가이드에 나와 있습니다.
2. 에이전트를 연결하세요. 캔버스에서 AI 에이전트를 선택한 다음 에이전트 추가를 선택합니다. Claude, ChatGPT 또는 다른 MCP 지원 클라이언트의 설정은 연결 가이드를 따르세요. 에이전트가 작업하는 동안 캔버스 탭을 열어 두세요.
3. 첫 결과물을 함께 만드세요. 레이아웃이나 인터랙션을 요청한 다음 캔버스에서 실제 동작하는 결과를 확인하세요.
4. 시각적으로 직접 조정하세요. 요소를 옮기고, 색상을 바꾸고, 프레임 크기를 조절하고, 레이아웃을 직접 다듬으세요. 최신 버전부터 에이전트가 이어서 작업하게 하세요.
5. 준비되면 내보내거나 공유하세요. 게시하지 않고도 HTML이나 다른 지원 형식으로 내보낼 수 있습니다. 호스팅된 링크가 필요하다면 AgentGrid.io를 통해 공유하거나 게시하세요. 이 클라우드 단계는 선택 사항이며 계정이 필요합니다.

어떤 것은 로컬에 저장되고, 어떤 것은 계정이 필요한가요?

가입하지 않고 브라우저에서 무료로 디자인을 시작할 수 있습니다. 파일은 해당 기기의 해당 브라우저에 저장되며 다른 기기까지 자동으로 백업되지 않습니다. 브라우저 밖에 보관할 작업은 복사본을 내보내세요. 외부 에이전트를 연결하면 에이전트가 캔버스를 읽을 수 있고 네트워크 연결을 사용하므로, 로컬이라고 해서 오프라인이라는 뜻은 아닙니다. AgentGrid.io를 통한 공유나 게시에는 선택적으로 계정이 필요합니다.

저는 다음 디자인 도구가 시각적 제어와 무언가를 만들어 줄 에이전트 중 하나를 선택하라고 강요해서는 안 된다고 생각합니다. 에이전트는 작업의 본래 언어로 일해야 하고, 우리는 여전히 화면에 보이는 것을 직접 집어 바꿀 수 있어야 합니다.

Agentic Canvas를 열고 에이전트와 함께 디자인해 보세요. 워크플로를 간단히 보려면 출시 데모를 보고 기능을 살펴보세요.

Agentic Canvas 자주 묻는 질문

Agentic Canvas는 무료인가요? 계정이 필요한가요?

네, 디자인 캔버스는 무료입니다. 브라우저에서 열어 계정 없이 디자인을 시작하세요. AgentGrid.io 계정은 AgentGrid.io를 통해 공유하거나 게시할 때만 필요합니다.

Agentic Canvas에서 어떤 AI 에이전트를 사용할 수 있나요?

Claude, ChatGPT, Claude Code, Codex, Cursor 및 기타 MCP 지원 에이전트는 열려 있는 캔버스를 읽고 변경할 수 있습니다. AI 에이전트를 선택한 다음 에이전트 추가를 선택해 연결 단계를 진행하세요. 에이전트가 작업하는 동안 캔버스 탭을 열어 두세요.

AI가 생성한 웹사이트를 시각적으로 편집할 수 있나요?

네. HTML 페이지나 사이트 폴더를 가져온 다음 캔버스에서 요소를 옮기고 크기를 조절하고 다듬으세요. 프레임은 실제 HTML과 CSS이므로 에이전트가 정적 목업을 다시 만드는 대신 여러분의 시각적 편집에서 이어서 작업할 수 있습니다.

기존 HTML 페이지나 웹사이트를 가져올 수 있나요?

네. 캔버스에 HTML을 붙여 넣거나 사이트 폴더 또는 ZIP을 홈 화면에 놓으세요. Figma에서 선택한 영역이나 이미지로 시작할 수도 있습니다.

캔버스 파일은 어디에 저장되나요? 백업되나요?

사용한 브라우저와 기기에 로컬로 저장되며 자동 클라우드 백업은 없습니다. 다른 브라우저나 기기에서는 보이지 않습니다. 중요한 작업은 복사본을 내보내거나, 클라우드 백업과 버전 기록이 필요하다면 AgentGrid.io 공유를 선택하세요.

탭을 닫은 뒤에도 AI 에이전트가 캔버스에서 작업할 수 있나요?

아니요. 연결된 에이전트가 디자인을 읽거나 변경하는 동안 캔버스 탭을 열어 두어야 합니다. 나중에 같은 브라우저에서 로컬에 저장된 파일로 돌아올 수 있습니다.

에이전트를 연결하면 AgentGrid.io 워크스페이스에도 접근할 수 있나요?

아니요. 에이전트를 캔버스에 연결하면 열려 있는 캔버스 파일에서만 작업할 수 있습니다. 해당 에이전트를 AgentGrid.io 아티팩트에 연결하는 것은 별도의 단계입니다.

게시하지 않고 내보낼 수 있나요?

네. 공유하거나 게시하지 않고 HTML, PNG, SVG 또는 PDF로 내보낼 수 있습니다. HTML을 코딩 에이전트에게 전달해 다른 곳에서 계속 개발할 수 있습니다.

공유와 게시는 같은 것인가요?

아니요. AgentGrid.io를 통해 공유하면 여러분이 선택한 사람과 에이전트가 접근할 수 있고, 게시하면 누구나 접속할 수 있는 웹 주소에 디자인이 올라갑니다. 두 기능 모두 선택 사항이며 AgentGrid.io 계정이 필요합니다.