왜 나중에 불러올까
긴 상품 목록이나 기사에는 이미지가 수십 장 있어요. 한꺼번에 받으면 첫 화면이 늦게 뜨고 모바일 데이터도 낭비돼요. 지연 로딩은 사용자가 스크롤해서 볼 즈음에만 이미지를 불러와요. 닐슨(1993)과 카드와 동료들(1991)의 반응 시간 기준처럼, 처음 화면이 빨리 뜨면 사용자는 앱이 빠르다고 느껴요. 무한 스크롤이나 캐러셀처럼 이미지가 많은 화면에서 특히 효과가 커요.
구현과 첫 화면 예외
가장 쉬운 방법은 img 태그에 loading="lazy"를 넣는 거예요(web.dev, n.d.-a). 더 세밀하게 하려면 MDN(n.d.)이 설명하는 Intersection Observer를 써요. 다만 첫 화면에 바로 보이는 큰 이미지까지 지연하면 오히려 늦게 떠요. 밀러(1968)의 지적처럼 사람은 처음 반응을 가장 민감하게 느끼니, 첫 화면의 대표 이미지는 바로 불러와야 해요. 스크롤이 빠른 경우를 위해 화면보다 조금 앞서 불러오는 여유도 둬요.
레이아웃 밀림과 자리 표시
이미지가 늦게 뜨면서 아래 글이 갑자기 밀리면, 읽던 위치를 잃거나 엉뚱한 버튼을 누르게 돼요. web.dev(n.d.-b)는 이를 누적 레이아웃 이동(CLS)으로 측정해요. 이미지에 width와 height 또는 비율을 미리 지정해 자리를 잡아 두면 막을 수 있어요. 빈자리는 흐린 미리보기나 스켈레톤 화면으로 채우면 기다림이 덜 느껴져요. 늦게 뜨더라도 WCAG 2.2(W3C, 2023)의 1.1.1 기준처럼 대체 텍스트는 꼭 넣어요.
자주 묻는 질문
- 모든 이미지에 지연 로딩을 쓰면 되나요?
- 아니에요. 첫 화면에 바로 보이는 이미지는 즉시 불러와야 해요. 아래쪽 이미지에만 지연 로딩을 써요.
- 지연 로딩이 검색엔진에 불리한가요?
- 표준 loading="lazy"나 제대로 구현한 방식은 검색엔진도 이미지를 읽을 수 있어요. 스크롤 이벤트에만 의존하는 방식은 주의하세요.
출처 검토일: 2026-10-27
참고문헌
- web.dev. (n.d.-a). Browser-level image lazy loading for the web. Google. loading="lazy" 속성의 동작과 주의점을 설명해, 어떤 이미지를 지연 로딩할지 정할 때 참고하면 도움이 돼요.
- web.dev. (n.d.-b). Cumulative Layout Shift (CLS). Google. 화면이 갑자기 밀리는 레이아웃 이동 지표라, 이미지 자리 크기를 미리 잡아야 하는 이유로 참고하면 도움이 돼요.
- MDN Web Docs. (n.d.). Lazy loading. Mozilla. 지연 로딩의 개념과 Intersection Observer 같은 구현 방식을 다뤄, 직접 구현할 때 참고하면 도움이 돼요.
- Nielsen, J. (1993, January 1). Response time limits. Nielsen Norman Group. 0.1초·1초·10초의 반응 시간 한계를 정리해, 이미지가 늦게 뜰 때 사용자가 느끼는 기다림을 설명할 때 참고하면 도움이 돼요.
- Card, S. K., Robertson, G. G., & Mackinlay, J. D. (1991). The information visualizer, an information workspace. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (pp. 181–186). ACM. 지각·즉각 반응 시간 기준을 다뤄, 스크롤과 이미지 표시 사이 지연 허용치를 볼 때 참고하면 도움이 돼요.
- Miller, R. B. (1968). Response time in man-computer conversational transactions. In Proceedings of the December 9–11, 1968, Fall Joint Computer Conference, Part I (pp. 267–277). ACM. 응답 지연과 사용자 기대의 관계를 다룬 고전이라, 첫 화면 이미지만은 미리 불러야 하는 이유로 참고하면 도움이 돼요.
- World Wide Web Consortium. (2023). Web Content Accessibility Guidelines (WCAG) 2.2. 텍스트 대체(1.1.1) 기준이 있어, 늦게 뜨는 이미지에도 대체 텍스트를 넣을 때 참고하면 도움이 돼요.