brunch

You can make anything
by writing

C.S.Lewis

by 이은빈 Sep 20. 2023

웹플로우(Webflow)를 배우는 당신을 위한 가이드

연동툴 리스트

안다. 웹플로우(Webflow), 노코드툴이라 쉬울 줄 알았는데 정말 어렵다.

예비 PM 분들을 멘토링하며, 생각보다 학습곡선이 높아 힘들어하시는 분들이 많다.

실제 웹플로우 하나 가지고는 유저테스팅을 진행하기도, 웹 앱을 만들기도 어려운데

'연동'툴을 몰라서다. 


데이터를 대량으로 업데이트하거나

코딩이 필요한 애니메이션을 구현하거나,

웹페이지 스타일 정보를 추출하는 등


툴(Tool=도구)만 잘 알면 언제든지 사용 가능한

리스트를 여기에도 공유하고자 한다.




연동이 가능한 서비스   

Powerimporter: Zapier 없이, CMS 엑셀용 데이터를 옮기거나 Airtable과 실시간 연동. 또 Airtable의 대용량 데이터를 Webflow에 자동으로 가져올 수도 있다.

Formly: 설문조사 구현이 가능하다.

Finsweet attribute: 고난도의 코딩이 필요한 애니메이션을 단번에 구현해 낼 수 있다.

Jetboost: CMS용 고급 페이지네이션 구현해 낼 수 있다. 또 즐겨찾기, 찜하기 기능을 통한 유저만의 마이페이지를 만들어줄 수도 있다.

Flowradar: 코드 구현이 필요한 고난도 애니메이션 컴포넌트를 구현할 수 있다.

Tally: 사진 업로드가 필요한 설문지 Form (블로그 포스팅) 등을 삽입하고 싶을 때



크롬 확장 프로그램 (무료)   

Finsweet: 무료 아이콘(SNS용 포함)과 배지를 가져갈 수 있다.

Wappalyzer: 웹사이트가 어떤 노코드 툴로 만들어졌는지, 결제시스템은 어떤 연동 툴을 사용하는지, 개발언어는 무엇을 사용하여 만들었는지 등을 한눈에 볼 수 있다.

CSS Peeper: 웹 페이지 스타일 정보 추출이 가능하다. 스페이싱, 마진, 백그라운드 컬러, 폰트까지 전부 보인다.

Finsweet Scrollbar Styler for Webflow: 웹플로우 스크롤바를 스타일링하고 기능적으로 가능하게 한다.

CodeMode: 웹플로우 코드를 편집할 수 있는 에디터 기능을 한다.

ModKit: 코드 에디터(Code editor) 사용 도구 (모바일 버전 확인 가능)이다.




컴포넌트 라이브러리

Webflow Community

Relume

Flowbase


데이터 분석 툴 연동 가이드  

Google Analytics: 유저의 행동을 분석하기 위해 사용합니다. 이벤트는 자동으로 생성된다.

Google Tag Manager: 유저가 지나가는 이벤트를 분석하기 위해 사용한다.




인스타그램 @workers_without_border를 통해 웹플로우(Webflow) 스토리와 정보를 나누고 있으니, 방문해봐도 좋다.




매거진의 이전글 고객의 90%는 자신이 원하는 홈페이지를 모른다
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari