개요
프로젝트 기간
2024/05 ~ 2024/07
역할
기획, 디자인, FE, BE, CI/CD, Infra 등 전체
팀 / 솔로
솔로
기술 스택
React, TypeScript, webpack, Babel, styled-components, Storybook, Firebase Firestore, Google Cloud Functions, AWS S3, AWS CloudFront, AWS Route 53, GitHub Actions, Google Analytics, Figma
Preview
사용자 분석을 통한 UI/UX 최적화
Google Analytics을 통한 사용자 분석 및 UI/UX 개선
- Google Analytics의 통계 분석을 통해, 서비스 사용자의 약 95%가 호주에 집중된 상황을 인식했습니다. 따라서, AWS 인프라와 Firebase 리전을 호주로 설정하고, CDN을 구성하여 CDN 서버에 S3 버킷 데이터를 캐시하는 프로세스를 구축하여 글로벌 서비스의 로딩 속도를 최적화했습니다.
- 모바일 사용자가 약 85%임을 감안하여 모든 디바이스에 대응하는 100% 반응형 웹을 구현했습니다.
- 그 외, 페이지 뷰, 체류 시간, 이탈률 등의 통계를 참고하여 웹사이트의 전반적인 UI/UX를 개선했습니다.(성능 최적화, 애니메이션 효과, 인터랙티브한 UI 컴포넌트 구현, 디자인의 일관성 등)
UI/UX 개선을 통한 성과
사용자 데이터 통계를 기반으로 한 사용자 중심의 UI/UX 최적화를 통해 고유 방문자 수 1700+명, 이탈률 29.9%(Google Analytics), 검색엔진 노출 4600+번(Google Search Console) 등의 성과를 달성했습니다.
디자인 시스템 & 프로젝트 디자인 구축
웹사이트 성능 최적화
webpack 최적화
최적화 후 최종 번들 크기(99.6KB + 27.7KB)
React 최적화
React의 useCallback을 활용하여 예기치 않은 함수 재생성에 따른 무한 리렌더링을 방지하고, lazy 및 Suspense를 적용하여 각 페이지 로드 시 필요한 리소스 크기를 줄여 페이지 로딩 성능을 향상시켰습니다.
Storybook을 활용한 컴포넌트 개발 & 관리
- Storybook을 도입하여 컴포넌트를 독립적으로 개발하고, 시각적 모양과 동작을 문서화했습니다.
- 특히, 캐러셀, 아코디언과 같이 복잡한 컴포넌트의 개발에, 구성 요소 간 명확한 책임 분리를 추구하는 Compound 패턴을 도입해 컴포넌트를 설계했습니다.
AWS 및 Firebase 기반 인프라 구축
webpack, Babel, TypeScript, ESLint 등 프로젝트 환경 자체 구성
많이 사용되는 사전 설정 번들링 툴들인 vite, CRA 등에서 벗어나, webpack, Babel을 기반으로 핵심적인 프론트엔드 툴들의 프로젝트 환경 설정을 자체적으로 구성했습니다. 이를 통해 웹 배포 이전의 빌드, 번들링, 트랜스파일링 등과 관련된 프로세스에 대한 심층적인 이해를 얻었습니다.