제가 정말 좋아하고 아끼는 도구 프레이머의 소개 글을 써보았습니다.
프레이머, 무엇인가요?
프레이머는 2015년 framer.js 라는 자바스크립트 라이브러리로부터 기인하였습니다. 웹사이트를 A부터 Z까지 만들지 않아도 간단한 자바스크립트 코드를 사용해 프로토타입을 만들 수 있는 도구였죠. 이것을 Framer Studio 라는, 커피스크립트를 사용하는 디자인 도구로 발전시켰고, 또 다시 2-3년 사이에 리액트 컴포넌트를 사용하는 Framer Classic 으로 변화했습니다. 이후 피그마와 같은 실시간 협업과 기존 로컬 파일 기반이 아닌 클라우드 기반의 프로젝트 관리를 탑재한 Framer Web 으로 진화했고, 최종적으로는 웹 사이트 빌더로 포지셔닝하게 되면서 노 코드 도구로서의 정체성을 가지게 되었습니다. 좀 복잡하죠? 참으로 변화무쌍한 제품입니다.
쉽게 말하면, 피그마와 같은 프로토타이핑 툴인데, 피그마보다 더욱 유연한 인터랙션/반응형 디자인이 가능하고, 그걸 그대로 웹사이트로 만들 수 있는 도구입니다. 개발과의 거리가 역사상 가장 가까운 디자인 도구라고도 할 수 있습니다. 디자이너보다는 개발자들이 더 좋아하는 도구인 것 같기도 해요 
국내에서는 토스가 주력으로 사용하고 있는 디자인 도구로도 유명합니다. 토스는 프레이머를 통해 개발과 디자인이 거의 일치하는 작업 환경을 만들었고 디자인이 곧 제품으로 이어지는 프로세스를 만들었다고 해요. 아래 영상 참고하시죠
물론 이 인터뷰가 나왔을 시점의 프레이머는 아직 피그마와 같은 프로토타이핑 도구였습니다. 그리고 이후 프레이머는 웹사이트 빌더인 Framer Sites를 발표하게 되죠.
쇼케이스
말로만 설명드리는 것보다, 프레이머 Sites 로 만들어진 사이트를 몇 개 가져와보았습니다.
- https://algo.tv/
- https://brand.toss.im/
- https://brand.zapier.com/
- https://www.t-pod.space/
- https://tubecut.app/
- https://www.atulkhola.com/
- https://www.snagpeople.com/
딱 봐도 우리가 지금껏 보아왔던 노 코드 기반 사이트들과는 결이 다르죠? 피그마 이상의 자유도와 인터랙션을 가지고 사이트를 만들면 이렇게 됩니다. 물론 위의 사이트들 전부가 완전한 제로 코드로 만들어진 것은 아닙니다. 프레이머는 필요한 경우 react.js 기반의 코드를 접목하여 자유도를 더욱 확장할 수 있기 때문이에요.
무엇을 할 수 있나요
-
컴포넌트 기반의 인터랙션 디자인
: 프레이머에서 그린 컴포넌트는 그대로 리액트 컴포넌트가 됩니다. 이걸 개발자가 바로 사용가능한 상태로 코드에 전달하고 실제로 제품에 사용하며 유지보수도 이어갈 수 있어요. -
풍부한 반응형 지원
: 실시간으로 디바이스 가로 폭에 반응하는 모습을 눈으로 보며 반응형 웹사이트를 디자인할 수 있습니다. -
코드 컴포넌트, 코드 오버라이드
: 노 코드로 한계에 부딪혔을 때는 리액트/자바스크립트 코드를 그대로 사용해서 원하는 걸 구현할 수 있습니다. -
Framer-motion API
: 프레이머를 위해 설계된 애니메이션/인터랙션 전용의 API 입니다. 자바스크립트 라이브러리로 되어 있어서 개발자들이 손쉽게 원하는 인터랙션을 구현할 수 있어요 -
mailchimp, formspark, typeform, calendly 등의 폼 지원
: 간단한 사전 예약이나 메일 연락 등의 폼을 달 수 있어요 -
CMS
: 간단한 블로그나 포트폴리오 용도의 CMS 기능을 지원합니다. -
Spline, Rive 등의 도구와 연동
: 최근 급부상하고 있는 3D 그래픽 디자인 도구 Spline과 애니메이션을 만드는 Rive 등과 연동됩니다. (이 부분은 저도 안써봐서 잘…)
프레이머 팀의 제품 철학은 기본적으로 '개발을 비주얼라이즈하는 것’입니다. 프레이머의 많은 부분이 개발자들이 하는 프로세스를 그대로 세련된 GUI로 옮겨놓은 듯한 느낌이 있어요. 따라서 프레이머를 통해 개발에 대한 이해도를 높여갈 수 있고 개발과의 거리감을 좁힐 수 있습니다.
난이도가 높지 않나요
네. 난이도는 확실히 높습니다. 피그마보다도 조금 더 높고, 버블과 비교하면 (제가 느끼기에) 비슷하거나 조금 낮은 수준입니다. 다만 개발자가 성향에 따라 프론트엔드/백엔드로 나뉘듯이, 어떤 사람은 버블을 더 어렵게 생각할 수도 있고, 어떤 사람은 프레이머를 더 어렵게 느낄 수 있을 것 같아요. 물론 어려운 만큼 더욱 할 수 있는 게 많죠. 개발자들은 너무 쉽다고 대박이라고 난리, 디자이너들은 너무 어렵다고 난리…
가격
기본적으로 무료로 사용해볼 수 있습니다. 아래쪽에 프레이머 배너가 붙긴 하지만 유료로 쓰더라도 크게 부담스럽지 않은 가격이에요.
정리
웹의 백엔드를 다루는 도구로 버블이 있다면, 프론트의 끝판왕은 프레이머입니다. 구상한 서비스의 mvp를 프레이머만 가지고 만들어볼 수는 없겠지만, 개인 포트폴리오나 기업 블로그, 브랜드 페이지, 사전예약, 랜딩페이지 등의 간단한 웹사이트를 정말 예쁘게 만들 수 있는 도구에요.
제가 제작에 참여하고 있는 영상을 하나 가져왔어요. 피그마로 그린 웹사이트 디자인을 프레이머를 통해 5분 내에 웹사이트로 바꾸는 방법을 소개하고 있습니다. 도움이 되시기 바랍니다.
