Figma Make는 프롬프트 기반으로 작동하며, 사용자가 텍스트로 아이디어를 입력하면 React 및 TypeScript 기반의 UI를 생성합니다. 이는 클라우드 코드와 유사하게 작동하지만, Figma가 제공하는 샌드박스 환경 내에서 JavaScript UI를 구축한다는 점이 특징입니다. 무료 버전에서는 일일 프롬프트 제한이 있으며, 유료 버전에서는 더 많은 프롬프트를 사용할 수 있습니다.
물고기 데이팅 앱 개발 과정
-
초기 프로토타입 생성: ‘물고기를 위한 데이팅 앱’이라는 광범위한 프롬프트로 시작하여, ‘Plenty of Fish’라는 이름의 기본 데이팅 앱 UI(프로필 카드, 좋아요/싫어요 버튼, 매치, 채팅 기능)를 생성했습니다. 이 앱은 React 상태 관리를 통해 매치 수를 업데이트하는 등 기본적인 상호작용이 가능했습니다.
-
브랜딩 및 디자인 개선: 특정 이미지(물속 풍경)를 참조하여 앱의 색상 팔레트를 변경하고, 애니메이션 버블과 같은 요소를 추가하여 시각적 매력을 높였습니다. 이는 Figma Make가 이미지에서 브랜딩 영감을 추출할 수 있음을 보여주었습니다.
-
코드 탐색 및 수정: Figma Make는 내장된 코드 에디터를 제공하여 생성된 React/TypeScript 코드를 직접 확인할 수 있습니다. 채팅 응답 배열과 같은 부분을 통해 AI가 어떻게 작동하는지 이해하고, 간단한 텍스트 수정(예: ‘Dive into love’를 ‘Swim into love’로 변경)을 프롬프트 없이 직접 적용하는 것이 가능했습니다.
-
접근성 개선: ‘물고기 사용자를 위한 접근성’을 높이기 위해 작은 텍스트 입력 필드를 큰 탭 가능 버튼으로 변경하고, 전체적인 UI 요소의 크기를 확대하여 ‘지느러미나 지느러미발로 쉽게 탭할 수 있도록’ 개선했습니다.
-
안전 기능 추가: ‘다른 물고기를 악의적인 목적으로 만나는 상어를 감지하는 방법’이라는 프롬프트로 ‘안전 센터’ 탭과 ‘신고’ 기능을 추가하여 사용자 안전 기능을 구현했습니다.
-
앱 이름 및 로고 옵션: ‘Cinder’, ‘Tide Match’, ‘School Crush’ 등 물고기 테마에 맞는 다양한 앱 이름과 로고 옵션을 생성하여 선택할 수 있도록 했습니다.
Figma Make의 장점 및 한계점
-
장점: 아이디어를 빠르게 구체적인 프로토타입으로 만들 수 있어 제품 개발 초기 단계의 시간과 비용을 절감합니다. 비기술적 사용자도 쉽게 접근하여 아이디어를 시각화할 수 있습니다. 생성된 코드를 다운로드하거나 GitHub에 연동할 수 있습니다.
-
한계점: 생성된 프로토타입은 검증되지 않은 디자인이며, 고해상도 결과물에 쉽게 집착하게 만들 수 있습니다. 디자인의 독창성 문제와 함께, 생성된 코드의 확장성, 유지보수성, 보안 측면에서 실제 프로덕션 적용 시 많은 검토와 노력이 필요합니다. 백엔드 연결 없이 프론트엔드만 생성하므로 실제 애플리케이션으로 전환하려면 추가적인 개발이 필수적입니다. 또한, AI 모델이 기존 데이터에 기반하므로 완전히 새로운 창의적인 디자인을 기대하기 어렵습니다.