“노출을 설계하는 기술”

백오피스에서 전시 영역은 단순한 관리 기능이 아닙니다. 그것은 사용자 화면에 무엇을, 언제, 어디에 보여줄 것인지를 통제하는 핵심 운영 장치입니다. 많은 분들이 전시 영역을 콘텐츠를 등록하는 공간으로 오해하지만, 실제로는 콘텐츠를 새로 생산하는 영역이라기보다는 이미 존재하는 자산을 ‘어떻게 노출할 것인가’를 결정하는 제어 영역에 가깝습니다.

이번 글에서는 전시 영역 화면설계를 구조적으로 정리해 보겠습니다. 특히 배너, 추천 상품, 구좌(slot) 개념, 그리고 실제 현업에서 발생할 수 있는 “배너 하나 추가해 주세요”와 같은 요청 상황에서 기획자가 어떤 사고를 해야 하는지까지 함께 다루겠습니다. 전시 영역은 단순 UI 설계가 아니라 구조 이해와 운영 사고가 결합된 영역이기 때문입니다.

 

전시 영역의 역할 – “노출 제어”의 영역

전시 영역의 핵심은 세 가지로 요약됩니다. 첫째, 어디에 노출할 것인지에 대한 위치 관리, 둘째, 보여줄 것인지 숨길 것인지에 대한 노출 여부 관리, 셋째, 여러 항목이 있을 때 어떤 순서로 보여줄 것인지에 대한 순서 관리입니다.

즉, 전시는 콘텐츠 자체를 만드는 기능이 아니라, 콘텐츠의 ‘가시성’을 통제하는 기능입니다. 운영자는 전시 영역을 통해 “지금 이 배너를 보여줄 것인가?”, “이 추천 상품을 메인 최상단에 둘 것인가?”, “이 이벤트를 잠시 비활성화할 것인가?”와 같은 결정을 즉시 실행할 수 있어야 합니다. 이 점을 명확히 이해하지 못하면 전시 영역을 단순 등록 화면으로만 설계하게 되고, 운영 편의성과 확장성을 놓치게 됩니다.

 

전시 영역의 기본 구조 – 목록 → 상세 → 등록

전시 영역은 대부분 일정한 구조를 따릅니다. 전시 목록 페이지, 전시 상세(수정) 페이지, 전시 등록(추가) 페이지입니다. 이 구조는 배너, 팝업, 메인 추천 영역 등 거의 모든 전시 기능에 공통적으로 적용됩니다.

목록 페이지는 전체 상태를 한눈에 보여주는 곳입니다. 지금 어떤 전시 요소가 어디에, 어떤 상태로 노출되고 있는지를 빠르게 파악할 수 있어야 합니다.
상세 페이지는 실제 제어가 이루어지는 곳입니다. 위치 변경, 이미지 교체, 활성/비활성 전환, 삭제 등 모든 조작이 이곳에서 이루어져야 합니다.
등록 페이지는 신규 항목을 추가하는 영역입니다. 전시 유형에 따라 신규 이미지 업로드 방식일 수도 있고, 기존 데이터를 불러오는 방식일 수도 있습니다.

이 기본 구조는 전시 영역 설계의 뼈대입니다.

 

3. 배너 관리 화면 설계

3.1 구좌(slot) 개념의 정의

배너를 설계할 때 가장 먼저 이해해야 할 것은 ‘구좌’ 개념입니다. 예를 들어 메인 페이지에는 상단, 중단, 하단과 같이 물리적 위치가 존재합니다. 이를 각각 1번 구좌, 2번 구좌, 3번 구좌로 정의합니다. 관리자는 특정 구좌에 어떤 배너를 노출할지 선택합니다. 즉, “어디에 보여줄 것인가”가 먼저 정의되고, 그 다음에 “무엇을 보여줄 것인가”가 결정됩니다. 구좌는 전시 관리의 기준점입니다.

3.2 배너 목록 페이지 설계

배너 목록 페이지에서는 배너명, 노출 위치(구좌), 노출 상태(활성/비활성), 노출 기간, 등록일 및 수정일과 같은 정보가 한눈에 보여야 합니다.
이 페이지의 목적은 단순합니다. “지금 어떤 배너가 어디에 노출되고 있는가?”를 즉시 파악할 수 있어야 합니다. 운영자는 이 화면을 통해 전체 전시 현황을 통제합니다.

3.3 배너 상세(수정) 페이지 설계

목록에서 특정 배너를 선택하면 상세 페이지로 진입합니다. 이곳에서는 노출 위치 변경, 이미지 변경, 활성/비활성 상태 변경, 추가 및 삭제 기능이 모두 제공되어야 합니다.
전시 영역의 특성상, “지금 보여줄 것인가, 숨길 것인가”를 빠르게 결정할 수 있어야 하므로 활성/비활성 전환 기능은 반드시 포함되어야 합니다. 활성은 즉시 사용자 화면에 노출되는 상태이고, 비활성은 데이터는 유지하되 화면에 표시되지 않는 상태입니다.

3.4 슬라이드/스와이프 영역 설계 시 주의점

슬라이드나 스와이프 영역이 있는 경우에는 최대 노출 개수, 추가 시 쌓이는 방식, 삭제 시 순서 재정렬 방식 등을 반드시 설계에 포함해야 합니다. 이 정보가 명확하지 않으면 운영자는 실제 노출 결과를 예측할 수 없습니다. 단순히 “여러 개 등록 가능”이라고만 두는 것은 설계가 아닙니다. 

 

4. 메인 추천 상품 전시 설계

4.1 배너 전시와의 차이

배너는 신규 이미지를 업로드하는 방식입니다. 그러나 추천 상품 전시는 이미 존재하는 상품 데이터를 불러와 배치하는 구조입니다. 전시 영역이지만 데이터 출처가 다릅니다. 배너는 신규 등록, 추천 상품은 기존 데이터 선택이라는 점에서 설계 접근 방식이 달라집니다.

4.2 추천 상품 등록 방식

추천 상품 전시에는 추가 버튼, 상품 선택 팝업, 상품 검색 기능, 선택 후 등록 기능이 필요합니다. 상품은 이미 상품 관리 영역에 존재하므로, 전시 관리에서는 해당 상품을 ‘꽂는’ 구조입니다. 
상품 선택 시에는 카테고리, 상품명 검색, 판매 상태(판매중/품절 등) 기준으로 필터링할 수 있어야 합니다. 또한 여러 상품을 한 번에 선택해 등록할 수 있어야 운영 효율이 높습니다.

4.3 추천 상품 순서 관리

추천 상품은 순서가 매우 중요합니다. 위/아래 이동 버튼이나 드래그 앤 드롭 기능을 통해 순서를 조정할 수 있어야 합니다. 어떤 상품을 먼저 보여줄지 운영자가 직접 결정할 수 있어야 합니다. 이는 마켓컬리 메인 추천 영역과 동일한 관리 개념입니다.

 

5. 전시 배너 요청 상황에서의 기획자 사고

마켓컬리 대표가 “기획전 상단에 들어갈 배너를 하나 추가해 주세요”라고 요청했다고 가정해 보겠습니다. 겉보기에는 단순한 요청입니다. 그러나 기획자는 즉시 구조를 떠올려야 합니다. 기획전 상단 배너를 위한 구좌가 이미 존재하는지, 존재한다면 단순 등록으로 해결 가능한지, 존재하지 않는다면 구조 변경이 필요한지 판단해야 합니다.
이미 구좌가 존재한다면 운영 업무 수준의 변경입니다. 그러나 해당 구좌 자체가 없다면 새로운 구좌 정의, 관리 구조 설계, 목록 추가, 프론트 연결 작업이 필요합니다. 이는 구조 변경 작업이며 난이도가 다릅니다.

이 차이를 인지하지 못하고 “바로 가능하다”고 답하는 것은 기획자로서 위험한 대응입니다. 올바른 대응은 “기존 구조 확인 후 일정 안내드리겠습니다”입니다.

 

6. 배너 코드 기반 관리 방식

구좌가 많아질 경우 배너 코드 기반 관리 방식이 사용됩니다. 각 구좌에 고유 코드를 부여하고, 프론트는 해당 코드 기준으로 배너를 호출합니다.
예를 들어 BANNER_MAIN_TOP, BANNER_EVENT_TOP과 같은 방식입니다. 이 방식은 확장성과 프론트–백오피스 연계 측면에서 유리합니다.

 

전시는 구조 위에서 작동한다

전시 영역은 단순 이미지 등록 화면이 아닙니다. 그것은 노출을 제어하는 구조화된 영역입니다. 목록에서 전체 상태를 보여주고, 상세 페이지에서 모든 조작을 가능하게 하며, 기존 데이터 기반 전시와 신규 등록 전시를 구분하고, 순서 변경 기능을 필수로 포함해야 합니다.

그리고 무엇보다 중요한 것은, 배너는 단순 이미지가 아니라 구조 위에서 작동하는 전시 요소라는 사실입니다. 기존 구좌에 추가하는 것과 신규 구좌를 만드는 것은 전혀 다른 작업입니다. 이 차이를 이해하는 순간, 전시 설계는 단순 UI 설계를 넘어 구조 설계의 영역으로 확장됩니다.