AI 협업 플랫폼 젠스파크(Genspark)가 디자인 제작을 위한 새로운 도구 Genspark Design을 선보였습니다. UI 프로토타입과 웹사이트, 포스터, 애니메이션 등 다양한 디자인을 자연어 프롬프트로 생성하고, 완성된 결과물을 코드로 구현할 수 있는 AI 디자인 도구예요.
Genspark Design에서 레이디러너가 특히 주목한 기능은 피그마 디자인을 코드로 변환할 수 있는 Figma to Code입니다. 따로 피그마 계정을 연동할 필요 없이 로컬 버전으로 다운로드한 파일을 업로드하는 방식으로, AI가 피그마 디자인의 레이아웃과 컴포넌트, 색상과 서체, 간격이나 의도를 읽어내서 코드로 완성해 준답니다.
정적 목업을 넘어 실제로 클릭되는 버튼, 제출 가능한 폼, 슬라이드가 작동하는 캐러셀 배너 등 프로토타입 이상의 웹사이트와 앱을 제작할 수 있고, 피그마 구조를 따르는 형태이기 때문에 디자이너의 의도를 반영한 코드 구현에 용이한 기능입니다.
실제로 사용해 보면 어떨지 레이디러너가 직접 테스트해 보았는데요, 테스트 삼아 그려 본 대시보드 화면이 피그마 디자인과 유사하게 코드로 구현되는 것을 확인할 수 있었습니다. 특히 도넛 형태의 차트를 js 기반으로 만들어 수치가 높은 순서대로 자연스럽게 보여지도록 보정된 점이 눈에 띄었어요.
성능 테스트를 위해 일부러 별도의 추가 설명이나 이미지 제공 없이 기본 프롬프트만으로 변환한 1차 테스트 결과라 약간의 차이는 존재하지만, 더 자세한 요청과 실제 어셋이 더해진다면 보다 정확한 구현이 가능할 것으로 보이네요.
아래는 간략히 요약한 사용 방법입니다. 긴 설명이 필요 없을 만큼 간단한 과정으로, 사실상 피그마 파일을 업로드하고 변환을 요청하기만 하면 되는 정도입니다.
Genspark Design: Figma to Code 사용법
- 코드로 변환할 피그마 디자인 파일을 로컬 버전으로 저장합니다
- 피그마 메인 메뉴에서 [파일 → 로컬 복사본 저장] 기능을 이용해 주세요.
- Genspark AI 워크스페이스의 [디자인/프로토타입] 모드로 진입해 .fig 파일을 업로드합니다.
- 하단 프롬프트 입력창의 + 모양 첨부 버튼을 누르면 [.fig 파일 업로드] 메뉴가 있어요.
- 코드 구현에 필요한 요청 사항을 프롬프트로 입력합니다.
- 파일이 업로드되면 자동으로 코드 변환용 기본 프롬프트가 입력됩니다.
- 인터랙션이나 디자인 시스템 등, 추가로 요청할 사항이 있으면 프롬프트를 이어서 작성해 주세요.
- 더 정교한 구현을 원한다면 디자인 스크린샷 이미지를 함께 첨부합니다.
- 스크린샷 첨부 여부가 결과에 꽤 큰 영향을 줍니다. 첨부를 권장해 드려요!
- 변환이 완료되면 우측 상단의 [다운로드] 또는 [빌드하기]를 선택합니다.
- 다운로드시, 개발용 지시 사항이 포함된 README.md 파일이 함께 제공됩니다.
- 빌드시에는 Genspark Code를 기반으로, 실제 호스팅 배포까지 연결되는 안내가 이어집니다.
꼭 피그마 디자인 파일이 아니더라도 스크린샷 이미지만으로도 코드로 변환이 가능하고, 원하는 방식에 따라 HTML/CSS나 컴포넌트 기반의 React 형태로도 구현이 가능합니다. 누구나 바이브 코딩으로 아이디어를 실현하는 시대인데요, 디자인을 먼저 그리는 게 익숙한 디자이너에게는 디자인 작업 후 코드로 변환하는 이 방식이 더 편하게 느껴질 수 있겠습니다.
Genspark Design 및 Figma to Code 기능에 대한 더 자세한 내용은 아래의 페이지를 참고해 주세요.
Genspark에서 Figma to Code 자세히 보기
※ 본 아티클은 Genspark로부터 유료 플랜을 지원받아 작성되었습니다.
