백오피스 화면설계 심화 (2)

전시 영역 화면설계 정리

1. 전시 영역의 역할

전시 영역은 사용자 화면에 무엇을, 언제, 어디에 노출할 것인지 결정하는 관리 영역이다.
콘텐츠를 새로 만드는 영역이라기보다, 노출 여부와 배치 순서를 제어하는 영역에 가깝다.

전시 영역의 핵심은 다음 세 가지다.

1. 노출 위치 관리
2. 노출 여부(활성/비활성) 관리
3. 노출 순서 관리

 

2. 전시 영역의 기본 구조

전시 영역은 보통 다음과 같은 구조로 설계된다.

1. 전시 목록 페이지
2. 전시 상세(수정) 페이지
3. 전시 등록(추가) 페이지

이 구조는 배너, 팝업, 메인 추천 영역 등 대부분의 전시 기능에 공통적으로 적용된다.

 

3. 배너 관리 화면 설계

3.1 배너 위치 개념 정의

메인 페이지 배너를 예로 들면, 보통 다음과 같이 구좌 개념으로 나뉜다.

• 1번 구좌: 메인 상단
• 2번 구좌: 메인 중단
• 3번 구좌: 메인 하단

이 구좌 개념은 전시 관리의 기준점이 된다.
관리자는 각 구좌에 어떤 배너를 노출할지 선택하게 된다.

 

 

3.2 배너 목록 페이지

배너 목록 페이지에서는 다음 정보를 한눈에 확인할 수 있어야 한다.

• 배너명
• 노출 위치(구좌)
• 노출 상태(활성 / 비활성)
• 노출 기간(있는 경우)
• 등록일 / 수정일

이 페이지의 목적은 “지금 어떤 배너가 어디에 노출되고 있는지”를 빠르게 파악하는 것이다.

 

 

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

배너 목록에서 특정 항목을 선택하면 배너 상세(수정) 페이지로 진입한다.
이 페이지에서는 다음 기능들이 반드시 포함되어야 한다.

• 노출 위치 변경 (메인 상단 / 중단 / 하단 등)
• 이미지 변경
• 활성 / 비활성 상태 변경
• 배너 추가 / 삭제

즉, 전시와 관련된 모든 조작은 상세 페이지에서 가능해야 한다.

 

 

3.4 활성 / 비활성의 의미

전시 영역에서 활성 / 비활성은 매우 중요한 개념이다.

• 활성: 사용자 화면에 즉시 노출
• 비활성: 데이터는 유지하되 화면에는 노출되지 않음

운영자는 이 기능을 통해
“지금 보여줄 것인지, 잠시 숨길 것인지”를 즉각적으로 제어할 수 있다.

 

 

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

슬라이드 또는 스와이프 영역이 있는 경우, 다음 사항이 설계에 포함되어야 한다.

• 최대 몇 개까지 노출 가능한지
• 추가 시 어떻게 쌓이는지
• 삭제 시 순서가 어떻게 변경되는지

이 정보가 없으면 운영자는 실제 노출 결과를 예측하기 어렵다.

 

 

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

4.1 배너 전시와의 차이

배너 전시는 이미지를 새로 등록하는 방식이지만,
메인 추천 상품 전시는 이미 존재하는 상품을 불러와서 배치하는 방식이다.

즉, 전시 영역이지만 데이터의 출처가 다르다.

• 배너: 신규 이미지 등록
• 추천 상품: 기존 상품 선택

 

 

4.2 추천 상품 등록 방식

추천 상품을 전시하기 위해서는 다음 기능이 필요하다.

1. 추가 버튼
2. 상품 선택 팝업 또는 선택 화면
3. 상품 목록 호출
4. 선택 → 등록

상품은 이미 상품 관리 영역에 존재하므로,
전시 관리에서는 해당 상품을 불러와서 꽂는 구조가 된다.

 

 

4.3 상품 선택 시 고려 요소

상품을 불러올 때는 다음과 같은 기준으로 선택할 수 있어야 한다.

• 상품 카테고리
• 상품명 검색
• 상태(판매중 / 품절 등)

관리자는 여러 상품을 선택해 한 번에 등록할 수 있어야 한다.

 

 

4.4 추천 상품 순서 관리

추천 상품이 등록된 이후에는 순서 변경 기능이 반드시 필요하다.

• 위 / 아래 이동
• 드래그 앤 드롭(가능한 경우)

이를 통해 메인 페이지에서
어떤 상품을 먼저 보여줄지 운영자가 직접 결정할 수 있다.

마켓컬리 메인 추천 상품 영역과 동일한 관리 개념이다.

 

 

5. 전시 영역 설계의 핵심 요약

전시 영역 설계의 핵심은 다음으로 정리된다.

1. 전시는 “노출 제어”를 위한 영역이다.
2. 목록 페이지에서 전체 상태를 한눈에 보여준다.
3. 상세 페이지에서 위치, 이미지, 활성 여부를 모두 제어한다.
4. 기존 데이터를 불러오는 전시(추천 상품)와 신규 등록 전시(배너)를 구분한다.
5. 순서 변경 기능은 전시 영역에서 필수 요소다.

 

정리하자면, 
배너, 팝업, 메인 영역 등 사용자 화면 일부에 대해  노출 여부·위치·순서를 관리하는 백오피스 기능이며,
목록 → 상세(또는 추가) 구조로 설계된다.

 

---

전시 배너 요청 상황에서의 기획자 사고 방식과 설계 포인트

상황 정의

마켓컬리 대표가 기획자에게 다음과 같이 요청했다고 가정한다.

“김 대리님, 기획전 상단에 들어갈 배너를 하나 추가해 주세요.”

이 요청은 단순해 보이지만,
기획자 입장에서는 즉시 구현 가능한 요청인지, 구조 변경이 필요한 요청인지를 구분해야 한다.

 

초급 기획자의 반응

가장 흔한 반응은 다음과 같다.

• “네, 확인해 보겠습니다.”

이 반응 자체가 틀린 것은 아니다.
다만 기획자로서의 판단과 구조 이해가 드러나지는 않는다.

 

한 단계 나은 기획자의 사고

조금 더 나은 기획자는 다음 지점을 인지한다.

• 배너는 아무 곳에나 추가되는 요소가 아니다.
• 배너는 반드시 **‘구좌(slot)’**라는 개념 위에서 관리된다.
• 기존 배너 관리 구조 안에 해당 구좌가 존재하는지 확인해야 한다.

즉, 기획자는 다음 질문을 먼저 떠올려야 한다.

• 기획전 상단 배너를 위한 구좌가 이미 존재하는가?
• 존재한다면 단순 등록으로 해결 가능한가?
• 존재하지 않는다면 구조 변경이 필요한가?

 

배너 구좌 개념 정리

배너는 보통 구좌 단위로 정의된다.

예시는 다음과 같다.

• 메인 페이지 상단
• 메인 페이지 중단
• 메인 페이지 하단
• 리조트 메인
• 패키지 메인
• 기획전 메인 상단
• 기획전 메인 중단

이처럼 ‘어디에 노출되는 배너인가’가 먼저 정의되고,
그 다음에 해당 구좌에 배너를 등록하는 구조다.

 

설계하는 페이지가 이제 배너 수정 상세 페이지에 들어가 있는 건데,
이렇게 전시에서는 이 목록에 대한 부분을 선택해서 들어갔을 때
이 상세 페이지에서 위치를 수정하거나 이미지를 수정하거나
활성 비활성화를 수정하거나 추가하거나 삭제하거나 이러한 기능들을 같이 넣어줘야 된다는 겁니다.

 

 

전시 메뉴의 특성은 그래서 활성 비활성화을 통해서
이거를 지금 보여줄 거야 보여주지 않을 거야 같은 것들을 결정하는 것이고,
만약에 스와이프 혹은 슬라이드 되는 영역이 있으면 그 영역에 몇 개의 정보가 어떻게 들어갈 수가 있는지,
추가했을 때 삭제했을 때 어떤 것들이 들어가는지를 보일 수 있도록 해줘야 한다는 것이죠.

 

기존 구좌에 배너를 추가하는 경우

이미 다음과 같은 구좌가 존재한다고 가정한다.

• 기획전 메인 상단

이 경우 기획전 상단 배너 추가는 비교적 간단하다.

• 기존 배너 관리 메뉴에서
• 해당 구좌를 선택하고
• 배너 이미지를 추가하거나 교체하면 된다.

이 경우는 운영 업무 수준의 변경에 해당한다.

 

존재하지 않는 구좌에 배너를 추가하는 경우

문제는 기획전 메인 상단이라는 구좌 자체가 없는 경우다.

이 경우는 단순 배너 등록으로 해결되지 않는다.

필요한 작업은 다음과 같다.

1. 새로운 배너 구좌 정의
2. 해당 구좌를 관리할 수 있는 구조 설계
3. 배너 관리 목록에 구좌 추가
4. 프론트에서 해당 구좌를 인식하도록 연결

즉, 이는 구조 설계 변경 작업이다.

 

전시라고 하는 부분은 배너 팝업 혹은 메인 페이지의 일부 영역에 대해 노출 여부를 설정하는 기능이고
이것을 이렇게 이제 목록 페이지 를 제공해서 전체를 한눈에 볼 수 있게 하고
여기서 추가해서 들어가거나 상세를 눌러 들어가게 되면 그 상세 페이지나 추가 페이지에서
이렇게 기존 것을 불러서 등록하는 방식과 혹은 새롭게 이미지를 등록하는 방식으로 만들 수 있다.
이 내용이 이제 핵심이라고 할 수 있어요.

 

배너 코드 기반 관리 방식

구좌가 많아질 경우,
일부 시스템에서는 배너 코드를 기준으로 관리하기도 한다.

1) 배너 코드 방식의 개념

• 각 배너 구좌마다 고유한 배너 코드 부여
• 배너 관리 화면에서는 코드 기준으로 목록 표시
• 프론트에서는 특정 코드에 해당하는 배너를 호출

예:

• BANNER_MAIN_TOP
• BANNER_EVENT_TOP
• BANNER_PACKAGE_MIDDLE

이 방식의 장점은 다음과 같다.

• 구좌 추가 시 구조 확장이 용이
• 코드 기준으로 명확한 관리 가능
• 프론트–백오피스 연계가 명확해짐

 

2) 기획자가 반드시 인지해야 할 핵심 포인트

이 사례에서 기획자가 반드시 알고 있어야 할 핵심은 다음이다.

1. 배너는 단순 이미지가 아니라 구조화된 전시 요소다.
2. 배너 추가 요청은 항상 구좌 존재 여부를 먼저 확인해야 한다.
3. 기존 구좌에 추가하는 것과 신규 구좌를 만드는 것은 난이도가 다르다.
4. 구조 변경이 필요한 경우, 즉시 가능하다고 답하면 안 된다.
5. “기존 구조 확인 후 일정 안내”가 기획자의 올바른 대응이다.

 이미 배너의 영역이 뚫려 있는 곳에 하나를 더 추가하는 건 어렵지 않은 건데
없는 영역에 이 배너를 추가하는 것은 그것보다 좀 어려운 일인 거죠. 그래서 배너 코드를 만들기도 해요.