Figma Make로 나만의 주간 회고 앱 만들기
개발 몰라도 됩니다. (feat.바이브 코딩)
'코딩 1도 모르는데 나도 프로그램을 만들 수 있을까?'
이런 생각해 보신 적 있나요? 예전에는 상상도 못 할 일이었지만, AI가 발전하면서 '느낌대로 코딩한다'는 의미의 '바이브 코딩(Vibe Coding)'이 새로운 트렌드로 떠오르고 있습니다. 바이브 코딩이란, 개발 지식이 없는 비전문가도 AI에게 자연어로 원하는 기능을 설명하고 피드백을 주고받으며 결과물을 만들어내는 새로운 창작 방식을 말합니다.
실제로 책의 저자는 파이썬 설치 방법도 모르는 상태에서 AI(Cursor AI)에게 요청해 AI 에이전트 토론 프로그램을 만들기도 했습니다. 처음에는 간단한 명령어 기반(CLI) 프로그램이었지만, "디자인 레퍼런스를 줄 테니 GUI(그래픽 사용자 인터페이스)로 만들어줘"라고 요청하자 AI가 이미지 속 디자인 톤앤매너까지 반영해 멋진 GUI 프로그램을 뚝딱 만들어냈습니다.
이처럼 바이브 코딩은 더 이상 먼 미래의 이야기가 아닙니다. 오늘은 이 '바이브 코딩' 트렌드의 중심에 있는 디자이너의 필수 툴, Figma Make를 활용해 코딩 없이 나만의 '주간 회고 앱' 프로토타입을 만드는 전 과정을 상세히 보여드리겠습니다.
Figma Make: 디자이너의 아이디어를 현실로
Figma Make는 사용자가 텍스트 프롬프트로 원하는 화면을 설명하면, Figma가 자동으로 코드와 '작동하는' 프로토타입을 생성해 주는 강력한 AI 기능입니다.
단순히 화면 레이아웃만 그려주는 것이 아니라, 버튼을 눌렀을 때 다음 화면으로 넘어가는 '동작 흐름(인터랙션)'까지 구현해 줍니다. Figma Make는 크게 두 가지 방식으로 사용할 수 있습니다.
1. Text-to-UI (텍스트로 UI 만들기)
사용자가 원하는 기능을 텍스트로 설명하면 AI가 UI와 인터랙션을 생성합니다.
예시: "넷플릭스 앱에 사용자 지정 플레이리스트 기능을 추가하고 싶어"라고 입력하면, 기존 넷플릭스 정보에 기반해 '새 플레이리스트' 버튼이 포함된 UI가 생성되며, 이 버튼은 실제로 작동합니다.
2. Image-to-UI (이미지로 UI 만들기)
참고하고 싶은 UI 이미지를 첨부하면 AI가 해당 디자인 스타일(키 컬러, 레이아웃, 텍스트 등)을 분석해 그대로 구현합니다.
예시: 특정 부동산 앱의 메인 화면을 첨부하고 "이렇게 그려줘"라고 요청하면, 해당 앱의 키 컬러와 레이아웃, 텍스트까지 추출해 화면에 반영합니다.
실전! Figma Make로 '주간 회고 앱' 만들기 (4단계)
이제 이 기능들을 활용해 매주 KPT(Keep, Problem, Try) 회고를 작성할 수 있는 간단한 주간 회고 앱 프로토타입을 만들어 보겠습니다.
1단계: 프롬프트 준비하기
Figma Make의 성능을 최대한 끌어내려면, '무엇을 만들고 싶은지' 명확하게 전달하는 것이 중요합니다. 책에서는 더 나은 결과물을 얻기 위해 ChatGPT를 활용해 프롬프트를 2단계에 걸쳐 다듬었습니다.
1. 기능 정의
먼저 ChatGPT에게 "매주 KPT 회고를 할 수 있는 앱을 만들고 싶어. 어떤 기능이 필요할까?"라고 질문해 '홈 화면', '회고 작성 화면(Keep/Problem/Try 입력)' 등의 핵심 기능을 정리합니다.
2. 프롬프트 작성
정리된 기능 리스트를 바탕으로, "이 기능들을 반영해서 Figma Make에 요청할 프롬프트를 작성해줘"라고 요청합니다.
2단계: 텍스트로 기본 UI 생성하기 (Text-to-UI)
준비된 프롬프트를 복사해 Figma Make에 입력합니다.
결과: 잠시 기다리면 프롬프트에 요청했던 '회고 시작하기' 버튼, '최근 회고 리스트', '회고 유도 메시지' 등이 포함된 UI가 생성됩니다.
확인: [회고 시작하기] 버튼을 클릭하면 KPT를 입력하는 다음 화면으로 실제로 넘어가는, 기능적으로는 완벽한 프로토타입이 완성됩니다.
아쉬운 점: 다만, 디자인이 다소 밋밋하게 느껴질 수 있습니다.
3단계: 이미지로 디자인 스타일 적용하기 (Image-to-UI)
이제 밋밋한 디자인을 멋지게 바꿔볼 차례입니다. 핀터레스트 등에서 원하는 디자인 레퍼런스 이미지(책에서는 파란색 그러데이션의 글래스모피즘 스타일)를 찾아 Figma Make에 첨부합니다.
요청: "첨부한 이미지 파일을 반영하여 디자인 스타일을 바꿔 줘."
결과: 놀랍게도 Figma Make가 이미지의 디자인 스타일(글래스모피즘, 파란색 톤)을 자동으로 분석해, 기존에 만들었던 앱의 모든 화면(홈, 회고 입력, 목록)에 일관되게 적용해 줍니다.
4단계: 'Point and Edit'으로 기능 수정하기
디자인은 마음에 드는데, 빠진 기능이 있나요? Figma Make의 'Point and Edit' 기능(반짝이는 마우스 아이콘)으로 간단하게 수정할 수 있습니다.
요청: 'Point and Edit' 아이콘을 클릭합니다. 프리뷰 화면에서 수정하고 싶은 부분(예: '최근 회고' 타이틀)을 클릭합니다. 프롬프트 입력창에 "검색 기능 추가해줘"라고 입력합니다.
결과: AI가 '최근 회고 목록' 상단에 기존 글래스모피즘 스타일을 유지한 검색창을 추가해 줍니다.
더 놀라운 점: 단순히 검색창만 만든 것이 아니라, '검색 결과가 없을 때'의 화면과 '검색이 완료됐을 때'의 화면까지 알아서 생성해 줍니다.
'바이브 코딩' 시대, 디자이너의 진짜 역량
Figma Make를 활용한 이 모든 과정을 마치는 데 10분도 채 걸리지 않았습니다. 정말 '바이브 코딩'의 시대가 왔음을 실감하게 되는데요. 하지만 이 도구가 완벽한 것은 아닙니다.
Figma로 내보내기 불가: 2025년 기준, Figma Make로 생성한 UI는 Figma 디자인 파일(.fig)로 내보낼 수 없습니다. 즉, 디자이너가 세밀하게 수정하는 것이 불가능합니다. (치명적인 단점이죠.)
Claude와의 유사성: Figma Make는 Claude 모델을 기반으로 하는데, Claude 역시 무료로 비슷한 프로토타입 생성이 가능하며 심지어 HTML/SVG 파일로 다운로드를 지원합니다. 현시점에서는 Claude가 더 나은 선택일 수 있습니다.
그렇다면 Figma Make(혹은 이와 유사한 AI 툴)의 진짜 가치는 무엇일까요? 바로 '빠른 사용성 테스트'입니다. 책에서는 AI로 연말 회고 앱의 세 가지 다른 입력 방식(A: 키워드 입력, B: 추가 질문 입력, C: 월별 회고 입력)을 빠르게 만들어 사용자 테스트를 진행한 사례를 소개합니다.
테스트 결과, 참여자들은 키워드만 입력하는 A 시안의 선호도가 가장 낮았고, B 시안과 C 시안을 결합한 형태를 제안했습니다. 디자이너는 이 피드백을 바탕으로 실제 웹 서비스를 제작할 수 있었습니다. 결국, 바이브 코딩 시대에 가장 중요한 것은 정교한 코드 작성 능력이 아닙니다.
가장 중요한 것은 '무엇을 만들고 싶은가'라는 명확한 아이디어와 그 아이디어를 AI에게 효과적으로 전달하는 능력일 것입니다. 코딩을 몰라도 괜찮습니다. 여러분의 멋진 아이디어를 AI에게 설명해 보세요. AI는 이미 여러분의 훌륭한 개발 파트너가 될 준비가 되어있습니다.
https://wikibook.co.kr/design-workshop/
사용자 리서치, 아이디어 발상, 프로토타이핑까지… 과연 어디까지 AI에게 맡길 수 있을까?
이 책은 ‘AI를 도구로 쓰는 법’을 넘어, ‘AI와 함께 디자인 문제를 정의하고 해결하는 방법’을 제시합니다. 디자이너가 AI의 결과물을 선별·검증·재구성하며 진짜 협업 파트너로 활용하는 과정을 실습 중심으로 구성했습니다.
