피그마 메이크(Figma Make)로 주간회고 프로그램 만들기

피그마 메이크(Figma Make)는 사용자가 텍스트 프롬프트로 원하는 화면을 설명하면, 자동으로 코드와 프로토타입을 생성해 주는 AI 기능이다.

피그마가 매해 여는 콘퍼런스인 Config 2025에서 처음 모습을 드러냈는데, 단순히 레이아웃 템플릿을 불러오는 수준이 아니라, 사용자가 작성한 문장을 기반으로 동작 흐름까지 구현해 준다는 점에서 많은 관심을 받고 있다.

피그마 메이크는 현재 풀 시트(Full Sheet) 유료 플랜 사용자에게 우선적으로 제공되고 있으며, 공개 이후 곳곳에서 다양한 실험과 피드백이 활발히 이뤄지고 있다. 특히 디자이너가 아니더라도 단순히 텍스트를 입력하는 것만으로 원하는 인터페이스를 생성할 수 있다는 점에서, 개발자나 PM들 역시 반응하고 있다.

실제로 피그마 커뮤니티에는 피그마 메이크로 만든 다양한 프로그램이 여럿 업로드되어 있다.

이번 글에서는 피그마 메이크의 기본 사용 방법을 소개하고, 간단한 주간 회고 프로그램을 제작하며 주요 기능과 특성을 살펴보고자 한다. 아울러, 피그마 메이크를 효과적으로 쓰기 위해 프롬프트를 작성하는 방법, 다른 UI 생성 도구와 비교했을 때의 한계점, 그리고 다양한 활용 방안까지 함께 정리했다.

피그마 메이크는 기존 UI 자동 생성 도구들과 어떤 점이 다를까?

피그마 메이크(Figma Make) 기본 사용법

1. Text-to-UI

피그마 메이크의 기본 화면 왼쪽에는 프롬프트 입력 창이, 오른쪽에는 프리뷰 창이 위치해 있다. 이 기능을 활용하는 프롬프트 입력 방식은 크게 두 가지로 나눌 수 있다.

첫 번째는 텍스트 프롬프트를 입력해 결과물을 생성하는 방식이다. 예를 들어, 다음 이미지를 보자.

프롬프트에 ‘넷플릭스 앱에 사용자 지정 플레이리스트 기능을 추가하고 싶어.’라고 입력하니, 피그마 메이크가 기존에 보유한 넷플릭스 앱 정보에 기반해 기본 인터페이스를 생성했다. 그 다음으로 입력된 요청에 맞춰 플레이리스트 기능을 추가했다. 생성된 결과는 오른쪽 프리뷰 창에서 확인할 수 있다.

프리뷰 창에서 [새 플레이리스트] 버튼을 눌러 보니 새로운 플레이리스트의 이름을 작성하고, 리스트에 추가할 콘텐츠를 선택할 수 있었다. 이처럼 피그마 메이크는 단순히 화면만 그려주는 것이 아니라, 요청한 기능이 실제로 작동하는 인터랙션까지 코드로 구현해 준다.

2. Image-to-UI

두 번째 방법은 이미지 기반 프롬프트를 활용하는 것이다. 이 방식은 UI 이미지를 첨부한 다음, 원하는 인터페이스 디자인을 설명해 결과물을 생성한다. 예시는 ‘피터팬의 좋은방 구하기’ 메인 화면 이미지를 첨부하고, 이를 동일하게 구현해 달라고 요청한 결과다.

프리뷰 창에는 해당 앱의 키 컬러인 초록색과 첨부한 화면의 레이아웃이 그대로 반영된 결과물이 나왔다. 뿐만 아니라, UI에 포함된 이미지와 텍스트까지 추출해 화면에 삽입한 것도 확인할 수 있다.

지금까지 프롬프트 입력 방식 두 가지를 살펴보았다. 사실 이 방식들은 다른 UI 생성 AI 도구인 스티치 AI(Stitch AI, 이전 이름은 갈릴레오 AI) 등에서 프롬프트를 입력하던 절차와 유사하다. 그러나 피그마 메이크는 결과물이 단순한 화면 스케치에 그치지 않고, 실제로 기능이 작동하는 모습까지 구현해 준다는 점에서 차이가 있다.

이제, 이 두 가지 방식을 응용해 주간 회고 프로그램을 만들어 보기로 했다.

피그마 메이크(Figma Make)로 주간회고 프로그램 만들기

1. 프롬프트 조정하기

피그마 메이크에 주간 회고 프로그램을 만들어 달라고 요청하기 전에, 먼저 챗GPT에서 필요한 프롬프트를 작성해 보았다. 이 프롬프트는 아이디어를 기능으로 바꾸는 단계, 정리한 기능을 피그마 메이크용 프롬프트로 바꾸는 단계, 이렇게 두 단계에 걸쳐 생성하고 조정하는 과정을 거쳤다. 이러한 과정은 필요한 기능을 정리한 프롬프트를 한 번에 입력해 추가 입력 횟수를 줄이고, 피그마 메이크에 최적화된 형태로 작성해 보다 높은 퀄리티의 UI 결과물을 얻기 위함이었다.

먼저 챗GPT 채팅창에 생성하려는 프로토타입에 대한 설명을 입력하고, 필요한 기능을 정리해 달라고 요청했다. 매주 세 가지 항목(Keep, Problem, Try)에 대한 회고를 진행할 수 있는 프로그램을 만들고 싶어 했으므로, 현재 주차를 표시하는 기능과 회고 시작 버튼, 그리고 회고 작성 폼이 필요하다는 답변이 생성됐다.

다음으로는, 이렇게 도출한 기능을 바탕으로 피그마 메이크에 입력할 수 있는 프롬프트를 작성해 달라고 요청했다.

이에 따라 챗GPT는 피그마 메이크에 입력하기 적합한 형식으로 프롬프트를 정리해 주었다. 이 프롬프트는 영어로 작성됐는데, 이는 피그마 메이크에 영어로 입력할 때 결과물의 퀄리티가 더 높다는 챗GPT의 지식을 반영한 것이다.

2. 프롬프트 입력하기

챗GPT에서 프롬프트를 생성한 뒤에는 이를 그대로 복사해 피그마 메이크에 입력하면 된다. 그러면 미리 챗GPT로 도출한 회고 시작 버튼, 최근 회고 리스트, 회고를 유도하는 메시지 등 기능이 포함된 UI가 생성된다.

첫 결과물은 아래와 같았다.

여기서 [회고 시작하기] 버튼을 클릭하면 Keep, Problem, Try 세 항목에 따라 회고를 입력할 수 있는 창으로 이어진다. 회고 내용을 입력하면, 최근 회고 목록에 저장된다.

이로써 회고 작성과 저장이라는 기본적인 기능은 구현됐지만, 디자인 측면에서는 다소 밋밋한 느낌이었다. 그래서 이번에는 디자인 레퍼런스를 첨부하며 개선해 보기로 했다.

3. 레퍼런스 첨부로 스타일 바꾸기

2단계에서 수행한 작업이 Text-to-UI 방식이었다면, 이번에는 이미지 레퍼런스를 첨부해 디자인 스타일을 변경하는 Image-to-UI 방식을 적용해 결과물을 생성했다.

방법은 간단하다. 핀터레스트(Pinterest)나 비핸스(Behance) 등에서 원하는 디자인 레퍼런스 이미지를 검색한 다음, 해당 이미지를 피그마 메이크에 첨부하면 된다. 그리고 텍스트 프롬프트로 ‘첨부한 이미지 파일을 반영하여 디자인 스타일을 바꿔 줘.’라고 입력했다.

디자인 스타일에 대한 설명 없이 이미지만 첨부했음에도, 피그마 메이크는 이미지 속 디자인 스타일과 사용된 색상을 자동으로 분석해 기존에 생성한 UI에 적용했다.

이 단계에서 사용한 디자인 레퍼런스는 파란색 그라데이션 계열의 글래스모피즘(Glassmorphism)* 스타일이었다. 다음 이미지를 보면, 첫 화면뿐만 아니라 이어지는 모든 화면에도 동일한 디자인 스타일이 적용된 것을 확인할 수 있다.

*글래스모피즘(Glassmorphism): 배경이 투명하거나 흐릿하게 처리되어 마치 유리에 비치는 듯한 시각 효과를 연출하는 디자인 방식

4. 수정 요청하기

마지막으로, 생성된 UI에서 수정이 필요한 부분을 선택해 프롬프트로 요청하는 방법을 살펴보려고 한다. 피그마 메이크에는 이를 지원하는 Point and Edit 기능이 있다. 좌측 프롬프트 입력 창 하단의 반짝이는 마우스 아이콘을 클릭하면 기능을 활성화할 수 있다.

아이콘을 클릭하고, 우측 프리뷰 화면에서 수정할 영역을 선택하면 프롬프트 입력 창이 나타난다. 여기에 어떻게 수정하고 싶은지 내용을 입력하면 된다. 예시에서는 ‘최근 회고 목록’ 타이틀을 클릭한 뒤, 프롬프트 창에 ‘검색 기능을 추가해 달라’고 요청했다.

그러자 피그마 메이크는 과거 회고를 주차, 날짜, 회고 내용 기준으로 검색할 수 있는 기능을 추가하겠다고 응답했다. 또한 기존에 적용했던 글래스모피즘 스타일을 유지하면서 UI 요소를 확장하겠다고도 밝혔다.

그렇게 수정한 결과물은 아래와 같았다.

결과물을 보면 기본적인 검색 기능뿐만 아니라, 검색 결과가 없을 경우 ‘다른 키워드로 검색해 보라’는 안내 메시지와 함께 검색 초기화 버튼, 홈으로 돌아가는 버튼까지 자동으로 생성됐다. 또한 입력한 검색 키워드에 맞게 결과가 정확히 출력되는 것도 확인할 수 있었다.

마지막으로 피그마 메이크는 3가지 추가 개선 사항까지 제안했다. 사용자는 이를 바탕으로 프로그램 기능을 더욱 발전시킬 수 있다.

피그마 메이크의 2가지 한계와 추천 활용법

챗GPT로 피그마 메이크에 최적화된 프롬프트를 생성하는 것부터, 피그마 메이크에서 UI 초안을 만들고 디자인 스타일과 기능을 각각 수정하는 단계를 거쳐 주간 회고 프로그램을 간단히 완성해 보았다. 이 모든 과정을 진행하는 데에는 10분이 채 걸리지 않았다.

피그마 메이크의 2가지 한계

단시간 내 원하는 프로그램을 구현할 수 있다는 장점은 분명하지만, 그에 따른 한계도 명확히 있었다.

첫 번째 한계는 피그마 메이크에서 생성한 UI를 피그마의 디자인 파일로 내보낼 수 없다는 점이다. 프로토타입을 수정하려면 앞서 소개한 Point and Edit 기능이나 채팅창에 프롬프트를 입력하는 방법만 사용할 수 있다는 뜻이다. 반면, 구글의 스티치 AI는 피그마로 디자인 파일을 내보내 수정할 기능을 제공한다. 이 차이를 고려하면, 피그마 메이크의 한계는 꽤 치명적으로 작용할 수 있으며, 피그마에서 제공하는 UI 생성 기능을 굳이 사용할 이유를 약화시키는 요소다.

두 번째 한계는 피그마 메이크가 클로드(Claude)와 매우 유사한 결과물을 제공한다는 점이다. 피그마 메이크는 클로드 모델을 기반으로 결과를 생성하기 때문에, 클로드에서 만든 프로토타입의 디자인과 작동 방식이 거의 비슷하다. 클로드는 무료 사용자도 일부 기능을 활용할 수 있는 데다가, HTML이나 SVG 파일로 다운로드해 피그마 디자인 파일로 옮길 수 있다는 장점이 있다. 반면, 피그마 메이크는 유료 구독자만 사용할 수 있고, 디자인 파일로 직접 내보내 수정하는 것이 불가능하다. 피그마 메이크만의 차별화된 디자인 스타일이 없는 상황에서는 반드시 이 도구를 써야 할 이유를 찾기 어렵다.

피그마 메이크의 추천 활용법

이런 한계를 고려했을 때, 현 시점에서 피그마 메이크를 효과적으로 활용할 방법 중 하나는 빠른 사용성 테스트다. 피그마 메이크는 생성한 프로토타입을 발행할 수 있기에, 구현하려는 솔루션을 빠르게 시각화하고 그 효과를 테스트해 볼 수 있다.

예를 들어, AI-UX 워크숍 수강생 중 한 명은 클로드를 이용해 연말 회고 입력 방식에 차이를 둔 세 가지 디자인 시안을 제작하고 사용성 테스트를 진행했다.

테스트 참여자들은 각 시안을 사용한 다음 회고 내용을 기록하고, 난이도는 어땠는지, 기존 회고 방식과의 차이는 어땠으며, 긍정적인 기억을 남기는 입력 방식으로 무엇이 더 효과적인지를 평가했다.

그 결과, 키워드 입력 방식인 A 시안은 ‘키워드만으로는 의미 있는 회고처럼 느껴지지 않는다’는 이유로 가장 낮은 선호도를 보였다. 한편, 캘린더나 사진 앨범으로 연초부터 기록을 꾸준히 보관해온 참여자들은 월별로 빠짐없이 회고할 수 있는 C 시안을 선호했다. 반면, 별다른 기록이 없는 참여자들은 B 시안을 더 선호하는 경향을 보였다. 여기에 더해 C 시안을 선호한 사람들은 B 시안의 회고 유도 방식에 긍정적인 반응을 보냈고, 일부는 두 시안을 결합하는 방안을 제안하기도 했다. 이 의견을 바탕으로 해당 수강생은 실제 회고 작성 웹서비스를 제작했다.

마치며

지금까지 피그마 메이크에 대한 설명과 실제 활용 사례, 한계와 활용법을 알아보았다.

직접 겪은 피그마 메이크는 빠르게 프로토타입을 제작하고, 이를 기반으로 사용성 테스트를 진행하는 데 적합한 도구였다. 특히, 클로드에는 없는 Point and Edit 기능으로 세밀한 수정이 가능하다는 점은 분명한 장점이었다.

아직 모든 디자인 작업을 종합적으로 지원하지는 못하지만, 디자인 아이디어를 신속하게 검증하고 인사이트를 도출하는 데 도움을 준다. 디자인 프로세스의 효율성을 높이는 유용한 기술이라 할 수 있다.

©️요즘IT의 모든 콘텐츠는 저작권법의 보호를 받는 바, 무단 전재와 복사, 배포 등을 금합니다.