Webflow vs Framer?
웹포트폴리오 어디서 시작할까요
먼저 사족
Webflow로 포트폴리오를 만들기 시작했다. 이유는 Framer의 존재를 몰랐고, 피그마 플러그인으로 copy paste 하여 쉽게 webflow로 옮길 수 있었기 때문. (알고보니 framer도 가능ㅎ..)
그런데 웹플로우.. 정말... 쉽지 않았다. 내 러닝커브 죽음의 골짜기는 매우 깊고 길기 땜시 웹플로우에서 허우적 대며.. 별안간 다소 허접한 결과물을 만드는데 한 두 달은 넘게 걸린 것 같다. (특히나 하나 고치면 하나 틀어져 있는게 정말 킹받았음..)
그러다가 Framer를 알게 됐는데, 호스팅 가격이나 UI 면에서 웹플로우보다 굉장히 편-안한 느낌이었다. 그래서 아래의 글을 요약하자면
웹플로우 vs 프레이머
프레이머 승. 초심자 입장에서 배우기 쉽고 디자인 툴을 다뤄봤다면 더욱 빠르게 익숙해질 것. 배포와 이미지 첨부, 수정 등도 보다 직관적
이미 웹플로우에 투자한 나의 매몰 시간이 아까워 그냥 버티려다가 견디지 못하고 프레이머로 옮겨탔다.나처럼 고민하는 사람들을 위해 비교 글을 쓰게 됨.
둘다 사용해 보고 비교하나 주관적이며 간단한 디자인 포트폴리오 제작 기준이기에, 목적에 따라 다를 수 있음.
1. 가격 : Framer가 합리적
제공 서비스에 차이는 있으나 가격만 봤을 때는 framer가 mini hosting을 제공하면서 월 6,600원에 (1년) 커스텀 도메인까지 사용할 수 있다. 게다가 404 페이지와 홈메인 화면까지 제공하는 것을 보면 웹플로우에 비해 경쟁력이 있음.
그러고 보니 프레이머는 한국이라고 금액을 won으로 표시하지맘 webflow는 달러로 표기함. UX에 있어서 전반적으로 Framer가 굉장히 더 유저 친화적임을 알 수 있는 사소한 부분
Framer. 6천원도 있음.
Webflow. 14$로 시작2. 사용성 : Framer가 더 쉽다
<사용성 전반>
개인적으로 Framer 압승이다. 토스는 피그마 아닌 프레이머로 작업을 하는 걸로 알고 있는데, 왜인지 알 수 있는 부분.
피그마나 다른 디자인툴을 써봤다면 금방 익힐 수 있다. 피그마 Auto Layout과 Component와 비슷한 개념인 Stack과 Frame이 있고 비교적 빠르게 홈페이지로 배포를 할 수 있다. 확실히 노코드라는 이름에 걸맞는 툴.
<배우기>
두 서비스 모두 튜토리얼을 제공하나, Framer의 경우 처음 서비스에 진입했을 때 영상 등을 활용한 튜토리얼로 간단히 소개하는 반면, webflow는 알아서 익혀야 한다. 대신, 유튜브와 Webflow university를 통해서 아주 적극적으로 모든 방법을 설명하고 있는데 어린시절 과학상자 조립하는 것을 좋아했던 인내심 가득한 사람이라면 할만 하다. 그게 나였는데 이제 인내심은 없다.
대신 Webflow university를 찾아보면 배워가는 재미는 있다. 일부 해외 회사의 경우, webflow 빌딩 경험을 높이 사는 곳도 있으므로 해당 서비스를 잘 익혀가는 것도 괜찮을 지도.
그러나 퀵하게 만들고 빠져야 하는 나같은 이직/취업 준비생들은 빠른 제작과 배포가 필요하므로 Framer로 시작하는 것을 추천해보고 싶다.
Webflow. 다소 복잡하다. 웹프로우 프로그램 자체를 익혀야 한다. <디자인 작업>
웹플로우의 경우, 툴 자체에 익숙하지 않는 이상 디자인 작업을 웹플로우에서 시작하는 걸 추천하지 않는다. 다수의 해외 디자인 유튜버들 역시 피그마에서 작업하고 플러그인으로 웹플로우 복붙하는 방법을 많이들 추천하는데, 웹플로우에서 작업을 하다보면 그 이유를 알 수 있을 것.
그러나 프레이머의 경우, 피그마 작업물을 그대로 복붙 할 수 있음에도 나도 모르게 자꾸 프레이머 위에서 작업을 하게 되는 걸 보니 프레이머 자체로 디자인 작업 툴로서의 역할을 충분히 수행하는 듯 함. 웹플로우에 비해 직관적이고, 피그마와 사용법이 비슷하여 쉽게 익숙해 질 수 있다. 많은 부분이 자동화 되어 있다.
원래 프레이머가 피그마 같은 포지션을 가지려고 했다가, 노코드 빌더로 틀었다는 카더라를 어디서 줍어 들었었는데 그래서일지 프레이머 자체의 디자인 작업은 웹플로우 비해 편-안 하다..
예로서 웹플로우는 4MB이상의 이미지는 첨부가 안됨. 이미지가 많이 들어가는 포트폴리오 작업 시 가장 불편한 점인데 일일이 pdf compressor 를 찾아서 이미지를 줄이는 작업을 해야했다.
프레이머에서는 무거운 이미지도 자체적으로 컴프레싱을 하는지 어쩐지 모르겠지만 가볍게 들어감.
3. 무료 플랜의 범위 : Framer가 더 너그러움
일단 Webflow에 대해 아무것도 몰랐던 난, 처음 피그마x웹플로우 기능을 알고 신나서 페이지 만들기를 시작했다. ㅎ.. 그러지 말았어야 했는데.. 몇 페이지 만들고 페이지를 추가하니.. 유료라며 나를 Pricing 페이지로 안내했다.
Webflow
1. 3페이지 이상 무료로 사용할 수 없음
추가 플랜을 구매해야하며, 꼼수로 많은 페이지를 제공하는 무료 템플릿을 갖다 사용하면 되지만 아무래도 제한적.
2. '링크>파일 다운로드'로 연결 시 유료
포트폴리오 웹페이지에 종종 Resume 메뉴에서 바로 PDF 파일을 다운 받을 수 있는 메뉴들을 본 적 있을 터. 웹플로우에서는 사이트에서 바로 파일 다운로드 링크로 연결하기 위해서는 추가 플랜 구매가 필수.
Framer
1. 페이지 제한이 딱히 없는 듯함
나의 무료 이용 경험 기준, 페이지 수에 대해 경고가 뜬 적이 없음. 그렇지만 의심스러워서 관련하여 찾아봤지만 명쾌한 답을 얻을 수 없었음. 나의 경험 상 여러개 페이지를 사용하고 퍼블리시 해도 유료 결제 페이지로 랜딩되지 않았으나 관련하여 제약이 있다면 댓글을 부탁.
2. CMS 개수도 100개로 50개인 웹플로우보다 많음
CMS 기능을 잘 활용하면 템플릿은 유지한 채 콘텐츠만 바꾸면 되기 때문에 편리한 부분이 있음. 나는 현재 적극적으로 이용하진 않고 있지만, CMS 아이템 갯수로만 보면 프레이머가 많음. 그러나 이 부분도 프레이머는 CMS 콜랙션을 1개만 무료로 사용가능하고 웹플로우는 20개로 무료 제공하기 때문에 사용에 따라 달라질 수 있음.
자세한 Pricing 내용은 아래 참고
4. 트렌드? : 떠오르는 Framer
이런 저런 유튜브를 보다가 Lottie도 Framer 갈아탔다는 이야기를 들은 적이 있는데, 이유는? 워크 플로우가 굉장히 쉽고, 노코드 빌더 중에서 반응형 디자인을 구현할 때 코딩에 대해 지식이 전무해도 접근할 수 있기 때문.
게다가 Framer는 figma와 작업 방식이 매우 유사하기 때문에 webflow와 같이 다시 배우고 어쩌고 할 필요가 없다. (한 마디로 나처럼.. 오랜 시간.. 웹플로우 대학에 명예학생으로 다니지 않아도댐.. webflow의 러닝커브 그저 헬..)
내가 자주 보던 디자이너 해외 디자이너들은 최근 Framer에 대해 많이 이야기함
그러나 개발 측면에 있어서는 Webflow가 우수하며 많은 사람들을 Webflow를 따라올 서비스는 없다고 말하기도 함. 그러나 Framer는 노코드, low-code라는 컨셉에 적합하며, 디자이너가 디자인에 집중할 수 있게 게 하는 특징이 있음.
이상 나의 힘겨운 웹페이지 빌딩 경험을 바탕으로 써본 Webflow vs Framer 글 끝.
아직 갈 길이 멀지만 혹시나 비교를 원하는 분들을 위해 쓴 글 :)
