1. 들어가며 – 기획서에 화면이 필요할 때
최근 해커톤에 참가하면서, 기획서에 앱 화면 구성(프로토타입)을 함께 제출해야 하는 상황이 생겼다.
아직 디자인이 픽스된 상태는 아니고, 개발 일정도 빠듯한 상황에서 디자인 + 개발 + 프로토타이핑을 동시에 빠르게 해결할 방법이 필요했다.
바로 그때 눈에 들어온 게 Figma Make.
기획서 내용과 스토리보드만으로, 디자인부터 코드까지 한 번에 만들어주는 AI 기능이다.
이걸 제대로 써보니, 상상 이상으로 유용했다.
2. Figma Make란?
Figma에서 최근 공개한 AI 생성 기능 중 하나로,
- 기획 설명
- 스토리보드 이미지
- 간단한 텍스트 프롬프트
만 있으면, 실제 앱 화면을 자동으로 디자인해준다.
심지어 React, HTML 등 실제 코드로 변환까지 가능해, 디자인 → 개발 전환의 간극을 크게 줄여주는 도구다.
3. 내가 활용한 방식
기획서 작성 중, 다음과 같은 방식으로 활용했다:
① 프롬프트 1: 서비스 설명 + 스토리보드
- 어떤 기능을 제공하는지 간략히 설명
- 각 화면(총 4개): 어떤 목적이고, 어떤 요소가 들어가는지 요약
→ 이 내용을 기반으로 기초적인 화면 구성과 Flutter 코드를 생성해줌
② 프롬프트 2: 앱 이름 기반 디자인 시스템 적용
- 앱 이름과 성격을 다시 알려주고(앱 명칭 변경이슈로 인해 다시 알려준;;)
- “이 앱에 어울리는 디자인 시스템 몇 개 보여줘”라고 요청
→ 디자인 테마를 제안받고, 디자인별 설명과 함께 즉시 화면에 적용해보며 선택 가능
→ 무채색 와이어프레임 → 실제 디자인 느낌으로 전환
4. 사용 후기
-
단 3번의 프롬프트만으로
UI 구성 → 디자인 시안 → React 코드 생성까지 전 과정을 자동으로 처리할 수 있었다. -
물론 완성본이 아닌 프로토타입용 퀄리티지만,
화면 구성력과 코드 구조가 너무 괜찮아서 설득력 있는 기획서 작성에 큰 도움이 됐다. -
결과적으로 이 기획서를 통해 해커톤 예선 통과까지 성공!
이후에는 기획자분이 본격적인 디자인을 진행하고, 나는 그걸 기반으로 Figma Make + MCP + Cursor AI를 연동해 협업형 바이브 코딩까지 진행할 예정이다.
5. 요약 – 이 기능, 언제 쓰면 좋을까?
- 아이디어가 있는데 디자인 인력이 없는 경우
- 빠르게 앱 화면 흐름을 보여줘야 할 때
- 기획자/개발자가 기획-디자인-개발을 혼자 해야 하는 사이드 프로젝트
- 해커톤 등 프로토타입 중심의 데모 제작에 매우 적합
다음 글 예고 ✍
Figma Make가 만들어준 UI 코드를 실제 프로젝트에 어떻게 적용하는지에 대해 다뤄보겠습니다.
MCP + Cursor AI 연동 바이브코딩까지 실제 예시와 함께 풀어볼게요!
