Webflow는 코딩 없이 프로페셔널한 웹사이트를 만들 수 있는 노코드 웹 빌더입니다. 디자이너와 마케터 사이에서 폭발적인 인기를 얻고 있지만, 처음 접하면 "어디서부터 시작해야 할지" 막막할 수 있습니다. 이 글에서 가입부터 첫 사이트 퍼블리시까지 차근차근 안내합니다. Step 1 — 가입 및 프로젝트…
Webflow는 코딩 없이 프로페셔널한 웹사이트를 만들 수 있는 노코드 웹 빌더입니다. 디자이너와 마케터 사이에서 폭발적인 인기를 얻고 있지만, 처음 접하면 “어디서부터 시작해야 할지” 막막할 수 있습니다. 이 글에서 가입부터 첫 사이트 퍼블리시까지 차근차근 안내합니다.
Step 1 — 가입 및 프로젝트 생성
Webflow 사이트에서 무료 계정을 만듭니다. 무료 플랜으로 2개의 프로젝트를 만들 수 있으며, webflow.io 서브도메인으로 퍼블리시할 수 있습니다. 대시보드에서 “New Project”를 클릭하고, 빈 프로젝트 또는 템플릿을 선택합니다. 초보자라면 템플릿으로 시작하는 것을 추천합니다.
Step 2 — 에디터 인터페이스 이해
Webflow 에디터는 크게 4영역으로 나뉩니다. 좌측 패널은 요소 추가(섹션, 컨테이너, 텍스트, 이미지 등). 캔버스는 실제 웹사이트를 보면서 편집하는 영역. 우측 패널은 스타일(CSS) 설정. 상단 바는 반응형 프리뷰, 인터랙션, 퍼블리시 버튼이 있습니다.
Step 3 — 레이아웃의 핵심, Box Model
Webflow를 제대로 사용하려면 CSS의 Box Model 개념을 이해해야 합니다. 모든 요소는 상자(Box)이고, 상자 안에 상자를 넣어 레이아웃을 구성합니다. Section → Container → Div Block → 콘텐츠 순서로 중첩합니다.
Flexbox와 Grid 레이아웃을 마우스 클릭만으로 설정할 수 있어, 코드 없이도 복잡한 레이아웃을 구현할 수 있습니다. 반응형 디자인도 상단의 디바이스 아이콘을 클릭해 각 화면 크기별로 개별 설정 가능합니다.
Step 4 — CMS로 동적 콘텐츠 관리
정적 페이지만 만든다면 Webflow의 진가를 절반만 사용하는 것입니다. CMS(Content Management System) 기능으로 블로그 글, 제품 목록, 팀 멤버 소개 등 반복 콘텐츠를 데이터베이스로 관리할 수 있습니다.
CMS Collection을 생성하고, 필드(제목, 본문, 이미지, 카테고리 등)를 정의한 후, Collection Page 템플릿을 디자인하면 됩니다. 새 콘텐츠를 추가할 때마다 자동으로 페이지가 생성됩니다.
Step 5 — 인터랙션과 애니메이션
Webflow의 Interactions 기능으로 스크롤 애니메이션, 호버 효과, 페이지 로드 애니메이션을 코드 없이 추가할 수 있습니다. 트리거(스크롤, 클릭, 호버)와 액션(이동, 회전, 투명도 변경)을 타임라인으로 설정하는 방식입니다.
Step 6 — 퍼블리시 및 커스텀 도메인
디자인이 완성되면 상단의 “Publish” 버튼으로 즉시 웹에 공개할 수 있습니다. 무료 플랜은 *.webflow.io 도메인을, 유료 플랜에서는 커스텀 도메인을 연결할 수 있습니다.
SEO 설정도 놓치지 마세요. 각 페이지의 메타 타이틀, 디스크립션, OG 이미지를 설정하고, 사이트맵은 자동 생성됩니다.
Webflow + Make.com 자동화 팁
Webflow 폼 제출을 Make.com 웹훅으로 연결하면, 리드 수집 → CRM 저장 → 자동 응답 이메일 → 슬랙 알림까지 한 번에 자동화할 수 있습니다. Webflow CMS에 새 콘텐츠가 추가될 때 SNS 자동 포스팅도 가능합니다.
