2023년 Webflow CMS 완전 이해 가이드

Webflow CMS를 완전 이해하는 가이드 2023 【Webflow CMS에서 할 수 있는 것】

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

• 블로그, 뉴스 등 작성
• HTML 태그에 따른 웹 제작
• 자동 간편 SEO 생성
• 빵 부스러기 리스트 자동 생성
• 기사 내에 Youtube 임베드 게시
• 기사별 작성자 표시, 작성자 등록
• 장르 분류, 장르별 색상 구분

주로 사용하는 기능입니다. 위의 모든 구현 방법은 이후에 WebflowCMS의 사용 방법이라는 기사에서 소개하겠습니다. 관심이 있는 분은 Twitter에서 공지하니 팔로우해 주시면 바로 알림이 가게 됩니다. 여기에서는 위의 기능들을 좀 더 자세히 설명하겠습니다.

Webflow CMS를 사용하여 블로그, 뉴스 등을 만들 수 있습니다. CMS란 간단히 말해 "동일한 디자인의 페이지를 대량생산하는 기능"입니다. 정기적으로 업데이트하는 블로그나 뉴스 페이지 등을 만드는 데 사용됩니다. 지금 읽고 있는 이 페이지도 Webflow CMS를 사용하여 작성되었습니다. Webflow에서는 자유롭게 CMS를 구축할 수 있으며, 개인에 맞는 효율적인 CMS를 만들 수 있습니다.

Webflow CMS는 3단계로 구성되어 있습니다.

Webflow CMS는 "CMS 필드", "CMS 페이지 디자인", "디자인 및 CMS 필드 연동"이라는 3단계로 구성되어 있습니다. Webflow의 도입 방법을 알고 싶은 경우, 아래의 기사에서 소개하고 있습니다.
>>how to use CMS

Webflow CMS는 여러 개의 CMS 필드를 연계하여 고급 CMS 운영이 가능합니다.

장르별 분류, 작성자 등록 등은 다른 CMS를 만들어 링크를 추가하여 사용할 수 있습니다. CMS를 여러 개 사용하는 것이 일반적입니다. 장르별 색상 구분, 작성자 등록, 추천 게시물 표시 등의 기능을 사용하여 효율성을 높일 뿐만 아니라 SEO 대응도 쉽게 할 수 있습니다.

Webflow CMS의 불편한 점, 할 수 없는 것. 【매일 사용하기 때문에 보이는 작은 버그】

Webflow는 많은 고급 기능을 갖추고 있지만, 100% 만족하는 것은 아닙니다. 이 글에서는 실제 사용 경험을 바탕으로 Webflow CMS 도입 전에 주의해야 할 사항을 소개합니다.

• 【버그】문자가 반영되지 않는 경우가 있음
• 슬라이더에는 CMS를 사용할 수 없음
• 쉽게 목차를 만들 수 없음
• 코드 출력 시 별도로 대응해야 함
• CMS에서 Webp 변환 없음

위 내용을 순서대로 설명하겠습니다.

【버그】 Webflow CMS에서 작성 중일 때 가끔씩 오류가 발생합니다.

Webflow CMS에서 직접 라이팅을 하는 경우, 때로는 저장되지 않거나 문자가 반영되지 않는 버그가 발생할 수 있습니다. 버그가 발생하면 다시 로드하면 문제가 해결되지만 저장되지 않습니다. 이를 방지하기 위해 빈번한 저장과 라이팅 내용을 저장할 수 있는 Chrome 확장 기능을 사용해야 합니다. 가장 좋은 방법은 다른 메모 앱 등에서 라이팅하는 것입니다.

버그가 발생하기 쉬운 타이밍 (자체)

링크 사용, 목록 사용, 이미지 삽입 후에는 즉시 저장하세요. H 태그를 사용하면 버그가 발생하지 않지만, 다른 기능을 사용할 경우 약 10%의 확률로 버그가 발생합니다. 일시적으로 버그가 없어 보이더라도 저장되지 않은 경우도 있습니다. 10% 정도의 확률이기 때문에 방심해서는 안 됩니다.

保存되지 않으면 진짜 좌절해 버리므로, 메모장이나 텍스트 편집기를 사용해 주세요. Webflow CMS에서는 H 태그나 링크 태그의 정보를 그대로 읽어들여 주기 때문에 메모를 만들어 놓고 복사-붙여넣기를 하면 원활하게 작업할 수 있습니다.
>>좋은 메모 어플리케이션 등이 있다면 알려주세요 😂 지금은 순정 MAC의 메모 어플리케이션을 사용하고 있습니다.。

Webflow CMS는 슬라이더에서 사용할 수 없습니다.

Webflow에는 슬라이더를 만들 수 있는 기능이 내장되어 있습니다. 그러나 CMS의 이미지를 슬라이더에 사용하는 것은 불가능합니다. 불편합니다. CMS 슬라이더를 사용할 수 있도록 커스텀 코드가 템플릿으로 공유되어 있으므로 해당 템플릿을 사용하면 문제를 해결할 수 있습니다.

Web春에서는 슬라이더 대신 스크롤로 볼 수 있는 것을 사용하여 보다 간편한 방법을 채택하고 있습니다. 이렇게 보입니다 ↓

Webflow CMS와 함께 목차를 만드는 것이 귀찮은 일입니다.

Webflow CMS와 연동하여 목차를 만드는 것은 번거로운 작업입니다. 긴 글을 작성할 때 목차 기능을 도입하고 싶어합니다. WordPress와 같은 플랫폼에서는 플러그인을 사용하여 목차를 만들 수 있지만, Webflow에서는 그렇게 쉽지 않습니다. Webflow에서 목차를 만드는 방법은 코드를 사용하여 목차를 만들거나 각 섹션에 ID를 부여하고 링크를 거는 약간 복잡한 방법을 사용해야합니다.

Web春에서 도입하고 있는 목차 작성 방법은 다음의 기사에서 소개하고 있습니다.
>> Webflow를 이용한, 가장 간단한 목차 만드는 방법

Webflow CMS에서는 Webp 이미지 형식을 변환하지 않습니다.

입력한 이미지를 WebP로 변환할 수 없는 Webflow CMS는 약간 불편합니다. 매번 외부 도구를 사용하여 변환하십시오.

코드 출력 시 별도로 대응해야 합니다

Webflow는 코드 출력 시 CMS 데이터를 함께 출력할 수 없습니다. 따라서 CMS 부분은 아무것도 표시되지 않고 빈 상태로 출력됩니다. 코드를 보고 싶은 경우 별도로 문의해주세요.

Webflow 전문가가 사용하는 Webflow CMS의 유용한 기능

Webflow 전문가가 사용하는 Webflow CMS의 편리한 기능을 소개합니다.실제로 Web春에서 웹 제작을 의뢰받을 때 자주 사용하는 Webflow CMS의 기능입니다.

• CMS의 게시물 작성만으로 색상 구분 및 SEO 대응 자동 생성
• Webflow CMS의 게시물을 보면서 편집
• 커스텀 코드에 CMS를 포함

순서대로 설명하겠습니다.

CMS의 글 작성 기능만으로 색상 구분에서 SEO 대응까지 자동으로 생성하는 기능에 대해 설명하겠습니다.

Webflow에서는 CMS를 잘 활용함으로써, 장르별 색상 구분부터 SEO 대응까지 자동으로 생성할 수 있습니다. SEO 대응 자동화에서는 Title 태그, description 태그, 구조화, 브레드크럼 리스트를 자동으로 할 수 있습니다. 또한 CMS를 연동함으로써 내부 링크 대응도 간단합니다.

Web春은 이러한 지식을 활용하여 내부 SEO를 자동화하고 키워드 전략, 시장 조사, 순위 측정 및 게시물 작성을 수행합니다. 따라서 일반적인 SEO 컨설턴트와는 달리, 저렴한 비용으로 SEO 컨설팅 및 조언을 제공할 수 있습니다. 하지만 현재는 소수의 희망자에게만 지원하고 있습니다. 트위터에서 요청이 있으면 언젠가는 SEO 대책에 대한 기사를 작성할 수도 있습니다.

Webflow CMS의 게시물을 보면서 편집하기

Webflow에는 "설정", "디자이너", "에디터"라는 세 가지 기능이 있습니다. 작성한 기사를 그대로 편집하려면 에디터를 사용합니다. 에디터는 2023년이 되어 큰 기능 개선이 이루어졌으며, 리로드가 빨라졌습니다.

그러나 에디터는 약간 성격이 강하며, 한 번 작성한 내용을 불러오는 데 몇 초의 딜레이가 있습니다. 딜레이가 많다는 것은 결국 이런 느낌입니다 ↓

Integrating Webflow CMS into Custom Code

Webflow의 CMS를 잘 활용하면, CMS 정보를 사용자 지정 코드에 통합할 수 있습니다. 먼저 아래를 참조해보세요.

「＋Add Field」를 선택하여 Webflow의 CMS 항목을 선택하면, CMS의 각 게시물에 입력된 정보를 코드로 삽입할 수 있습니다. Web春에 의뢰하거나 프로그래머를 고용하여 더욱 고도화된 자동화 기능을 개발할 수 있습니다.

Webflow CMS를 사용하는 데 드는 비용과 요금 계획

Webflow에서 CMS를 사용하려면 사이트 플랜 중 CMS $23/월을 사용해야 합니다. 무료 버전에서도 50개의 게시물을 작성할 수 있습니다.

저는 처음에는 30개의 게시물까지 무료로 사용했습니다. 그러나 나중에 유료로 변경한 후 리디렉션을 할 수 없어서 획득한 순위를 모두 포기하게 되었습니다. 도메인을 키워나가고 싶은 분들은 첫 번째 게시물부터 유료 플랜으로 제작해 나가는 것이 좋습니다. ※ 참고로 지금의 저라면 20개 정도의 게시물을 써서 잘될 경우 JS 리디렉션을 설정하여 무료로 0에서 1을 달성할 수 있다고 생각합니다. 순위는 이어받을 수 있을지는 미지수입니다.

Webflow의 CMS는 가격이 비쌉니까? 저렴한가요?

솔직히 Webflow는 STUDIO와 비교했을 때 높은 가격이라는 것을 알 수 있습니다. 그러므로 저렴하게 소규모 사이트를 구축하고자 한다면 STUDIO라는 선택도 괜찮은 것 같습니다.

최근에는 "Webflow로 사이트를 만들고 싶다"는 분들 중 STUDIO에서 이전하거나 WordPress에서 이전한 분들이 있습니다. 그들은 대규모 사이트를 구축하거나, EC 사이트를 부가하고자 하는 분들이 많으며, 이러한 배경으로부터 Webflow는 대규모 사이트에 적합하며, 높은 가격을 지불할 가치가 있다고 볼 수 있습니다.

2023년 최신 뉴스에 따르면 Webflow는 figma의 디자인을 복사하여 붙여넣을 수 있게 되었습니다. 앞으로 어떤 도구가 생존할지 모르므로 출력 기능을 갖춘 도구 선택은 필수적이라고 생각합니다. 그 측면에서 Webflow는 언제든지 변경할 수 있기 때문에 강점을 가지고 있습니다.

Webharu 이 의식하는 프로그래머 불필요한 Webflow CMS 구축에서 하는 것들입니다.

마지막으로, Webharu가 진행하는 "프로그래머 필요 없는 Webflow CMS 구축"에서 하는 일을 소개하겠습니다. 보기에는 간단해 보이지만, 다음을 수행하면 프로그래머 없이 사이트를 만들 수 있습니다. 약간의 전문 지식이 없으면 잘 할 수 없으므로 각각의 기능을 기억하고 구현하도록 합시다.

• 모든 항목에 일본어 주석 추가
• 이해하기 쉬운 이름 지정
• 제작 후 Webflow CMS 사용 방법 지원

보는 것이 빠를 것 같아 일부를 공개합니다.

실제로 클라이언트에게 납품한 Webflow CMS 일부를 공개합니다.

위와 같이 필드의 이름과 주석을 기입함으로써, 프로그래머나 전문가가 아니더라도 보고서 어떤 정보를 기입해야 하는지 쉽게 알 수 있는 CMS를 작성할 수 있습니다. 위의 사진은 일부분일 뿐이지만, 보면서 어떤 정보를 입력해야 하는지 바로 알 수 있죠. 그래서, 당사에 의뢰하신 고객님들은 사용 방법 지원조차도 30분 정도면 만족하실 수 있습니다.

그 이후에는 실제 운영에서 "여기에 이미지를 넣고 싶다", "이 정보는 필요없어" 등 조정을 하면서 CMS를 완성시켜 나갑니다. 또한, 독자적으로 커스터마이징하는 방법도 지원해드리고 있습니다.

경험이 없이 CMS를 작성하면, 항목의 링크나 이름, 기능 등이 복잡해지기 쉽습니다. 개인적으로 CMS를 작성할 때는, 이름, 주석, 링크 등을 확실히 파악하고 작성하도록 합시다.

Web春에서는 Webflow 사이트의 제작을 진행하고 있습니다.

저희 회사는 프로그래머가 필요 없는 웹사이트 제작을 모토로 Webflow 사이트를 제작하고 있습니다. 만약 관심이 있으시다면 먼저 문의해주세요. 위의 글은 Webflow CMS 완전 이해 가이드였습니다. 궁금한 점, 질문 등은 아래의 Twitter에서 받고 있습니다.

情報追加はツイッターで告知します。

정보 추가는 트위터로 공지할 예정입니다. Webflow의 최신 정보와 사용 방법은 업데이트될 때마다 업데이트할 예정입니다. 정보 업데이트 및 유용한 사용 방법은 트위터에서 트윗됩니다! 팔로우 부탁드립니다!