Sunghwa.com
글로벌 양말 제조사 기업 웹사이트
한·영·중 3개 국어 글로벌 제조업 웹사이트. GSAP ScrollTrigger 기반 시차 애니메이션과 Three.js 3D 제품 시각화, i18next 동적 로케일 전환. Supabase CMS로 채용·R&D 콘텐츠를 실시간 관리하며 Core Web Vitals 기준 LCP 1.8s 이하를 유지.
Architecture Overview
Vite + React 정적 빌드, Supabase CMS로 관리자가 로케일별 콘텐츠를 실시간 편집. Three.js WebGL 씬이 GSAP ScrollTrigger와 연동해 스크롤 기반 3D 제품 전시를 구현. vite-plugin-ssg로 3개 국어 정적 페이지 빌드.
i18next + Supabase Realtime CMS · Three.js 지연 로딩 · GSAP ScrollTrigger · LCP 1.8s
Technical Problems
3개 국어 콘텐츠 실시간 관리자 CMS
한국어·영어·중국어 콘텐츠를 코드에 하드코딩하면 마케팅팀 수정마다 개발자 배포가 필요하다. 로케일별 분리 파일은 누락·불일치가 자주 발생한다.
Three.js 3D 시각화와 Core Web Vitals 동시 충족
Three.js WebGL 렌더링은 초기 번들 크기와 GPU 초기화 비용이 높아 LCP가 악화되기 쉽다. 3D 품질과 Lighthouse 성능 점수를 동시에 만족해야 했다.
다국어 SEO: 정적 페이지 vs SPA 트레이드오프
검색 최적화를 위해 로케일별 독립 URL이 필요하지만, SPA 구조에서 3개 언어 × 전체 페이지 SSG 관리 복잡도가 높았다.
Engineering Approach
i18next + Supabase Realtime translations 테이블
Supabase `translations(key, locale, value)` 테이블에 콘텐츠 저장. 관리자 수정 즉시 Supabase Realtime으로 i18next 리소스 업데이트. 코드에는 translation key만 남겨 콘텐츠 완전 분리. 로케일별 플레이스홀더 검증으로 번역 누락 자동 감지.
Three.js dynamic import + Intersection Observer 지연 로딩
Three.js를 dynamic import + React Suspense로 초기 번들 분리. WebGL 씬은 Intersection Observer로 뷰포트 진입 시 초기화. GSAP ScrollTrigger `scrub: 1`로 스크롤 위치를 3D 카메라 경로에 매핑. LCP 1.8s, CLS 0.02 달성.
vite-plugin-ssg + hreflang 다국어 sitemap
vite-plugin-ssg로 한·영·중 로케일별 정적 페이지 빌드. `<link rel="alternate" hreflang>` 태그와 다국어 sitemap.xml 자동 생성. Supabase 콘텐츠 변경 시 GitHub Actions ISR 재빌드 트리거.
Measurable Outcomes
1.8s
LCP
Three.js 지연 로딩, Core Web Vitals
0.02
CLS
Layout Shift 최소화
−80%
콘텐츠 업데이트
CMS, 개발자 배포 불필요
2.3x
검색 유입
6개월, 다국어 SEO 최적화
Tech Stack
1 / 2
Project Specs
Year
2025
Duration
3개월
Capability
Commerce & Platforms
Status
DeliveredTechnologies