Visual Editor는 Cursor Browser 내의 새로운 기능으로, AI 에이전트가 함께 작업하면서 기본 코드를 업데이트하는 동안 웹 애플리케이션을 시각적으로 편집할 수 있게 해줍니다. 웹 앱, 코드베이스, 시각적 편집 도구를 하나의 창에 통합하여 디자인과 개발 사이의 간극을 좁힙니다. 요소를 드래그하고, 컴포넌트와 그 속성을 검사하며, 클릭과 포인팅으로 변경 사항을 설명할 수 있습니다. 워크플로우를 벗어날 필요 없이 말이죠.
시각적 편집기를 사용하면 렌더링된 요소를 DOM 트리에서 드래그 앤 드롭하여 사이트의 레이아웃과 구조를 직접 조작할 수 있습니다. 버튼 순서를 바꾸고, 섹션을 회전시키며, 다양한 그리드 구성을 테스트할 수 있습니다. 컨텍스트 전환 없이 말이죠. 시각적 디자인이 원하는 대로 완성되면 에이전트에게 적용을 요청하세요. 에이전트가 관련 컴포넌트를 찾아 기본 코드를 업데이트합니다.
React로 구축된 최신 앱은 컴포넌트 속성을 사용하여 다양한 상태를 제어합니다. 시각적 편집기는 이러한 속성을 사이드바에 표시하여 변형 간 전환과 각각의 렌더링 결과를 쉽게 확인할 수 있게 해줍니다. 이를 통해 다양한 조건에서 컴포넌트가 어떻게 동작하는지 즉각적인 피드백을 얻을 수 있습니다.
사이드바는 슬라이더, 색상 팔레트, 자체 디자인 시스템 토큰을 제공하여 스타일을 세밀하게 조정할 수 있습니다. 모든 조정은 완전히 상호작용적입니다. 실시간 색상 선택기가 선택 사항을 미리 보여주고, 컨트롤을 통해 그리드, 플렉스박스 레이아웃, 타이포그래피를 정밀하게 재배열할 수 있습니다. 변경 사항은 브라우저에 즉시 반영됩니다.
인터페이스의 아무 요소나 클릭하고 변경하고 싶은 내용을 설명하세요. 한 요소를 클릭하고 "이것을 더 크게 만들어 줘"라고 말하고, 다른 요소를 클릭하고 "이것을 빨간색으로 바꿔 줘"라고 프롬프트를 입력하며, 세 번째 요소에는 "순서를 바꿔 줘"라고 입력할 수 있습니다. 에이전트가 병렬로 실행되며 몇 초 안에 변경 사항이 적용됩니다.
"시각적 편집기는 디자인과 코드 전반에 걸친 작업을 통합하여, 원하는 바를 더 잘 표현할 수 있도록 도와줍니다. 이로 인해 실행이 기술적 세부 사항에 제한되지 않습니다."
이것이 핵심 통찰입니다. 시각적 편집기는 시각적 아이디어를 수동으로 코드로 변환하도록 강요하는 대신, 드래그 앤 드롭, 포인팅, 자연어를 통해 변경 사항을 자연스럽게 표현할 수 있게 해줍니다. 에이전트가 코드 변환을 처리하므로 구현 세부 사항보다는 디자인 의도에 집중할 수 있습니다. 이는 에이전트가 앱 구축에 깊이 연결되고, 인간이 생각과 코드를 더 직접적으로 연결하는 인터페이스를 통해 아이디어를 표현하는 미래로 가는 한 걸음입니다.
웹 애플리케이션을 구축하고 UI 반복 주기를 가속화하고 싶다면. 간단한 레이아웃이나 스타일 변경을 위해 브라우저, 코드 편집기, 디자인 도구 사이를 전환하는 데 지쳤다면, Visual Editor는 통합된 접근 방식을 제공합니다. React 컴포넌트로 작업하며 여러 상태를 테스트해야 하거나, 실시간으로 변경 사항이 적용되는 것을 보고 싶어하는 디자이너와 협업하는 경우 특히 유용합니다.
Loading comments…
제작자
moonbyte
웹사이트 방문
cursor.com/blog/browser-visual-editor
프로젝트 정보
제품 키워드
