White Horse의 핵심은 모바일 퍼스트 랜딩 페이지입니다. iOS 안전영역(safe-area) 대응, three.js 조명 연출, Tailwind 기반 반응형/접근성, 고성능 이미지/폰트 최적화 등 고급 UI/UX를 구현했습니다. 또한 잦은 이미지 교체 요구로 인해 디자이너 전용 어드민을 별도로 만들어, 개발자 개입 없이 업로드→미리보기→배포가 가능하도록 했습니다. React로 시작한 코드를 Next.js로 리팩터링하며 Lighthouse 성능 점수를 30점대 → 90점대로 끌어올렸고, 매우 까다로운 디자인 요구사항까지 픽셀 단위로 구현했습니다.
White Horse: 모바일 랜딩 & 운영 어드민
모바일 퍼스트 브랜딩 랜딩 페이지와 디자이너 친화 운영 도구
프로젝트 개요
서비스 화면
주요 기능
모바일 퍼스트 랜딩(메인)
- safe-area(inset) 대응, 스크롤/상단바 겹침 이슈 처리
- Tailwind로 반응형 레이아웃, fluid 타입그래피(clamp)
- 접근성(명도 대비, 키보드 포커스, aria) 기본 준수
three.js 라이트 연출
- 조명(light)·머티리얼 튜닝으로 브랜드 무드 연출
- 모바일 성능 고려한 폴리곤·드로콜 최적화, 레이지 로딩
Next.js 리팩터링 & 성능
- React → Next로 전환, SSR/SSG·라우트 프리패치 적용
- next/image(AVIF/WebP), 폰트 서브셋, 코드 스플리팅
- Lighthouse 30→90+(Performance/Best Practices/SEO)
콘텐츠 운영 자동화(보조)
- 디자이너 전용 업로더: 이미지 업로드→미리보기→게시
- GitHub Actions→S3/CloudFront 자동 배포, 캐시 전략(해시 파일명/부분 무효화)
브랜드 디테일 & 상호작용
- 섹션 전환 마이크로 인터랙션, 스크롤 트리거 애니메이션
- 고정 네비게이션, 터치 제스처 친화적인 UI
아키텍처 구성도
메인 랜딩 경로
- Next.js(SSR/SSG/ISR) → S3 정적 호스팅 + CloudFront CDN
- next/image로 파생본 생성(AVIF/WebP) + srcset
- safe-area 대응 CSS, Tailwind 유틸리티
운영 경로(보조)
- 디자이너 어드민(Express)에서 이미지 업로드
- GitHub Push 트리거 → GitHub Actions 빌드/배포
- S3에 업로드, CloudFront 캐시 갱신(해시/선택적 무효화)
기술 스택
프론트엔드: Next.js(React), TypeScript, Tailwind CSS, three.js 이미지/폰트: next/image, AVIF/WebP, 폰트 서브셋/프리로드 배포/CDN: AWS S3 + CloudFront + Route53, GitHub Actions 어드민: Express.js (업로드/미리보기/배포 트리거) 기타: ESLint/Prettier, Lighthouse, (선택) Framer Motion
담당 역할
랜딩 UI/UX·브랜딩 구현
- safe-area/반응형/접근성/애니메이션 설계 및 구현
Next.js 리팩터링
- SSR/SSG·이미지 최적화·코드 스플리팅으로 성능 개선(30→90+)
운영 자동화 설계
- 디자이너 어드민 구축, GitHub Actions→S3/CloudFront 파이프라인
디자인 협업
- 까다로운 픽셀 규격/세부 인터랙션 요구사항 전부 반영