매드스퀘어 / 플랫폼 사업부, 매니저 (2021.12 ~ 2025.09, 3년 10개월)•담당 업무: 웹프론트엔드 개발
Rayover 프로젝트
동남아시아 여성향 쇼핑 커뮤니티 플랫폼 프론트엔드 개발 및 성능 최적화
프로젝트 소개
동남아시아 시장을 타겟으로 한 여성향 쇼핑 커뮤니티 플랫폼 개발에 참여했습니다. 웹 프론트엔드 성능 최적화와 모바일 앱(React Native)과의 긴밀한 연동을 통해 사용자 경험을 개선하는 데 주력했습니다.
특히 이미지와 폰트 등 리소스 로딩 속도를 개선하고, 서버 사이드 렌더링(SSR) 효율을 높여 서비스의 전반적인 퍼포먼스를 향상시켰습니다.
기술 스택
Typescript
Next.js
Zustand
Tanstack-Query
Motion
Tailwind CSS
React Native
주요 작업 내용
- 폰트 최적화:
로컬 폰트에서 가변 다이내믹 폰트로 전환하여 폰트 용량을 2MB에서 119KB로 94% 감소시키고, CDN 서버 preconnect를 적용하여 로딩 속도를 개선했습니다.
- SSR 성능 개선:
Context API에서 Zustand로 상태 관리 라이브러리를 전환하여 SSR을 최적화하고, 이를 통해 라이트하우스 Performance 점수를 56점에서 70점으로 25% 개선했습니다.
- 크로스 브라우징 이슈 해결:
React Native의 Safe Area 정보를 웹 브라우저와 통신하여 기기별 화면 하단 렌더링 오류를 해결하는 등 모바일 환경에서의 크로스 브라우징 이슈를 처리했습니다.