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

카페24 사례

1. 카페24 상품 관리 화면의 기본 구조

카페24 상품 관리 화면은 전형적인 관리자 UX의 정석에 가깝다.
앞서 살펴본 일반적인 상품 관리 설계와 거의 동일한 구조를 가진다.

구성은 다음과 같다.

1. 조회(검색) 영역 – 상단
2. 데이터 테이블 컨트롤 영역 – 중간
3. 데이터 테이블 영역 – 하단
4. 선택 시 상세/수정 페이지 진입

이 구조는 대량 데이터 관리 + 빠른 처리에 최적화된 형태다.

 

2. 조회(검색) 영역 설계

상품 관리 화면 상단에는 조회 영역이 위치한다.

이 영역의 역할은 명확하다.

• 관리자가 원하는 상품을 빠르게 찾기
• 전체 데이터를 불필요하게 로딩하지 않기

조회 영역에는 일반적으로 다음 요소들이 포함된다.

• 카테고리
• 상품명
• 상태(진열/판매 여부)
• 등록일/수정일 기간

이 영역은 모든 관리자 화면의 출발점이다.

 

3. 데이터 테이블 컨트롤 영역

조회 영역과 데이터 테이블 사이에는
데이터 테이블 컨트롤 영역이 위치한다.

이 영역은 단순히 보기 좋으라고 있는 것이 아니다.
관리자 업무 효율을 극대화하는 핵심 영역이다.

 

3.1 컨트롤 영역의 역할

• 선택한 상품에 대한 일괄 처리
• 반복 작업 최소화

대표적인 기능은 다음과 같다.

• 선택 상품 진열
• 선택 상품 판매
• 선택 상품 삭제
• 상태 일괄 변경

이 영역이 없다면 관리자는
상품 하나하나를 들어가서 수정해야 한다.

 

4. 데이터 테이블 영역 설계

데이터 테이블에는 상품의 핵심 정보만 노출된다.

중요한 점은 다음이다.

• 목록은 “판단용”
• 상세는 “확인/수정용”

따라서 목록에서는 다음 정보 정도만 제공된다.

• 상품명
• 카테고리
• 판매/진열 상태
• 가격 요약
• 등록일

상세한 정보는 선택 후 상세 페이지에서 확인하도록 설계된다.

 

5. 상품 상세 페이지 구조

목록에서 상품을 선택하면 상세 페이지가 열린다.

카페24의 특징적인 점은 다음이다.

• 상세 페이지에서 즉시 수정 가능
• 별도의 수정 페이지로 이동하지 않음

이는 최근 관리자 UX의 일반적인 추세다.

 

5.1 상세/수정 통합 구조의 장점

• 페이지 수 감소
• 개발 공수 감소
• 운영자의 작업 동선 단축

관리자 입장에서
“상세를 본다”는 것은 대부분 “수정하려고 본다”는 의미이기 때문에
이 구조는 매우 합리적이다.

 

5.2 상세 페이지 내 탭 구조

상품 상세 정보는 내용이 길기 때문에
상단에 탭 기반 바로가기 구조가 제공된다.

예:

• 기본 정보
• 가격/재고
• 카테고리
• 옵션
• 배송

이 구조는 다음을 가능하게 한다.

• 긴 페이지에서도 빠른 이동
• 필요한 정보만 집중적으로 수정

 

6. 카페24 분류(카테고리) 관리의 핵심 개념

상품 관리를 제대로 이해하려면
분류 관리(카테고리 관리) 구조를 이해해야 한다.

카페24에서는 이를 보통 분류 관리라고 부른다.

 

7. 분류 관리 화면 구조

분류 관리 화면은 좌우 분할 구조로 되어 있다.

7.1 좌측 영역 – 분류 트리

좌측에는 카테고리 트리가 표시된다.

• 1차 분류
• 2차 분류
• 3차 분류 …

이 구조는 상품을 담는 ‘그릇’ 역할을 한다.

 

7.2 분류 추가 및 구조 변경

새로운 카테고리를 만들 때는 다음 방식으로 처리한다.

• 분류 추가 버튼 클릭
• 신규 카테고리 생성
• 드래그 앤 드롭으로 위치 조정

예:

• 이북 하위에
  → 뉴 카테 분류 추가

이때 프론트 개발을 새로 하지 않는다.
분류 관리에서 구조를 바꾸는 것만으로 반영된다.

 

뉴 카테를 적용해서 이 상품이 이 두 가지 카테고리에 나올 수 있도록 해달라라고 
제가 지금 상세 페이지에서 변경을 한 건데
그러면 아마도 이 뉴 카테이라고 하는 이 목록에서
기존에 없었던 하나의 상품이 보이는 게 보이실 겁니다.

이렇게 이제 분류를 만들고 상품을 이동시키거나 추가할 수 있게끔 만들어주는 체계가
어드민 상품 관리 쪽에 있다는 거죠.

 

8. 우측 영역 – 분류 속성 관리

우측 영역에서는 선택한 분류의 속성을 관리한다.

예:

• 노출 여부
• 분류명
• 정렬 기준
• 기타 속성

이 구조 덕분에
카테고리 구조와 속성을 한 화면에서 관리할 수 있다.

 

9. 상품과 분류의 관계 (핵심 포인트)

카페24 분류 관리의 가장 중요한 개념은 다음이다.

상품은 하나 이상의 분류에 속할 수 있다.

즉,

• 상품은 단일 카테고리에만 묶이지 않는다.
• 여러 분류에 동시에 노출될 수 있다.

 

10. 상품을 분류에 연결하는 방식

상품 상세 페이지에서 분류를 선택/변경할 수 있다.

 

예

• 기존: 이북 카테고리만 속함
• 변경: 이북 + 뉴 카테 동시 적용

이렇게 설정하면,

• 이북 목록에도 상품 노출
• 뉴 카테 목록에도 상품 노출

즉, 상품은 하나지만 노출 맥락은 여러 개가 된다.

---

이 구조가 중요한 이유

이 구조의 핵심 가치는 다음과 같다.

1. 프론트 개발 없이 구조 변경 가능
2. 기획전/테마/신규 카테고리 유연 대응
3. 상품 재사용 극대화
4. 운영 비용 감소

기획자가 이 구조를 이해하고 있으면
“상품을 어디에 어떻게 노출할 것인가”를
개발이 아닌 운영 설계로 해결할 수 있다.

 

상품 관리 + 분류 관리 한 문장 정리

카페24 상품 관리 구조는
상품이라는 데이터 원본을 중심으로,
분류 관리라는 구조를 통해
프론트 노출을 유연하게 제어하는 시스템이다.

 

기획자가 반드시 가져가야 할 인사이트

• 상품 관리 ≠ 전시 관리
• 분류 관리는 전시를 위한 구조 설계다
• “카테고리를 만든다”는 것은 화면을 만드는 게 아니다
• 운영으로 해결할 수 있는 것은 구조로 풀어야 한다

이걸 이해하면
백오피스 설계 수준이 한 단계 이상 올라간다.