Back to Resume

Sellectors Frontend

2023-05-18 - 2025-06-30

개요 (Overview)

Sellectors Frontend는 K-Pop 팬덤을 위한 글로벌 커머스 및 인터랙티브 팬덤 플랫폼입니다. 단순한 쇼핑몰을 넘어 드로우(Raffle), 경매(Bid), 선물하기, 스트림 위젯 등 엔터테인먼트 요소가 결합된 복합 비즈니스 로직을 수행합니다. 2년여간의 지속적인 고도화를 통해 초기 웹 커머스 형태에서 App-Like 네이티브 경험을 제공하는 플랫폼으로 진화했습니다.

주요 기능 및 구현 상세 (Detailed Features)

1. 고도의 커머스 비즈니스 로직 (Advanced Commerce)
  • 복합 결제 및 클레임 시스템:
    • PG사 연동: Toss Payments(국내) 및 Paypal(해외) 결제 모듈 분기 처리 (b2e4ea1).
    • 부분 반품/환불: 주문 품목 중 일부만 반품 시 환불 금액 및 차감 배송비 자동 계산 로직 (2bedf36, 3bc035f).
    • 외국인 전용 결제: 국내/해외 배송지 판별에 따른 배송비 API 실시간 호출 및 면세/과세 로직 분리 (48bd5b6).
  • 다양한 판매 방식:
    • 드로우(Raffle): 응모권(Ticket) 획득 및 소모 로직, 당첨자 추첨 알고리즘, 중복 응모 방지 가드 (970ea80).
    • 선착순/경매(BID): 실시간 재고 카운트다운 타이머(CSR 기반 최적화), 입찰가 유효성 검증 (8c55abe).
  • 선물하기 (Gifting):
    • 선물 카드 작성(이미지/메시지), 수령인 배송지 입력 대기 상태 관리, 거절/취소 시 자동 환불 프로세스 (ef312d4, f13a3a6).
2. 셀러 및 상품 관리 (Product & Seller System)
  • 상품 데이터 관리:
    • 복잡한 SKU(옵션) 생성: 색상/사이즈 등 다차원 옵션 조합 생성 및 재고 관리 UI.
    • 유효성 검사 미들웨어: 판매 기간, 구매 제한 수량, 필수 옵션 여부 등 10여 가지 제약 조건 검증 (e72e1e2).
    • 이미지 파이프라인: 업로드 시 리사이징(Resizing), 포맷 변환, Alt 속성 자동 주입 (c1c095d, 8f72bfa).
  • 셀러 대시보드:
    • 입점 심사 상태에 따른 권한 제어(GNB/사이드바 동적 렌더링).
    • 마이샵(스토어) 페이지 편집 및 공지사항 관리 기능 (f64337c, f31b855).
3. 글로벌 서비스 아키텍처 (Global / i18n)
  • 완전한 다국어 지원:
    • next-i18next + i18next-scanner: 소스 코드 스캔을 통한 번역 키 자동 추출 빌드 파이프라인 구축 (08847f1).
    • 동적 통화(Currency) 변환: 사용자 접속 국가 및 렌더링 위치에 따라 KRW/USD/JPY/CNY 자동 표기 (ab6e756).
  • 국가별 특화 UX:
    • 주소/번호 포맷팅: Google libphonenumber 활용 국가별 전화번호 유효성 검사 및 Address Component를 통한 해외 주소 입력 폼 최적화 (590cf96, 0294f39).
4. 인터랙티브 위젯 & 피처 (Interactive Features)
  • 스트림 위젯 (Stream Widget):
    • OBS 오버레이: 크리에이터가 방송 화면에 띄울 수 있는 후원 알림/이벤트 위젯 개발.
    • 시각 효과: react-canvas-confetti와 Polly 라이브러리를 활용한 실시간 도네이션 인터랙션 (9edb53e).
    • 미리보기 시뮬레이션: 위젯 설정 변경 사항을 실시간으로 반영하는 프리뷰 페이지.
  • 상품 리뷰: 이미지/동영상 첨부 가능한 리뷰 시스템, 주문 상태(구매확정/반품완료)에 따른 작성 권한 제어 (3a0196e).

UI/UX: App-Like Transformation

웹 기반이지만 모바일 앱과 동일한 사용자 경험을 제공하기 위해 레이아웃과 인터랙션을 전면 개편했습니다.
  • 싱글 컬럼 레이아웃 (Unified Mobile-Centric UX):
    • 데스크탑의 넓은 여백을 제거하고, 모바일 규격의 싱글 컬럼을 화면 중앙에 배치하여 디바이스 간 경험을 통일했습니다 (ea86063).
    • useLayout Hook: 컨테이너 너비(maxWidth)와 패딩을 중앙에서 제어하여 일관된 디자인 시스템 적용.
  • 모바일 네이티브 대응:
    • iOS Safari 스크롤 바운스 방지(body-scroll-lock), 터치 제스처(Swipe) 지원.
    • 모바일 전용 GNB, Drawer 메뉴, Safe-area 대응 스타일링.

기술적 도전 및 성능 최적화 (Technical Deep Dive)

1. Case Study: Vercel CDN 캐싱 이슈 해결
Dev 서버 환경에서 페이지 로딩이 비정상적으로 느린 문제를 발견하고 해결했습니다.
  • 문제: 보안을 위해 설정한 Basic Auth 헤더 때문에 Vercel CDN이 캐싱을 건너뛰고(Bypass) 매번 원본 서버 SSR을 수행함.
  • 진단: Web Vitals(reportWebVitals)를 도입하여 LCP/TTFB 수치를 측정, 캐시 미적용 시의 성능 저하를 데이터로 확인 (d8a25b7).
  • 해결: Basic Auth 해제 및 Cache-Control 헤더(s-maxage=300, stale-while-revalidate=86400) 최적화로 응답 속도 10배 이상 개선.
2. 웹 성능 튜닝 (Performance Tuning)
  • Tree Shaking & Code Split:
    • 자동 빌드가 놓치는 미사용 모듈(Import)과 로직(0원 가격 렌더링 등)을 수동으로 제거 (b1493af).
    • Lodash 등 거대 라이브러리의 불필요한 함수 임포트 방지.
  • 상태 관리 및 데이터 페칭:
    • Jotai: 복잡한 클라이언트 상태(주문 폼, 셀러 데이터)를 Atom 단위로 경량 관리.
    • SWR: Focus Revalidation 제어 및 캐시 유지 시간을 전략적으로 설정하여 불필요한 API 호출 최소화.
3. Infinite Scroll 고도화
  • 단순 페이징을 넘어, 상세 페이지 진입 후 '뒤로 가기' 시 이전 스크롤 위치와 로딩된 데이터를 완벽하게 복원하는 로직 구현 (076d72d).
  • History API와 SWR 캐시를 연동하여 사용성을 대폭 개선했습니다.