#7 Webflow_공홈 공부 2_CMS

<UXUI 디자이너의 성장 기록>

Webflow 공홈 영상 공부

25.04.12 토요일 <#8 intro to the webflow cms>

CMS (Content Management System, 콘텐츠 관리 시스템)

구조화된 데이터베이스에 콘텐츠 저장하고 관리 용이

개별 레이아웃 or 페이지 수동 구축 대신 CMS를 직접 참조하는 유연한 프레임워크 구축

장점

콘텐츠 동적 변화하기 때문에 CMS에서 업데이트한 내용은 콘텐츠가 나타타는 모든 곳에 즉시 반영

동적 콘텐츠(Dynamic content) or 정적 콘텐츠(Static content) 차이점

정적 콘텐츠를 사용하면 콘텐츠를 수동으로 입력하고 관리하게 됨

Hero 섹션의 이미지나 홈페이지의 사명 선언문과 같은 것일 수 있음

Hero section

웹 사이트나 랜딩페이지에서 가장 먼저 눈에 띄는 첫 화면 상단 영역

보통 사용자가 사이트에 처음 들어왔을 때 가장 먼저 보게 되는 부분

☑ 특징

큰 이미지나 영상 배경 사용할 경우 많음

강렬한 헤드라인 (ex, 세상을 바꾸는 디자인)

서브 텍스트나 간단한 설명

CTA(Call to action) 버튼이 함께 있음 (ex, 지금 시작하기, 더 알아보기)

자주 변경할 필요가 없는 것에 적합

But 콘텐츠가 많은 경우에는 확장 불가능

▾ 이럴 때 동적 컨텐츠 등장

• 2. CMS Structure
CMS 구조 분석 > 콘텐츠 구성 방법

동적 컨텐츠를 사용하면 모든 것을 CMS에 저장하고 유연한 프레임워크를 사용하여 사이트의 어느 곳에나 표시 가능

해당 콘텐츠가 참조되는 곳 모든 곳에 즉시 반영 수동 업데이트 필요 X

동적 컨텐츠 = 블로그 게시물, 추천서, 고객 사례, 프로젝트, 포트폴리오에 적합

이미지, 링크, 색상 등 작업 가능 >> 사용자 정의 필드

컬렉션 : 관련 콘텐츠 그룹 / 데이터 베이스 정리

아이템 : 컬렉션의 항목 / 각자의 특정 콘텐츠를 가진 개별 항목

컬렉션 필드 : 컬렉션에서 정의하는 사용자 정의 가능한 속성

Ex, blog posts

Collection Pages & lists

컬렉션 페이지, 컬렌션 목록 사용하여 동적 컨텐츠가 디자인에 어떻게 통합되는지

컬렉션 페이지 = 컬렉션의 각 항목에 대한 개별 페이지

컬렉션 목록 =컬렉션의 여러 항목을 홈페이지의 각 게시물에 대한 링크 그리드처럼 목록 형식으로 표시 가능

디자인을 구축한 다음 CMS 필드를 바인딩 > 필터를 사용 > 목록에 표시할 항목 선택 or 특정 필드 기준으로 항목 정렬 가능

게시물에 링크 걸려는 경우 컬렉션 페이지 배치 가능