Product/2026.01.04/7 min read

홈과 샵을 위한 배너 관리 시스템

홈, 샵, 스트립, 케어 영역에 들어가는 배너를 운영자가 직접 등록하고 순서를 조정할 수 있게 만든 과정입니다.

BannerCMSMobile

Code notes

코드에서 확인한 구현 포인트

배포 기준 2026.01.04

관련 파일

apps/web/app/admin/banners/page.tsxapps/web/app/admin/shop-banners/page.tsxapps/web/app/api/admin/banners/route.tsapps/web/app/api/shop/banners/route.ts

구현 메모

운영자가 등록하는 배너와 앱에서 읽어가는 배너 API를 분리해, 관리자 입력 화면과 모바일 노출 API의 책임을 나눴다.

샵 배너는 market, is_active, sort_order 기준으로 읽히도록 설계되어 한국/글로벌 지면과 노출 우선순위를 함께 다룬다.

이미지 업로드 API를 별도 라우트로 두어 배너 저장 로직과 파일 처리 로직이 섞이지 않게 했다.

배너는 작지만 자주 바뀌는 제품 요소

배너는 앱에서 가장 눈에 잘 띄는 운영 지면이다. 이벤트를 알릴 수도 있고, 특정 기능으로 사용자를 안내할 수도 있고, 나중에는 광고 상품으로도 이어질 수 있다.

문제는 배너가 자주 바뀐다는 점이다. 이미지, 링크, 노출 순서, 활성 상태를 매번 배포로 바꾸면 운영 속도가 느려진다. 그래서 배너는 초기에 관리자 도구로 분리할 필요가 있었다.

같은 패턴, 다른 지면

홈 배너와 샵 배너는 비슷해 보이지만 쓰임이 다르다. 홈에서는 앱의 큰 흐름을 안내하고, 샵에서는 구매나 탐색과 가까운 액션을 만든다. 스트립 배너나 케어 배너는 더 작은 맥락에서 사용자를 움직인다.

그래서 데이터 구조와 관리자 경험은 최대한 비슷하게 유지하되, 지면 이름과 목적은 운영자가 이해하기 쉬운 언어로 분리했다.

나중에 광고로 이어질 수 있게

처음 배너 시스템은 운영 콘텐츠 관리에 가까웠지만, 이후 광고 배너 시스템을 붙일 수 있는 기반이 되었다. 이미지, 링크, 위치, 활성 기간, 정렬이라는 개념은 광고 상품에도 그대로 필요했다.

작은 운영 기능을 만들 때도 나중의 수익 모델과 연결될 수 있는지를 생각해두면, 나중에 완전히 새로 만들지 않아도 된다.