무슨 노코드툴을 사용해볼까? - Webflow편

bing으로 만든

ChatGPT의 등장으로 개발자 없이 웹사이트나 앱을 개발하는 추세가 점점 빨라지고 있습니다.

이러한 추세 속에서 노코드툴은 많은 사람들이 빠르고 쉽게 웹사이트를 구축할 수 있도록 도와줍니다.

그 중에서도 Webflow(웹플로우)는 유용한 노코드툴 중 하나로, 많은 웹 디자이너나 비개발자들이 자유롭게 웹사이트를 제작하고 관리하고자 사용하고 있습니다. 

 

이번 포스트에서는 Webflow의 장단점, 비용, 사용 경험 등에 대해 살펴보도록 하겠습니다.

 

장점

1) 디자인 자유도가 높으면서 반응형에 최적화 되어 있음
  : 그래픽 기반으로 HTML, CSS로 할 수 있는 대부분의 것들을 쓸 수 있음

  : 자동으로 반응형 웹디자인을 제공하여 자동으로 모바일 환경에서도 적절한 레이아웃으로 변환

2) 별다른 작업을 하지 않아도 SEO 최적화가 매우 잘 되어있음
  : 글라이더, 소프터, 버블에 대비해서도 SEO가 좋다는 평가가 많음

  : 단, $14~18/개월 정도의 과금 필요

3) 템플릿/플러그인이 활성화 되어 있음

  : 노코드툴 중에서도 오래되었기 때문에 찾아보면 이미 만들어진 수많은 유/무료 템플릿과 플러그인이 존재

  : 플러그인을 사용해 개발자가 없어도 기능 추가 가능

4) 호스팅, SSL 인증서, 백업 등 기본적인 기능이 모두 제공

  : 자동 백업을 제외하고도 원하는 상태에서 백업을 추가하여 버전 관리가 용이함

  : 웹사이트 제작 후, 호스팅 서비스를 별도로 찾을 필요가 없음

 

 

단점

1) 노코드툴 중에서는 다루기 어려운 축에 속함

  : 디자인 도구 및 개발 지식이 필요하기 때문에 처음 사용하는 사람들에게는 학습 곡선이 높은 편

  : Glide, Softr 등이 초보 수준이라면 약간 더 어렵고 복잡함

2) 데이터베이스 CRUD 기능 구현이 어렵고 불편함

  : CMS정도만 제공하여 데이터베이스 기능 구현이 어렵기 때문에 Softr 대비해서 데이터 다루기가 어려움

  : 다만 자체 멤버십, 데이터 로직 기능에 대한 베타 테스트를 진행하고 있으므로 제약이 줄어들 수 있음

3) 온라인 결제 시스템(Ecommerce) 기능이 사실상 쓰기 어려움

  : 연동된 Stripe라는 서비스는 국내에서 사용이 어려움

  : 하지만 결제 시스템 도입이 아예 불가능한 것은 아님

 

 

비용

사이트 생성 갯수, 코드 추출 등의 계정 전체에 해당하는 유료 플랜이 존재하고,

사이트 별로 어떤 데이터 베이스를 사용할지, 어떤 유료 기능을 추가할지에 따른 유료 플랜이 존재합니다.

즉, 계정별, 사이트별로 나뉘어 유료 플랜 구매가 필요하고, 타 노코드툴에 비해 가격이 높은 편입니다.

Webflow 가격 확인

 

 

결론

물론 사람마다 편한 방식이 있고, 사이트 성격마다 적합한 것이 다를 수 있지만 결론을 내려보자면

Webflow는 학습 곡선이 높고 비용이 높다는 단점이 있지만, 디자인 자유도가 높고 반응형 웹디자인, CMS 기능 등이 제공되기 때문에 웹사이트 제작에 어려움을 겪는 디자이너나 비개발자들에게 매우 유용한 도구입니다.

만약 디자인 지식이 있는 경우, Webflow는 더욱 많은 가능성을 열어줄 것입니다.

 

 

 

도움이 될만한 사이트

1. Webflow University

- Webflow에서 제공해주는 수업 사이트 (영문)

- 수업 외에도 QnA, 커뮤니티 등 다양한 소스가 존재

- 이 중에서 Webflow 101 crash course가 처음인 사람에게 가장 유용하다고 판단되는 수업

Learn web design with free video courses and tutorials | Webflow University

 

2. Made in Webflow

- 위 사이트에서 Webflow로 만든 사이트들을 웹플로우에서 모아둠

- 사이트에서 'Cloneable sites only'를 활성화시키면 템플릿 복제까지 가능

- html 기본 컴포넌트를 정리해둔 템플릿 중 'Client-First'가 괜찮은 편이고, 시기에 따라 업데이트도 잘 이뤄짐

The best top websites - Webflow

 

3. Finsweet

- Webflow에서 가장 큰 에이전시인만큼 많은 템플릿을 보유하고 있고, 디자인 확장성이 좋다는 평가를 받음

- 확장프로그램을 깔면 Webflow에서 원하는 템플릿을 바로 적용 가능

- html 요소별 디자인 작업을 하기 쉬운 스타일 가이드가 유용함

Finsweet Extension for Webflow

 

4. Flowbase

- Webflow, Figma를 기반으로 활동하는 무료 컴포넌트 라이브러리

- 확장프로그램을 깔면 Webflow에서 원하는 컴포넌트를 바로 적용시킬 수 있음

Flowbase Chrome Extension

 

5. Relume Library

- 가입 후, 'Browse Components'에서 원하는 컴포넌트를 선택해 복사하면 Webflow에서 바로 붙여넣기 가능

World's Largest Webflow Component Library | Relume Library

 

6. Memberstack

- Webflow에 멤버십, 결제 시스템을 추가할 수 있는 플러그인

- 유료 플러그인이나 런칭 전에는 무료로 사용할 수 있도록 나와있음.

Webflow Memberships | Memberstack

 

7. Webflow Forum

- Webflow에서 제공해주는 포럼 사이트 (영문)

Webflow Forum