성능

1. CLS 개선을 위한 이마트앱 skeleton ui 적용기

   CLS Before/After 수치 기록 필요 — Core Web Vitals 직접 개선

2. js interface 를 통해 사용자 반응성 개선

   WebView↔Native 통신 개선 — 반응 시간 Before/After(ms), 사용자 체감 개선

3. js interface 적용을 통한 성과 관리

   기존에는 앱 스킴 호출 방식을 사용하고 있었습니다. 이 방식은 동시에 여러 스킴을 호출하면 1개를 제외한 나머지가 미동작하는 문제가 있었습니다.

4. Webpack 청크 분리 최적화

   번들 사이즈 Before/After, 초기 로딩 시간 개선 수치 기록 필요

5. 스로틀링 로직 개선

   전역변수로 스로틀링할 로직의 key를 설정하도록 구현하였습니다.

6. 웹 반응성 개선하기: Lighthouse Userflow를 사용한 웹 반응성 개선기

   웹 성능은 대부분 로딩 성능을 떠올리는 경우가 많습니다. 링크 클릭이나 네비게이션을 통해서 앱이 시작되고, 사용자가 상호작용할 수 있으며, 기본적인 동작을 하기까지의 시간을 의미합니다.

7. 이미지 캐시 TTL 커스텀

   SCRUM-15521 | 커밋 수: 4개 | 기간: 2025.09

8. 캐시를 활용한 웹뷰간 상태 공유

   현재 이마트앱은 네이티브 인텐트에 vue 웹뷰가 올라가는 형태입니다.

9. CloudFront 캐싱 TTL 개별 제어 기능 구현

   캐시 히트율 개선, 배포 후 무효화 시간 단축 — FE↔인프라 경계 설계 판단

10. 멀티웹뷰에서 싱글웹뷰로: Vue SPA 페이지 캐싱 전환기

    이마트 앱은 Vue SPA 프레임워크로 개발되어 있습니다. Vue 페이지 번들링 파일을 S3에 업로드하고, JSP에서 이를 호출해 페이지를 서빙하는 구조인데요. 네이티브 환경에서 멀티웹뷰로 운영되고 있었습니다.

11. 헤더 로고 alt 깜빡임 현상을 프리로딩으로 해결

    Header 컴포넌트의 로고 이미지 lazy loading 시 발생하는 alt 텍스트 깜빡임 현상을 해결하여 사용자 경험을 개선했습니다.