DPS Store (디플샵 스토어)

개요

DPS Store는 업체(테넌트)별 독립적인 온라인 스토어를 운영할 수 있는 멀티테넌트 팝업 스토어 플랫폼입니다. DPS API와 연동하여 상품·주문을 실시간으로 동기화하며, 테넌트별로 테마·페이지·정책을 자유롭게 커스터마이징할 수 있습니다.

고정형(JSON 레이아웃), 자유형(노드 기반 비주얼 빌더), 생성형(AI 자동 생성) 3가지 테넌트 타입을 지원하여 다양한 스토어 구축 니즈에 대응합니다.

주요 기능

멀티테넌트 아키텍처

• 테넌트별 독립적인 테마(로고, 컬러, 폰트), 정책, 페이지, 약관 설정
• 20개+ DB 테이블로 테넌트·상품·주문·고객·스탬프 데이터 분리 관리
• 4가지 도메인 접근 방식 지원:

• Next.js 16 proxy.ts에서 호스트명 분석 → 서브도메인 추출 → 내부 경로 rewrite
• Caddy On-Demand TLS로 서브도메인/커스텀 도메인 자동 SSL 인증서 발급
• /api/caddy/check-domain 엔드포인트로 도메인 유효성 검증 (DB 조회 기반)

3가지 테넌트 타입

• 고정형(FIXED): JSON 기반 레이아웃/스타일 설정 + 관리자 에디터로 페이지 구성
• 자유형(FLEXIBLE): 노드 기반 드래그앤드롭 비주얼 빌더로 자유로운 페이지 구축
• 생성형(GENERATIVE): AI가 자동으로 페이지 생성

노드 기반 비주얼 빌더

• 드래그앤드롭으로 페이지 요소 배치·편집하는 비주얼 에디터
• 트리 구조 노드 시스템으로 중첩 레이아웃 표현
• 노드별 속성 편집 (텍스트, 이미지 업로드, Props, 스타일)
• 다국어(한/영/일/베) 텍스트 콘텐츠 편집 지원
• 보안 검증 (허용 요소/CSS 제한) 및 스타일 정제 처리

페이지 시스템

10개 페이지 타입으로 고객 플로우 구성:

페이지별 활성화/비활성화 설정이 가능하며, 비활성화된 페이지는 자동으로 건너뜁니다.

상품·주문 관리

• DPS API 연동 상품 동기화 및 실시간 조회
• 트리 구조 옵션 시스템 (옵션 그룹 → 옵션값 → SKU)
• 장바구니 → 주문서 → 주문 완료 전체 플로우
• DPS 양방향 주문 동기화
• 작업지시서 PDF 생성 + 디자인 파일 일괄 다운로드 (ZIP)

현장 결제 및 캐셔 시스템

• QR 코드 기반 현장 결제 프로세스
• 캐셔 전용 인터페이스 (장바구니 확인 + 결제 확인)
• 작업자(Worker) 전용 페이지로 주문 처리

스탬프 수집 시스템

• 고객 로열티 스탬프 적립 및 관리
• 관리자 스탬프 통계 대시보드
• 브랜드별 스탬프 설정

다국어 (i18n)

• 한국어, 영어, 일본어, 베트남어 4개 언어 지원
• UI 텍스트, 약관, 상품명, 옵션명까지 전체 다국어 대응
• 테넌트별 지원 언어 및 기본 언어 설정
• MyMemory API 연동 자동 번역 기능

관리자 페이지

• 페이지 에디터 (레이아웃/스타일/콘텐츠 설정)
• 상품·전시·카테고리 관리 (드래그앤드롭 정렬)
• 테마 설정 (로고, 컬러, 폰트, 공통 스타일)
• 정책 설정 (배송비, 에디터 탭, 세션 타임아웃 등)
• 약관 관리 (다국어, 4가지 타입)
• 알림 수신자 관리 (SMS/이메일)
• 언어 설정 (지원 언어, 기본 언어)
• 스탬프 통계 대시보드
• 폰트 관리

PWA 지원

• 멀티테넌트 매니페스트 엔드포인트
• 서비스 워커 기반 오프라인 지원
• 키오스크 모드 대응 (자동 로그아웃)

기술 스택

아키텍처

도메인 라우팅 플로우

배포 아키텍처

Blue-Green 무중단 배포 방식을 적용했습니다.

• PM2로 Blue(:4033), Green(:4034) 두 인스턴스를 각각 독립 빌드 디렉토리(.next-blue, .next-green)로 운영
• 배포 시 비활성 인스턴스에 빌드 → 헬스 체크(30초 타임아웃, 307/308 리다이렉트 허용) → Caddy ACTIVE_PORT 환경변수 전환 → systemctl reload caddy
• Cron 프로세스(자동 주문확인)도 배포 시 재등록하여 활성 포트 반영
• 롤백 스크립트로 이전 인스턴스 헬스 체크 후 즉시 트래픽 복구

담당 역할

1인 풀스택 개발로 기획부터 설계, 개발, 배포까지 전체를 담당했습니다.

• 시스템 설계: 멀티테넌트 아키텍처 설계, DB 스키마 설계 (20개+ 테이블), API 설계 (70개+ 엔드포인트)
• 프론트엔드: 10개 페이지 타입별 고객 UI, 관리자 에디터, 노드 기반 비주얼 빌더, 4개 언어 다국어 대응
• 백엔드: Next.js API 라우트, DPS API 양방향 동기화, 파일 업로드/다운로드, 스탬프/알림 시스템
• 인프라: Caddy 리버스 프록시 설정, PM2 Blue-Green 무중단 배포, Object Storage 연동, PWA 구성

트러블슈팅

서브도메인 경로 중복 문제

• 상황: musinsa.store.dpl.shop/signup 접속 시 내부 링크가 /musinsa/signup으로 생성되어 경로가 중복됨
• 원인: 도메인 판별 로직에서 MAIN_DOMAINS를 하드코딩하여 서브도메인 호스트를 메인 도메인으로 오인
• 해결: 환경변수 기반으로 MAIN_DOMAINS/SUBDOMAIN_HOSTS를 분리하고, useTenantPath 훅에서 서브도메인 접속 시 테넌트 prefix를 생략하도록 수정

Caddy On-Demand TLS 인증서 미발급

• 상황: 커스텀 도메인 등록 후 HTTPS 접속 시 인증서 오류 발생
• 원인: Caddy의 on_demand_tls.ask 엔드포인트가 비활성 포트를 바라보고 있어 검증 실패
• 해결: Caddy의 {$ACTIVE_PORT} 환경변수를 systemd EnvironmentFile로 주입하여 배포 시 자동 반영되도록 구성

회고

약 2개월간 멀티테넌트 스토어 플랫폼을 설계부터 배포까지 1인으로 구축한 프로젝트입니다. 고정형/자유형/생성형 3가지 테넌트 타입을 설계하면서, JSON 기반 레이아웃과 노드 기반 비주얼 빌더라는 서로 다른 접근 방식을 하나의 시스템에서 유연하게 지원하는 구조를 만든 것이 의미 있었습니다.

Next.js 16의 proxy(구 middleware) 변경사항을 도입하면서 도메인 기반 멀티테넌트 라우팅을 구현한 경험과, Prisma 7의 브라우저 안전 Enum 활용 등 최신 기술 스택의 실전 적용 경험을 쌓을 수 있었습니다. 이후 현장 결제(QR/캐셔) 시스템, 스탬프 로열티 프로그램, 4개 언어 다국어 지원, PWA, Blue-Green 무중단 배포까지 확장하면서 실제 운영 환경에서의 안정성과 확장성을 확보했습니다.