안녕하세요, 여러분?
오늘은 피그마(Figma)의 Make 기능을 활용하여 간단한 웹페이지를 만들어 보겠습니다.
Make는 이제 Google Gemini 3 Pro 모델과 연동되어 간단한 프롬프트만으로 높은 수준의 UI와 실제 동작까지 하는 프로토타입까지 만들 수 있습니다.
오늘은 마트 가기 전에 무엇을 사야할 지 정리하는 용도로 사용할 수 있는 “쇼핑리스트”를 만들어보도록 하겠습니다.
그럼 지금부터 저와 함께 차근차근 시작해 봅시다.
1. Make 기능 진입 & 설정
피그마에서 Make 기능을 사용하려면
1) 우측 상단 메뉴에서 [Make] 버튼을 선택하거나
2) 상단의 [+] 버튼 누르고 [Make] 버튼을 선택합니다.
그리고 Gemini 3 Pro 옵션을 활성화 해주셔야 하는데요,
- Make 우측 상단 톱니바퀴 아이콘 → [Experimental models] 선택
- Gemini 3 Pro 옵션 활성화
- 뒤로가기(<) 버튼 눌러 첫 화면으로 돌아오기
여기까지 하셨으면 Make를 사용할 준비가 되었습니다.
2. 와이어프레임 & 사용자 플로우 그리기
이제 프롬프트를 작성하면 되는데요, 그 전에 저는 저의 아이디어를 설명해 줄 와이어프레임과 플로우를 간략하게 그려봤어요.
- ‘살 것’ 탭
- 체크리스트 형태
- 항목 입력 필드 및 긴급 여부 태그 제공
- 항목 체크 시 ‘산 것’ 탭으로 이동
- ‘산 것’ 탭
- 체크한 날짜 자동 기록
- 금액·구매처 입력 기능 제공
- 월별로 데이터 조회 가능
3. 프롬프트 입력
그리고 프롬프트 창에 위의 이미지를 붙여넣고(Ctrl+V) 아래와 같은 텍스트를 같이 입력해주었습니다.
make a shopping list page according to this screen and flow
이렇게 와이어프레임과 플로우를 이미지로 등록하면 따로 요구사항을 길게 입력하지 않아도 피그마가 알아서 저의 의도를 파악해 줍니다.
4. 결과물 확인
프롬프트를 입력하고 약 1~2분정도 기다리면 결과물이 짜잔 나타나는데요, 각 패널에서 다음과 같은 정보를 확인할 수 있습니다.
- 좌측 패널: 화면 구성 이유, 핵심 기능 설명, 기술적 디테일 제시
- 우측 패널: 실제 동작 가능한 프로토타입(UI 입력필드, 체크박스, 다이얼로그 등)
우측 패널에서는 직접 데이터를 입력하고, 체크박스를 체크하는 등 기본 동작을 테스트를 해볼 수 있고, 제가 그린 플로우에 맞게 다음 단계로 이동하는 지까지 확인할 수 있습니다.
단순히 개별 화면만 만들어내는 게 아니라 화면간 관계성을 이해하고 프로토타입까지 만들어준 것이죠!
5. (심화) 디자인 개선 요청
이미 훌륭한 결과물이지만, 제가 그린 초기 와이어프레임과 너무 똑같이 그려준 점이 아쉬웠습니다.
그래서 현대적인 디자인 스타일을 적용하고자 다음과 같이 추가 요청을 작성했습니다.
redesign this page with a trendy style and bigger font size
또 잠깐 기다리니 Make가 타이포그래피, 레이아웃, 여백, 컴포넌트 등을 개선한 디자인과 변경 이유를 함께 제공했습니다.
6. (심화) 기능 추가 요청
또 프로토타입을 테스트 하다보니 추가하면 좋을 것 같은 기능이 떠올라 순차적으로 요청해 보았습니다.
1) ‘살 것’ 탭 항목에 삭제 버튼 추가
add the delete button(x) to each items on the '살 것' tab
빨간색 디자인까지 입혀서 삭제 버튼이 추가되었죠.
2) ‘산 것’ 탭 하단에 월별 총합 고정 출력 기능 추가
add the monthly total amount on the bottom of the '산 것' tab. it is floated on the page and fixed to the bottom.
이렇게 초기 프로토타입을 써보면서 아쉬운 부분에 대해 추가적으로 보완을 요청할 수 있고, 결과물도 빠르게 확인할 수 있어 매우 효율적으로 작업할 수 있었습니다.
[부록] Make 기능의 주요 버튼
이외에도 Make에서 활용 가능한 주요 버튼들을 소개하고 마무리하겠습니다.
- Code 버튼: 생성된 페이지의 코드를 폴더 구조로 제공
- Copy 버튼: 결과물을 일반 피그마 디자인 파일로 옮겨 후속 수정 가능
- Play 버튼: 프로토타입 미리보기
- Publish 버튼: 페이지 웹 공개
- Share 버튼: 팀원 초대 및 협업 기능
총평
Figma Make로 쇼핑리스트를 만들어보며 느낀 점은 다음과 같습니다.
- 간단한 스케치만으로도 의도를 정확히 이해하여 동작 가능한 프로토타입을 생성해 주어 초기 기획 단계에 큰 도움이 됩니다.
- 생성된 화면을 보며 즉각적으로 보완 사항을 추가 요청할 수 있어 작업 효율이 높습니다.
- 디자인 비전공자도 최신 디자인 트렌드가 반영된 UI를 쉽게 얻을 수 있어 완성도를 높일 수 있습니다.
이렇듯 Figma Make는
1) 간단한 아이디어로 시작해서,
2) 결과물을 빠르게 구체화하고
3) 유동적으로 보완해 나가며
4) 실제 동작하는 웹으로 퍼블리싱까지 할 수 있는
매우 실용적이고 혁신적인 도구라고 판단됩니다.
기획하시는 분들의 시간과 수고를 덜어줄 매우 유용한 도구, 마음껏 활용해보시길 바라며 글을 마칩니다.
그럼 오늘도 나를 위해 일하는 하루 되세요 :)
'AI와 함께 춤을' 카테고리의 다른 글
| 구글 Gemini 스토리북으로 나만의 동화책 만들기 (0) | 2025.09.21 |
|---|---|
| 생성형 AI ChatGPT와 Gemini로 포스터를 만들어 보자 (0) | 2025.09.15 |
| Hero UI Chat : 생성형 AI와 대화로 웹사이트 뚝딱 만들기 (1) | 2025.05.22 |
| 챗지피티 : 손으로 그린 스케치를 실사 이미지로 바꾸기 (2) | 2025.05.08 |
| [AI탐방] 챗GPT로 이미지를 폴라로이드 & TV & 액자 속에 넣기 (0) | 2025.04.09 |
