Cursor Design Mode 활용법: 브라우저에서 UI를 찍어서 고치는 법

핵심 요약: 프론트 작업에서 가장 소모적인 대화가 "아니 그 버튼 말고, 위에 있는 파란색…"입니다. Design Mode는 이 문제를 없앱니다 — Agents Window의 브라우저에서 화면의 UI 요소를 직접 클릭·주석 달아 지목하면, 에이전트가 정확히 그 요소를 대상으로 작업합니다. 말로 설명하던 위치·맥락 전달이 "찍기"로 바뀌는 것. 잘 맞는 작업은 시각적 미세 조정(간격·색·정렬), 특정 컴포넌트 수정, 디자인 시안 대비 어긋난 부분 잡기입니다. 요령은 하나 — 찍는 것은 위치 전달일 뿐, 원하는 결과는 여전히 말로 명확히 써야 합니다.

이 글에서 다루는 내용: 동작 방식, 잘 맞는 작업과 아닌 작업, 실전 워크플로, 비슷한 기능들과의 비교.

동작: 스크린샷 설명의 종언

Agents Window(기본 글)에서 앱을 브라우저로 띄우고 Design Mode로 전환하면, 화면의 요소를 클릭해 선택하고 주석을 달 수 있습니다. 선택한 요소의 정보가 지시와 함께 에이전트에게 전달되므로, 에이전트는 "어느 파일의 어느 컴포넌트인지"를 스스로 찾아 작업합니다. 지금까지 스크린샷을 찍어 화살표를 그리고 "이 부분"이라고 설명하던 왕복이 클릭 한 번으로 압축되는 셈입니다.

잘 맞는 작업 / 아닌 작업

잘 맞는 것: 간격·정렬·색·폰트 같은 시각 미세 조정("이 카드 패딩 늘려줘"), 특정 컴포넌트의 동작 수정("이 드롭다운이 모바일에서 잘려"), 시안과 실물의 차이 잡기(시안 이미지를 함께 주고 "이 부분을 시안처럼"). 공통점은 대상이 화면에 보인다는 것. 아닌 것: 화면에 안 보이는 로직(상태 관리, API 연동), 전역적 변경(디자인 시스템 색상 교체 — 이건 코드에서 토큰을 고치는 게 맞음), 새 화면 설계. 이런 건 평소의 에이전트 지시(그 기준)로 돌아가면 됩니다.

실전 워크플로

제가 정착시킨 순서: ① 로컬 서버 띄우고 Agents Window 브라우저로 열기 ② 고칠 곳을 돌며 요소마다 주석으로 원하는 결과를 짧게 ("여백 24px로", "이 텍스트 줄바꿈 안 되게") ③ 한 번에 실행 ④ 같은 화면에서 결과 확인. 포인트는 ②입니다 — 찍기만 하고 "이거 좀 예쁘게"라고 쓰면 에이전트의 미감에 복권을 거는 것이고, 찍고 + 구체적 결과를 쓰면 지시가 됩니다. 지목은 Design Mode가, 명세는 여전히 내가.

비슷한 기능들과의 위치

이 "화면을 보며 고치기"는 2026년의 공통 트렌드입니다 — Antigravity의 Browser Subagent(소개)는 에이전트가 스스로 클릭하며 테스트하는 쪽이고, Orca의 Design Mode(소개)는 요소의 HTML·CSS를 프롬프트로 보내는 쪽. Cursor Design Mode의 성격은 그 중간 — 사람이 지목하고 에이전트가 고치는 협업형입니다. 어느 쪽이든 방향은 같습니다: 프론트 작업에서 "말로 위치 설명하기"가 사라지는 중입니다.

자주 묻는 질문 (FAQ)

Q. 어디서 켜나요?

A. Agents Window의 브라우저 영역에서 Design Mode로 전환합니다. 버전에 따라 UI가 다듬어지고 있으니 안 보이면 업데이트를 먼저 확인하세요.

Q. 배포된 사이트에도 쓸 수 있나요?

A. 수정의 대상은 결국 내 코드베이스이므로, 로컬(또는 접근 가능한 개발 환경)에서 띄운 화면으로 작업하는 것이 기본입니다.

Q. 백엔드 개발자에게도 쓸모가 있나요?

A. 가끔 프론트를 만져야 하는 백엔드 개발자에게 오히려 체감이 큽니다 — 컴포넌트 구조를 몰라도 화면에서 찍으면 에이전트가 파일을 찾아주니까요.

한눈에 보는 요약

보이는 것은 찍어서, 원하는 결과는 글로. 시각 조정·컴포넌트 수정에 쓰고, 로직·전역 변경은 일반 지시로. "그 버튼 말고" 왕복이 사라지는 것만으로 프론트 세션의 밀도가 달라집니다.

함께 보면 좋은 글

Cursor Agents Window 병렬 워크플로 실전
Google Antigravity란? (Browser Subagent)
Cursor Agent 모드는 언제 쓰는 게 좋을까?

참고 자료

Cursor 3 공식 체인지로그 (Design Mode)
Cursor 공식 문서