새로운 도구인 EditUI가 웹 UI(사용자 인터페이스) 편집 방식을 혁신하고 있습니다. 이 도구는 사용자가 웹 브라우저에서 실행 중인 애플리케이션의 UI 요소를 직접 클릭하고, 원하는 변경 사항을 자연어로 지시하면, 이 모든 정보를 AI 코딩 에이전트(예: Claude Code, Cursor)에 전달하여 실제 코드 수정까지 이어지게 합니다. 이는 기존의 번거로운 UI 피드백 과정을 획기적으로 단축할 잠재력을 가지고 있습니다.
EditUI의 작동 방식은 매우 직관적입니다. 먼저 사용자는 크롬(Chrome) 브라우저 확장 프로그램을 통해 실행 중인 웹 페이지의 특정 UI 요소를 클릭합니다. 다음으로, '이 제목을 좀 더 작게 만들어줘'와 같이 원하는 변경 사항을 텍스트로 입력합니다. EditUI는 이러한 편집 지시들을 모두 수집하여, 해당 요소의 텍스트, DOM 클래스, 부모 요소, URL, 뷰포트 정보, 계산된 스타일 등 AI 에이전트가 코드를 이해하고 수정하는 데 필요한 모든 컨텍스트 정보를 자동으로 캡처합니다. 여러 개의 수정 사항을 한 번에 모아 AI 에이전트에 전달할 수 있어, UI 리뷰를 일괄 처리하는 것이 가능합니다.
이러한 접근 방식은 개발자와 디자이너 간의 협업 효율성을 크게 향상시킬 수 있습니다. 더 이상 스크린샷에 주석을 달거나, CSS 선택자(selector)를 복사하고, 소스 파일을 일일이 찾아다니며 수정 사항을 설명할 필요가 없습니다. AI 코딩 에이전트가 시각적 컨텍스트를 직접 이해하고 코드를 생성함으로써, UI 변경 요청에 대한 개발 주기가 단축되고, 오류 발생 가능성도 줄어들 것으로 예상됩니다. 이는 궁극적으로 제품 개발 속도를 높이고 사용자 경험을 개선하는 데 기여할 것입니다.