2026-06-11

웹플로우 CMS 사용법: 운영자가 직접 콘텐츠를 관리하는 6단계

글 하나 수정하려고 제작사에 연락하고 계신가요? 에디터 접속부터 발행 예약, SEO 설정까지 — 운영자가 웹플로우에서 직접 콘텐츠를 관리하는 여섯 단계를 따라갑니다.
웹플로우 CMS 사용법을 운영자 관점 6단계로 정리했습니다. 에디터 접속, 새 글 발행, 이미지 교체, 예약 발행, SEO 설정까지 — 직접 운영 가능한 홈페이지가 궁금하다면 올인웹 가이드를 확인하세요.

웹플로우 CMS 사용법: 운영자가 직접 콘텐츠를 관리하는 6단계 | 올인웹 블로그

홈페이지를 만들고 나서도, 글 하나 수정하려면 제작사에 연락해 견적을 받고 일정을 기다리는 경우가 많습니다. 웹플로우는 이 구조를 바꿉니다. 디자인은 템플릿에 고정되고, 운영자는 콘텐츠만 입력하는 방식이기 때문입니다. 제목·본문·이미지를 아무리 바꿔도 레이아웃은 깨지지 않고, 개발자나 디자이너를 거칠 필요도 없습니다. 이 글에서는 개념 설명은 여기까지로 줄이고, 사이트를 전달받은 운영자가 실제로 하게 되는 작업을 여섯 단계로 따라갑니다.

💡

이 가이드는 2026년 기준 웹플로우의 새 인컨텍스트(in-context) 편집 환경을 기준으로 작성했습니다. 기존 Editor는 2026년 8월 4일에 종료되며, 이후에는 실제 라이브 페이지 화면 위에서 직접 수정하는 방식으로 통합됩니다.

1에디터 접속하기

운영을 시작하려면 먼저 사이트에 콘텐츠 편집 권한으로 들어가야 합니다. 디자이너 권한이 아니라 콘텐츠 편집 권한이라는 점이 핵심입니다. 실수로 디자인을 건드릴 수 있는 경로 자체가 차단되어 있습니다.

1

초대 메일 수락

제작사(또는 사이트 관리자)가 보낸 콘텐츠 편집자 초대 메일을 열고 수락 버튼을 누릅니다.

2

웹플로우 계정 생성 후 로그인

초대받은 이메일 주소로 무료 계정을 만들면 됩니다. 별도의 유료 결제는 필요 없습니다.

3

편집 모드 진입

대시보드에서 사이트를 선택해 편집 모드로 들어가면, 실제 운영 중인 페이지가 그대로 보입니다. 화면에 보이는 텍스트와 이미지를 클릭해 바로 수정하는 구조입니다.

웹플로우 편집 화면의 CMS 패널. 좌측에 BLOG Posts, Categories 등 컬렉션 목록이, 우측에 발행된 글 제목 목록이 표시되어 있다.
편집 모드의 CMS 패널 — 좌측 컬렉션 목록에서 BLOG Posts를 선택하면 모든 글이 한눈에 보입니다. (올인웹 블로그 실제 운영 화면)

2새 글 발행하기

블로그 글, 포트폴리오, 공지사항처럼 반복되는 콘텐츠는 모두 컬렉션(Collection)이라는 목록 안에서 관리됩니다. 새 글을 쓰는 일은 이 목록에 항목을 하나 추가하는 일입니다.

1

CMS 패널에서 컬렉션 열기

편집 화면의 CMS 메뉴에서 Blog Posts 같은 대상 컬렉션을 선택합니다.

2

New Item으로 새 항목 생성

제작 단계에서 설계된 입력 폼이 열립니다. 운영자는 빈칸을 채우기만 하면 됩니다.

3

제목 · 요약 · 카테고리 입력

필드마다 역할이 정해져 있습니다. 제목은 페이지 상단 큰 글씨로, 요약은 목록 미리보기로, 카테고리는 필터로 자동 연결됩니다.

4

본문 작성

리치텍스트 필드에서 소제목, 단락, 이미지, 인용구를 넣으며 문서 편집기처럼 작성합니다. 어떤 서식을 쓰든 사이트의 디자인 시스템이 자동 적용됩니다.

5

Publish로 발행

발행 즉시 글 상세 페이지가 자동 생성되고, 블로그 목록에도 자동으로 추가됩니다. 페이지를 따로 만들 필요가 없습니다.

✏️

슬러그(주소)는 영문으로 직접 입력하세요. 제목이 한글이면 주소가 자동 생성되지 않거나 의미 없는 값이 됩니다. 예: 제목이 "웹플로우 CMS 사용법"이라면 슬러그는 webflow-cms-guide처럼 영문 소문자와 하이픈으로 지정합니다.

3기존 글 수정하기

이미 발행된 글을 고치는 방법은 두 가지입니다. 상황에 따라 편한 쪽을 쓰면 됩니다.

방법 A — 페이지에서 직접 수정

사이트를 둘러보다 오탈자를 발견했을 때 가장 빠른 방법입니다. 편집 모드에서 해당 글 페이지로 이동해 고치고 싶은 문장을 클릭하면 그 자리에서 바로 수정됩니다. 보이는 그대로 고치는 방식이라 별도 학습이 필요 없습니다.

방법 B — 컬렉션 목록에서 찾아 수정

글이 많을 때는 CMS 패널에서 컬렉션을 열고 검색으로 해당 항목을 찾아 수정하는 편이 빠릅니다. 발행된 글과 초안이 한 목록에서 관리되므로 전체 현황을 보며 작업할 수 있습니다.

웹플로우 CMS 항목 편집 화면. 제목, 슬러그, 요약, 카테고리, 날짜, 썸네일 이미지, 본문 필드가 폼 형태로 나뉘어 있다.
컬렉션에서 글을 열면 나타나는 편집 화면 — 제목·슬러그·요약·썸네일·본문이 필드별로 분리되어 있어, 필요한 부분만 골라 수정할 수 있습니다.

어느 방법이든 수정 후 Publish를 누르면 변경 사항이 라이브 사이트에 반영됩니다. 본문을 아무리 바꿔도 레이아웃이 유지되는 이유는, 디자인이 콘텐츠와 분리된 템플릿에 고정되어 있기 때문입니다.

4이미지 교체하기

배너 이미지를 시즌마다 바꾸거나, 대표 이미지를 새 사진으로 교체하는 일은 운영에서 가장 자주 발생하는 작업입니다.

1

교체할 이미지 클릭

편집 모드에서 이미지를 선택하면 교체(Replace) 옵션이 나타납니다.

2

새 이미지 업로드

업로드하면 기존 이미지가 있던 자리와 비율에 맞춰 자동 배치됩니다.

3

대체 텍스트(alt) 입력

이미지가 무엇인지 한 문장으로 적어둡니다. 검색엔진과 스크린리더가 이미지를 이해하는 단서가 됩니다.

🖼️

업로드 전 이미지 권장 기준 — 형식은 WebP 또는 JPG, 가로 폭은 1600px 내외, 용량은 500KB 이하. 스마트폰 원본 사진을 그대로 올리면 페이지 속도가 느려질 수 있으니 한 번 줄여서 올리는 습관이 좋습니다.

5초안 저장과 발행 예약

모든 글을 쓰자마자 발행할 필요는 없습니다. 웹플로우는 작성 상태를 세 가지로 구분해 관리합니다.

상태의미이런 때 사용
Draft (초안)사이트에 노출되지 않는 작성 중 상태내부 검토 전, 작성 중인 글
Staged (발행 대기)저장은 완료, 다음 Publish 때 반영여러 글을 모아 한 번에 발행할 때
Scheduled (예약)지정한 날짜·시간에 자동 발행이벤트 공지, 정기 콘텐츠 발행

특히 예약 발행은 콘텐츠를 주기적으로 운영하는 팀에 유용합니다. 한 주 분량의 글을 미리 작성해 요일별로 예약해두면, 발행을 위해 매번 접속할 필요가 없습니다.

6SEO 설정 입력하기

글을 발행할 때 검색 노출 설정까지 함께 입력하는 습관이 중요합니다. 글마다 1분이면 끝나는 작업이지만, 누적되면 검색 유입의 차이를 만듭니다.

1

Title 태그 입력

검색 결과에 표시되는 제목입니다. 핵심 키워드를 앞쪽에 두고 50자 이내로 작성합니다.

2

Meta Description 입력

검색 결과의 미리보기 문장입니다. 140자 이내로, 클릭할 이유가 담기게 작성합니다.

3

OG 이미지 확인

카카오톡·슬랙 등에 링크를 공유할 때 보이는 썸네일입니다. 대표 이미지 필드가 연결되어 있는지 확인합니다.

4

발행 후 실제 화면 확인

발행된 페이지를 직접 열어 제목, 이미지, 본문이 의도대로 보이는지 마지막으로 점검합니다.

여섯 단계보다 중요한 한 가지 — 설계

여기까지의 과정이 간단해 보였다면, 그것은 웹플로우가 쉬워서라기보다 운영을 전제로 CMS 구조가 설계되었기 때문입니다. 필드가 어떻게 나뉘어 있는지, 어떤 항목이 자동으로 연결되는지는 모두 제작 단계에서 결정됩니다. 설계가 잘못된 사이트는 같은 웹플로우라도 운영자가 손댈 수 없는 사이트가 됩니다.

올인웹은 제작 단계에서부터 "전달 후 운영자가 무엇을 직접 바꾸게 될 것인가"를 기준으로 CMS 구조를 설계합니다. 지금 운영 중인 사이트가 글 하나 고치기 어려운 구조라면, 또는 새로 만들 사이트를 직접 운영하고 싶다면 아래에서 편하게 문의해 주세요.

웹플로우 CMS
콘텐츠 운영
인컨텍스트 편집
홈페이지 유지보수
웹플로우 사용법

유지보수가 편한 홈페이지,
처음부터 다르게 설계됩니다

제작 이후에도 직접 운영할 수 있는 사이트를 고민하고 계신가요?

상담 · 견적 요청하기

* 본 글은 올인웹 블로그 포스트 초안입니다. Webflow BLOG Posts 컬렉션의 Post(RichText) 필드에 그대로 옮겨 발행할 수 있도록 디자인 시스템 토큰(브랜드 컬러 #1dd7d7 · Pretendard · radius/spacing)을 기준으로 구성했습니다.

웹사이트가 달라지면,
비즈니스가 달라집니다.

Trusted by 500+ clients across industries