애가마켓

애기야가자 • 2022.07 - 2024.10

애가마켓은 기존 네이버 스마트 스토어로 운영하던 자사몰 서비스를 인앱 및 웹에서 이용할 수 있도록 만든 서비스로, Next.js 기반 SSR 설계와 SEO 최적화로 웹/앱(Webview) 통합 상품 판매 채널을 구축했습니다. FSD 아키텍처와 컴파운드 컴포넌트를 적용하여 재사용성을 향상시키고 개발 리드타임을 단축했으며, Lighthouse SEO 100점, Best Practices 96점, Performance(데스크탑) 90점을 달성하여 검색 엔진 최적화와 성능을 모두 확보했습니다.

주요 지표

도전 과제

• SEO 최적화와 성능 양립
• 앱에서 애가마켓 웹뷰를 경유한 결제 플로우
• Next.js App route 방식으로 페이지 구현

해결 방안

• Next.js SSR을 통해 SEO 최적화 및 이미지 Lazy Loading을 통해 성능 개선
• onMessage 이벤트를 통해 웹뷰와 앱간의 데이터를 주고받아 별도의 앱 내부 결제 페이지로 네비게이션 시키도록 기능 작업
• FSD 아키텍처로 관심사 분리 및 Server/Client component 구분하여 구현

결과

• Lighthouse SEO 100점, Best Practices 96점, Performance(데스크탑) 90점을 달성
• 이미지 Lazy Loading으로 페이지 로딩 속도 50% 개선

기술 스택

링크