Figma Make로 하루만에 만든 프로토타입
번역부터 지도, 블로그 검색까지 전부 구동되는
최근 디자이너 커뮤니티에서 Figma Make가 주목받고 있습니다. 단순한 프로토타이핑을 넘어, 실제로 사용자 입력을 받고 데이터를 처리하는 인터랙티브한 결과물을 만들 수 있기 때문입니다.
이러한 관심에 힘입어, Figma는 지난주 Schema by Figma에서 Make의 기능 확장 계획을 공개하기도 했는데요. Figma에서 라이브러리를 직접 가져올 수 있는 Make Kits, 코드베이스의 디자인 시스템을 불러올 수 있는 Npm package imports 기능 등이 추가될 예정이라고 합니다. Make가 단순한 실험 도구를 넘어 실무 환경으로 확장되고 있다는 신호로 보입니다.
Figma Community에 게시된 Figma Make 결과물실제로 Figma 커뮤니티에서도 Make를 활용한 다양한 결과물들이 공유되고 있습니다. 간단한 게임부터 인터랙티브 웹페이지까지, 실험적인 시도들이 활발하게 이루어지고 있었는데요. 일부 쇼핑앱 사례도 있었지만, 서비스 기획 관점에서 실무에 가까운 사례는 아직 많지 않은 상황이었습니다.
그렇다면 Figma Make는 실제 프로덕트 기획 실무에도 도움이 될 수 있을까요? 저는 그 가능성이 궁금해졌고, 직접 테스트해보기로 했습니다.
만들고자 했던 것
Figma Make로 외국인이 영어로 K-맛집을 검색하고 탐색할 수 있는 서비스를 만들어보기로 했습니다.
언어 장벽 없이 콘텐츠를 자연스럽게 탐색할 수 있도록, 서비스 흐름은 다음 단계를 포함해야했습니다.
① 영문 키워드 입력 → ② 한글 번역 → ③ 로컬 검색 요청 → ④ 검색 결과 영문 번역 → ⑤ 지도에 장소 표시 → ⑥ 장소 클릭 → ⑦ 관련 블로그 자동 검색 → ⑧ 블로그 내용 영문 번역 → ⑨ 메타 이미지 추출 및 표시
그리고 이런 흐름을 구현하기 위해서는 다음의 외부 요소들을 연동해야했습니다.
번역 API : 영어 ↔ 한국어 양방향 번역
지역 검색 API : 키워드 기반 장소 탐색
지도 API : 위치 시각화 및 인터랙션
블로그 검색 API : 네이버 블로그 결과 추출
스크래핑 라이브러리 : 대표 이미지, 제목, 설명 수집
딱 봐도 만만치 않은 구성이었는데요. 프로토타이핑 도구로 시작한 Figma Make가 과연 이런 복잡한 데이터 처리와 API 연동까지 소화할 수 있을지 궁금했습니다.
Figma Make는 어디까지 가능한가?
결론부터 말씀드리면, 생각보다 멀리까지 갑니다.
앞서 계획했던 모든 기능—지역 기반 검색, 번역, 장소 탐색, 지도 표시, 블로그 크롤링—을 구현할 수 있었습니다.
1. 번역 API와 지역검색 API 연동
영어로 "Gangnam"을 검색하면 한글로 번역되어 장소 검색이 진행되고, 결과는 다시 영어로 번역되어 목록에 표시됩니다.
Figma Make로 구현 - "Gangnam" 검색 결과 화면2. 블로그 검색 API와 스크래핑 라이브러리 연동
검색된 장소를 클릭하면 중앙 패널에 관련 네이버 블로그 포스팅이 자동으로 검색되어 표시됩니다. 각 포스팅의 대표 이미지, 제목, 요약 내용이 영어로 번역되어 함께 보입니다.
Figma Make로 구현 - 특정 식당에 대한 블로그 검색 결과3. 지도 API 연동
지도에는 검색된 장소들이 마커로 표시되며, 지도 위의 마커를 직접 클릭해도 해당 장소의 정보를 확인할 수 있습니다.
Figma Make로 구현 - 지도에 마커 표시, 마커 클릭하여 목록 포커스+a. 검색어 자동완성
추가로, 검색어 자동완성 기능도 구현할 수 있었습니다.
검색창에 "seo"를 입력하면 Gangnam, Apgujeong, Sinsa, Cheongdam 등 서울의 주요 지역명이 자동완성 목록으로 나타납니다.
Figma Make로 구현 - 검색어 자동 완성실제로 작동하는 프로토타입은 아래 링크에서 확인할 수 있습니다.
https://eject-blank-50734382.figma.site/
하루 만에 완성, 그러나 198번의 수정
이 프로토타입은 하루 만에 '제작은' 완료되었지만, 사실은 수많은 시행착오가 있었습니다. 실제로는 버전 198까지 기록되었는데, 이는 오류 수정과 롤백이 반복된 결과였습니다.
Figma Make로 구현한 이 프로토타입은 198번째 버전이었습니다CORS 이슈, 데이터 로딩 순서, 세부적인 인터랙션 완성도 등 다양한 문제에 직면했습니다. 로그를 통해 문제를 확인하고 하나씩 해결해 나가는 과정이 필요했고, 이 과정에서는 개발에 대한 약간의 지식도 요구되었습니다.
꽤 번거로운 작업이었지만, 개발 단계에서 마주할 이슈들을 미리 확인할 수 있었다는 점에서는 큰 의미가 있었습니다. 와이어프레임으로는 드러나지 않는 상황들—로딩 중 데이터 처리, 검색어 처리 방식, 포커스와 스크롤 이동 등—을 사전에 점검할 수 있었고, 개발 부서를 거치지 않고 하루 만에 이를 검증했다는 점은 이후 소통을 훨씬 생산적으로 만들어줄 것으로 보였습니다.
마치며
이번 실험을 통해 가장 크게 느낀 것은 '빠른 검증의 가치'였습니다.
하루 만에 실제로 반응하는 프로토타입을 만들 수 있었고, 그 과정에서 화면 설계만으로는 보이지 않던 데이터 흐름, 사용자 인터랙션, 엣지 케이스 등이 훨씬 선명하게 드러났습니다.
Figma Make는 '개발 전 MVP'로서의 가능성을 충분히 보여주었습니다. 복잡한 백엔드 로직이나 대규모 사용자 관리에는 아직 한계가 있지만, 아이디어를 빠르게 실험하고 흐름을 점검하는 단계에서는 매우 강력한 도구라고 생각합니다.
저희는 앞으로 실무에서도 좀 더 적극적으로 도입해볼 생각입니다. 아이디어를 문서나 화면이 아닌, 실제로 작동하는 형태로 빠르게 검증하는 방식을 더 자주 활용해보려 합니다.
