⚛️ 리액트 개발 환경 세팅: CRA vs Vite

혹시 인터넷 쇼핑몰이나 사진이 많은 블로그에 들어갔을 때, 화면이 버벅거리거나 스크롤이 뚝뚝 끊기는 경험을 해보신 적이 있으신가요?
우리는 매일 수많은 웹사이트를 방문하지만, 그 속도가 조금만 느려져도 답답함을 느끼고 '뒤로 가기' 버튼을 누르곤 합니다.
웹사이트가 느려지는 가장 큰 원인 중 하나는 바로 무거운 이미지 파일들 때문입니다.

💡 핵심 질문:
"내가 지금 보고 있는 화면 아래쪽의 이미지까지, 굳이 처음부터 다 불러와야 할까요?"
오늘 소개할 이미지 지연 로딩(Lazy Loading)은 바로 이 질문에서 시작된 기술입니다.

오늘은 개발자가 아니더라도 누구나 이해할 수 있는 지연 로딩의 원리와, 이것이 어떻게 우리 데이터를 아껴주고 웹 서핑을 쾌적하게 만드는지 알아보겠습니다.

---

🐢 1. 이미지 지연 로딩(Lazy Loading)이란 무엇인가요?

이름에서 알 수 있듯이, Lazy Loading(게으른 로딩)은 이미지를 '게으르게', 즉 천천히 불러오는 기술을 말합니다.
쉽게 비유하자면 뷔페 식당을 생각해보면 이해가 빠릅니다.

❌ 일반 로딩 (Eager Loading)

손님이 식당에 들어오자마자, 주문도 하기 전에 100가지 음식을 테이블에 한꺼번에 다 차려놓습니다.
테이블이 꽉 차서 식사하기 불편하고, 음식 준비 시간도 오래 걸립니다.
결과: 웹사이트 로딩이 느려지고 데이터 낭비가 심함.

✅ 지연 로딩 (Lazy Loading)

손님이 자리에 앉으면 물을 주고, 코스 요리처럼 지금 당장 먹을 음식만 차례대로 내옵니다.
테이블 공간을 효율적으로 쓰고 서빙 속도도 빠릅니다.
결과: 초기 화면이 빨리 뜨고 불필요한 데이터 소모가 없음.

즉, 사용자가 스크롤을 내려서 이미지가 화면에 보이기 직전에 로딩을 시작하는 방식입니다.
보이지 않는 곳에 있는 이미지는 아직 불러오지 않았으므로, 컴퓨터와 스마트폰의 자원을 아낄 수 있습니다.

---

⚙️ 2. 어떤 원리로 작동하나요?

기술적으로 복잡해 보이지만, 원리는 '뷰포트(Viewport)'라는 개념만 알면 간단합니다.
뷰포트는 현재 여러분이 보고 있는 스마트폰이나 모니터의 화면 영역을 뜻합니다.

웹 브라우저는 끊임없이 "사용자가 지금 어디를 보고 있는가?"를 감시합니다.
그리고 아래와 같은 순서로 이미지를 처리합니다.

• Step 1: 페이지에 접속하면, 화면에 보이는 맨 위 이미지들만 로딩합니다.
  
• Step 2: 화면 아래쪽에 있는 이미지들은 '가짜 이미지(빈 박스)' 상태로 대기합니다.
  
• Step 3: 사용자가 스크롤을 내려 이미지가 뷰포트(화면) 근처에 도달합니다.
  
• Step 4: 브라우저가 "어? 이제 보여줘야겠네!"라고 인식하고 진짜 이미지를 다운로드하여 보여줍니다.
  

최근에는 개발자들이 복잡한 코드를 짜지 않아도, 이미지 태그에 loading="lazy"라는 간단한 속성만 붙이면 브라우저가 알아서 이 기능을 수행해줍니다.

---

📊 3. 사용자가 얻는 3가지 이득

"개발 기술이니까 나랑은 상관없지 않나?"라고 생각하실 수 있지만, 지연 로딩은 사용자 경험(UX)에 직접적인 영향을 미칩니다.
여러분이 얻는 구체적인 이득은 다음과 같습니다.

장점 구분	상세 내용
⚡ 1. 빠른 초기 속도	당장 필요한 데이터만 받기 때문에 웹사이트가 뜨는 속도가 2배 이상 빨라질 수 있습니다.
💸 2. 데이터 절약	끝까지 스크롤하지 않으면 아래쪽 이미지는 다운로드하지 않습니다. LTE/5G 데이터 요금을 아낄 수 있습니다.
🔋 3. 배터리 절약	스마트폰이 처리해야 할 작업량이 줄어들어 배터리 소모를 줄이는 데 기여합니다.

⚠️ 주의할 점: 무조건 좋은 건 아닙니다!

웹사이트의 가장 상단에 있는 메인 배너 이미지까지 지연 로딩을 적용하면 오히려 역효과가 납니다.
사용자가 처음 접속했을 때 화면이 텅 비어 보일 수 있기 때문입니다.
그래서 '첫 화면(Above the Fold)' 이미지는 바로 로딩하고, 그 아래부터 지연 로딩을 적용하는 것이 정석입니다.

---

✨ 쾌적한 웹 서핑을 위하여

지금까지 이미지 지연 로딩(Lazy Loading)에 대해 알아보았습니다.
간단히 요약하자면, 이 기술은 "필요할 때만 보여주는 똑똑한 배달 시스템"과 같습니다.
사용자에게는 빠르고 쾌적한 환경을 제공하고, 서비스 운영자에게는 서버 비용을 절감해주는 '윈-윈(Win-Win)' 기술입니다.

앞으로 웹사이트를 이용하다가 스크롤을 내릴 때 이미지가 '스르륵' 나타나는 효과를 본다면,
"아, 내 데이터를 아껴주려고 지연 로딩이 작동하고 있구나!"라고 생각해주시면 됩니다.
작은 기술 하나가 우리의 디지털 라이프를 더 가볍고 빠르게 만들고 있습니다.