[허브스팟 가이드] CMS(Content Management System) 기초

이번 포스트는 허브스팟을 처음 접하는 사용자를 위해 작성한 가이드입니다. 허브스팟의 CMS(Content Management System)이 무엇이며, 기업의 성장을 어떻게 돕는지 알아봅시다. CMS 툴을 사용해본 적이 없는 초보자도 쉽게 허브스팟 CMS의 다양한 기능을 사용할 수 있습니다.

이어지는 글을 읽어보아도 어려움이 남아있다면, 포스트의 최하단을 확인하세요. 미팅 링크를 통해 담당 매니저의 빠른 지원을 받을 수 있습니다.

허브스팟 CMS가 기업의 성장을 돕는 방법

‘CMS’란 Content Management System의 약자로, 웹 사이트의 관리를 더 수월하게 만들어주는 플랫폼입니다. CMS를 통해서 다음과 같은 일을 할 수 있습니다.

• 콘텐츠 제작
• 웹 사이트, 블로그, 랜딩 페이지의 온라인 노출
• 고객 경험 향상
• 리드 확보
• 인사이트 획득

고객 경험 향상을 위해 허브스팟 CMS가 할 수 있는 일

허브스팟 CMS는 시스템을 관리하고 손보는 시간을 줄이고, 콘텐츠와 고객 경험의 향상에 집중할 수 있게 돕습니다. 강력한 콘텐츠 생성 기능을 통해 웹 사이트를 관리하고, 개발자가 없어도 다양한 기능을 유연하게 사용할 수 있습니다.

All-in-One 플랫폼

웹 사이트, 랜딩 페이지, 블로그 포스트 등의 웹 콘텐츠를 허브스팟 플랫폼 하나에서 제작, 관리, 최적화시키고, 리포트 기능을 통해 성과를 측정합니다.

CRM과의 연계

세계적인 수준의 CRM을 기반으로 만들어진 CMS인 만큼 (엣헴✨) CMS를 CRM의 고객 데이터와 연계하기가 쉽습니다. 마케팅과 세일즈 팀의 관점에서 굉장히 효율적입니다. 고객에 대한 정보를 활용하여 웹 사이트에서 고객에게 더욱 개인화된 환경을 제공해줄 수 있으며, 허브스팟에는 이에 필요한 모든 기능이 있습니다.

허브스팟 CMS의 작동 원리

통합 솔루션으로써의 CMS

허브스팟 CMS의 장점은 콘텐츠를 작성, 관리, 최적화 및 분석하는 데 필요한 모든 기능이 한 군데에 있고, 각 기능 간의 연계가 뛰어나다는 점입니다. 이 모든 통합된 기능들은 강력한 마케팅 전략을 지원합니다.

개발자의 Design Manager 사용

개발자는 Design Manager를 활용하여 CSM에 활용되는 asset을 제작, 관리, 저장할 수 있습니다. CMS asset은 콘텐츠 생성 시 드래그 앤드 드롭 에디터에서 활용할 수 있으며, 마켓플레이스(Marketplace)에서 구매하여 사용할 수 있습니다. 마케터라면 Design Manager를 활용한 각종 asset의 제작에 많은 시간을 들이지는 않겠지만, 간단한 기능들에 대한 이해는 필수적입니다.

File 활용

콘텐츠 생성 시, 이미지나 비디오와 같은 요소들을 File Manager를 통해 저장할 수 있습니다. 해당 이미지, 비디오, PDF 등의 기타 파일들은 허브스팟의 콘텐츠 서버에 저장됩니다.

• File 업로드 방법
  • Marketing > Files and Templates > Files
  • Upload files 클릭
  • 컴퓨터에서 업로드할 파일을 드래그하여 가져다 넣을 수도 있습니다.

• File 업로드 제약
  • 업로드 가능한 이미지 : jpg, jpeg, png, tif, tiff, ico, bmp, webp
  • 업로드 용량 : 비디오 파일을 제외하고 Files에 업로드하는 파일의 크기에는 제한이 없습니다. 비디오 파일의 경우, 1GB 이내여야 합니다.

SEO

웹 사이트 SEO를 고려한 콘텐츠 구성을 위한 기능을 허브스팟에서 기본적으로 제공하고 있습니다. SEO 기능을 사용하면 검색 엔진에 사이트를 쉽게 노출시킬 수 있습니다. 토픽 클러스터와 같은 기능들은 웹 사이트 내의 키워드 구조를 쉽게 형성할 수 있게 돕고 SEO 성능을 향상시킵니다.

Blog, Landing Pages, Website Pages Tools

마케터가 콘텐츠를 제작, 편집, 발행하는 데 가장 많은 시간을 사용하게 될 곳입니다. 블로그 포스팅, 랜딩 페이지, 일반 웹 사이트 페이지의 기능들은 분리되어 있음으로 콘텐츠를 체계적으로 구성할 수 있습니다. 이러한 각 기능에는 직관적이고 강력한 기능들이 있어 콘텐츠를 쉽게 제작하고 원하는 레이아웃을 구성하여 발행할 수 있습니다.

CMS의 무료 기능들

CMS에서 기본적으로 제공하고 있는 기능들을 아래에서 확인해볼 수 있습니다.

Form, CTA
기존에 만들어진 form과 CTA를 페이지에 바로 추가할 수 있습니다. 리드를 만들고, 전환율을 향상하기 위한 페이지 레이아웃 구성이 가능합니다.

Conversations
라이브 채팅이나 챗봇을 웹 사이트에 추가할 수 있습니다.

Ads
광고 캠페인을 활용하여 어떤 광고가 고객을 많이 창출하고 있는지 확인할 수 있습니다.

App Marketplace
앱 마켓 플레이스를 통해 곧바로 활용 가능한 수천 개의 템플릿을 확인할 수 있습니다. 예를 들어, 인터넷 쇼핑몰을 허브스팟 CMS를 활용하여 구축한 뒤, 쇼핑몰 앱과 허브스팟을 연동하여 사이트를 관리할 수 있습니다.

허브스팟 CMS의 Theme, Template, Module

테마, 템플릿, 모듈 등은 모두 CMS에서 생성할 수 있는 콘텐츠의 가장 기초적인 요소입니다. 해당 기능들을 잘 활용하기 위해서는 기능에 대한 이해가 필수적입니다.

Theme(테마)

마케터에게 친숙한 편집 환경을 제공하기 위해 설계된 asset을 모두 모아둔 양식입니다. 테마 내의 asset에는 템플릿, 모듈, 이미지 등의 글로벌 콘텐츠가 포함되어 있습니다. 테마는 웹 사이트의 전체적인 디자인과 관련되어 있으며, 스타일과 레이아웃을 변경할 수 있는 개별 페이지 개념이 아닌, 사이트의 전반적인 디자인과 브랜딩을 결정하는 광범위한 요소입니다.

마케터의 Theme 활용

개발자가 콘텐츠 편집 환경에서 웹 사이트에 활용할 수 있는 테마를 만들면, 마케터가 그 테마를 바탕으로 페이지를 구성하거나 미리 만들어진 테마를 활용할 수 있습니다. 개발자와 마케터가 함께 작업하는 경우, 개발자는 브랜드 아이덴티티와 최대한 일치하는 테마를 커스텀할 수 있습니다.

테마를 사용하면, 마케터는 유지 보수를 위해 ‘HTML, CSS, JavaScript’와 같은 코딩 지식이 없어도 웹 사이트 레이아웃 구성을 자유롭게 변경할 수 있습니다. 웹 사이트의 스타일은 테마의 setting(설정)을 통해  쉽게 변경할 수 있습니다.

Template(템플릿)

템플릿은 페이지의 레이아웃과 각종 기능을 제어하는 파일입니다.

템플릿과 페이지의 관계

CMS에 게시된 모든 페이지는 템플릿을 사용하여 생성됩니다. 하지만 템플릿과 페이지의 관계는 ‘1:1’이 아닌 ‘1:다’입니다. 하나의 템플릿을 사용하여 수십 개의 서로 다른 페이지를 만들 수 있습니다.

Module(모듈)

모듈은 템플릿에서 사용하는 하나의 블록입니다. 모듈은 다양한 형태를 취할 수 있으며, 재사용할 수 있습니다. 텍스트 블록, 이미지, form 등의 모듈이 있습니다. 템플릿은 페이지 편집 화면 내에서 내용을 구성할 수 있는 여러 가지의 각기 다른 모듈로 구성됩니다. 드래그 앤드 드롭 에디터에서 몇 번의 클릭만으로 모듈을 추가 및 제거할 수 있으며, 페이지의 레이아웃과 함께 변경할 수도 있습니다.

모듈과 템플릿의 관계

템플릿과 페이지의 관계와 마찬가지로 모듈과 템플릿의 관계도 ‘1:다’입니다. 같은 모듈을 여러 가지 템플릿에서 수백 번씩 사용할 수도 있습니다. CMS에 관해 이해해야 할 가장 중요한 것 중 하나는 테마, 템플릿, 페이지 간의 관계입니다.

테마, 템플릿, 페이지의 관계

• 테마는 웹 사이트의 전체 디자인을 결정합니다.
• 테마에는 동일한 브랜딩을 가진 템플릿 세트가 포함되어 있습니다.
• 템플릿은 페이지의 청사진에 해당합니다.
• 페이지는 콘텐츠를 채워 넣을 수 있는 종합적인 완제품입니다.

CMS의 템플릿 유형

• 페이지 템플릿
• 블로그 템플릿
• 시스템 템플릿

템플릿과 콘텐츠의 관계

템플릿의 유형에 따라 해당 템플릿을 사용하여 만들 수 있는 콘텐츠의 종류가 결정됩니다. 예를 들어 블로그 템플릿은 블로그를 만들 때만 쓸 수 있고, 페이지 템플릿은 페이지를 구성할 때만 쓸 수 있습니다.

시스템 템플릿이란?

시스템 템플릿은 에러 페이지, 비밀번호 설정 페이지, 구독 취소 페이지 등을 포함하는 일반적인 웹 시스템 페이지를 의미합니다.

CMS 모듈의 유형

• 디폴트 모듈
• 테마 모듈
• 커스텀 모듈

디폴트 모듈

디폴트 모듈은 CMS에 기본적으로 포함되어 있으며, Rich Text(리치 텍스트), 이미지, Form 등을 포함합니다.

테마 모듈

테마 모듈은 테마 내에서 작동하도록 특별히 설계된 모듈입니다. 테마 개발자가 만들어 테마에 포함시키면 설정한 스타일로 고정되어 있습니다.

커스텀 모듈

커스텀 모듈은 특정 팀에서만 쓰이거나, 배너 이미지로만 사용하기 위한 목적 등 특정 목적을 위해 개발자가 구축합니다. 이러한 유형의 모듈은 디폴트 모듈이 제공하지 않는 웹 사이트의 복잡하거나 세분화된 요소에 적합하게 사용됩니다. 커스텀 모듈은 뛰어난 확장성을 가지고 있으며, 개발자가 직접 제작하거나 Asset Marketplace에서 내려받을 수 있습니다.

Global Contents

한 번 만든 다음, 웹 사이트에서 계속해서 재사용할 수 있는 콘텐츠를 통칭합니다. 글로벌 콘텐츠의 예로는 사이트의 푸터(footer)와 헤더(header) 등이 있습니다. 디자인의 일관성을 유지하기 위해서는 전체 사이트에서 이러한 요소가 동일하게 보이는 것이 좋습니다. 이런 경우 클로벌 콘텐츠를 사용할 수 있습니다.

글로벌 콘텐츠는 수정되면, 다른 모든 페이지에도 수정 사항이 반영되기 때문에 변경사항을 저장하기 전에 변경 결과를 반드시 확인해야 합니다. 예를 들어 헤더에서 회사 로고를 변경하면 웹 사이트의 모든 페이지에서 로고가 변경됩니다. 허브스팟의 페이지나 블로그 게시물을 작성할 때 이 부분을 염두에 두어야 합니다. 콘텐츠를 만드는 데 사용하는 여러 asset 간의 관계를 고려하여 테마, 템플릿, 페이지, 글로벌 콘텐츠를 변경하여야 합니다.

허브스팟의 Asset Marketplace

App Marketplace에서는 웹 사이트를 구축하는 데 활용할 수 있는 asset을 찾을 수 있습니다.

• 제품 유형(템플릿 또는 모듈)별 필터링
  
• 추가 옵션을 보려면 “템플릿”을 클릭
  
  • 웹 사이트 페이지와 같이 만들 콘텐츠 종류를 이미 알고 있는 경우 해당 옵션을 선택하여 웹 사이트 페이지 템플릿만 확인
  • “Purpose” : ‘Contact Us’ 페이지와 같이 템플릿의 용도에 따라 필터링
  • “Layout” : 템플릿 레이아웃을 기준으로 필터링
  • “Feature” 및 “Industry” : 특정 템플릿 기능과 템플릿이 사용자 지정된 산업별로 필터링할 수 있습니다. 이 필터를 사용하면 검색을 통해 매우 세분화할 수 있습니다.
  • “Price” : 섹션에서 “Free” 옆의 상자에 체크 표시를 하면 무료로 내려받을 수 있는 asset만 볼 수 있으며, 그 반대의 경우도 마찬가지입니다.
  • “Provider” : 공급자. 제공자는 asset을 만든 사람 또는 기관입니다. Provider 섹션에서 드롭다운 메뉴를 눌러 옵션을 확인할 수 있습니다. 마켓플레이스에는 수많은 다양한 provider가 있어서, 좋아하는 특정 디자인 에이전시를 알고 있다면, 그들이 만든 제품만 볼 수 있도록 필터를 적용할 수도 있습니다.
• 마켓플레이스에서 제품의 카드를 클릭하면 모든 관련 세부 정보가 포함된 페이지가 나타납니다. 템플릿의 미리보기를 확인할 수 있으며, 오른쪽 사이드바에서는 템플릿의 개요를 제공하는 정보가 노출됩니다.

여기에는 제품 유형, 허브스팟 고객에 의해 설치된 횟수, 템플릿의 주요 기능, 산업, 레이아웃 스타일 및 일부 리소스에 대한 링크가 표시되어 있습니다. 사이드바의 하단에는 템플릿 제공자의 다른 제품, 웹 사이트 및 문제가 발생할 경우 연락처 정보, 허브스팟 아카데미 자격증을 가졌는지 여부에 대한 정보가 표시되어 있습니다.

이 포스팅이 도움이 되셨나요?

허브스팟에 어떤 기능이 더 있는지 궁금하신가요? 국내 허브스팟 담당자와의 상담을 통해 궁금증을 해결하실 수 있습니다.