TL;DR
- 웹플로우 사용법의 관문은 디자이너 화면이다. 박스 모델과 클래스를 이해해야 원하는 배치가 나온다.
- 만든 결과가 깨끗한 HTML과 CSS로 나오고 ZIP으로 내보낼 수 있다. 다른 노코드 도구와 갈리는 지점이다.
- 게시는 스테이징과 프로덕션으로 나뉜다. 운영 중인 사이트를 고칠 때 바로 반영하지 않고 확인한 뒤 올린다.
웹플로우 사용법이 어렵다는 말이 나오는 이유는 분명하다.
이 도구는 드래그 앤 드롭 빌더처럼 보이지만 실제로는 CSS를 시각적으로 다루는 도구다.
여백이 왜 안 먹는지, 요소가 왜 저기로 밀리는지 이해하려면 결국 박스 모델을 알아야 한다.
그 대가로 얻는 게 있다.
공식 자료는 지저분한 인라인 클래스 없이 W3C 표준을 따르는 시맨틱 HTML과 CSS를 만들어준다고 설명하고, 결과물을 HTML·CSS·이미지 묶음으로 내보낼 수 있다고 밝힌다.
다른 노코드 도구가 자기 플랫폼 안에 결과물을 가두는 것과 다른 점이다.
아래는 처음 열었을 때 무엇부터 봐야 하는지, 게시가 어떻게 나뉘는지, 무료 학습 자료를 어떻게 쓰는지를 공식 문서 기준으로 정리한 것이다.
디자이너 화면의 구조
Webflow에 접속해 사이트를 열면 나오는 편집 환경이 디자이너다.
여기서 페이지와 브랜치, 로케일을 넘나들며 만들고 디자인한다.
익혀야 할 개념은 셋이다.
- 박스 모델: 요소가 차지하는 공간이 어떻게 계산되는지. 여백과 안쪽 여백, 테두리가 어떻게 쌓이는지 모르면 배치가 계속 어긋난다.
- 클래스: 스타일을 요소에 직접 주는 게 아니라 클래스에 준다. 같은 클래스를 붙인 요소는 함께 바뀐다. 이걸 이해하면 수정이 빨라지고, 모르면 요소마다 값을 따로 넣게 된다.
- 컴포넌트: 반복되는 묶음을 하나로 만들어 여러 곳에서 쓴다. 헤더나 카드처럼 사이트 전반에 나오는 요소가 대상이다.
접근 가능한 도구는 역할에 따라 다르다.
검토자와 콘텐츠 편집자는 각각 다른 화면을 본다.
팀으로 쓸 때는 역할부터 정하는 게 순서다.
웹플로우 사용법, 첫 페이지를 올리는 순서
- 계정을 만들고 사이트를 하나 생성합니다. 템플릿에서 시작할지 빈 상태에서 시작할지 고릅니다.
- 지원 브라우저와 화면 해상도를 확인합니다. 공식 문서가 시작 전 확인 항목으로 안내합니다.
- 페이지 구조부터 잡습니다. 섹션과 컨테이너로 큰 틀을 만든 뒤 안을 채우는 순서가 덜 헤맵니다.
- 클래스에 이름을 붙이며 스타일을 줍니다. 이름 규칙을 처음에 정해두면 나중에 정리 비용이 줄어듭니다.
- 반응형을 확인합니다. 데스크톱에서 잡은 배치가 태블릿과 모바일에서 어떻게 되는지 봅니다.
- 반복 콘텐츠가 있으면 CMS 컬렉션을 만듭니다. 블로그 글이나 사례 목록이 여기 해당합니다.
- 스테이징에 게시해 확인합니다.
- 문제가 없으면 프로덕션으로 게시합니다.
3번을 건너뛰고 요소부터 놓으면 나중에 구조를 다시 잡게 된다.
큰 틀을 먼저 만드는 순서가 결국 빠르다.
게시가 두 단계로 나뉜다
운영 중인 사이트를 다룰 때 중요한 부분이다.
Webflow는 스테이징과 프로덕션을 별도의 게시 환경으로 둔다.
작업한 내용을 스테이징에 올려 확인하고, 문제가 없을 때 프로덕션으로 보낸다.
실수로 반쯤 만든 화면이 실제 방문자에게 노출되는 상황을 막는 구조다.
브랜치도 함께 쓴다.
여러 사람이 같은 사이트를 고칠 때 각자 브랜치에서 작업하고 합치는 방식이다.
실시간 협업도 지원해서 팀원이 지금 어느 부분을 만지고 있는지 화면에서 보인다.
무료 학습 자료를 쓰는 법
Webflow가 다른 도구와 다른 점 하나가 교육 자료의 양이다.
공식 대학이 별도로 운영되고 강의가 무료로 열려 있다.
처음이라면 기초 과정부터 보는 게 순서다.
사전 경험 없이 들을 수 있는 입문 과정이 20분대로 준비돼 있다.
목표별로 진입점도 나뉘어 있어서, 팀 온보딩·기존 사이트 콘텐츠 관리·레이아웃과 박스 모델 학습·검색 최적화 중에서 골라 들어갈 수 있다.
최근에는 AI 관련 과정도 올라와 있다.
CMS 구조를 AI 에이전트와 함께 계획하는 34분짜리 과정이 그것이다.
새로 만들든 기존 콘텐츠를 옮기든 적용되는 내용이다.
워드프레스에서 옮기려는 경우
도움말 센터에 워드프레스에서 Webflow로 사이트를 옮기는 문서가 따로 있다.
실제로 자주 발생하는 전환이라는 뜻이다.
옮길 때 챙길 항목이 몇 가지 있다.
콘텐츠는 CMS 컬렉션으로 구조를 다시 잡아야 한다.
워드프레스의 글과 카테고리를 그대로 옮기는 게 아니라, 어떤 필드가 필요한지 다시 설계하는 작업이다.
주소 체계도 확인 대상이다.
기존 글의 URL이 바뀌면 검색 순위가 흔들리므로 리다이렉트를 걸어야 한다.
플러그인으로 붙여둔 기능이 있다면 대체 수단을 먼저 찾아두는 편이 안전하다.
개발자용 확장과 AI 대응
시각 편집만으로 부족할 때 쓰는 경로가 있다.
사이트 전체나 특정 페이지, 특정 요소에 커스텀 코드를 넣을 수 있다.
개발자 플랫폼도 별도로 제공된다.
최근에는 MCP 관련 항목이 새 기능으로 표시돼 있어서, AI 도구에서 Webflow 프로젝트를 다루는 경로가 열려 있다.
검색 대응 쪽에서는 답변 엔진 최적화를 앞세운다.
검색 결과 목록이 아니라 AI가 요약해 답하는 환경에서 사이트가 인용되게 만든다는 방향이고, 관련 진단 도구를 별도로 제공한다.
한계와 안 맞는 경우
- 빠르게 페이지 하나만 만들려는 경우. 배워야 할 개념이 있어서 처음 몇 시간이 든다.
- 복잡한 애플리케이션. 로그인과 데이터 처리가 얽힌 서비스에는 맞지 않는다.
- 코드를 완전히 통제해야 하는 경우. 내보내기가 되지만 CMS와 호스팅에 묶인 기능은 함께 나오지 않는다.
- 혼자 짧게 쓰고 말 사이트. 학습 비용 대비 이득이 나오지 않는다.
제품 만들 때 가져갈 설계
첫째는 결과물의 품질을 전면에 내세운 점이다.
노코드 도구의 통상적 약점이 지저분한 출력인데, 표준을 따르는 코드를 만든다는 걸 기능 설명의 앞자리에 뒀다.
카테고리의 공통 약점을 자기 강점으로 바꾼 사례다.
둘째는 교육을 제품의 일부로 만든 결정이다.
배우기 어려운 도구라는 약점을 문서 대신 강의로 메웠다.
학습 곡선이 가파른 제품이라면 참고할 만하다.
셋째는 역할별로 보이는 도구를 다르게 한 방식이다.
콘텐츠만 고치는 사람에게 디자이너 전체를 보여주면 겁을 먹는다.
필요한 것만 보여주면 같은 제품이 여러 사용자층을 감당한다.
실행 체크리스트
- 만들려는 사이트의 페이지 수와 반복 콘텐츠를 먼저 적습니다.
- 무료 입문 과정을 들어 박스 모델과 클래스 개념을 잡습니다.
- 섹션과 컨테이너로 구조부터 만듭니다.
- 클래스 이름 규칙을 처음에 정합니다.
- 데스크톱 배치 직후 모바일을 확인합니다.
- 반복 콘텐츠는 CMS 컬렉션으로 설계합니다.
- 팀으로 쓴다면 역할과 권한을 먼저 나눕니다.
- 스테이징에서 확인한 뒤 프로덕션에 게시합니다.
- 워드프레스에서 옮긴다면 URL 리다이렉트 계획을 함께 세웁니다.
자주 묻는 질문
웹플로우는 코딩을 몰라도 쓸 수 있나요
코드를 쓰지 않고 만들 수 있지만 CSS 개념은 알아야 합니다.
박스 모델과 클래스를 이해하지 못하면 원하는 배치가 나오지 않습니다.
공식 대학의 무료 입문 과정이 이 부분을 다룹니다.
만든 사이트의 코드를 내보낼 수 있나요
HTML과 CSS, 이미지를 묶음 파일로 내보낼 수 있다고 공식 기능 설명에 명시돼 있습니다.
다만 CMS와 호스팅에 연결된 기능은 함께 나오지 않습니다.
스테이징과 프로덕션은 어떻게 다른가요
스테이징은 확인용 환경이고 프로덕션은 실제 방문자가 보는 사이트입니다.
작업 내용을 스테이징에 먼저 올려 확인한 뒤 프로덕션으로 게시하는 순서를 권합니다.
워드프레스 사이트를 옮길 수 있나요
도움말 센터에 이전 문서가 별도로 있습니다.
콘텐츠를 CMS 컬렉션 구조로 다시 설계해야 하고, 기존 URL이 바뀌면 리다이렉트를 걸어야 검색 순위 손실을 줄일 수 있습니다.
