Cursor Browser를 위한 비주얼 에디터를 공개하게 되어 기쁩니다. 이 에디터는 웹 앱, 코드베이스, 그리고 강력한 시각 편집 도구를 모두 한 창에서 함께 제공합니다. 요소를 드래그해 옮기고, 컴포넌트와 props를 바로 확인하며, 가리키고 클릭하는 것만으로 변경 사항을 설명할 수 있습니다. 이제 제품의 인터페이스를 더 직관적이고 즉각적으로 다룰 수 있어, 디자인과 코드 사이의 간극이 크게 줄어듭니다.

#드래그 앤 드롭으로 재배치하기

비주얼 에디터를 사용하면 렌더링된 요소를 DOM 트리 전체에서 드래그 앤 드롭해 사이트의 레이아웃과 구조를 직접 조작할 수 있습니다.

이 방식은 비주얼 디자인과 코딩을 하나로 통합합니다. 버튼 순서를 바꾸고, 섹션을 회전시키고, 다양한 그리드 구성을 컨텍스트를 전환할 필요 없이 시험해 볼 수 있습니다. 비주얼 디자인이 마음속에 그린 모습과 일치하면 Agent에게 적용하라고 지시하세요. Agent가 관련 컴포넌트를 찾아서 기반 코드를 업데이트해 줍니다.

#컴포넌트 상태를 직접 테스트하기

요즘 애플리케이션 상당수는 React로 만들어지며, 각 컴포넌트는 다양한 상태를 제어하는 props(속성)를 가지고 있습니다. 비주얼 에디터를 사용하면 이러한 props를 사이드바에 쉽게 표시해, 컴포넌트의 다양한 변형(variant) 전체에 걸쳐 손쉽게 변경을 적용할 수 있습니다.

#시각적 컨트롤로 속성 조정하기

시각적 편집기 사이드바를 사용하면 슬라이더, 팔레트, 사용자 지정 색상 토큰과 디자인 시스템으로 스타일을 세밀하게 조정할 수 있습니다. 모든 조정은 완전히 인터랙티브하며, 선택 내용을 미리 보여주는 실시간 색상 선택기와 그리드, flexbox 레이아웃, 타이포그래피를 정밀하게 조정할 수 있는 컨트롤을 제공합니다.

#가리키고 프롬프트하기

비주얼 편집기를 사용하면 인터페이스에서 원하는 요소를 클릭한 뒤, 어떻게 바꾸고 싶은지 설명할 수 있습니다. 한 요소를 클릭해 "이거 더 크게 만들어 줘"라고 말하고, 다른 요소에는 "이거 빨간색으로 바꿔 줘"라고 프롬프트를 입력하고, 세 번째 요소에는 "둘의 순서를 바꿔 줘"라고 입력할 수 있습니다. 여러 에이전트가 병렬로 실행되며, 몇 초 안에 변경 사항이 바로 적용됩니다.

#추상화 수준을 한 단계 끌어올리기

새로운 Cursor 시각적 편집기는 디자인과 코드를 하나의 흐름으로 통합해, 원하는 바를 더 명확하게 표현할 수 있게 해 주고 구현이 세부적인 메커니즘에 발목 잡히지 않도록 도와줍니다.

우리는 에이전트가 웹 앱을 만드는 과정과 더욱 깊이 결합되고, 사람이 생각을 코드와 더 직접적으로 이어 주는 인터페이스를 통해 아이디어를 표현하는 미래를 기대하고 있습니다. 지금 소개한 기능들은 그런 방향으로 나아가는 발걸음입니다.

Browser 문서를 읽어 보세요. Cursor 2.2에 새로 추가된 모든 기능도 확인해 보세요.