[백오피스] 상품 관리 시스템 설계: 옵션·재고·노출 설계법

운영자는 상품을 ‘등록’하는 게 아니라, ‘지속적으로 관리’해야 합니다. Vue + Laravel로 만드는 효율적인 상품 관리 화면, 지금 설계합니다.

쇼핑몰에서 상품 관리 페이지는 ‘콘텐츠 관리의 본진’이자 운영자가 가장 자주 마주하는 공간입니다. 이 화면이 복잡하거나 느리면 업무 효율이 급격히 떨어지죠.

이번 글에서는 다음 기능을 중심으로 실전 상품 관리 UI를 구성합니다.

- 상품 목록 검색 및 필터링

- 옵션(색상/사이즈 등) 정보 구조

- 재고 실시간 변경 & 자동 알림

- 상품 노출 설정 (메인/카테고리/비노출 등)

- 등록일, 상태, 노출 여부 수정 흐름

디자인보다 실무에 강한 상품 관리 시스템, Laravel + Vue로 구축해봅시다.

목차

상품 검색 & 상태 필터링 옵션 & 재고 관리 구조 노출 설정 (카테고리, 메인, 비노출) 빠른 수정 – 가격, 상태, 등록일 재고 테이블 구성 & 알림 로직 Vue 상품 리스트 UI 구조

상품 검색 & 상태 필터링

운영자가 가장 많이 하는 행동 중 하나는 특정 조건의 상품을 빠르게 찾는 것입니다. 검색 항목 예시:

• 상품명 / 상품코드 / 바코드 검색
• 등록일, 최근 수정일 범위 필터
• 판매 상태 (판매중 / 품절 / 숨김)
• 카테고리, 브랜드, 가격 범위
• 노출 상태 (메인 / 기획전 / 비노출)

Vue에서는 <ProductFilterPanel /> 컴포넌트를 만들고, Laravel에서는 ProductFilterService를 통해 조건별 쿼리를 scope로 나누어 효율적으로 처리합니다.

옵션 & 재고 관리 구조

의류, 화장품, 식품 등 대부분의 쇼핑몰은 색상 / 사이즈 / 무게 / 포장단위 같은 옵션이 필수입니다. 옵션 구조는 아래처럼 설계합니다:

컬럼	설명
product_options	옵션명(예: 색상/사이즈), 옵션 순서 등
product_option_items	각 옵션값 (예: Red, L)
product_stocks	각 조합(색상+사이즈)의 재고, 가격, 바코드

Vue에서는 <OptionMatrixTable /> UI로 구성하고, Laravel에서는 hasManyThrough 관계로 옵션-재고 연동 구조를 만듭니다.

노출 설정 (카테고리, 메인, 비노출)

운영자는 상품을 단순 등록하는 게 아니라, 판매 채널과 노출 위치를 관리합니다. 노출 설정 항목 예시:

• 카테고리별 진열 여부
• 메인 배너, 추천 상품 섹션 노출
• 비노출 (품절 / 시즌 종료 / 미검수)
• 기획전 / 이벤트 상품 포함 여부

Vue에서는 토글 스위치 형태로 설정하며, Laravel에서는 pivot 테이블 또는 JSON 필드로 다채널 노출을 관리할 수 있습니다.

빠른 수정 – 가격, 상태, 등록일

운영자는 상품 하나를 열어 수정하는 대신, 리스트에서 바로 수정할 수 있는 인터페이스를 원합니다. 빠른 수정 항목:

• 판매 가격 / 소비자 가격
• 판매 상태 (판매중 / 숨김)
• 노출 순서
• 등록일 / 종료일 수정

Vue에서는 <EditableCell> 컴포넌트로 구현하고, 변경 시 PATCH 요청을 보내 /api/admin/products/{id}에서 개별 필드를 업데이트합니다.

재고 테이블 구성 & 알림 로직

운영자 입장에서 가장 민감한 이슈는 재고 부족으로 인한 판매 누락입니다. 이 문제를 방지하기 위해 다음 구조를 구성합니다:

• 상품 옵션별 실시간 재고 표시
• 0 이하 재고 시 자동 숨김 처리
• 재고 임계값 도달 시 관리자 알림
• 수기 재고 입력 / 일괄 업데이트 지원

Laravel에서는 product_stocks 테이블 기준으로 캐시/알림 스케줄을 구성하고, Vue에서는 <StockTable> 컴포넌트로 시각적으로 강조된 UI를 제공합니다.

자주 묻는 질문 (FAQ)

옵션이 2단 이상인 상품도 관리할 수 있나요?

네. 색상-사이즈-패키지처럼 2단, 3단 옵션도 product_options → product_option_items 조합으로 구성 가능합니다.

상품을 일괄 비노출 처리하고 싶을 땐 어떻게 하나요?

Vue 테이블에서 체크박스로 선택 후 일괄 비노출 처리 API 호출로 간단히 처리 가능합니다.

재고가 0인데 노출 상태를 유지할 수 있나요?

가능합니다. 재고 기준에 따라 자동 숨김 여부를 설정할 수 있으며, 0이더라도 ‘품절 표시 후 노출’ 전략도 구현할 수 있습니다.

상품 상태/가격을 리스트에서 바로 수정 가능한가요?

네. <EditableCell> 컴포넌트로 가격, 상태, 등록일 등을 리스트에서 바로 수정 가능하게 구현할 수 있습니다.

카테고리에 따라 상품을 자동 분류할 수 있나요?

상품명 키워드, 태그, 브랜드를 기준으로 조건 분류 로직을 추가하면 자동 진열 구조도 가능합니다.

메인에 노출되는 상품만 따로 관리할 수 있나요?

네. 메인 진열 플래그 또는 별도 기획전 ID로 그룹화해 메인용 상품 리스트를 따로 추출하고 관리할 수 있습니다.

 

상품 관리 화면은 단순 등록 기능을 넘어서, 운영자가 ‘콘텐츠를 전략적으로 다룰 수 있는 공간’이어야 합니다.

이번 3편에서는 Vue + Laravel 기반으로 상품 검색, 옵션 구성, 재고 연동, 노출 제어, 빠른 수정까지 자사몰 운영자 입장에서 꼭 필요한 기능을 실전 위주로 설계해봤습니다. 상품은 곧 매출입니다. 운영자가 자유롭고 빠르게 상품을 다룰 수 있어야 쇼핑몰 전체 퍼포먼스가 올라갑니다.

다음 편 4편에서는 회원 관리 – 등급, 활동 로그, 문의/리뷰 연동으로 이어집니다.

운영자의 눈으로 다시 짜는 관리자 시스템, 계속 달려봅시다! 🚀