SH Apparel
패션 브랜드 기업 웹사이트
Vue.js 3 Composition API 기반 패션 브랜드 기업 웹사이트. AWS S3 + CloudFront CDN으로 고화질 룩북·시즌 컬렉션 이미지를 전 세계에 저지연 제공. Supabase CMS로 컬렉션·채용·B2B 도매 문의 콘텐츠를 관리자가 직접 운영. Intersection Observer 기반 이미지 지연 로딩으로 모바일 Core Web Vitals 충족.
Architecture Overview
Vue.js 3 SPA에 Supabase를 백엔드로 연결. 관리자 CMS에서 수정한 컬렉션·채용·도매 문의 콘텐츠가 Supabase Realtime을 통해 즉시 반영. 이미지 에셋은 S3 원본 → CloudFront CDN으로 전세계 저지연 제공.
Vue.js 3 Composition API · AWS S3 + CloudFront CDN · Supabase CMS · 모바일 Core Web Vitals 충족
Technical Problems
고화질 패션 이미지 전 세계 저지연 제공
룩북·컬렉션 이미지는 해상도가 높아 원서버에서 직접 서빙하면 해외 접속 시 로딩이 느리고 서버 대역폭 비용이 높다. 모바일 LCP 기준을 충족하면서 이미지 품질을 유지해야 했다.
비개발자 관리자가 직접 콘텐츠 운영
시즌마다 컬렉션 페이지, 채용 공고, B2B 도매 문의 내용이 바뀐다. 코드 수정·배포 없이 관리자가 직접 텍스트·이미지를 업데이트할 수 있어야 했다.
모바일 퍼포먼스 최적화
패션 브랜드 특성상 모바일 방문자 비중이 높다. 컬렉션 이미지가 많은 페이지에서 스크롤 시 발생하는 레이아웃 시프트와 초기 로딩 지연을 최소화해야 했다.
Engineering Approach
AWS S3 원본 + CloudFront 다중 엣지 캐싱
S3에 원본 이미지를 저장하고 CloudFront 배포를 통해 전 세계 엣지 로케이션에서 서빙. WebP 포맷 자동 변환과 Cache-Control max-age 설정으로 반복 방문 시 전송량 최소화.
Supabase Realtime CMS + Vue 3 Composition API
Supabase `contents(page, section, key, value)` 테이블로 콘텐츠 구조화. 관리자 대시보드에서 수정하면 Supabase Realtime 채널을 통해 웹사이트에 즉시 반영. Vue 3 Composition API의 `reactive()` 스토어로 상태 동기화.
Intersection Observer 지연 로딩 + aspect-ratio 예약
뷰포트 진입 전 이미지는 Intersection Observer로 로딩 지연. CSS aspect-ratio로 이미지 영역을 미리 예약해 레이아웃 시프트(CLS) 제거. 모바일 Lighthouse 성능 점수 91점 달성.
Measurable Outcomes
91점
Lighthouse
모바일 퍼포먼스 점수
< 0.05
CLS
레이아웃 시프트 최소화
무배포
콘텐츠 업데이트
관리자 CMS 직접 운영
1개월
납품 기간
전체 웹사이트 + 관리자 CMS
Tech Stack
Project Specs
Year
2025
Duration
1개월
Capability
Commerce & Platforms
Status
DeliveredTechnologies