Sketch:
그려 보이면 에이전트가 의도를 이해합니다
Sketch는 AI 에이전트 작성창에 바로 내장된 그리기 캔버스입니다. 빈 캔버스를 열어 목업이나 다이어그램을 스케치하거나, 스크린샷을 열어 주석을 다세요. 버그에 동그라미를 치고, 화살표를 그리고, 영역을 강조하고, 메모를 추가하세요. 그림은 메시지에 첨부되어 AI 코딩 에이전트에게 전송됩니다.
그림 한 장이 천 마디 말보다 낫고, AI 에이전트에게는 그 효과가 두 배입니다. '모달 오른쪽 위 버튼이 가장자리에 너무 붙어 있어요'라고 쓰는 대신 동그라미를 치면 됩니다. 스케치가 프롬프트 옆에 자리 잡고, 에이전트는 시각적 피드백을 한 번에 받으며, 여러분은 터미널을 벗어나지 않았습니다.
Sketch 실제 동작: 작성창에서 캔버스를 열고, 스크린샷의 시각적 버그에 동그라미를 치고, 그림을 첨부해 에이전트에게 보냅니다.
Sketch가 해결하는 문제는 이렇습니다. AI 에이전트와 바이브 코딩을 하다가 화면에서 뭔가 잘못 보입니다. 카드가 넘치고, 버튼이 몇 픽셀 어긋나 있고, 한 줄의 간격이 깨졌습니다. 에이전트가 고치게 하려면 이 시각적 문제를 말로 설명해야 합니다. '가운데 열의 두 번째 카드, 아바타가 있는 그것의 오른쪽 패딩이 너무 좁아요.' 세 문장을 쓰면 에이전트가 추측하고, 엉뚱한 요소를 고치고, 여러분은 세 문장을 더 씁니다.
Sketch는 추측을 없앱니다. 스크린샷을 찍어 Sketch 캔버스에서 열고, 깨진 카드 주위에 빨간 동그라미를 치고, 화살표와 '여기가 너무 좁음'이라는 글자를 추가해 메시지에 첨부합니다. 에이전트는 더 이상 한 문단을 해석하지 않습니다. 그림을 봅니다. 시각적이기 때문에 시각적 피드백은 모호하지 않습니다.
Sketch는 반대 방향으로도 동작합니다. 빈 캔버스에서 시작해 에이전트가 만들기 전에 원하는 것을 스케치하세요: 화면의 대략적인 목업, 레이아웃 와이어프레임, 흐름의 간단한 다이어그램. 손으로 그린 스케치는 한 무더기의 글보다 에이전트를 더 잘 이끕니다. 여러분이 프로토타입을 그리면 에이전트가 코딩합니다.
작성창에서 연 Sketch 캔버스: 스크린샷에 주석을 달고, 도형과 화살표를 그린 뒤, 그림을 에이전트에게 보내는 메시지에 첨부하세요.
Sketch가 에이전트 워크플로에 필요한 이유
정확성. 스크린샷 위의 동그라미 하나는 정확히 한 요소를 가리킵니다. 한 문장은 추측을 가리킵니다. 문제를 그리면 에이전트는 옆에 있는 것이 아니라 여러분이 실제로 의도한 것을 고칩니다. 더 이상 '아니요, 다른 버튼, 그 아래 거요'는 없습니다.
속도. 영역 주위에 사각형을 그리는 데는 3초가 걸립니다. 같은 영역을 말로 설명하는 데는 세 문장이 들고, 그래도 여전히 모호합니다. Sketch는 시각적 버그에 주석을 다는 일을 잡일에서 반사 행동으로 바꿉니다.
표현. 어떤 아이디어는 문장이 아니라 도형입니다. 레이아웃, 흐름, 화면. Sketch로 목업이나 다이어그램을 프리핸드로 또는 도형과 화살표로 직접 그려 명세서로 에이전트에게 건네세요.
몰입. Sketch는 작성창 안에 있습니다. 별도의 그리기 앱을 열 필요도, 파일을 내보낼 필요도, 무언가를 끌어다 놓을 필요도 없습니다. 그림과 글로 쓴 프롬프트가 같은 메시지에 함께 담겨 이동하므로 에이전트가 전체 컨텍스트를 한 번에 받습니다.
Sketch의 처음부터 끝까지
작성창의 Sketch 버튼에서 에이전트 메시지에 첨부된 그림까지.
작성창에서 Sketch 열기
모든 에이전트 작성창에는 Sketch 버튼이 있습니다. 클릭하면 전체 화면 그리기 캔버스가 바로 쓸 수 있게 열리고, 사각형 도구가 이미 활성화되어 있어 곧장 영역을 잡을 수 있습니다.
빈 캔버스에 그리거나 이미지에 주석 달기
빈 캔버스에서 시작해 목업, 와이어프레임, 다이어그램을 스케치하세요. 아니면 기존 이미지를 여세요: 스크린샷을 작성창에 끌어다 놓은 뒤 썸네일의 연필을 클릭(또는 파일 미리보기의 주석 달기)해 그 위에 그리면 됩니다.
스케치, 동그라미, 화살표, 강조, 입력
캔버스는 프리핸드 그리기, 사각형, 타원, 화살표, 선, 텍스트를 제공합니다. 깨진 요소에 동그라미를 치고, 화살표로 가리키고, 영역을 강조하고, 옆에 짧은 메모를 쓰세요. 시각적 피드백을 분명하게 만드는 것이라면 무엇이든.
메시지에 그림 첨부하기
메시지에 첨부를 클릭하세요. 캔버스가 PNG로 내보내져 끌어다 놓은 파일처럼 작성창에 썸네일로 추가됩니다. 기존 이미지에 주석을 달면, 주석이 들어간 버전이 원본 썸네일을 대체하므로 에이전트는 둘 다 받지 않습니다.
에이전트에게 전송하기
평소처럼 프롬프트를 입력하고 전송하세요. PNG는 다른 파일과 동일한 경로를 통해 메시지에 첨부됩니다. 그림과 텍스트가 한 번의 차례로 에이전트에게 함께 도달합니다.
에이전트가 그림을 읽음
AI 코딩 에이전트는 스케치를 이미지 첨부로 받습니다. 모델이 이미지 입력을 지원하는 한, 에이전트는 여러분이 동그라미 치고, 화살표를 그리고, 강조한 것을 그대로 보고, 설명을 해석하는 대신 시각적 피드백에 따라 처리합니다.
Sketch를 쓰는 두 가지 방법
아무것도 없는 데서 시작하거나, 이미 있는 것 위에 그리세요.
빈 캔버스: 목업 스케치하기
빈 캔버스를 열어 에이전트가 만들기를 원하는 것을 그리세요. 화면의 대략적인 목업, 레이아웃 와이어프레임, 컴포넌트 프로토타입, 데이터 흐름 다이어그램. 프리핸드 선, 박스, 화살표, 텍스트 레이블. 손으로 그린 스케치는 UI 설명을 한 문단도 쓰지 않고 에이전트가 따를 수 있는 명세서입니다.
주석 달기: 스크린샷 위에 그리기
스크린샷이나 아무 이미지를 캔버스에 불러와 표시하세요. 정렬이 틀어진 요소에 동그라미를 치고, 넘치는 곳에 화살표를 그리고, 잘못된 색상을 강조하고, 버그 옆에 '이거 고치기'라고 쓰세요. Sketch 캔버스가 여러분의 이미지를 배경 레이어로 열고, 그 위에 그리면, 주석이 들어간 스크린샷이 시각적 피드백으로 에이전트에게 바로 갑니다.
Sketch의 실체
Sketch는 AgentsRoom 데스크톱 앱에 내장된 완전한 그리기 캔버스로, 어떤 AI 에이전트의 작성창에서든 열립니다. 위에 마커를 얹은 스크린샷 뷰어가 아닙니다. 프리핸드 펜, 사각형, 타원, 화살표, 선, 텍스트 등 진짜 그리기 도구를 제공합니다. 제대로 된 스케치 화면에서 기대하는 바로 그 도구 세트입니다.
캔버스는 두 가지 모드로 동작합니다. 빈 모드는 목업, 와이어프레임, 다이어그램을 위한 빈 화면을 줍니다. 주석 모드는 기존 이미지를 배경으로 불러와 그 위에 그릴 수 있게 합니다. 작성창에 이미 첨부된 아무 이미지의 썸네일에서, 또는 파일 미리보기의 주석 달기 버튼에서 주석 모드에 들어갑니다.
그림을 첨부하면 Sketch는 모든 선이 잘 보이도록 흰 배경 위로 캔버스를 PNG로 내보낸 뒤 작성창의 첨부 트레이에 파일을 넣습니다. 그다음부터 그림은 일반적인 경로를 따릅니다: 프롬프트와 함께 실려 이미지로 에이전트에게 전송됩니다. Sketch는 새로운 전송 방식을 더하지 않고, 이미 있는 방식에 연결됩니다.
모든 것은 여러분의 기기에 남습니다. 스케치는 디스크에 로컬로 저장되며 저장소에 커밋되거나 제3자 서비스로 푸시되지 않습니다. 설계상 일시적입니다: 그림은 한 메시지를 위한 컨텍스트이지 관리해야 할 파일이 아닙니다. Sketch는 로컬이고, 비공개이며, 프로바이더에 종속되지 않습니다: 모델이 이미지를 받아들이는 에이전트라면 무엇과도 동작하므로 Claude Code와 Codex 환경 모두 동일한 그림-에이전트 흐름을 얻습니다.
사람들이 Sketch로 그리는 것
그림을 에이전트와 대화하는 가장 빠른 방법으로 바꾸는 세 가지 패턴.
시각적 버그 보고하기
깨진 UI를 스크린샷으로 찍고, 요소에 동그라미를 치고, 넘치는 곳에 화살표를 그리고, 잘못된 간격을 강조하세요. 에이전트는 여러분의 설명을 해독하는 대신 시각적 버그를 봅니다. AI 에이전트에게 UI 회귀를 보고하는 단연 가장 빠른 방법입니다.
목업이나 와이어프레임 스케치하기
에이전트가 만들기 전에 화면을 그리세요. 대략적인 와이어프레임, 레이아웃 스케치, 컴포넌트의 저충실도 목업. 그림을 브리프로 에이전트에게 건네고 여러분의 스케치를 코드로 바꾸게 두세요.
다이어그램이나 흐름 그리기
어떤 설명은 다이어그램입니다. 데이터 흐름, 상태 머신, 페이지의 구조, 두 컴포넌트가 어떻게 통신하는지. 박스와 화살표로 스케치해 다이어그램을 컨텍스트로 에이전트에게 보내세요.
말로 설명하기 vs 그리기
같은 시각적 피드백, 같은 에이전트. 한쪽은 느리고 모호하며, 다른 쪽은 스케치 한 번입니다.
Sketch가 없으면
- : 시각적 문제를 말로 설명하고 에이전트가 같은 것을 떠올리길 바랍니다.
- : 한 요소를 가리키려 세 문장을 쓰지만, 여전히 모호합니다.
- : 목업을 그리려면 별도의 앱을 열고, 파일을 내보내고, 작성창으로 끌어다 놓습니다.
- : 컨텍스트 전환이 몰입과 에이전트와의 대화를 깹니다.
- : 에이전트가 엉뚱한 요소를 고치고, 여러분이 다시 설명하며, 반복이 길어집니다.
Sketch가 있으면
- : 스크린샷의 요소에 동그라미를 치면 피드백이 모호하지 않습니다.
- : 그림 하나가 설명 세 문장을 대체합니다, 3초 만에.
- : 캔버스가 작성창 안에 있습니다: 별도 앱도, 내보내기도, 끌어다 놓기도 없습니다.
- : 터미널을 벗어나지 않고 에이전트와의 흐름을 끊지 않습니다.
- : 에이전트가 여러분이 의도한 것을 정확히 보고 첫 번에 고칩니다.
Sketch는 시각적 문제와 그것을 이해하는 AI 에이전트 사이의 가장 짧은 길입니다.
FAQ
AgentsRoom의 Sketch는 무엇인가요?
Sketch는 AI 에이전트 작성창에 내장된 그리기 캔버스입니다. 작성창에서 열어 빈 캔버스에 스케치를 그리거나 기존 스크린샷에 주석을 달면, 그림이 PNG로 내보내져 AI 코딩 에이전트에게 보내는 메시지에 첨부됩니다. 시각적 피드백을 설명하는 것에서 그리는 것으로 바꿔 줍니다.
AI 에이전트에게 그림을 어떻게 보내나요?
에이전트 작성창의 Sketch 버튼을 클릭하고, 캔버스에 그린 뒤, 메시지에 첨부를 클릭하세요. 그림이 작성창의 PNG 썸네일이 됩니다. 프롬프트를 쓰고 전송하면 스케치가 메시지에 첨부되어 텍스트와 함께 에이전트에게 도달합니다.
스크린샷에 주석을 달 수 있나요?
네. 스크린샷을 작성창에 끌어다 놓은 뒤 썸네일의 연필을 클릭하거나, 파일 미리보기를 열어 주석 달기를 클릭하세요. Sketch 캔버스가 여러분의 스크린샷을 배경 레이어로 열어 그 위에 그릴 수 있게 합니다: 버그에 동그라미를 치고, 화살표를 추가하고, 영역을 강조하고, 메모를 쓰세요. 첨부하면 주석이 들어간 스크린샷이 원본을 대체합니다.
Sketch로 무엇을 그릴 수 있나요?
캔버스는 프리핸드 그리기, 사각형, 타원, 화살표, 선, 텍스트를 제공합니다. 목업을 스케치하고, 와이어프레임을 그리고, 다이어그램을 배치하거나, 스크린샷에 동그라미, 화살표, 강조로 표시할 수 있습니다. 사각형 도구가 기본으로 활성화되어 있어 캔버스가 열리는 순간 요소를 잡을 수 있습니다.
AI 에이전트가 정말 제 스케치를 보나요?
그림은 PNG 이미지로 메시지에 첨부됩니다. 에이전트의 모델이 이미지 입력을 지원하는 한, 스케치를 보고 그에 따라 처리합니다. Claude Code와 Codex를 구동하는 Claude와 GPT-4급 모델은 이미지를 읽으므로, 에이전트가 여러분의 시각적 피드백을 직접 받습니다.
어떤 에이전트와 프로바이더가 Sketch와 함께 동작하나요?
Sketch는 표준 PNG 이미지를 첨부하므로 프로바이더에 종속되지 않습니다. 모델이 이미지 입력을 받아들이는 에이전트라면 무엇이든 동작합니다: Claude Code, Codex, 그리고 AgentsRoom이 지원하는 다른 CLI들. 프로바이더별 설정이 없습니다.
별도의 그리기 앱이나 화이트보드가 필요한가요?
아니요. 그게 바로 Sketch의 핵심입니다. 그리기 캔버스가 작성창 안에 있습니다. Excalidraw, Figma, 스크린샷 주석 도구를 다른 창에서 열 필요도, 파일을 내보낼 필요도, 다시 끌어올 필요도 없습니다. Sketch는 그리고-보내는 전체 과정을 터미널 안에 둡니다.
스케치는 어디에 저장되나요? 비공개인가요?
스케치는 여러분의 기기에 로컬로 저장됩니다. git 저장소에 커밋되지 않고 어떤 제3자 서비스에도 업로드되지 않습니다. 일시적입니다: 스케치는 한 메시지를 위한 컨텍스트이며, 오래된 스케치는 자동으로 정리됩니다.
스케치를 다시 편집하거나 다시 주석 달 수 있나요?
네. 이미 주석을 단 스크린샷을 포함해 작성창의 아무 이미지든 Sketch 캔버스에서 다시 열어 그 위에 또 그릴 수 있습니다. 새 버전을 첨부하면 이전 썸네일을 대체하므로 에이전트는 같은 이미지를 두 번 받지 않습니다.
버그를 설명하는 대신 그려야 하는 이유는 무엇인가요?
설명은 추측이지만 그림은 그렇지 않기 때문입니다. '오른쪽 위 버튼이 정렬이 안 맞아요'라고 쓰면 에이전트는 머릿속에서 화면을 재구성해야 합니다. 스크린샷의 버튼에 동그라미를 치면 재구성할 게 없습니다. 그림 한 장이 천 마디 말보다 낫고, AI 에이전트에게 보내는 시각적 피드백에서는 낭비되는 여러 차례의 대화만큼의 값어치도 합니다.
함께 쓰면 좋은 기능
브라우저 자동화
QA 에이전트가 실제 브라우저를 구동하며 스크린샷을 캡처합니다. Sketch는 그 스크린샷 중 하나에 주석을 달아 표시가 들어간 피드백을 되돌려 보내는 방법입니다.
Scratchpad
AgentsRoom 안의 프롬프트와 메모를 위한 노트장. Scratchpad는 글을, Sketch는 그림을 다룹니다: 둘 다 같은 에이전트 작성창으로 흘러갑니다.
바이브 코딩 리뷰
에이전트가 바꾸는 모든 파일을 실시간으로 지켜보세요. 화면에서 변경이 잘못돼 보일 때, Sketch가 그것을 가리키는 가장 빠른 방법입니다.
Figma에서 AI 에이전트로
Figma 디자인을 에이전트 워크플로로 가져오세요. Sketch는 더 거칠고 빠른 사촌입니다: 완전한 디자인 파일이 필요 없을 때 작성창에서 바로 손으로 그린 목업이죠.
버그를 설명하지 마세요. 그리세요.
AgentsRoom을 다운로드하고 Sketch를 사용하세요: 에이전트 작성창의 그리기 캔버스로 목업을 스케치하고 스크린샷에 주석을 단 뒤, 터미널을 벗어나지 않고 AI 코딩 에이전트에게 그림을 보내세요.
컴패니언 앱: 이동 중에도 에이전트를 모니터링
Claude, Codex, Antigravity CLI 또는 다른 AI 공급자를 사용하세요.
버그와 요청을 공개 백로그로 바로 보내세요.
AgentsRoom의 실제 모습.