Webflow 사용기

부트캠프 과정 중에 기획한 서비스를 랜딩 페이지를 직접 퍼블리싱해 보는 과정이 있었다. 수강생 대부분이 노베이스라서 노코드툴인 Webflow(이하 웹플로우)가 가장 적당한 것 같았다. 예전에 해외에서 잘 나가는 서비스 중에서 사용하는 CSS 라이브러리를 조사한 경험이 있는데 많은 수의 랜딩 페이지를 Framer 혹은 웹플로우로 작업했던 게 기억이 났다. 대략적인 비율이 Framer, 웹플로우, Tailwind, 바닐라 CSS가 각각 1/4 비율이었던 거 같다

 

계정을 만들고 사이트를 작업하는 공간을 보면 왠만한 기능은 제공하는 편이다

• 엘리먼트 추가 - 다양한 HTML 요소들
• 페이지 관리 - 생성한 페이지 목록이며, 기본적으로 에러 및 404 페이지를 제공한다
• 컴포넌트 - 컴포넌트를 생성해서 CMS의 데이터를 기준으로 동적으로 콘텐츠 생성이 가능
• 변수 설정 - 자주 사용하는 사이즈 및 컬러를 설정
• 스타일 선택자 - 사용된 클래스 목록
• 애셋 관리 - 이미지, 로고 등 관리
• CMS - DB같은 개념

각 엘리먼트를 선택하면 CSS가 익숙한 사람이라면 친숙한 용어들이 우측 사이드바에 표시된다

선택자, 레이아웃, 사이즈 등등

 

웹플로우 에디터 사용의 장단점 

웹플로우를 더 깊이 사용하다 보니, 에디터의 장점과 단점이 명확히 드러났다. 우선, 사용자 인터페이스(UI)는 직관적인 편이다. 레이아웃, 간격 조정, 색상 설정 등의 작업은 클릭과 드래그만으로 쉽게 해결된다. 특히, 웹 디자이너 입장에서 주요 구성 요소를 시각적으로 조작할 수 있다는 점은 큰 매력이었다. 하지만 모든 것이 완벽할 수는 없다.

 

CSS를 잘 이해하는 사람이라면 각 스타일 요소에 대한 설정이 편리하겠지만, 초보자라면 무엇이 어떻게 적용되는지 헷갈릴 가능성이 크다. 특히, 특정 스타일이 예상과 다르게 작동할 경우 원인을 파악하는데 시간이 꽤 걸린다. 이는 코드 기반 작업에서는 명시적으로 알 수 있는 부분이지만, 비주얼 에디터에서는 이러한 부분이 눈에 보이지 않기 때문이다.

 

또 다른 단점은 에디터의 조작 방식이 너무 단순화되어 있다는 점이다. 예컨대, 특수한 디자인이나 반응형 디테일을 구현하려 할 때, HTML/CSS 코드를 직접 작성하는 것보다 오히려 비효율적으로 느껴질 수도 있다. 결국 고급 사용자로 갈수록 제한적인 툴의 한계를 체감하게 된다.

 

반응형 디자인 구현

웹플로우에서 반응형 디자인은 기본적으로 지원한다. 뷰포트(Viewport) 별로 디자인을 조정할 수 있는 기능이 탑재되어 있어, 데스크톱, 태블릿, 모바일 각각의 화면 크기에서 스타일을 따로 설정할 수 있다. 반응형 그리드 시스템을 활용하여 레이아웃을 구성하는 것도 직관적이며, 실제 디바이스에서 어떻게 보일지 바로 확인할 수 있어 편리했다.

 

하지만, 이 과정에서도 CSS의 기본 개념을 알고 있는 것이 중요하다. 예를 들어, Flexbox와 Grid 시스템의 작동 방식에 익숙하지 않다면, 디자인을 조정하는 데 애를 먹을 수도 있다. 그나마 장점이라면, 이를 설정하는 UI가 시각화되어 있어 작업 과정에서 실시간으로 피드백을 받을 수 있다는 점이다. 또한, 각 뷰포트에 번거롭게 스타일을 또 추가하지 않아도 기본적으로 상속되는 구조라 불필요한 반복 작업을 줄여준다.

 

반응형 디자인을 처음 접하는 입문자라면 웹플로우에서 제공하는 미리 보기 기능을 통해 모바일 퍼스트 디자인의 중요성을 체감할 수 있을 것이다. 다만, 고급 사용자는 제한된 기능으로 인해 특정한 애니메이션이나 사용자 정의 인터랙션 구현에서 부족함을 느낄 수도 있다.

 

애니메이션 및 인터랙션

웹플로우의 또 다른 강점은 애니메이션과 사용자 인터랙션을 손쉽게 구현할 수 있다는 점이다. 별도의 자바스크립트 코딩 없이도 다양한 애니메이션 효과를 추가할 수 있는데, 대표적으로 스크롤 트리거, 호버 효과, 클릭 이벤트 등이 있다. 이를 조합하면 고급스럽고 다이나믹한 웹사이트를 구현할 수 있다.

 

개인적으로 스크롤 트리거 기능이 가장 흥미로웠다. 예를 들어, 특정 섹션이 화면에 들어왔을 때 이미지가 페이드인(Fade-in)된다거나, 텍스트가 슬라이드하며 등장하는 효과를 설정할 수 있다. 이러한 작업은 타임 라인 기반 UI를 활용하여 직관적으로 구현 가능하다. 하지만 한계를 느낀 부분도 있었다. 복잡한 애니메이션이나 커스텀 이벤트를 설정하려는 경우, 제공되는 기능만으로는 부족한 상황이 생긴다. 결국 자바스크립트로 추가 작업을 해야 하지만, 그럴 바에는 차라리 처음부터 코딩으로 작업하겠다는 생각이 들기도 했다.

 

퍼블리싱 후 느낀 점

최종적으로 랜딩 페이지를 퍼블리싱하는 과정은 놀라울 정도로 간단했다. 웹플로우는 자체적으로 호스팅 기능을 제공하며, 도메인 연결까지 모든 것이 올인원으로 가능하다. 몇 번의 클릭만으로도 내가 만든 페이지가 실제로 웹에 공개되는 경험은 신선했다. 또한, 웹플로우가 생성하는 코드는 깔끔한 편이었고, SEO 최적화를 위한 메타 데이터 설정도 기본 지원된다.

 

다만, 퍼블리싱 후 발견되는 작은 디테일 수정이나 콘텐츠 추가 작업이 꽤 번거로웠다. 특히 클래스 이름이나 요소 구조를 잘못 설계했을 경우, 이후 수정 작업에서 많은 시간을 소모하게 된다. 코드를 직접 수정하는 것보다 직관적이지 않기 때문에, 처음부터 클래스 이름과 전체 구조를 꼼꼼히 설계하는 것이 중요하다.

 

결론: 웹플로우는 누구에게 적합한가?

웹플로우는 디자이너, 특히 코드 작성이 서투른 디자이너를 위한 강력한 도구이다. 시각적인 작업 환경과 직관적인 UI 덕분에 비개발자도 수준 높은 웹사이트를 구현할 수 있다. 또한, 간단한 랜딩 페이지나 포트폴리오 사이트 제작에는 최고의 선택일 것이다.

 

하지만 고급 사용자나 복잡한 기능을 구현하려는 사람들에게는 한계를 느낄 수 있다. 결국 기본적인 HTML/CSS를 이해하고, 더 나아가 자바스크립트를 다룰 수 있는 실력이 있다면 웹플로우를 활용하더라도 한계점에 봉착했을 때 대안을 찾기가 쉬워진다.

 

결론적으로, 웹플로우는 "노코드(no-code)"라는 이름에 걸맞는 사용자 친화적인 툴이지만, "로우코드(low-code)"의 접근 방식이 필요한 도구라는 점을 잊지 말아야 한다. 코드를 몰라도 되는 것이 아니라, 코드를 이해할수록 더욱 강력하게 사용할 수 있는 도구라는 것이 가장 큰 깨달음이었다.