Cursor는 브라우저 기반 비주얼 편집기를 실행합니다. 디자인과 코드를 완벽하게 통합합니다. Cursor는 Cursor 브라우저에 통합된 "브라우저 비주얼 에디터"를 공식 출시했습니다. 이 에디터는 웹 애플리케이션, 코드베이스 및 시각적 편집 기능을 단일 창으로 통합하여 개발자가 직관적인 드래그 앤 드롭, 클릭 후 찾기 툴팁을 통해 인터페이스 요소를 직접 조작하고 수정할 수 있도록 함으로써 디자인 아이디어와 코드 구현 간의 격차를 해소합니다. 핵심 기능 및 작동 원리: 드래그 앤 드롭 레이아웃 재배치: 사용자는 렌더링된 DOM 트리에서 요소를 직접 드래그 앤 드롭하여 버튼 순서를 바꾸거나, 영역을 회전하거나, 그리드 레이아웃을 테스트할 수 있습니다. AI 에이전트는 관련 구성 요소를 자동으로 찾아 기본 코드를 업데이트하므로 수동으로 CSS 또는 JSX를 작성할 필요가 없습니다. • 컴포넌트 상태 테스트: React와 같은 프레임워크로 구축된 애플리케이션의 경우, 사이드바에 컴포넌트 속성이 실시간으로 표시되어 사용자가 대화형 컨트롤을 통해 다양한 변형 상태를 빠르게 전환하고 확인할 수 있습니다. • 시각적 속성 조정: 사이드바에는 슬라이더, 색상 선택기, 디자인 시스템 토큰과 같은 도구가 통합되어 있어 실시간 스타일 미세 조정을 지원합니다. 예를 들어, 사용자는 실시간 색상 선택기를 사용하여 색상을 수정하거나, 그리드/플렉서블 박스 레이아웃을 조정하거나, 타이포그래피를 최적화할 수 있습니다. 모든 변경 사항은 AI 에이전트에 의해 소스 코드에 동기화됩니다. • 클릭 후 수정 프롬프트: 사용자가 인터페이스 요소를 클릭한 후, "크게 해 주세요", "빨간색으로 해 주세요", "순서를 바꿔 주세요"와 같은 자연어를 사용하여 변경 사항을 설명할 수 있습니다. AI 에이전트는 여러 프롬프트를 동시에 처리하고 몇 초 내에 실시간으로 업데이트를 적용합니다. 이러한 "클릭 후 선택" 방식의 상호 작용은 수정 과정을 마치 디자이너와 대화하는 것처럼 느껴지게 합니다. 이러한 기능들은 디자인 및 코딩 프로세스를 간소화합니다. 렌더링된 뷰에서 시작하여, 드래그 앤 드롭이나 프롬프트를 통해 AI 에이전트가 코드를 수정하고, 마지막으로 브라우저에서 실시간으로 코드를 미리 볼 수 있습니다. 이러한 접근 방식은 "실행 메커니즘의 제약으로 인한 창의성 제한"을 줄여 개발자가 의도를 더욱 정확하게 표현할 수 있도록 합니다. 장점: AI가 통합된 비주얼 에디터는 특히 프런트엔드 및 풀스택 개발자의 개발 효율성을 크게 향상시킵니다. 추상적인 코드 로직을 구체적인 인터페이스 작업으로 변환하여 사용자가 아이디어를 더욱 효과적으로 표현할 수 있도록 돕고, 결과적으로 반복 개발 주기를 단축합니다. 커서 AI는 핵심 동력입니다. 이 에이전트는 코드 업데이트를 처리할 뿐만 아니라 멀티태스킹 병렬 실행을 지원하여 변경 사항이 안전하고 되돌릴 수 있도록 보장합니다. 예를 들어, "하나의 요소를 클릭하고 '크게 만들어'라고 말하는 동시에 다른 요소에는 '빨간색으로 만들어'라고, 또 다른 요소에는 '순서를 바꿔'라고 말할 수 있습니다. 에이전트들은 병렬로 실행되며, 변경 사항은 몇 초 안에 적용됩니다." 이는 "생각이 곧 코드로 이어지는" 미래에 대한 Cursor의 비전을 구현한 것입니다. 커서 공식 블로그
