Cursor 브라우저를 위한 새로운 비주얼 에디터 출시

섹션별 상세

드래그앤드롭 방식의 레이아웃 조작을 지원한다. 사용자는 DOM 트리 상의 렌더링된 요소를 직접 끌어서 위치를 변경하거나 구조를 수정할 수 있다. 버튼 순서 변경이나 섹션 회전, 그리드 설정 테스트 등을 코드 수정 없이 시각적으로 수행하며, 최종 디자인이 확정되면 AI 에이전트가 관련 컴포넌트를 찾아 코드를 자동 갱신한다.

React 컴포넌트 상태 및 속성을 직접 테스트할 수 있다. 컴포넌트의 다양한 상태를 제어하는 props를 사이드바에 노출하여 개발자가 사이드바에서 직접 속성값을 변경하며 컴포넌트의 변형들을 실시간으로 확인하고 테스트할 수 있게 한다.

시각적 컨트롤을 통한 정밀한 스타일 조정을 제공한다. 슬라이더, 색상 팔레트, 디자인 시스템 토큰 등을 포함한 사이드바 도구를 통해 컬러 피커 실시간 미리보기는 물론, Flexbox나 Grid 레이아웃, 타이포그래피 등을 정밀하게 조정할 수 있다.

포인트 앤 프롬프트 기능을 통해 자연어로 UI를 수정한다. 인터페이스의 특정 요소를 클릭한 후 자연어로 변경 사항을 지시하면 AI 에이전트들이 병렬로 실행되어 수 초 내에 변경 사항을 실제 코드로 반영한다.

용어 해설

DOM 트리(DOM Tree): — 웹 페이지의 구조를 계층적인 트리 형태로 표현한 모델이다. 비주얼 에디터는 이 트리를 직접 조작하여 요소의 위치를 바꾸거나 구조를 수정하는 방식으로 작동한다.
프롭스(Props): — React 컴포넌트에 전달되는 속성 데이터이다. 비주얼 에디터는 이 값을 사이드바에 노출하여 개발자가 코드를 직접 수정하지 않고도 컴포넌트의 다양한 상태 변화를 시각적으로 확인할 수 있게 한다.
디자인 시스템 토큰(Design System Token): — 색상, 간격, 폰트 등 디자인 요소를 변수화하여 정의한 최소 단위이다. Cursor의 비주얼 에디터는 사용자의 고유한 토큰을 인식하여 일관성 있는 스타일 수정을 지원한다.
병렬 에이전트 실행(Parallel Agent Execution): — 여러 개의 AI 에이전트가 동시에 독립적인 작업을 수행하는 방식이다. 사용자가 여러 요소에 대해 동시에 수정을 요청할 때 각 요청을 병렬로 처리하여 반영 속도를 극대화한다.

기술

Cursor
React
AI Agents

활용 사례

UI 레이아웃 퀵 프로토타이핑
React 컴포넌트 스타일링 및 상태 테스트
자연어 기반 UI 수정

언급된 리소스

문서Browser docs

문서Cursor 2.2 New Features