【무료】Webflow CMS 완전 이해 가이드

Webflow CMS

Webflow CMS란 같은 디자인의 페이지를 양산할 수 있는 Webflow의 기능입니다. 블로그나 뉴스 등 정기적으로 갱신하는 페이지 작성에 사용하며, Title 태그·구조화·브레드크럼 같은 SEO 최적화도 자동 작성할 수 있습니다.

이번에는 이런 궁금증을 해결합니다.

Webflow의 CMS를 해설합니다. Webharu에서도 사용 중인 CMS 테크닉과, 반대로 Webflow CMS에서 “불편하다”고 느끼는 점 등 실제 경험에 기반해 소개합니다.

그럼 Webflow CMS로 할 수 있는 것을 살펴봅시다.

Webflow CMS 완전 이해 가이드【Webflow CMS로 할 수 있는 것】

Webflow CMS로 할 수 있는 것을 리스트로 정리했습니다.

• 블로그·뉴스 등 작성
• HTML 태그에 맞는 웹 제작
• 자동 간이 SEO 작성
• 브레드크럼 자동 작성
• 글 안에 YouTube 임베드
• 글마다 필자 표기·필자 등록
• 장르 분류·장르별 색 구분

등이 주로 쓰는 기능입니다. 위 기능을 조금 더 자세히 해설합니다.

Webflow CMS로 블로그·뉴스를 만들 수 있다

CMS란 간단히 말해 “같은 디자인의 페이지를 양산하는 기능”입니다. 정기적으로 갱신하는 블로그나 뉴스 페이지를 만드는 데 사용합니다. Webflow에서는 자유롭게 CMS를 구축할 수 있어, 개인에 맞춘 군더더기 없는 CMS를 만들 수 있습니다.

Webflow CMS는 3가지 공정으로 도입 가능

Webflow CMS는 “CMS 필드”“CMS 페이지 디자인”“디자인과 CMS 필드의 연계”라는 3가지 공정으로 도입할 수 있습니다.

여러 CMS 필드를 연계해 고도의 CMS 운용 가능

장르 분류, 필자 등록 등은 다른 CMS를 만들어 링크로 연결하면 사용할 수 있습니다. CMS는 여러 개 쓰는 것이 정석입니다. 장르별 색 구분, 필자 등록, 추천 글 표시 등을 하면 효율뿐 아니라 SEO 최적화도 쉬워집니다.

Webflow CMS의 불편한 점·할 수 없는 것【매일 쓰기에 보이는 작은 버그】

Webflow에는 고도의 기능이 많지만 100% 만족은 아닙니다. 도입 전에 주의해야 할 사항을 실사용 경험에서 소개합니다.

• 【버그】글자가 반영되지 않을 때가 있다
• 슬라이더에 CMS를 쓸 수 없다
• 목차를 쉽게 만들 수 없다
• 코드 내보내기 시 별도 대응 필요
• CMS에 WebP 변환이 없다

【버그】CMS에서 직접 글을 쓰면 가끔 버그가 난다

Webflow CMS에서 직접 글을 쓰다 보면 가끔 저장이 안 되거나 글자가 반영되지 않을 때가 있습니다. 버그가 나면 리로드로 해결되지만 저장은 되지 않습니다. 부지런한 저장과, 다른 메모 앱 등에서 글을 쓴 뒤 붙여넣는 것이 최선의 대책입니다.

버그가 나기 쉬운 타이밍(자체 조사)

링크 사용 시, 리스트 사용 시, 이미지 삽입 후에는 바로 저장합시다. H태그 사용에서는 버그가 없지만 그 외 기능을 쓰면 10% 정도의 확률로 버그가 납니다. 겉보기에 멀쩡해도 저장이 안 된 경우도 있었습니다. Webflow CMS는 H태그나 링크 태그 정보를 그대로 읽어 주므로 메모에서 작성→붙여넣기가 잘 통합니다.

슬라이더에 CMS를 쓸 수 없다

Webflow에는 슬라이더 기능이 표준으로 있지만 CMS 이미지를 슬라이더에 쓸 수는 없습니다. 커스텀 코드를 사용한 CMS 슬라이더가 템플릿으로 공유되어 있으니 그것으로 대응 가능합니다. Webharu에서는 더 간단한 방법으로 슬라이더 대신 스크롤로 보는 방식을 쓰고 있습니다. 이런 느낌↓

CMS를 연계해 목차를 만드는 것이 번거롭다

긴 글을 쓸 때 도입하고 싶은 것이 목차 기능이죠. WordPress에서는 플러그인으로 만들 수 있지만 Webflow는 그렇지 않습니다. 코드로 만들거나 각 섹션에 ID를 붙여 링크를 거는 조금 번거로운 방식이 필요합니다.

Webharu가 도입한 목차 만드는 법은 다음 글에서 소개합니다.
>> 【커스텀 코드 없이】Webflow로 만드는 가장 간단한 목차

CMS에 WebP 변환이 없다

삽입한 이미지를 WebP로 변환할 수 없는 것이 조금 번거롭습니다. 정적 페이지에서는 전부 변환되므로 CMS에서도 가능해지면 좋겠습니다.

코드 내보내기 시 별도 대응이 필요

Webflow는 코드 내보내기 시 CMS 데이터를 함께 출력할 수 없습니다. CMS 부분은 빈 구멍 상태로 출력됩니다. CMS는 CSV 형식으로 따로 출력할 수 있고, WordPress나 다른 노코드에 임포트할 수 있습니다.

Webflow 전문가가 쓰는 CMS 편리 기능

실제로 Webharu가 웹 제작을 의뢰받았을 때 자주 쓰는 Webflow CMS 기능을 소개합니다.

• CMS 글 작성만으로 색 구분〜SEO 최적화까지 자동 작성
• Webflow CMS의 글을 보이는 그대로 편집
• 커스텀 코드에 CMS 삽입

CMS 글 작성만으로 색 구분〜SEO 최적화까지 자동 작성

Webflow에서는 CMS를 잘 쓰면 장르별 색 구분부터 SEO 최적화까지 자동 작성할 수 있습니다. SEO 자동화에서는 Title 태그, description 태그, 구조화, 브레드크럼을 자동화할 수 있습니다. CMS를 연계하면 내부 링크 대책도 간단합니다.

Webharu는 이 지식으로 내부 SEO를 자동화한 뒤 키워드 전략, 시장 리서치, 순위 측정, 글 작성을 합니다. 그래서 일반적인 SEO 컨설팅과 달리 저가로 SEO 컨설팅·조언이 가능합니다.

CMS 글을 보이는 그대로 편집한다

Webflow에는 “세팅”“디자이너”“에디터”라는 3가지 기능이 있습니다. 만든 글을 그대로 편집하려면 에디터를 사용합니다. 2025년 시점에는 디자이너 기능을 쓴 채로 글을 직접 리라이트할 수 있게 되었습니다.

다만 에디터는 조금 버릇이 있어, 한 번 만든 내용을 읽어들이는 데 몇 초의 랙이 있습니다.

커스텀 코드에 Webflow CMS를 삽입한다

오른쪽 위 “＋Add Field”에서 CMS 아이템을 선택하면 글마다 입력된 정보를 코드에 반영할 수 있습니다. 이를 활용하면 더 고도의 자동화 기능을 개발할 수 있습니다.

Webflow CMS를 쓰기 위한 비용과 요금 플랜

Webflow에서 CMS를 사용하려면 CMS가 포함된 사이트 플랜이 필요합니다(최신 요금은 요금 해설 글 참조). 무료판에서도 50개 글까지 만들 수 있습니다.

저는 처음 30개 글까지 무료로 운영했습니다. 그런데 유료로 바꾼 뒤 리다이렉트가 안 되어 획득한 순위를 전부 버리게 되었습니다. 도메인을 키우고 싶은 분은 첫 글부터 유료 플랜으로 제작합시다.

Webflow CMS는 비싼가? 싼가?

이전에 SNS에 일본산 노코드 STUDIO와 Webflow의 요금 비교를 올린 적이 있습니다. 그것이 이쪽↓

Webflow와 STUDIO 요금 비교 ※(1달러 130엔 환산)
자체 도메인 접속 Webflow: 1,820엔/월 ／ STUDIO: 980엔/월
CMS 이용 시 Webflow: 2,990엔/월 ／ STUDIO: 1,980엔/월
STUDIO 엄청 싸네요. 그에 비해 Webflow는 꽤 비쌉니다.

— 하루｜Webflow 전문 해설 블로그 운영(@METANA_flow) 2023년 1월 20일 포스트

(※금액은 당시 구 플랜에서의 비교입니다.)

솔직히 Webflow는 일본산 STUDIO에 비하면 고가입니다. 저렴하게 소규모 사이트를 만든다면 STUDIO라는 선택도 가능합니다.

최근 “Webflow로 사이트를 만들고 싶다”는 분 중에는 STUDIO나 WordPress에서 이전하는 분들이 있습니다. “사이트를 대규모로 키우고 싶다”“EC를 병설하고 싶다”는 분이 많아, Webflow는 대규모 사이트에 적합하고 비싼 값을 낼 가치가 있다고 볼 수 있습니다.

Webharu “프로그래머 불필요 Webflow CMS 구축”에서 하는 것

마지막으로 Webharu의 “프로그래머 불필요 Webflow CMS 구축”에서 하는 것을 소개합니다. 단순해 보이지만 다음을 하면 프로그래머가 필요 없는 사이트가 됩니다.

• 전 항목에 주석을 작성한다
• 이름을 알기 쉽게 붙인다
• 제작 후 CMS 사용법 서포트를 한다

실제로 클라이언트에 납품한 Webflow CMS 일부 공개

위처럼 필드 이름과 주석을 기입하면 전문가가 아니어도 보기만 해도 무엇을 입력해야 할지 아는 CMS를 만들 수 있습니다. 덕분에 의뢰하신 고객은 사용법 서포트도 30분 정도로 만족하십니다.

초보로 CMS를 만들면 아이템의 링크 대상·이름·기능이 뒤죽박죽되기 쉽습니다. 개인이 만들 때는 이름·주석·링크 대상을 확실히 파악하며 만듭시다.

Webharu는 Webflow 사이트 제작을 하고 있습니다

당사는 프로그래머가 필요 없는 웹사이트 만들기를 모토로 Webflow 사이트를 제작하고 있습니다. 관심 있다면 먼저 상담해 주세요.

이상 Webflow CMS 완전 이해 가이드였습니다.

‍