Cursor Design Mode Annotate 사용법: 화면을 지정해 에이전트에게 UI 코드 수정 요청하기

Cursor Design Mode Annotate에서는 실행 중인 웹페이지의 수정할 부분을 지정하고, 요소 정보와 스크린샷을 담아 코딩 에이전트에게 변경을 요청할 수 있습니다. Cursor 3.24.18 이상에서 Agents Window의 브라우저를 열고 Annotate를 선택하거나 Cmd/Ctrl + Shift + D를 누릅니다. 서로 관련된 변경이 여러 개라면 Batch edits를 켜서 메모를 모은 뒤 한 번에 전송합니다.

이 방법은 화면에서 무엇이 잘못됐는지는 알지만, 해당 부분을 제어하는 React 컴포넌트나 CSS 규칙, 템플릿을 모를 때 유용합니다. 숙련된 개발자도 화면에 대한 의견을 소스 코드와 더 직접적으로 연결할 수 있습니다. 다만 에이전트는 요청을 해석하고 프로젝트를 올바르게 수정해야 합니다. 작업이 끝나면 코드 변경 사항과 실제로 표시되는 페이지를 함께 확인합니다.

Annotate 위치와 펜 아이콘만 보이는 이유

Annotate는 Cursor의 Agents Window 안에 있는 브라우저 도구 모음에 있습니다. 사용 중인 버전과 화면에 따라 표시되는 버튼이 달라집니다.

다음 순서로 실행합니다.

1. Cursor에서 프로젝트를 열고 Agents Window를 엽니다.
2. 에이전트 세션을 새로 시작하거나 기존 세션을 엽니다. 이어서 실행 중인 앱을 표시하는 브라우저를 엽니다.
3. 브라우저 도구 모음에서 Annotate를 클릭합니다. 브라우저에 포커스를 둔 다음 macOS에서는 Cmd + Shift + D, Windows와 Linux에서는 Ctrl + Shift + D를 눌러도 됩니다.
4. 명령 팔레트를 사용하는 경우 Toggle Design Mode를 검색합니다.
5. 페이지 위쪽의 안내 줄을 확인합니다. 현재 단계에서 사용할 수 있는 클릭, 드래그 등의 조작 방법이 표시됩니다.

Design Mode 공식 문서에 따르면 Annotate는 Cursor 3.24.18 이상에서 사용할 수 있습니다.

Design Mode라는 이름이 붙은 펜 아이콘이 보이면 먼저 버전을 확인합니다. 이전 버전에서는 새 Annotate 버튼 대신 이 버튼을 사용합니다. 문서에 설명된 Annotate 화면을 사용하려면 Cursor를 업데이트합니다.

도구 모음이 다르게 보이는 이유는 두 가지 더 있습니다. Design Mode를 처음 열기 전에는 버튼에 Try Annotate 미리보기와 짧은 시연이 표시됩니다. 메모를 다섯 개보다 많이 작성한 뒤에는 버튼에 아이콘만 표시됩니다.

Design Mode를 끝내려면 안내 줄의 종료 버튼을 클릭하거나, 같은 단축키를 다시 누르거나, Esc를 누릅니다. Esc는 먼저 그리는 중인 선, 텍스트 편집, 열려 있는 메모를 취소합니다. 이러한 작업이 닫힌 다음에 Design Mode를 종료합니다.

Cursor의 공개 문서는 Annotate를 사용할 수 있는 구독 요금제나 모든 계정에 제공되는 일정을 명시하지 않습니다. 따라서 버전 조건을 충족한다는 이유만으로 모든 계정에서 사용할 수 있다고 가정하면 안 됩니다.

요소 선택, 그림 표시, CSS 편집 방법

바꿔야 할 컴포넌트를 알고 있다면 해당 요소를 선택합니다. 간격이나 정렬, 여러 요소의 배치가 문제라면 관련 영역을 표시합니다.

요소 하나 또는 여러 개 선택하기

실행 중인 앱에서 요소를 클릭하면 해당 요소가 선택되고 메모가 열립니다. 메모에 원하는 변경 사항을 작성합니다.

예를 들어 헤더가 복잡한 SaaS 대시보드에 검색 필드와 필터 버튼이 한 줄로 배치되어 있다고 가정합니다. 검색 필드를 선택하고 다음과 같이 요청합니다.

입력 필드의 높이를 늘리고 내부 여백을 추가합니다. 필드 안의 텍스트를 필터 버튼과 세로 방향으로 정렬합니다. 기존 색상 구성은 유지합니다.

선택한 요소는 에이전트에게 수정 대상을 알려 줍니다. 메모의 설명은 그 대상을 어떤 모습으로 바꿔야 하는지 전달합니다.

관련된 여러 요소를 하나의 요청에 포함하려면 Shift를 누른 상태에서 각 요소를 클릭합니다. 예를 들어 검색 필드와 필터 버튼을 함께 선택합니다. 그런 다음 기준선을 맞추고 높이를 통일하도록 요청합니다.

여러 요소가 함께 바뀌어야 할 때 다중 선택을 사용합니다. 서로 독립적인 변경이거나 다른 지시가 필요하다면 메모를 나누는 편이 명확합니다.

영역을 지정하고 페이지에 그림 표시하기

페이지 위에서 드래그해 영역을 지정합니다. 그다음 변경 사항을 설명하고 그림이나 표시를 추가합니다.

안내 줄에는 다음 네 가지 도구가 있습니다.

• Draw: 자유로운 모양을 그리거나 수정할 영역의 윤곽을 따라 표시합니다.
• Ellipse: 요소 하나 또는 여러 요소를 타원으로 둘러쌉니다.
• Rectangle: 페이지의 특정 구역을 사각형으로 표시합니다.
• Arrow: 바꿔야 하는 부분을 화살표로 가리킵니다.

드래그하면서 Shift를 누르면 움직임을 한 축으로 제한합니다. 사각형을 중심에서부터 그리려면 macOS에서는 Option, Windows와 Linux에서는 Alt를 누릅니다. 그린 표시를 되돌리려면 Cmd/Ctrl + Z를 누릅니다.

대시보드에서 요약 카드가 차트에 너무 가깝게 붙어 있다고 가정합니다. 카드와 차트 사이의 경계 부분을 사각형으로 표시한 뒤 다음 메모를 추가합니다.

요약 카드와 차트 사이에 세로 간격을 24px 추가합니다. 차트의 현재 크기를 유지하고, 화면 크기에 따라 레이아웃이 조정되는 동작도 유지합니다.

그림은 변경이 필요한 위치를 나타냅니다. 메모의 문장은 원하는 결과와 유지해야 할 조건을 설명합니다. 위치뿐 아니라 차트 크기와 반응형 동작의 조건도 함께 전달하는 예입니다.

화면에 표시된 텍스트 직접 편집하기

텍스트 요소를 두 번 클릭하면 페이지에서 내용을 바로 편집할 수 있습니다. 변경을 저장하려면 Return 또는 Enter를 누르고, 되돌리려면 Esc를 누릅니다.

예를 들어 브라우저에서 제목을 “Usage Overview”에서 “API Usage”로 직접 바꿉니다. 어떤 문구로 교체할지 별도의 설명을 작성할 필요가 없습니다.

다만 저장과 전송은 다릅니다. 텍스트 편집은 Batch edits가 꺼져 있어도 항상 Send를 누를 때까지 대기합니다. 화면에서 편집 내용을 저장했다고 바로 에이전트에게 전송되는 것은 아닙니다.

텍스트 편집은 코드 변경을 제안하는 과정으로 이해합니다. 브라우저 화면만 영구적으로 바꾸는 작업으로 보면 안 됩니다. Cursor는 편집 내용을 메모와 함께 보내고, 에이전트는 이를 바탕으로 원래 프로젝트를 수정할 수 있습니다.

검사기에서 CSS 속성 변경하기

요소 하나를 대상으로 하는 메모에서 Edit CSS properties를 선택하면 해당 요소의 CSS 검사기가 열립니다. 속성 목록을 필터링해 필요한 속성을 찾고, 값을 바꾼 다음 메모와 함께 전송합니다.

내부 여백이나 글자 크기, display 동작, 위치 지정처럼 구체적인 조정에 적합합니다. 모든 변경을 문장으로 설명하는 대신 속성 값을 직접 지정할 수 있습니다.

에이전트가 변경을 적용한 뒤 페이지를 확인합니다. 새 CSS 값은 기존 스타일, 레이아웃 규칙, 반응형 동작과 영향을 주고받을 수 있습니다. 코드 차이도 살펴봅니다. 올바른 컴포넌트가 수정됐는지, 요청과 관계없는 변경이 들어가지는 않았는지 확인합니다.

음성으로 메모 입력하기

메모에 텍스트나 CSS 변경 사항이 들어 있으면 음성 입력을 사용할 수 있습니다. Dictate를 클릭하거나 말하는 동안 버튼을 누르고 있습니다.

음성 지시와 그림을 함께 사용할 수도 있습니다. 예를 들어 홍보 배너를 둘러싼 뒤 텍스트를 줄이도록 요청합니다. 버튼은 오른쪽에 정렬하고, 모바일 화면에서는 요소를 위아래로 쌓도록 설명할 수 있습니다.

전송하기 전에 입력된 메모를 읽고 확인합니다. 그림은 수정 대상을 나타내고, 음성으로 입력한 문장은 원하는 결과를 설명합니다. 같은 컴포넌트에 여러 변경을 요청할 때는 특히 지시를 명확히 작성합니다.

Batch edits를 켜야 하는 경우

서로 관련된 화면 변경을 모아 한 번에 구현하도록 요청하려면 Batch edits를 켭니다. 요소나 영역 메모를 즉시 보내고 결과를 본 뒤 다음 변경을 결정하려면 꺼 둡니다.

이 스위치는 처음에는 꺼져 있습니다. 설정에 따라 요소와 영역 메모가 전달되는 방식이 달라집니다. 다만 페이지에서 직접 편집한 텍스트는 어느 설정에서든 Send를 누를 때까지 대기합니다.

동작	Batch edits 끔	Batch edits 켬
요소 또는 영역 메모	개별적으로 전송합니다	번호가 붙은 핀으로 모읍니다
요소 또는 영역 메모 전송	메모에서 Return 또는 Enter를 누르면 즉시 전송합니다	도구 모음의 Send를 눌러 대기 중인 메모를 모두 전송합니다
메시지 묶음	메모마다 별도로 전송합니다	대기 중인 메모를 하나의 메시지로 전송합니다
페이지에서 직접 편집한 텍스트	Send를 기다립니다	마찬가지로 Send를 기다립니다
대기 중인 메모 확인	전송하지 않은 텍스트 편집이 있으면 Send 목록에서 확인합니다	Send 옆 목록에서 모아 둔 메모를 확인합니다
대기 중인 메모 삭제	Clear All로 대기 중인 메모를 삭제합니다. 이미 전송한 메모는 이 작업으로 삭제되지 않습니다	Clear All로 대기 중인 메모를 삭제합니다

즉시 전송되는 메모와 전송 대기 중인 텍스트 편집을 구분해야 합니다. Batch edits를 끈 상태에서는 요소나 영역 메모를 Return 또는 Enter로 바로 보낼 수 있습니다. 반면 직접 편집한 텍스트는 전송할 때까지 대기합니다. 이런 텍스트 편집도 Send 목록에서 검토하거나 Clear All로 대기 목록에서 삭제할 수 있습니다.

Batch edits를 켜면 도구 모음의 Annotate가 대기 중인 메모 수를 표시하는 Send 버튼으로 바뀝니다. 전송하기 전에 번호가 붙은 핀을 검토할 수 있습니다. 대기 중인 메모를 모두 보내면 Design Mode도 종료됩니다.

메모를 전송하지 않고 Design Mode를 종료하면 Send 버튼은 도구 모음에 남습니다. 메모를 보내거나 지울 때까지 버튼이 유지됩니다.

실제 작업 예시: 요금 페이지 개선하기

요금 페이지에서 다음 세 가지 문제를 해결한다고 가정합니다.

1. 주요 제목이 세로 공간을 너무 많이 차지합니다.
2. 주요 행동을 유도하는 버튼이 가격 표시와 정렬되지 않습니다.
3. 비교 표가 작은 화면에서 지나치게 빽빽해 보입니다.

Batch edits를 켠 다음 각 문제에 대한 메모를 만듭니다.

제목은 텍스트를 선택하고 시각적인 중요도 관계를 유지하면서 크기를 줄이도록 요청합니다. 버튼은 가격 표시와 함께 선택해 두 요소의 정렬 관계를 전달합니다. 비교 표는 관련 영역을 표시하고 화면 크기에 따라 어떻게 배치되어야 하는지 설명합니다.

전송하기 전에 번호가 붙은 핀을 확인합니다. 각 메모가 의도한 요소나 영역을 가리키는지 검토합니다. 그런 다음 전체 메모를 하나의 메시지로 보냅니다.

이 방법은 변경들이 하나의 일관된 작업을 이룰 때 적합합니다. 에이전트가 메모를 함께 보고 서로의 관계를 고려할 수 있습니다. 그렇다고 일괄 전송이 모든 지시의 정확한 구현을 보장하지는 않습니다.

다음 변경이 중요한 중간 결과에 달려 있다면 첫 번째 메모를 따로 전송합니다. 업데이트된 페이지를 확인하고 다음 작업을 결정합니다. 예를 들어 페이지 전체 배치를 먼저 바꾼 다음, 개별 컴포넌트 사이의 간격을 세밀하게 조정하도록 요청합니다.

메모 안이나 텍스트 편집 중에 Cmd/Ctrl + L을 누르면 내용을 채팅 입력란으로 옮길 수도 있습니다. 즉시 전송하거나 Send용으로 대기시키는 대신 사용하는 방법입니다. Option/Alt를 누른 채 요소를 클릭하면 해당 요소를 채팅 입력란에 바로 추가합니다. 메모가 이미 열려 있다면 같은 조작으로 그 메모에 요소를 추가합니다.

에이전트가 실제로 받는 정보

전송한 메모에는 지시문, 구조화된 요소 정보, 필요한 부분만 잘라 낸 스크린샷이 포함됩니다. 지원되는 React, Vue, Svelte 앱에서는 컴포넌트 정보도 전달합니다. 이는 에이전트가 해당 소스 코드를 찾는 데 도움이 됩니다.

Cursor 문서는 선택한 요소마다 다음 정보를 전달한다고 설명합니다.

정보	Cursor가 제공하는 내용	용도
HTML 태그	요소의 태그 이름	요소의 종류를 식별합니다
속성	요소의 id, 클래스, 속성	다른 요소와 구별합니다
선택자 경로	CSS 선택자 형식의 경로	렌더링된 페이지에서 요소를 찾는 데 도움을 줍니다
화면에 보이는 텍스트	표시되는 텍스트의 처음 200자	선택한 요소를 실제 내용과 연결합니다
크기와 위치	요소의 크기 및 위치	배치된 장소와 치수를 설명합니다
계산된 스타일	색상, 배경색, 글자 크기, 글꼴 모음, display, position	실제 렌더링에 적용된 스타일 정보를 전달합니다
컴포넌트 정보	React, Vue, Svelte의 컴포넌트 이름과 컴포넌트 스택	화면의 요소를 애플리케이션 소스와 연결하는 데 도움을 줍니다
스크린샷	선택한 요소 또는 그림 표시가 들어간 영역의 잘라 낸 이미지	요청한 변경의 시각적 맥락을 보여 줍니다

이 정보는 “헤더를 보기 좋게 바꿔 줘”라는 일반적인 요청보다 구체적입니다. 에이전트는 수정 대상, 렌더링 속성, 보이는 내용, 이미지를 함께 받습니다. 글로만 설명하기 어려운 위치와 모양을 보완할 수 있습니다.

하지만 전달되는 정보는 제한된 시점의 일부입니다. 문서에서 전체 DOM, 완전한 스타일시트, 모든 상위 요소의 계산된 스타일을 제공한다고 보장하지는 않습니다. 앱의 모든 상태나 페이지 전체 스크린샷도 약속하지 않습니다. 나열된 프레임워크에서는 컴포넌트 스택을 제공하지만, 모든 프로젝트에서 올바른 소스 파일을 찾는다고 보장하지는 않습니다.

예를 들어 버튼을 선택하면 에이전트는 버튼의 종류, 클래스, 크기, 텍스트, 계산된 스타일을 받습니다. 스크린샷은 그 버튼이 가격 표시 옆에 어떻게 배치되어 있는지 이해하는 데 도움이 될 수 있습니다. React 앱에서는 컴포넌트 정보로 화면에 표시된 버튼을 해당 컴포넌트 스택과 연결할 수 있습니다.

Vue와 Svelte에도 같은 종류의 컴포넌트 정보가 문서화되어 있습니다. Cursor는 이 앱들에서도 컴포넌트 이름과 컴포넌트 스택을 포함합니다. 다만 프레임워크나 프로젝트가 달라도 소스 코드를 찾는 결과가 동일하다고 보장하지는 않습니다.

에이전트는 여전히 저장소를 조사하고, 주변 구현을 이해하고, 변경 방법을 결정해야 합니다. 작업이 끝나면 코드 차이와 실행 중인 페이지를 확인합니다.

Cursor 문서에는 Annotate의 스크린샷과 요소 메타데이터에 대한 토큰 비용 계산식이 없습니다. 메모 하나의 비용이 고정되어 있다고 가정하면 안 됩니다. 메모를 묶어 보내면 모델의 총사용량이 반드시 줄어든다고 볼 수도 없습니다. Batch edits는 메모를 보내는 방식을 바꾸며, 실제 비용은 에이전트의 처리 과정과 모델 사용량에 따라 달라집니다.

에이전트가 수정한 결과 확인하기

Annotate로 요청을 구체화한 다음, 프로젝트의 구현과 브라우저에 표시되는 결과를 확인합니다. 요청을 정확하게 전달하는 것과 수정 결과를 검증하는 것은 별개의 작업입니다.

메모를 보낸 후에는 다음 순서로 확인합니다.

1. 에이전트가 관련 변경을 마칠 때까지 기다립니다.
2. 코드 차이를 살펴봅니다. 관계없는 변경, 잘못된 선택자, 기존 컴포넌트 규칙을 어긴 수정이 있는지 확인합니다.
3. 개발 서버가 핫 리로드를 지원하면 반영된 페이지를 확인합니다.
4. 앱에서 중요한 뷰포트 크기별로 레이아웃을 다시 점검합니다.
5. 필요한 경우 상호작용과 접근성을 테스트합니다. 키보드 포커스와 텍스트 가독성도 포함합니다.

Cursor의 2026년 10월 28일 발표에서는 Annotate를 통해 다양한 화면 크기에서 디자인을 검토할 수 있다고 설명합니다. 하지만 제공된 공개 Design Mode 문서에는 반응형 동작을 자동으로 검사하는 방식이 명시되어 있지 않습니다. 설치한 환경에 문서화된 자동화 방법이 없다면 뷰포트별 검사를 별도 단계로 진행합니다.

더 넓은 범위의 인터페이스 작업에는 Inspo MCP로 디자인 참고 자료와 스크린샷을 코딩 에이전트에게 전달하는 방법도 활용할 수 있습니다. 이 방법이 해결하는 문제는 다릅니다. Annotate는 실행 중인 인터페이스에서 무엇을 바꿀지 지정하고, 디자인 참고 자료는 어떤 시각적 결과를 원하는지 설명합니다.

전체 개발 방식을 선택하는 단계라면 2026년 Cursor와 Codex 비교를 참고합니다. 개발 방식, 가격, 필요에 따른 추가 사용을 비교합니다.