UX 기획 실무에서 바로 쓰는 CMS 심화 : N-Screen과 Banner

지난번 글에서 'UX 기획 실무에서 바로 쓰는 CMS 기초'에 대해 알아보았는데,

 

이어서 실제 대부분의 홈페이지 관리 시스템에서 필수로 사용되는 배너(Banner) 관리 기능에 대해 깊이 있게 다루어보려 합니다.

 

 

 

 

그렇다면 배너는 무엇인가?라고 하면

 

간단하게 웹/앱 서비스에서 정보 제공 또는 광고 목적의 영역이라고 할 수 있습니다.

배너 이미지 예시 (쿠팡-2025년)

 

그렇기에 고객 관점에서는 단순한 사각형 이미지 정도로 생각되는 부분이지만,

 

 

 

 

UX 기획자 관점에서는

 

N-Screen에 대한 대응(보여지는 화면)과

 

관리 편의성(숨겨진 관리 화면, BO)을 종합적으로 고려해야 하는

 

쉽지만은 않은 기능입니다.

 

 

 

 

이번 글에서는 실무에서 꼭 알아야 할

 

배너 설계의 핵심 프로세스를 정리해보겠습니다.

 

 

 

 

그럼 가장 먼저 배너를 잘 활용하고 있는

 

쿠팡(2025년 기준)의 PC 웹 사례를 살펴보겠습니다.

 

쿠팡의 경우 하나의 이미지 소스(1920 x 450)를 활용하여 다양한 해상도에 대응하고 있는 것을 확인할 수 있었는데요,

 

 

w360(스마트폰), w800(태블릿) 사이즈 예시

 

w1200(일반 PC 작은 크기), w1440(일반 PC 중간 크기) 사이즈 예시

 

w1920(FHD 전체 화면), w2560(QHD 전체 화면) 사이즈 예시

 

 

관리의 편의를 위해 하나의 배너 이미지를 활용하면서도

 

브라우저의 360 사이즈부터 2560 사이즈까지 배너가 크게 어색하지 않게 대응되는 것을 보면

 

효율적으로 운영되고 있음을 알 수 있습니다. 

 

다만, 이러한 효율성을 위해서는 쿠팡에서 제공하고 있는 '배너 제작 가이드'와 같이

 

구체적이고 명확한 배너 디자인 기준이 마련되어야 합니다. 

 

(이런 가이드 문서는 UX 기획팀과 디자인팀이 함께 협의를 해야하는 것이 포인트!)

 

 

 

 

좋은 사례도 보았으니 

 

이제 그럼 서비스에 딱 맞는 배너 구현을 위한

 

4단계 프로세스를 알려드리겠습니다.

 

 

1단계 - 배너 영역  확인

가장 먼저 배너 영역을 확인해야 합니다.

 

배너가 들어갈 서비스의 전체 너비가 고정 너비(예: 1200px)인지 가변 너비(예: 100vw)인지를 먼저 확인하고,

 

또 그 안에서 배너의 영역(마찬가지로 고정 너비인지 가변 너비인지)을 확인합니다.

 

배너 영역이 고정형 너비인 경우 특정 해상도에 맞춰져 있으므로 CMS 설계 및 운영 관리가 간편하나

 

해당 해상도보다 작은 경우 가로 스크롤이 발생하거나 배너가 잘려 보일 수 있고, 큰 경우 좌우에 여백이 보여 디자인적 완성도를 해질 수 있습니다.

 

반면,

 

배너 영역이 가변 너비인 경우 해상도에 맞춰 배너 영역이 잘 잡히게 되어 고객의 몰입도를 향상시킬 수 있으나

 

대응되는 해상도별로 어떻게 보여질지를 예측하여 CMS 기능을 설계하고, 또 그에 맞도록 배너 디자인 가이드를 구체적으로 제작/배포해야 합니다.

배너 영역 예시

 

실무 Tip!

가변 너비 배너의 경우 배너 자체는 1920 정도로 고정된 크기를 활용하되 배너 이미지의 양 끝단을 고정 컬러 코드(Hex Code)로 디자인하도록 하고, 배너 영역 내 Background-color를 이에 맞출 수 있도록 CMS 기능을 추가하면 좋습니다.

이렇게 될 경우 사용자가 QHD 이상의 고해상도 모니터를 사용하더라도 배너 이미지 좌우 끝단과 배경색이 자연스럽게 이어지게 되므로 하나의 거대한 배너인 것 같은 Seamless한 사용자 경험을 제공할 수 있습니다.

 

 

 

 

2단계 - 콘텐츠 영역 확인

다음으로는 배너 영역 내에 실제 배너의 콘텐츠 및 UI 요소 영역을 확인해야 합니다.

 

배너 영역이 가변 너비일 경우 360~2560 해상도를 기준으로

 

주요 텍스트 또는 이미지가 너무 작게 보여지거나 잘리지 않도록 콘텐츠 영역의 위치 및 크기를 지정해야 합니다.

 

또한, 실제 정보 또는 광고 콘텐츠 외에도

 

배너에 적용되는 UI 요소(좌우 화살표, 페이지내이션 등, + 쿠팡의 경우 배너 리스트)도 함께 확인하여

 

UI 요소가 핵심 콘텐츠 영역을 가리거나 방해 받지 않도록 주의가 필요합니다.

 

콘텐츠 영역 예시

 

 

 

 

3단계 - 콘텐츠 유형 확인

콘텐츠 영역까지가 확인이 되었다면 

 

다음으로는 배너안에 들어갈 콘텐츠들의 유형(이미지, 텍스트, 버튼 등)을 확인해야 합니다.

 

특히 배너의 컨셉(정보전달, 광고 등)에 따라 컴퓨터가 읽을 수 있는 텍스트를 넣을 것인지

 

이미지에 텍스트를 포함시켜 하나의 통 이미지로 넣을 것인지 등을 정의해야 하고,

 

배경 이미지의 경우 그래픽 요소의 이미지를 쓸 것인지 인물이 포함된 이미지를 쓸 것인지 등을 고려하여

 

다양한 배리에이션과 그에 따른 배너 가이드 작성이 필요합니다.

 

하나의 통 이미지로 관리되는 배너 예시

배경이미지와 텍스트&버튼 요소로 나뉘어 관리되는 배너 예시

 

 

 

4단계 - CMS 항목 맵핑

콘텐츠 유형까지 정리가 완료되었다면,

 

이제는 실제 운영을 위한 CMS 항목 맵핑(=Back Office 설계 작업)이 필요합니다.

 

가장 기본적으로는 

 

CMS 내 배너 이미지를 업로드할 이미지 업로드 입력폼을 만들어야 합니다. 

 

그리고 해당 입력폼에는 배너의 가로x세로 사이즈, 확장자, 용량 크기 등을 명시하는 것이 좋고,

 

가능하다면, 배너 디자인 가이드를 링크 형태로 함께 제공하는 것도 좋습니다.

 

또한 사용자 화면에서는 배너 이미지의 다양한 스타일 속성값을 디자인/퍼블리싱 팀과 함께 명확하게 정리하는 것이 필요합니다.

 

(예: "width = 100%", "object-fit = cover", "background-color = {CMS에서 입력한 값}")

 

추가로 배너 내 텍스트, 버튼 등을 별도로 제공하는 경우

 

이와 관련된 텍스트 입력폼 및 텍스트 색상, 버튼 배경 색상 입력폼이 필요하고,

 

페이지내이션 및 좌우 화살표 등 UI 요소의 컬러도 변경이 필요하다면, 해당 입력폼도 추가되어야 합니다. 

 

 

 

이를 모두 포함하여 CMS 입력폼 항목을 정리해보면 아래와 같습니다.

• 배너 이미지 업로드 입력폼 (배너 이미지 디자인 가이드 필요)
• 배너 이미지 대체 텍스트 입력폼 (WCAG 항목)
• 배너 영역 배경 컬러 입력폼 (rgba, Hex-code 등 방식 정의 필요)
• 배너 메인 텍스트 입력폼 (텍스트 글자 수 제한 정의 필요, 띄어쓰기<br> 제공 여부 정의 필요)
• 배너 메인 텍스트 컬러 입력폼 
• 버튼 텍스트 입력폼
• 버튼 텍스트 컬러 입력폼 
• 버튼 배경 컬러 입력폼
• 버튼 링크 입력폼 (UTM 등 고려 항목 사전 확인 필요)

 

 

이렇게 배너가 어떻게 보여질지와 어떻게 관리할지를 고려해야만

 

좋은 기획안과 서비스가 나올 수 있습니다.

 

배너 구현의 나쁜 예(좌측)와 좋은 예(우측)

 

 

 

배너 관리 기능이 처음인 UX 기획자라면

 

위 4단계를 순차적으로 확인함에 따라

 

각자 서비스의 방향에 맞는 배너 및 CMS를 설계할 수 있을 것입니다.

 

 

 

 

그리고 이렇게 잘 설계된 CMS - 배너 관리 기능은 운영관리의 효율성을 높이고,

 

사용자에게도 심리스한 경험을 제공하는 웹사이트를 만들 수 있습니다.