작가의 글을 더 이상 구독하지 않고,
새 글 알림도 받아볼 수 없습니다.
프레이머로 3일 만에 만드는 MVP
디자이너 혼자(?) MVP 만들기
by
Feb 18. 2025
프레이머는 인터페이스가 피그마와 거의 유사하다. 그래서 이미 피그마를 다룰 줄 아는 디자이너라면 크게 힘들이지 않고 3일 만에 MVP를 제작하는 것이 가능했다. 또한 바로 배포가 가능하기 때문에 사용자의 반응을 빠르게 확인하고 리드를 수집하기에도 용이했다.
1일 차
프레이머로 웹페이지 디자인하기
디자이너는 첫날 프레이머에서 웹사이트를 디자인한다. 피그마의 오토레이아웃과 컴포넌트를 이미 잘 다루고 있는 디자이너라면 작업시간을 크게 단축할 수 있다.
또한, 심리스 한 UXUI를 위해 다양한 요소들을 직접 커스텀하며 작업할 수 있어서, 요구사항을 반영하며 이것저것 스스로 만들어내는 재미가 쏠쏠했다.
프레이머에서 제공하는 에셋들을 잘 활용하면 다양한 기능을 구현할 수 있다. 사이트 내에서 원하는 정보를 검색할 수 있게 하거나, 필터로 정보들을 소팅해서 볼 수 있게 하거나, 서베이 폼을 제작해 리드를 수집하는 둥 다양한 기능이 구현 가능했다. 가장 큰 장점은 인터페이스가 피그마와 비슷하기 때문에 디자이너 혼자 빠르게 웹사이트를 제작할 수 있다는 것이었다.
survey서베이 또한 커스텀 자유도가 높아 다양한 형태의 UX를 고려할 수 있다. 기본적인 서베이 컴포넌트에서 조금만 수정하면 인풋필드, 드롭다운, 체크박스까지 커버 가능했다. 이렇게 만들어진 서베이를 구글 시트와 연동하여 리드를 수집하는데, 타 사업부와 실시간으로 공유하면 빠른 대응이 가능하다.
2일 차
CMS 세팅하기
둘째 날, CMS 테이블을 세팅한다. 에이전시에서 인플루언서들의 프로필을 전시하는 사이트를 만든다고 가정해 보자. 이때 CMS로 인플로언서의 사진, 인스타 바이오, 섭외비용, 활동 범위 등 다양한 데이터의 필드를 생성하여, 엔지니어가 크롤링한 데이터를 전시할 수 있다.
디자이너는 이렇게 생성된 필드와 대응하는 인플루언서 상세페이지를 만든다. 그러고 나서 생성된 필드와 대응되는 엑셀파일을 import 하면 다량의 데이터를 손쉽게 전시할 수 있다. 디자이너가 아닌 팀원들도 엑셀파일로 데이터를 업로드하기만 하면 잘 정돈된 상세페이지에 착착착 들어가 전시된다. 초기에 세팅만 잘해두면 유지보수할 때, 디자이너 없이도 잘 굴러가게 만들 수 있다.
CMS를 잘 활용하면, 디자이너 혼자서 이런 airbnb 스러운(?) 사이트도 하루 만에 만들 수 있다.
3일 차
develop & delivery
이제 BM에 적합한 모델이 나왔는지 팀원들과 확인하고 부족한 부분은 보완한다. 그리고 광고를 돌려 잠재적 고객의 반응을 빠르게 확인해 보자.
프레이머 자체에서도 코멘트 기능을 지원하긴 하는데 버그가 좀 많아서 실질적인 소통은 슬랙을 사용할 수밖에 없었다. 그래도 유지보수할 때 중요하게 파악해야 하는 정보는 프레이머 내에 코멘트로 남겨두면 커뮤니케이션 코스트를 줄이는데 도움이 되었다.
아, 이거 또 써먹을 데 없나. 이제 막 재미 붙였는데, 프레이머로 MVP제작 필요하신 분들 연락 주세요.
이건 MVP는 아니고, 시험삼아 만들었던 초기 모델
https://khaki-run-213502.framer.app/
끝.