UX 기획 실무에서 바로 쓰는 CMS 기초

UX 기획자에게 CMS(Content Management System)는 단순한 관리 도구가 아닌

 

데이터가 생성되는 것부터 가공되어 사용자에게 도달하기까지의 '데이터 파이프라인'을 설계하는 것이라 할 수 있습니다.

 

오늘은 UX 실무에서 가장 많이 쓰이는 CMS의 3가지 유형을 실제 사례와 함께 딥다이브 해보겠습니다.

 

 

 

Type 1. 이미지 및 플레인 텍스트 (Fixed Type)

이미지 및 플레인 텍스트는 가장 규격화된 방식입니다.

 

특정 위치에 들어갈 '이미지'와 '텍스트'를 각각의 입력 칸(Input Field)으로 분리하여 받는 형태입니다.

 

대표적인 활용 사례로는 웹툰 플랫폼(네이버웹툰, 카카오웹툰 등)이 있으며, 웹툰의 썸네일, 제목, 작가명, 줄거리(이미지)는 수많은 개수의 작품이 동일한 레이아웃을 유지해야 하므로, 운영자가 폰트 크기를 바꾸거나 이미지를 제멋대로 배치하게 두지 않으며, 오직 '정해진 규격의 (이미지)파일'과 '텍스트'만 업로드하게 설계합니다.

• Back-office 측면
  • 장점: 데이터 입력이 매우 직관적이고 빠릅니다. 가이드라인이 명확해 운영 사고(Layout 깨짐 등)가 거의 없습니다.
  • 단점: 기획 단계에서 정의되지 않은 요소(예: 갑자기 중간에 동영상 삽입)는 추가할 수 없습니다. 유연성이 낮아 개발 수정이 빈번할 수 있습니다.
• Front-office 측면
  • 장점: 디자인의 일관성이 완벽합니다. 반응형 웹이나 앱에서 데이터가 깨질 우려가 적어 사용자 경험이 안정적입니다.
  • 단점: 모든 페이지가 똑같은 구성을 가지므로, 개성 있는 연출이나 특별한 강조가 어렵습니다.

 

 

Type 2. 텍스트 에디터 (WYSIWYG Type)

텍스트 에디터는 일반인들에게도 굉장히 친숙한 방식으로 WYSIWYG 방식이라고도 불립니다. 

 

WYSIWYG란 'What You See Is What You Get'의 약자로, MS 워드나 노션처럼 편집 화면 그대로 결과물이 나오는 방식입니다.

 

대표적인 활용 사례로는 블로그 및 커뮤니티 (네이버 블로그, 티스토리 등)가 있으며, 콘텐츠의 양이 방대하고, 필자가 강조하고 싶은 부분이 제각각인 블로그 환경에 최적입니다. 글 중간에 사진을 넣고, 특정 문구에 형광펜 칠을 하거나 인용구를 넣는 등 '스토리텔링'이 필요한 곳에 사용됩니다.

• Back-office 측면
  • 장점: 비전공자도 풍부한 레이아웃을 구성할 수 있습니다. 텍스트 위계(H1, H2 등)를 자유롭게 조절하며 편집하는 재미를 줍니다.
  • 단점: 운영자마다 스타일이 제각각일 경우 브랜드 톤앤매너를 유지하기 어렵습니다. 불필요한 소스 코드가 섞여 들어갈 수 있습니다.
• Front-office 측면
  • 장점: 정보의 강약 조절이 잘 되어 있어 가독성이 높습니다. 사용자가 지루하지 않게 긴 글을 읽을 수 있습니다.
  • 단점: 특정 에디터 소스가 모바일 화면에서 잘리거나, 폰트 크기가 갑자기 커지는 등 기기별 최적화 이슈가 발생할 확률이 높습니다.

 

 

Type 3. HTML 에디터 (Code Type)

HTML 에디터는 직접 퍼블리싱 코드를 입력하여 페이지 전체를 코딩하듯 구성하는 방식입니다.

 

대표적인 활용 사례로는 기업용 프로모션 및 랜딩 페이지 (삼성전자 신제품 런칭, 애플 이벤트 등)가 있으며, 대기업의 신제품 발표나 대규모 이벤트 페이지는 매번 완전히 새로운 인터랙션과 화려한 비주얼이 필요합니다. 정해진 툴로는 표현의 한계가 있기 때문에, 아예 HTML 및 CSS를 직접 밀어 넣는 방식을 택합니다.

• Back-office 측면
  • 장점: 이론상 구현하지 못할 화면이 없습니다. 자유도가 100%입니다.
  • 단점: 코딩을 할 줄 아는 전문 인력이 붙어야 합니다. 관리자 페이지에서 코드 한 줄만 잘못 건드려도 사이트 전체가 '먹통'이 될 수 있어 보안과 백업이 필수입니다.
• Front-office 측면
  • 장점: 사용자에게 '와!' 소리가 나오는 화려하고 독창적인 경험을 줄 수 있습니다.
  • 단점: 최적화가 안 된 무거운 스크립트가 포함될 경우 로딩 속도가 느려져 오히려 사용자 이탈을 초래할 수 있습니다.

 

구분	이미지 & 플레인 텍스트	텍스트 에디터	HTML 에디터
추천 사례	웹툰, 상품 상세정보	블로그, 뉴스레터	랜딩 페이지, 이벤트 페이지
자유도	낮음	높음	매우 높음
운영 난이도	매우 낮음	보통	높음
UI 안정성	높음	보통	낮음

 

 

🚀 UX 기획자의 한 끗: SEO와 AEO를 위한 입력 폼 설계

CMS 기획의 핵심은 '데이터가 어디로 흘러가는가'를 설계하는 것이나 여기서 한걸음 더 나가면, 사용자가 우리의 데이터를 어떻게 잘 찾을 수 있게 만들까까지 이어지게 됩니다.

 

최근에는 구글, 네이버 같은 검색엔진최적화(SEO)뿐만 아니라, ChatGPT나 Perplexity 같은 AI가 내 콘텐츠를 읽어가게 만드는 AEO(AI Engine Optimization)가 중요해졌습니다. 이를 위해 CMS 기획 시 다음 4가지 입력 폼은 반드시 포함해야 합니다.

1. 이미지 Alt Text(대체 텍스트): AI는 이미지를 눈으로 보지 못합니다. 텍스트로 설명해줘야 "이 이미지는 갤럭시 S26의 야간 모드 촬영 샘플이구나"라고 인식하고 답변에 활용합니다.
2. 구조화된 데이터(Schema Markup) 스위치: 해당 글이 'FAQ'인지, '레시피'인지, '상품 리뷰'인지 선택하는 옵션을 넣으세요. 검색 엔진이 콘텐츠의 성격을 즉각 파악하도록 돕습니다.
3. 메타 설명(Meta Description): 검색 결과 하단에 두 줄로 노출되는 요약 문구입니다. 작성하지 않으면 AI가 앞부분을 대충 긁어가는데, 이는 클릭률(CTR)에 치명적입니다.
4. Canonical URL(대표 URL) 필드: 같은 내용이 여러 경로로 서비스될 때, "이 주소가 진짜 원본이야!"라고 선언해주는 기능입니다. 검색 지수 분산을 막아줍니다.

 

UX 기획자는 보여지는 화면만 그리는 사람이 아닙니다.

 

보여지는 화면 속 데이터의 흐름과 해당 데이터가 사용자에게 잘 전달될 수 있는 구조까지 생각할 수 있어야 합니다.

 

운영자가 데이터를 어떤 '그릇'에 어떻게 담느냐에 따라 그 데이터의 가치가 결정되는 것처럼,

 

좋은 UX 기획자라면, 서비스 성격에 맞는 최적의 CMS 방식을 취사선택할 수 있어야 합니다.