Chat은 에이전트와 함께 작업하는 하나의 인터페이스이지만, UI 작업은 대체로 공간적으로 이뤄집니다. 디자이너, PM, 프런트엔드 개발자는 보통 요소, 영역, 페이지 상태를 짚어 주는 주석으로 소통합니다.

오늘 업데이트되는 Design Mode는 사용자가 보는 것과 에이전트가 이해하는 것 사이의 간극을 줄이기 위한 기능입니다. 맥락을 유지한 채 제품을 수정하면서 작업 흐름도 끊기지 않게 해줍니다.

Cursor browser에서 원하는 요소를 클릭하고, 페이지 위에 그리거나, 음성으로 변경 사항을 설명하면 Cursor가 코드 수정을 위해 필요한 맥락을 파악하는 동안 사용자는 다음 수정을 이어갈 수 있습니다.

이제 지시는 더 이상 문장 하나에만 머물지 않기 때문에, 에이전트와 함께 디자인 변경을 더 빠르고 쉽게 반복해 나갈 수 있습니다. 대신 선택한 요소, 그 뒤의 코드, 주변 레이아웃, 페이지 안의 시각적 관계까지 함께 포함할 수 있습니다.

그 결과, 문제를 발견하고 수정하는 사이의 루프가 더 짧아집니다. 실행 중인 제품을 벗어나지 않고도 의도한 인터페이스 부분을 바로 가리킬 수 있고, 에이전트가 뒤에서 수정을 진행하는 동안에도 제품 자체를 기준으로 계속 참고하며 작업할 수 있습니다.

#변경 사항을 가리키고, 그리거나, 말로 설명하기

Design Mode에서는 에이전트에 의도를 전달할 수 있는 여러 방법을 제공합니다. 요소를 선택하거나, 여러 참고 자료를 추가하거나, 인터페이스 위에 직접 그리거나, 음성으로 변경 사항을 설명할 수 있습니다.

다중 선택은 변경이 요소 간 관계에 따라 달라질 때 유용합니다. 두 컴포넌트를 참고 대상으로 지정하고, 하나를 다른 하나에 맞추도록 에이전트에 요청하거나, 반복되는 콘텐츠를 제거하거나, 여러 컴포넌트를 한꺼번에 조정할 수 있습니다.

그리기 기능은 지시가 페이지의 어느 영역에 적용되는지 에이전트가 알아야 할 때 유용합니다. 복잡한 섹션을 동그라미로 표시하거나, 특정 영역을 네모로 감싸거나, 애니메이션 페이지의 일부를 표시할 수 있습니다. 주석은 뷰포트의 멈춘 화면 위에 표시되므로, 에이전트는 사용자가 보고 있던 바로 그 페이지 상태를 정확히 확인할 수 있습니다.

이번 릴리스에서는 음성으로도 지시를 설명할 수 있게 되었고, 대상 지정은 더 정밀해졌으며, 전체 경험도 더 빨라졌습니다. 그 결과 Design Mode의 시각적 상호작용이 일반적인 수정 작업 흐름의 자연스러운 일부처럼 느껴집니다.

내부적으로는 요소를 선택하면 상호 보완적인 두 가지 신호가 맥락에 추가됩니다. 하나는 요소의 ID(xpath, 컴포넌트, attributes, computed styles, fiber tree의 props)이고, 다른 하나는 공간적 맥락을 위한 스크린샷(레이아웃, 주변 요소, 정확한 페이지 상태)입니다. 이를 통해 에이전트는 소스를 정확히 찾아 코드를 효율적으로 수정하는 데 필요한 정보를 얻을 수 있습니다.

#작업의 리듬에 맞는 모델

사용자 인터페이스를 다듬다 보면, 한 번의 수정이 보통 다음 수정으로 이어집니다. 컴포넌트를 하나 조정하고 나면 그 주변의 간격이 눈에 들어오고, 이어서 다른 컴포넌트도 어떻게 맞춰야 할지 보이게 됩니다.

Design Mode를 사용하면 그런 수정 사항을 눈치채는 즉시 바로 보낼 수 있습니다. 한 요소를 가리켜 변경 사항을 설명한 뒤, 페이지의 다른 부분으로 이동해 첫 번째 수정이 끝나기 전에 또 다른 수정을 보낼 수 있습니다. Design Mode를 사용하면 여러 작업을 더 쉽게 병행할 수 있고, 여러 하위 에이전트를 관리하는 일도 가능해집니다.

이 흐름은 특정 UI 변경을 빠르게 처리할 수 있는 모델과 가장 잘 맞습니다. Composer 2.5는 빠르면서도 인터페이스 작업에 강하기 때문에 특히 뛰어납니다. 에이전트가 작업을 마치면 앱이 핫 리로드됩니다. 실행 중인 제품에 변경 사항이 나타나는 것을 보면서, 인터페이스가 원하는 느낌이 날 때까지 계속 작업할 수 있습니다.

저희는 소프트웨어 개발의 미래가, 사용자가 원할 때 몰입 흐름을 유지한 채 더 높은 수준의 추상화와 더 낮은 수준의 세부 사항 사이를 자연스럽게 오갈 수 있게 해준다고 믿습니다. Design Mode는 이를 가능하게 하는 제어력, 주도성, 그리고 정밀한 편집 도구를 사용자에게 제공합니다.

에이전트 창에서 Design Mode를 사용해 보세요. 자세히 알아보려면 Browser 문서를 읽어보거나, Cursor를 다운로드해 시작하세요.