💡 Reser-On-Do 프로젝트에서의 성능 개선의 필요성
이번 Reser-On-Do 프로젝트는 Next.js 대신 React CSR(Client-Side Rendering) 방식으로 개발했습니다.
CSR은 다음과 같은 이유로 SSR(Server-Side Rendering) 방식보다 초기 로딩 속도가 느릴 수 있습니다.
- HTML에 데이터가 즉시 포함되지 않음. ➡️ 브라우저가 JS를 모두 다운받고 실행해야 화면이 그려짐
- 초기 렌더링 전까지 빈 화면(또는 로딩 화면)을 보여줄 가능성이 높음
즉, CSR에서는 초기 구동 단계에서 JS 다운로드·파싱·실행까지 모두 끝나야 메인 콘텐츠가 나타나기 때문에, 첫 화면 로딩 속도가 특히 중요합니다.
그중에서도 사용자가 처음 접속하는 메인 페이지의 성능은 서비스 전체의 첫인상을 좌우하기 때문에 최적화의 우선순위가 높았습니다.
🎯 문제 정의
이 프로젝트에서 제가 담당한 메인 페이지는 서비스의 첫 진입점입니다.
첫 진입 페이지의 속도가 느리면 서비스 전체의 첫인상이 나빠지고 사용자가 콘텐츠를 보기 전에 바로 이탈할 가능성이 높습니다.
BBC 조사에 따르면, 페이지 로딩 시간이 1초 증가할 때마다 사용자의 약 10%가 사이트를 이탈한다고 합니다.
(출처 : creativebloq - How the BBC builds websites that scale)
📷 프로젝트 성능 측정 결과(Lighthouse):
- LCP(Largest Contentful Paint) : 7.6초
- 성능 점수 : 74점
즉, 주요 콘텐츠(배너, 인기 체험 카드 등)가 사용자 화면에 나타나기까지 7초 이상 소요되고 있었습니다.
🔍 원인 분석
메인 페이지 구조와 CSR 특성이 맞물리면서 다음과 같은 성능 저하 요인이 있었습니다.
1. 고화질 이미지 사용
- 실제 화면 표시 크기보다 해상도가 훨씬 큰 이미지 사용
- 1~2MB 이상의 고용량 PNG 파일 다수 존재
→ 다운로드와 디코딩 시간이 길어져 LCP 지연 유발
2. PNG 포맷
- 무손실 압축 특성상 JPG / WebP 대비 용량이 큼
- 사진·배너형 이미지에서는 불필요하게 큰 용량 발생
→ 네트워크 전송량 증가로 초기 렌더링 속도 저하
3. Lazy Loading 미적용
- 첫 화면에 보이지 않는 이미지까지 모두 즉시 요청
- 예) 인기 체험 가로 스크롤 섹션, 아래쪽 목록의 이미지도 스크롤 전부터 불러옴
→ 네트워크 대역폭 분산 → 초기 핵심 콘텐츠 로딩 지연.
물론 성능 저하 요인은 이미지 외에도 JS 번들 크기, API 응답 속도, 폰트 로딩 지연 등 다양하게 존재할 수 있습니다.
이러한 원인을 바탕으로, 성능 개선을 위한 다양한 방법을 서치했고 여러가지 개선 후보를 도출했습니다.
🧭 해결 옵션 검토 및 우선순위 결정
성능 개선을 위해 도출한 방법들은 다음과 같습니다.
- 이미지 최적화 (WebP 변환, Lazy Loading 적용 등)
- JS 번들 크기 축소 및 코드 스플리팅
- 폰트 로딩 전략 개선 (font-display 변경, 웹폰트 서브셋 제작)
- API 응답 속도 개선 (캐싱, 데이터 패칭 최적화)
- SSR/SSG 도입
이 중 이미지 최적화를 1순위로 선택한 이유는 다음과 같습니다.
- LCP 지연의 주된 원인이 배너 및 카드 이미지 로딩임을 데이터와 네트워크 분석에서 확인
- 구현 범위가 명확하고, 단기간 내 성과 측정 가능
- 디자인·기획 변경 없이 프론트엔드 단독 진행 가능
- 가장 많은 사용자가 체감할 수 있는 초기 화면 속도에 직접적인 효과 기대
따라서 이번 개선 작업에서는 이미지 최적화를 우선 적용해 빠른 성능 개선 효과를 확보하는 것을 목표로 했습니다.
🛠️ 내가 진행한 이미지 최적화 작업
1. 이미지 포맷 변경 (PNG → WebP)
메인 페이지 주요 배너와 카드 이미지는 대부분 PNG 포맷을 사용하고 있었습니다.
PNG는 무손실 압축 특성상 화질은 우수하지만 용량이 크고 로딩 속도에 불리합니다.
특히 메인 배너처럼 사용자가 페이지에 처음 진입했을 때 바로 보이는 요소는 LCP에 직접적인 영향을 줍니다.
이 문제를 해결하기 위해 WebP 포맷으로 변경했습니다.
WebP는 동일 화질 대비 PNG보다 훨씬 작은 용량을 제공해 네트워크 전송량과 초기 로딩 시간을 줄여줍니다.
- 변환 전: 2.6MB → 변환 후: 89KB (약 96% 절감)
→ LCP 개선 효과 가장 큼
📷 동일 이미지의 PNG(2.6MB)와 WebP(89KB) 비교 — 해상도 동일(1280×851)임에도 용량 대폭 절감
2. Lazy Loading 적용
메인 페이지에는 첫 화면에 보이지 않는 이미지가 많았니다.
이 이미지들까지 초기 로딩 단계에서 모두 불러오면 네트워크 리소스가 분산되고, 중요한 핵심 콘텐츠(배너, 상단 카드)의 표시가 늦어질 수 있습니다.
이를 해결하기 위해 loading="lazy" 속성을 적용했습니다.
이렇게 하면 해당 이미지가 화면에 보일 때 로드가 시작되도록 해, 초기 렌더링 시 불필요한 네트워크 요청 수 줄이고 핵심 콘텐츠 표시를 우선할 수 있습니다.
- 적용 대상: 인기 체험(가로 스크롤), 페이지 하단 카드 이미지
- 효과: 초기 네트워크 요청 수 감소 → 첫 화면 표시 속도 향상
<img
src={bannerImageUrl}
alt="배너 이미지"
loading="lazy"
/>
3. 이미지 표시 영역 최적화 (object-fit)
이미지가 표시되는 영역과 원본 비율이 다를 경우 잘림이나 여백이 발생할 수 있습니다.
이를 방지하고 다양한 화면 크기에서도 안정적으로 꽉 차게 보이도록 object-fit: cover 속성을 적용했습니다.
이 작업은 직접적인 로딩 속도 향상보다는, 이미지 표시가 깔끔하게 유지되도록 해 UX 개선에 기여했습니다.
.bannerImg {
width: 100%;
height: 100%;
object-fit: cover;
}
4. Fallback 이미지 적용
이미지 로딩 실패 시, 비어 있는 공간이 생기거나 레이아웃이 깨질 수 있습니다.
이를 방지하기 위해 대체 이미지(Fallback)를 적용했습니다.
네트워크 문제나 원본 파일 손상 시에도 즉시 기본 이미지를 표시하여 UI 안정성을 유지했습니다.
- 적용 대상: 배너, 카드 썸네일 이미지
- 효과: 로딩 실패 시에도 UX 저하 방지, 레이아웃 안정성 유지
<img
src={bannerImageUrl || fallbackImage}
onError={e => (e.currentTarget.src = fallbackImage)}
/>📝 결론
📷 프로젝트 성능 측정 결과 비교(Lighthouse):
📊 성능 비교 결과
| 지표 | 개선 전 | 개선 후 | 변화 |
| LCP(초) | 7.6 | 1.0 | 약 -86% |
| Performance 점수 | 74 | 98 | + 24점 |
| FCP(초) | 0.7 | 0.6 | - 0.1초 |
| Speed Index (초) | 1.4 | 0.8 | 약 -43% |
측정 결과, 주요 성능 지표가 전반적으로 개선되었다는 것을 확인할 수 있었습니다.
이미지 포맷(WebP) 변경과 Lazy Loading 적용 이후, 메인 페이지의 초기 로딩 속도 문제는 크게 개선되었습니다.
LCP는 7.6초 → 1.0초(약 86% 개선), Performance 점수는 74점 → 98점(+24점),
Speed Index는 1.4초 → 0.8초(약 43% 개선)으로 단축되었습니다.
📌 실제 사용자 입장에서는 눈에 띄게 드라마틱한 변화는 아니지만, 이전보다 조금 빨라진 느낌을 받을 수 있습니다. .
특히 배너와 주요 카드가 페이지 진입 직후 바로 표시되기 때문에 초기 로딩에 대한 답답함이 줄어든 것을 체감할 수 있습니다.
🚀 확장 가능성
이번 성능 개선은 이미지 최적화에 집중했지만, 추가 개선을 통해 성능을 좀 더 향상시킬 수 있습니다.
- JS 번들 크기 최적화 → 코드 스플리팅, 불필요 라이브러리 제거로 초기 다운로드 리소스 절감
- 폰트 로딩 최적화 → 웹폰트 서브셋 제작, font-display 변경으로 텍스트 표시 지연 최소화
- API 응답 속도 개선 → 캐싱 적용, 데이터 패칭 최적화로 서버 응답 시간 단축
- SSR/SSG 도입 → 초기 표시가 중요한 페이지는 SSR/SSG로 전환해 초기 렌더링 속도 개선
이러한 최적화 방법을 적용하면, 저속 네트워크 환경이나 저사양 디바이스에서도 일관된 속도와 높은 사용자 경험을 제공할 수 있을 것입니다.