AI 요약
본 기사는 UI 디자인과 피그마(Figma)를 전혀 다룰 줄 모르는 백엔드 개발자 '袋鼠帝'가 알리바바의 첫 디자인 에이전트인 'QoderWork'의 AI 네이티브 디자인 작업대 'Design Desk'를 직접 체험해 본 상세한 후기입니다. 저자는 음향 회사의 공식 홈페이지 개발 프롬프트와 'tripo-3d-generation' 스킬을 활용하여 단 20분 만에 뱅앤올룹슨(Bang & Olufsen) 스타일의 3D 제품 공식 웹사이트를 성공적으로 제작해 냈습니다. QoderWork는 사용자의 모호한 입력을 구체적인 질문을 통해 스스로 심층 분석하고, 결과물·기술 사양·리스크 평가가 담긴 계획서를 선제안하는 똑똑한 프로세스를 보여줍니다. 단순 HTML 파일만 생성하는 클로드(Claude) 디자인과 달리, 실제 개발 및 유지보수가 가능한 수준의 정교한 React + Vite 기반 완성형 프론트엔드 프로젝트 구조를 직접 출력하여 개발의 패러다임을 혁신하고 있습니다.
핵심 인사이트
- 20분 만에 완성된 3D 공식 사이트: 디자인 경험이 전무한 백엔드 개발자가 React, Tailwind CSS, Framer Motion을 기반으로 하고 Tripo-3D 기술로 구현된 3D 가상 모델이 탑재된 하이엔드급 오디오 제품 사이트를 단 20분 만에 구축함.
- 선(先) 설계 후(後) 실행 고도화 프로세스: 질문을 통해 요구사항을 스스로 정밀화한 뒤 결과물, 기술 스택, 리스크 분석 정보가 담긴 구체적 설계 계획서를 사용자에게 승인받아 원샷 개발 성공률을 대폭 끌어올림.
- 실제 엔지니어링용 React + Vite 코드 출력: 단순 일회성 HTML 파일 출력을 지원하는 Claude Design과 달리, 프론트엔드 엔지니어의 실제 실무 작업 흐름에 완전히 부합하는 React + Vite 프로젝트 파일 구성을 제공하여 실무 연동성을 확보함.
주요 디테일
- 무한 캔버스에서의 직관적 제어: 캔버스 상에서 복잡한 코드 수정 없이 요소들의 가로/세로 너비 및 위치를 드래그 앤 드롭으로 간편하게 실시간 조정할 수 있음.
- 박스 지정을 통한 정밀 부분 수정: 특정 UI 영역을 캔버스상에서 마우스 드래그 박스로 바로 지정한 후 수정을 지시하는 방식으로, 긴 설명글을 타이핑해야 하는 모호한 텍스트 채팅 방식의 한계를 해결함.
- 실시간 매개변수 피드백 제공: 글로벌 배색, 여백(간격), 둥글기, 폰트 크기 등의 핵심 매개변수 옵션을 인터페이스로 직접 노출하여, 별도의 화면 새로고침 없이 코드 꼬임 현상 없이 즉각적으로 반영 및 수정 가능함.
- 150개 이상의 고품질 디자인 템플릿: 다양한 디자인 스타일 참조 표준 가이드라인을 내장하고 있어, 심미적 디자인 구현 능력이 부족한 개발자도 고감도의 아웃풋을 일관되게 낼 수 있음.
- 극한의 복제 성능 테스트 (lusion.co): 현존 최고 난이도의 3D 동적 웹사이트인 'lusion.co' 복제 테스트에서 2024년 1월 Kimi Agent가 도달한 30% 수준을 크게 뛰어넘어 약 50%에 가까운 고품질 결과물을 생성해 냄.
향후 전망
- 디자이너와 프론트엔드 퍼블리셔의 경계 해체: 텐센트가 주력해 온 단순 피그마식 벡터 협업 도구 디자인 방식에서 벗어나, 디자인이 설계이자 곧 실제 프론트엔드 코드로 출력되는 'AI 네이티브 디자인-에즈-코드(Design-as-Code)' 흐름이 업계를 지배할 것임.
- 비전 분석 기능 및 렌더링 성능 최적화 예정: 현 버전에서는 3D 모델 연속 롤링 구현 시 약간의 버벅임이 발생하고 비전(시각 감지) 엔진이 탑재되지 않았으나, 이러한 기능들이 순차적으로 개선되면서 웹 및 앱 빌드 속도가 전례 없이 빨라질 것으로 예상됨.
출처:juejin