WaveMaker AutoCode로 Figma 디자인을 코드로 자동 변환

WaveMaker가 AI 기반의 신속한 디자인-코드 변환 도구인 'WaveMaker AutoCode'를 선보였습니다. 이 도구는 Figma 디자인을 실제 코드로 변환하여 개발 시간을 단축하고, UI 개발의 일관성을 유지하는 데 도움을 줍니다.

WaveMaker AutoCode란?

WaveMaker AutoCode는 AI를 활용한 디자인-코드 가속화 도구로, Figma에서 제작한 UI 디자인을 신속하게 개발 가능한 코드로 변환하는 것을 목표로 합니다. 이를 통해 개발팀은 디자인의 픽셀 정합성을 유지하면서도 빠르게 애플리케이션을 구축할 수 있습니다.

Figma UI를 코드로 자동 변환

WaveMaker AutoCode의 주요 기능 중 하나는 Figma UI 디자인을 Material 3 디자인 시스템 기반의 코드로 변환하는 것입니다. 이를 통해 몇 분 만에 실행 가능한 컴포넌트, 레이아웃, 스타일을 생성할 수 있습니다.

정확한 UI 컴포넌트 생성

이 도구는 Figma에서 제공하는 디자인 토큰, 변수, 모드를 지원하여 디자인의 일관성을 유지합니다. 또한, 자체적인 디자인 언어 시스템(DLS)을 사용하는 기업들도 AutoCode 기능을 맞춤형으로 활용할 수 있습니다.

기능 및 장점

자동 UI 컴포넌트 감지

AutoCode는 폼, 리스트와 같은 UI 요소를 자동으로 인식하고, WaveMaker Studio에서 사용하는 위젯과 정렬하여 UI를 생성합니다.

확장성과 보안 지원

AutoCode는 웹 애플리케이션의 경우 Angular 코드, 모바일 애플리케이션의 경우 React Native 코드를 생성하여 확장성과 보안을 고려한 설계를 제공합니다. 또한 인증 기능과 다국어 지원 기능도 내장하고 있습니다.

다양한 업무 시스템과 통합

WaveMaker MyStudio와 함께 사용하면 맞춤형 디자인 시스템을 기반으로 빌드 프로세스를 표준화하고 기존 비즈니스 로직과 쉽게 통합할 수 있습니다.

WaveMaker의 AI 도구 생태계

WaveMaker는 단순한 UI 코드 변환을 넘어, 생산성을 높이기 위한 다양한 도구들을 제공하고 있습니다. AutoCode 외에도, 사전 제작된 UI 컴포넌트 라이브러리인 UI Kit과 AI 기반의 자동 커스터마이징 도구인 CoPilot을 활용할 수 있습니다.

드래그 앤 드롭 방식의 앱 디자인 유지

개발자는 기존의 WaveMaker의 드래그 앤 드롭 방식 위젯을 그대로 활용하면서도 AutoCode를 통해 더욱 빠르고 효율적인 애플리케이션 개발이 가능합니다.

마무리하며

WaveMaker AutoCode는 UI 디자인과 애플리케이션 개발 간의 격차를 줄이는 혁신적인 도구입니다. Figma 디자인을 손쉽게 코드로 변환하여 개발자와 디자이너 간의 협업을 강화하고, UI의 일관성을 높일 수 있습니다. 이를 통해 기업은 더 빠르게 고품질 애플리케이션을 출시할 수 있으며, 다양한 디자인 시스템과의 통합도 가능해집니다. 앞으로 WaveMaker가 제공할 AI 기반의 생산성 도구들이 더욱 기대됩니다.