글로벌 디자인 플랫폼 피그마와 AI 선도 기업 오프앤AI가 손을 잡았다. 올 초 공개된 이 파트너십은 피그마의 디자인 파일을 오프앤AI의 코드엑스 엔진을 통해 직접 코드로 변환할 수 있게 해준다. 이제 디자이너가 화면을 그리는 순간, 개발자가 기다릴 필요 없이 작동하는 프로토타입이 완성되는 시대가 열렸다.
올해 1월, 피그마는 연례 개발자 컨퍼런스 피그마콘에서 오프앤AI와의 전략적 파트너십을 공식 발표한. 핵심 기능은 간단하다. 피그마에서 디자인한 UI를 코드엑스가 인식하고, 클릭 한 번으로 리액트, 뷰, 앵글러 같은 현대적인 프론트엔드 코드로 변환해준다.
피그마 CEO 딜런 필드는 “우리의 목표는 디자이너가 코드를 이해하지 않아도, 개발자가 디자인 의도를 완벽하게 이해하지 않아도 되도록 만드는 것이다”라고 밝혔다.
사실 디자인에서 코드로 변환하는 기능은 새로운 것이 아니다. 과거부터 various 컴포넌트, 안드로이드 스튜디오 같은 도구들이 이런 시도를 해왔다. 하지만 코드엑스는 다르다. 단순한 레이아웃 복사가 아니라, 디자인의 의미론적 구조를 이해하고 그것을 의미 있는 코드로 재구성한다.
예를 들어, 버튼 컴포넌트가 로그인이라는 맥락을 가지고 있다면, 코드엑스는 단순히 div 태그를 생성하는 대신 폼 전송 로직까지 포함한 완전한 컴포넌트를 만들어낸다. 이것이 코드엑스의 차이점이다.
코드엑스는 원래 소프트웨어 개발 환경에서 코드 작성을 보조하는 AI 에이전트로 개발되었다. 사용자가 자연어로 기능을 요청하면, 파일을 생성하고, 버그를 수정하고, 테스트를 실행하는 일련의 작업을 자동화한다.
작업 원리는 대략 이렇다. 첫째, 디자인 분석. 피그마의 노드 트리와 스타일 정보를 코드엑스가 읽어들인다. 둘째, 의미 해석. 각 요소가 어떤 역할을 하는지 추론한다. 셋째, 코드 생성. 해석된 정보를 바탕으로 적절한 프레임워크 코드를 출력한다. 넷째, 유지보수. 디자인이 변경되면 코드도 동기화되어 업데이트된다.
피그마 내부 테스트에 따르면, 이 파이프라인은 기존 수동 코딩 대비 60% 이상의 시간 절감 효과를 보였다. 특히 반복적인 UI 컴포넌트나 목록 뷰 같은 구조에서 효과가 크다.
지금까지 디자이너와 개발자 사이에는 높은 장벽이 존재했다. 피그마의 설문에 따르면, 일반적인 앱 프로젝트에서 디자이너와 개발자 간 통신은 평균 주당 8시간 정도 소요된다.
새로운 워크플로우는 이 과정을 획기적으로 압축한다. 첫 번째 단계는 직관적인 디자인 작업. 두 번째 단계는 원클릭 변환. 세 번째 단계는 실시간 미리보기. 네 번째 단계는 개발 환경으로 내보내기.
그러나 현실은 완전히 만만치 않다. 첫째, 생성된 코드의 품질 관리 문제. 둘째, 복잡한 인터랙션의 한계. 셋째, 보안 문제와 프라이버시. 넷째, 교육적 비용과 진입 장벽.
피그마 CEO는 “앞으로 피그마가 단순한 디자인 도구를 넘어 개발 플랫폼으로 전환하는 전환점이 될 것”이라고 강조했다. 오프앤AI와의 협업은 이러한 비전의 첫걸음이다.
오프앤AI와 피그마의 파트너십은 단순한 도구 통일을 넘어, 디자인과 개발의 협업 모델을 재편할 것으로 기대된다.