supabase

2 개의 포스트

figma

Gemini 3를 (새 탭에서 열림)

Gemini 3 Pro가 Figma Make의 실험적 모델로 제공되며, 디자인을 작동하는 코드 기반 프로토타입으로 전환하는 능력을 보여준다. Figma의 초기 테스트에서 다양한 레이아웃·스타일·인터랙션을 빠르게 탐색하면서도 디자인 충실도를 유지하는 점이 강점으로 나타났다. Gemini 3 Flash는 빠른 아이디어 발상과 수정에 적합한 경량 모델로 함께 제공된다. ## Figma Make에서 Gemini 3 Pro 제공 - Figma는 AI 모델을 다음 기준으로 평가한다. - 원래 디자인을 얼마나 정확하게 구현하는가 - 반복적인 작업을 얼마나 줄여주는가 - 팀의 창의적 탐색 범위를 얼마나 넓혀주는가 - Gemini 3 Pro는 다양한 레이아웃, 시각적 스타일, 인터랙티브 패턴을 탐색하는 데 강점을 보였다. - Figma Make의 실험적 모델 설정에서 활성화할 수 있다. - Gemini 3 Flash는 성능과 속도에 초점을 둔 모델로, 빠른 아이디어 구상과 반복적인 디자인 수정에 적합하다. ## 디자인에서 코드로의 전환 - Figma Design에서 제작한 황금빛 나뭇잎과 짙은 적갈색 배경의 추수감사절 감사 보드를 Figma Make로 구현했다. - Gemini 3 Pro는 다음 작업을 수행했다. - 나뭇잎을 SVG로 생성 - 화면 위에서 자연스럽게 움직이는 물리 효과 구현 - 마우스를 올리면 감사 메시지가 표시되는 인터랙션 추가 - Supabase를 연결해 사용자가 감사 메시지를 제출하도록 구성 - 단순한 시각적 콘셉트가 데이터 저장과 사용자 입력을 포함한 인터랙티브 프로토타입으로 확장됐다. ## 하나의 기능, 여러 시각적 스타일 - 새해 전야 RSVP 페이지를 대상으로 스타일 변환 능력을 테스트했다. - 처음에는 다음과 같은 Y2K 스타일을 적용했다. - 복고풍 미래주의 - 어두운 크롬 질감 - 분위기 있는 시각 언어 - 실제로 작동하는 RSVP 폼 - 이후 같은 기능을 “콘크리트 포에트리” 스타일로 변경했다. - 강렬하고 제한적인 타이포그래피 - 브루털리즘적 긴장감 - 장식을 최소화한 구성 - 스타일이 크게 바뀌어도 RSVP 폼의 핵심 기능은 유지됐다. - 각 스타일에 맞춰 애니메이션과 인터랙션 세부 요소도 일관성 있게 조정됐다. ## 디자인 시스템과 컴포넌트 활용 - Gemini 3 Pro를 이미 구축된 디자인 시스템 안에서 테스트했다. - Figma Make의 Make kits와 npm import를 통해 공유 라이브러리와 컴포넌트를 활용할 수 있도록 구성했다. - UI3 라이브러리 기반의 FigJam 템플릿에 캔버스 배경 스타일 전환 기능을 추가하도록 요청했다. - 모델은 다음 결과를 만들었다. - 12가지 배경 스타일 구현 - UI3 컴포넌트 사용 - 배경 스타일 전환 인터랙션 추가 - 텍스처 간 애니메이션 적용 - 스티키 노트의 레이어링과 크기 변화 효과 구현 - 복잡한 설명 없이도 기존 시스템의 구성 요소를 활용하면서 새로운 기능을 프로토타이핑했다. ## 디자이너의 역할 확대 - AI는 디자이너를 대체하기보다 탐색 가능한 디자인 공간을 넓히는 도구로 제시된다. - 모델이 디자인 의도와 시스템을 더 잘 이해할수록 다음 작업이 빨라진다. - 다양한 스타일 시도 - 인터랙션 검증 - 디자인 시스템 기반 기능 실험 - 코드로 구현된 프로토타입 제작 - 속도와 창의성이 서로 충돌하기보다, AI가 반복 작업을 줄여 디자이너가 방향 설정과 가능성 판단에 더 집중하게 만든다는 관점이다. Gemini 3 Pro는 높은 시각적 충실도와 인터랙션 구현이 필요한 프로토타입 제작에 적합하고, Gemini 3 Flash는 빠른 시안 생성과 반복 수정에 활용하는 것이 좋다. 다만 실제 제품 개발 전에는 생성된 코드와 데이터 연결, 접근성, 디자인 시스템 준수 여부를 별도로 검토해야 한다.

figma

Figma Make를 이제 모든 사용 (새 탭에서 열림)

Figma Make가 베타를 종료하고 모든 사용자가 사용할 수 있는 정식 버전으로 출시됐다. 자연어 프롬프트만으로 고해상도 인터랙티브 프로토타입과 웹 앱을 만들 수 있으며, Figma 라이브러리와 Supabase 연동으로 디자인 일관성과 데이터 기반 기능을 강화했다. 이를 통해 디자이너·엔지니어·PM이 기술적 배경과 관계없이 아이디어를 빠르게 실험하고 협업할 수 있다는 것이 글의 핵심 주장이다. ## Figma Make의 정식 출시와 주요 기능 - Figma Make는 아이디어를 프롬프트로 입력해 인터랙티브하고 높은 완성도의 프로토타입을 제작하는 도구다. - 베타 기간 이후 다음 기능이 추가됐다. - **기존 Figma 라이브러리 가져오기** - 색상 팔레트와 사용 가이드 - 타이포그래피 - 핵심 스타일 요소 - 이를 활용해 프로토타입과 웹 앱의 시각적 일관성 유지 - **Supabase 연동** - 백엔드 데이터베이스와 연결 - 단순한 화면 시연을 넘어 데이터가 동작하는 프로토타입과 웹 앱 제작 가능 - Figma Make 외에도 Make and Edit Image, Boost Resolution 등 Figma AI 기능이 정식 제공으로 전환됐다. - Figma Make 파일의 **퍼블리싱 기능은 여전히 베타**다. ## 요금제별 사용 범위와 AI 크레딧 - **Full seat 사용자** - Figma Make와 AI 기능을 전면적으로 사용할 수 있다. - Figma Make 파일을 퍼블리시하거나 비공개로 공유할 수 있다. - **View·Collab·Dev seat 사용자** - 초안 상태의 Figma Make 파일을 무제한 생성할 수 있다. - 각 요금제에서 제공되는 AI 기능을 사용할 수 있다. - **Starter 플랜 사용자** - 초안 상태의 Figma Make 파일을 무제한 생성할 수 있다. - 팀과 최대 3개의 Figma Make 파일을 공유할 수 있다. - 기타 AI 기능은 유료 플랜에서만 제공된다. - 모든 seat에 AI 크레딧이 포함된다. - 향후 파워 유저를 위한 추가 AI 크레딧 구매 기능이 도입될 예정이다. - Full seat의 크레딧 한도는 당분간 엄격하게 적용하지 않지만, Starter 및 View·Collab·Dev seat에는 일일·월간 제한이 적용된다. - Full seat 기준 월간 크레딧은 다음과 같다. - Professional: 3,000크레딧, 약 50~70회 Make 프롬프트 - Organization: 3,500크레딧, 약 60~80회 프롬프트 - Enterprise: 4,250크레딧, 약 80~100회 프롬프트 ## 제품 개발 전 과정의 협업 방식 변화 - Figma Make는 단순히 결과물을 만드는 도구가 아니라 제품 개발 과정 전체의 탐색과 논의를 촉진한다. - 디자이너는 복잡한 인터랙션을 직접 테스트할 수 있다. - 엔지니어는 높은 완성도의 디자인 아티팩트를 만들 수 있다. - PM은 아이디어 검증을 위한 기능성 목업을 제작할 수 있다. - 여러 직군이 정적인 문서나 설명 대신 실제로 작동하는 결과물을 바탕으로 논의할 수 있다. - Figma는 이를 새로운 해결책을 시도하고 위험을 감수하며 더 창의적인 방향을 탐색하는 업무 방식의 변화로 설명한다. ## 자연어로 프로토타이핑의 문턱을 낮추다 - 아이디어를 말로 설명하는 것만으로는 화면의 모양과 사용감을 정확히 전달하기 어렵다. - 기존 프로토타입 제작은 시간이 많이 들고, 제작 역량에 따라 접근성이 달라질 수 있다. - Figma Make는 자연어 프롬프트를 사용해 누구나 현실적인 프로토타입을 만들 수 있도록 한다. - 결과물을 빠르게 확인하고 반복 수정할 수 있어 아이디어 탐색과 팀 내 합의가 쉬워진다. ## Survey Traffic Calculator 사례 - Figma의 연구원 Rie McGwier는 Figma의 8개 제품에서 진행되는 약 30개 설문조사의 트래픽을 관리하기 위한 계산기를 Figma Make로 제작했다. - 모델에는 다음과 같은 데이터가 반영됐다. - 주간 활성 사용자 비율 - 트래픽 제약 조건 - 설문 대상 간 중복 - 응답률 - 재접촉 제한 기간 - 목표 표본 수 - 이 수학적 모델을 기반으로 대시보드를 만들고, 슬라이더와 지표를 통해 설문 트래픽을 조정할 수 있도록 했다. - 정적인 다이어그램 대신 실제 데이터를 입력하고 결과를 확인하는 방식으로 개선하면서, 특정 사용자 집단에 설문이 과도하게 배정되는 문제를 줄이는 데 활용했다. Figma Make는 빠른 아이디어 검증과 직군 간 협업이 중요한 팀에 특히 유용하다. 다만 AI 크레딧과 파일 공유·퍼블리싱 제한을 먼저 확인하고, 초기에는 작은 기능이나 내부 검증용 프로토타입부터 적용하는 것이 현실적이다.