요약
- Figma의 AI 이미지 편집 도구(배경 제거, Vectorize, 오브젝트 지우기, 이미지 확장)와 인터랙티브 프로토타입을 결합해 컨셉에서 크리틱, 완성까지 더 빠르게 진행하는 워크플로우를 소개
- 요리 앱 Trivet 팀이 추천 프로그램 배너의 전환율을 높이기 위해 모달, 인피드 카드, 풀스크린 오버레이 세 가지 방향을 실험하며 각각 다른 비주얼 접근법(글래스 효과, 손그림 벡터화, AI 사진 편집)을 적용
- Figma Make로 각 방향을 인터랙티브 프로토타입으로 만들고, FigJam에 임베드하여 팀 크리틱 세션을 진행함으로써 정적 프레임이 아닌 실제 동작하는 경험을 기반으로 피드백을 수집
- 최종적으로 Figma Design의 Dev Mode나 Figma MCP를 활용해 디자인 컨텍스트를 코드로 직접 연결하는 프로덕션 경로까지 제시
본문
정밀한 이미지 편집, Vectorize, 인터랙티브 프로토타입을 결합하여 컨셉에서 크리틱, 완성까지 더 빠르게 이동하는 워크플로우를 소개합니다.
워크플로우 팩트 시트
Figma 제품: Figma Design, Figma Make, FigJam
도구: Glass 효과, 배경 제거, Vectorize, Cut 도구, 인라인 변수 검색, 바운딩 박스, 변수, 오브젝트 지우기, 이미지 확장, Figma Make 임베드
팀 구성: 디자이너, 콘텐츠 디자이너, 프로덕트 매니저, 그로스 애널리스트, 엔지니어
해결할 질문: 무엇이 가입을 유도하는가?
Figma 제품과 도구를 활용한 샘플 워크플로우를 소개하는 Workflow Lab에 오신 것을 환영합니다.
새로운 워크플로우를 구축한다는 것은 서로 다른 도구와 팀 사이의 점들을 연결하는 것입니다. 요리 및 레시피 앱 Trivet의 디자인 팀이 빠른 스프린트에서 문제 발견부터 프로덕션까지 어떻게 나아가는지 함께 따라가 보겠습니다.
문제 정의
Trivet 팀은 최근 앱에 추천 프로그램을 런칭했지만, 이를 홍보하는 배너가 예상했던 만큼의 클릭이나 가입을 유도하지 못하고 있었습니다. 팝업은 가시성을 높일 수 있지만 사용자 플로우에도 영향을 줍니다. 문제는 배너가 너무 눈에 띄지 않아서 의미가 없는 것인지, 아니면 너무 방해가 되어서 작동하지 않는 것인지였습니다.
목표는 단순합니다: 추천 프로그램의 클릭과 가입을 늘리는 것. 제약 조건도 명확합니다: 경험을 해치지 않으면서 주목도를 높이는 것. 팀은 미묘한 것부터 고가시성까지 다양한 UX 옵션을 테스트합니다—모달(짧은 인터럽션), 인피드 카드(가장 미묘한 옵션), 풀스크린 오버레이(최대 가시성). 각 방향은 서로 다른 비주얼 접근법을 필요로 하므로, 비주얼 효과, 손그림 일러스트레이션, 사진 등을 실험합니다.
이번 스프린트는 단순히 레이아웃에 관한 것이 아닙니다. 톤, 시각적 긴장감, 그리고 주목도가 실제로 전환을 이끄는 정도를 테스트하는 것입니다.
현재 경험과 세 가지 잠재적 방향—모달, 인피드 카드, 풀스크린 오버레이—을 나란히 보여줍니다.
방향 1: 시각적 연출로 호기심 유발
첫 번째 방향은 이미지에 집중합니다. Figma의 Trivet 디자인 시스템을 기반으로 한 모달을 사용해 인피드 카드보다 더 몰입감 있는 인터랙션을 제공합니다. 사용자에게 잠시 멈출 것을 요청하는 만큼, 시각적 연출이 그 순간을 충분히 정당화해야 합니다. 카피는 이미 정해져 있으므로, 경험이 어떻게 느껴지는지에 집중합니다.
디자이너는 디자인 시스템의 “레시피 로우 컴포넌트”를 출발점으로 삼습니다. 모달 카피가 독점 레시피를 “잠금 해제”하는 내용이므로, 비주얼도 그 메시지를 뒷받침합니다. 사진이 중심축이 되고, 레시피는 살짝 블러 처리되어 보이지만 손에 닿지 않는 느낌을 줍니다. 글래스 효과로 서리 낀 표면을 만들고, 굴절로 깊이감을 더하며, 점진적 블러로 가장자리를 부드럽게 처리합니다. 인터페이스를 압도하지 않으면서도 제한된 콘텐츠라는 느낌을 자연스럽게 강화합니다.
이 방향은 깊이감을 더해 보상이 실제로 존재하고 흥미롭다는 인상을 주며, 잠금 해제에 대한 기대감을 높입니다.
서리 낀 글래스 효과가 깊이감을 더하면서 “독점 레시피 잠금 해제” 메시지를 강화합니다.
방향 2: 일러스트레이션 벡터화로 피드 내 카드 구성
두 번째 방향은 좀 더 자연스러운 통합을 추구합니다. 흐름을 끊는 대신, 배너를 피드 안에 직접 배치해 몰입보다는 보조적인 느낌을 줍니다. 공간이 제한적이므로 시각적 무게를 줄여야 합니다. 디자이너는 사진 대신 일러스트레이션을 실험하며, 손으로 그린 그래픽을 시작점으로 도입합니다.
배경 제거와 Vectorize—래스터 이미지를 편집 가능한 벡터로 변환하는 Figma의 AI 도구—를 사용해 케이크 스케치가 유연한 디자인 에셋이 됩니다.
벡터화되면 일러스트레이션을 더 쉽게 다듬을 수 있습니다. 디자이너는 채우기 패널에서 적절한 변수를 검색하여 브랜드에 맞게 색상을 조정합니다. Cut 도구로 패스를 유지하면서 가장자리를 다듬고, 바운딩 박스를 사용해 앵커 포인트를 회전시켜 손그림 품질을 잃지 않으면서 세부 사항을 다듬습니다. 스케치에서 시작한 것이 확장 가능하고 브랜드에 맞는 재사용 가능한 에셋이 됩니다.
이 방향은 텍스처와 개성을 도입해 보상을 더 가볍고 친근하게 느끼게 합니다.
손으로 그린 케이크 일러스트레이션을 벡터화하여 인피드 카드가 주변 레이아웃과 차별화됩니다.
방향 3: 풀스크린 오버레이 생성
시선을 사로잡아야 할 때, 풀스크린만큼 강력한 순간은 없습니다. 경험에 명확한 전환점을 만들고 중요도를 전달합니다. 다만 넓은 화면을 채우는 만큼, 사진이 그 무게를 감당할 정도로 임팩트 있어야 합니다.
선택한 이미지는 강렬하지만, 비율이 레이아웃에 완벽히 맞지 않고 숟가락이 음식의 주목도를 떨어뜨립니다. 대안을 찾거나 디자인을 이미지에 맞추는 대신, 디자이너는 이미지를 디자인에 맞게 조정합니다. 오브젝트 지우기 도구로 숟가락을 제거하고, 이미지 확장으로 배경을 넓힙니다. 파란색 핸들을 드래그하면 원본 비율을 유지하면서 주변 맥락에 맞는 디테일이 자동으로 채워집니다. 결과물은 레이아웃에 맞으면서도 이미지 본연의 품질을 그대로 유지합니다.
이 방향은 사진을 활용해 요리의 분위기를 끌어올리며, 사용자가 잠시 멈추고 행동 유도 메시지에 집중하도록 이끕니다.
정밀한 이미지 편집으로 사진을 앱의 디자인 시스템에 맞추고, 음식을 화면의 주인공으로 내세웁니다.
옵션들을 나란히 비교
세 가지 방향이 완성되자, 팀은 다시 모여 전체를 조망합니다. 각 방향은 충분히 실현 가능하지만, 서로 다른 수준의 개입과 뚜렷한 비주얼 톤을 테스트합니다. 정적 프레임만으로는 전체 이야기를 전달하기 어렵고, 각자 경험을 다르게 해석할 수 있습니다. 피드백이 비주얼에만 집중되면 모호함이 생기기 쉽습니다. 사용성 문제는 스크린샷에서 잘 드러나지 않으며, 명확한 판단은 실제 인터랙션에서 나옵니다.
이를 고려해, 팀은 이해관계자에게 공유하기 전에 실제 제품처럼 동작하는 형태로 만들어야 한다는 데 동의합니다.
현재 경험과 세 가지 새로운 방향을 비교합니다.
실제처럼 만들기
Trivet 팀은 이미 Figma Make를 사용하고 있어, 스타일과 구조 가이드라인이 포함된 공유 템플릿으로 새 디자인을 빠르게 가져올 수 있습니다. 매번 처음부터 세팅할 필요 없이 프로토타입을 바로 시작할 수 있습니다. 몇 분 만에 각 컨셉이 인터랙티브 프로토타입으로 변환됩니다. 플로우 자체는 간단하지만, 높아진 완성도가 논의의 흐름을 바꿉니다. 가설을 놓고 토론하는 대신, 팀은 실제 제품처럼 동작하는 것에 반응합니다. 레이아웃뿐 아니라 타이밍, 정보 계층, 모션까지 함께 평가할 수 있습니다.
이는 전환율을 테스트할 때 특히 중요합니다. 전체 플로우를 경험하면 논의의 초점이 잡히고 의사결정이 명확해집니다. 크리틱에서는 개인의 해석 차이를 줄이고, 동일한 기준점 위에서 평가할 수 있게 됩니다.
각 방향이 Figma Make에서 인터랙티브 프로토타입이 됩니다.
컨텍스트가 있는 크리틱
팀은 개별 Figma Make 링크를 공유할 수도 있지만, 그러면 나란히 비교하기 어렵고 피드백이 흩어지기 쉽습니다. 대신, Figma Make 임베드를 활용해 프로토타입을 Figma Design, Figma Slides, 또는 FigJam에 직접 넣어 한 곳에서 리뷰할 수 있게 합니다. 크리틱 세션에서 팀은 모든 옵션을 FigJam에 펼쳐놓고, 댓글, 스티키, 라이브 리액션으로 피드백을 주고받으며 실시간으로 의견을 맞춰갑니다.
프로토타입이 실제에 가까울수록 피드백도 구체적이 됩니다. 단순히 비주얼에 반응하는 것이 아니라 동작에 반응하고, 구현 관련 질문도 더 일찍 나옵니다. 다른 PM, 디자이너, 엔지니어들이 세션에 합류합니다. 커서가 움직이고, 댓글이 쌓이고, 세 번째 방향이 빠르게 추진력을 얻습니다.
Figma Make 프로토타입이 FigJam에 임베드되어 리뷰와 피드백을 진행합니다.
프로덕션으로의 길
여기서부터 프로덕션까지의 경로는 유연합니다. PM이나 엔지니어가 코드로 옮기기 전에 Figma Make에서 풀스크린 오버레이를 계속 다듬을 수 있습니다. 디자이너는 Figma Design에서 디자인을 더 정교하게 만들고, 준비가 되면 개발자가 같은 파일에서 Dev Mode로 전환해 바로 코딩을 시작할 수 있습니다. 혹은 디자이너가 Figma MCP를 활용해 캔버스에서 코드로 디자인 컨텍스트를 직접 넘길 수도 있습니다.
AI 도구로 속도를 높이고, 디자인 화면을 벗어나지 않으면서 에셋을 다듬고, 인터랙티브 프로토타입을 더 일찍 활용함으로써, 팀은 문제 발견에서 프로덕션까지의 간극을 줄여갑니다.
이 워크플로우의 라이브 데모와 함께 최근 출시된 기능들과 2026년 디자인에 대한 생각을 보려면, 2월 25일 샌프란시스코에서 열린 Release Notes 이벤트의 녹화본을 시청하세요.
원문: Workflow lab: AI image tooling and interactive prototyping in Figma | Figma Blog 저자: Mallory Dean (Designer Advocate, Figma) 히어로 일러스트레이션: Ohni Lisle