개발 과정에서 디자이너와 개발자 간의 협업은 항상 중요하지만, 디자인 툴(예: 피그마 Figma)과 실제 코드베이스 간의 불일치(drift)는 고질적인 문제였습니다. 이러한 비효율성을 해결하기 위해, 개발자가 통합 개발 환경(IDE) 내에서 직접 UI를 디자인하고 편집할 수 있는 새로운 도구 '오버레이(Overlay)'가 출시되었습니다. 오버레이는 실제 리액트(React) 컴포넌트와 CSS 토큰을 활용하여 시각적인 디자인 작업을 가능하게 하며, 코드와 디자인의 실시간 동기화를 목표로 합니다.
오버레이는 VS Code, Cursor와 같은 IDE 확장 프로그램 형태로 제공됩니다. 이 도구는 사용자의 코드 저장소(repo)에 있는 실제 리액트 컴포넌트를 읽어 시각적 캔버스에 배치합니다. 피그마처럼 인터페이스를 그리고 요소를 이동하며 간격을 조정할 수 있지만, 모든 요소는 단순한 그림이 아닌 실제 리액트 컴포넌트입니다. 덕분에 디자인 시스템을 별도로 관리하거나 동기화할 필요 없이, 코드 변경 사항이 캔버스에 즉시 반영됩니다. 또한, AI 에이전트와 연동하여 디자인 시스템의 규칙과 가이드라인을 준수하면서 UI를 생성하고 편집할 수 있는 기능도 제공합니다. 사용자는 대략적인 스케치를 AI 에이전트에게 맡겨 구현하게 한 뒤, 캔버스에서 직접 결과물을 다듬을 수 있습니다.
이러한 접근 방식은 개발 워크플로우를 혁신적으로 개선할 잠재력을 가집니다. 디자이너와 개발자가 동일한 컴포넌트 라이브러리를 기반으로 작업하게 되면서, 디자인과 개발 간의 불일치로 인한 시간 낭비와 오류를 크게 줄일 수 있습니다. 특히 AI 에이전트가 코드베이스에 접근하여 UI를 생성하고 편집하는 기능은 개발 생산성을 극대화하며, 최종 결과물이 이미 실제 HTML 및 리액트 코드로 존재하므로 디자인을 코드로 다시 구현하는 과정 없이 변경 사항을 바로 반영할 수 있습니다. 이는 개발팀의 효율성을 높이고, 더 빠르고 일관성 있는 제품 출시를 가능하게 할 것입니다.