Cursor Browser Visual Editor

Cursor에서 비주얼 에디터를 새롭게 출시했네요. 커서 블로그 내용을 정리해봤습니다.

원문 : https://cursor.com/blog/browser-visual-editor

이번 업데이트로 Cursor Browser 윈도우 안에서, 프론트엔드 구성 요소들을 바로바로 수정 할 수 있게 되었습니다. 컬러값, 폰트 크기등의 스타일을 직접 해당 화면에서 다룰 수 있는데요. 요소를 드래그해 배치하고, 컴포넌트와 props를 바로 확인하며, 클릭으로 대상을 지정한 뒤 원하는 변경을 자연어로 설명할 수 있습니다. 제품의 UI를 더 즉각적이고 직관적으로 다룰 수 있어, 디자인과 코드 사이의 간격을 한층 줄여주었습니다.

드래그 앤 드롭으로 재배치

화면 위의 요소를 마우스로 끌어다 놓고 사이트 구조를 자유롭게 바꿔볼 수 있습니다. 디자인과 코딩의 경계가 많이 줄어들었습니다. 이로인해 작업 흐름이 한결 매끄러워졌네요. (하지만 아직 전문 디자인 서비스에 비할바는 안 됩니다) 또한 버튼 순서를 바꾸거나 레이아웃을 조정하는 과정이 직관적으로 이루어집니다. 마음에 드는 디자인이 완성되면 에이전트에게 **"이대로 적용해줘"**라고 말하면 됩니다. 그러면 관련 코드를 찾아 업데이트해줍니다.

컴포넌트 상태를 직접 테스트

현대적인 웹 앱은 대부분 리액트(React)의 컴포넌트 단위로 설계됩니다. 각 컴포넌트는 Props를 통해 색상, 크기, 모양 등 다양한 상태(Variants)를 제어하는데, 비주얼 에디터는 이 복잡한 옵션들을 사이드바 UI로 시각화했습니다. 개발자가 일일이 코드를 탐색하며 값을 수정할 필요 없이, 사이드바의 컨트롤러를 조작하는 것만으로 컴포넌트의 변화를 실시간으로 확인할 수 있게 된 것입니다. 이는 불필요한 컨텍스트 스위칭을 줄이고 UI 개발의 효율성을 높인 것으로 보입니다. 다만 우측에 다양한 상태 조정 값들이 많이 나열되어 있는데, 구분도 잘 안 되고 필요한 부분을 찾는게 좀 불편하게 느껴지네요. (좀 있으면 정리해서 나아지겠죠)

시각적 컨트롤로 속성 조정

비주얼 에디터의 사이드바에서는 슬라이더, 팔레트, 그리고 사용자가 정의한 컬러 토큰/디자인 시스템을 활용해 스타일을 정밀하게 다듬을 수 있습니다. 모든 조정은 인터랙티브하게 동작합니다. 색상을 고르는 즉시 미리보기로 반영되는 라이브 컬러 피커는 물론, 그리드/플렉스 레이아웃, 타이포그래피를 정확하게 조정하는 컨트롤도 제공합니다. 다만 인터랙티브한 조정을 위해서 마우스를 해당 위치로 움직여 끌고 당기는게 뭔가 답답한 느낌이 드는데. 드래그 보다 좀 더 편리한 방법은 없을까 싶습니다. 오히려 화면상에서 밀고 당기고가 좋지 않을까 싶기도 하고요.

포인트 앤 프롬프트

비주얼 에디터에서는 UI에서 원하는 대상을 클릭한 뒤, 바꾸고 싶은 내용을 말로 설명할 수 있습니다. 예를 들어 어떤 요소를 클릭하고 “이거 더 크게”, 다른 요소를 클릭하고 “이건 빨갛게”, 또 다른 요소를 선택해 “둘 순서를 바꿔줘”라고 입력하는 방식입니다. 에이전트가 병렬로 작업을 수행하며, 수초 내로 변경 사항이 화면에 반영됩니다. 하지만 이건 이거대로 클릭하고 말쓰고, 클릭하고 말 쓰고 번거로운 부분이 있군요.

아직은 좀 더 다듬어야...

Cursor의 새로운 비주얼 에디터는 디자인과 코드 작업을 하나로 연결해, 사용자가 원하는 바를 더 명확히 표현할 수 있도록 돕는다는 점에서 환영할만 합니다. 하지만 아직 정리되지 않은 툴들과 사용방식은 개선의 여지가 보입니다. 예를 들어서 비주얼 에디터 창이 떠 있는 상태에서 깃 커밋 변경 리스트가 겹치는 내용 등이죠. 그러나 구글에서 아쉬웠던 커서의 단점이 보완되어가는 모습을 봤을때 커서 유저로서 환영할만한 일임에는 틀림없습니다. :)