노코드 웹빌더 정리 + 비교#1: Webflow VS Framer

오늘은 노코드 웹빌더 서비스인 Webflow와 Framer를 비교해보겠습니다.

우선 제가 Webflow에 대한 경험이 많고, Framer에 대한 경험이 더 적어서 정확한 비교가 어려울 수 있다는 점을 전재하고 시작하겠습니다.

webflow, framer 소개

webflow와 framer는 모두 노코드로 웹사이트를 말들 수 있는 서비스입니다.

두 서비스 모두 코딩에 대한 지식없이도 드래그 앤 드롭 인터페이스를 통해서 손쉽게 UI를 구성할 수 있습니다.

클릭 몇 번으로 만들어놓은 프로젝트를 배포할 수 있으며, 개별 도메인과도 연결이 가능합니다.

인터렉티브 웹사이트를 위한 애니메이션도 클릭 몇 번으로 구현할 수 있습니다.

블로그와 같이 컨텐츠를 데이터베이스로 관리하고 업로드할 수 있는 CMS(Content Management System)까지 제작할 수 있기 때문에 랜딩페이지와 같이 정적인 페이지뿐만이 아니라 다양한 용도로 사용될 수 있는 서비스입니다.

Framer

Webflow

(기본적으로 두 서비스 모두 왼쪽 패널에서 요소를 더하고, 오른쪽 패널에서 스타일을 지정하는 방식)

개발자 친화적 VS 디자이너 친화적

framer에서 사용하는 용어나 방식들은 피그마를 쏙 빼닮았습니다. 심지어는 대부분의 단축키가 피그마와 유사하다고 합니다. 그래서 framer는 디자이너 친화적인 노코드 웹 빌더라고 부릅니다.

반면에 webflow에서 사용하는 용어나 방식들은 개발에서 사용하는 용어와 방식을 그대로 가져왔습니다.

그렇기에 webflow를 개발자 친화적인 노코드 웹 빌더라고 부릅니다.

학습속도

피그마를 이미 다루고 있는 분들에게는 framer에 대한 학습속도가 적다고 합니다.

webflow에는 일부의 추가적인 학습이 필요합니다.

개인적인 경험으로는 피그마를 이미 다루고 있으시다면 두 가지 서비스 모두 빠르게 배워서 사용하실 수 있습니다.

인터렉션과 애니메이션

webflow와 framer 모두 강력한 인터렉션과 애니메이션을 제공합니다.

framer에서는 기본적인 효과와 일부 커스텀이 가능하지만,

webflow는 더 자유롭고 복잡한 인터렉션을 사용할 수 있습니다.

CMS(Content management System)

블로그와 쇼핑몰 같은 CMS를 두 서비스 모두 지원히지만, 아직까지는 Framer보다 Webflow가 제공하는 기능이 더 많다고 합니다. 해외에서는 webflow를 통해서 stripe와 같은 결제 시스템을 붙이는 것까지 가능합니다.

반면에 Framer도 CMS를 관리하는 서비스를 사용하는 것이 충분히 가능합니다.

최근 Framer의 커뮤니티의 응집력이나 성장속도가 빨라서 앞으로 많은 기대를 해봅니다.

마무리

이번 포스팅에서는 Webflow와 Framer의 공통점과 차이점에 대해서 알아봤습니다.

저는 Webflow를 주로 사용한 입장에서도 다룬 것이라서 Framer를 사용하신 분들의 의견이 더 궁금합니다.

다음 포스팅에서는 더 다양한 노코드 웹빌더를 소개드리겠습니다. 감사합니다!