지연 로딩
뷔페에서 모든 음식을 한꺼번에 식탁에 쌓아두지 않고, 접시가 비었을 때 먹을 만큼만 차례대로 가져오는 방법이에요.
정의 지연 로딩(Lazy Loading)은 웹사이트나 스마트폰 앱을 켤 때 모든 데이터(사진, 영상, 프로그램 코드)를 한 번에 전부 불러오지 않고, 화면에 나타나거나 실제로 필요한 순간에 맞추어 나중에 불러오는 최적화 기술이에요.
왜 처음부터 다 불러오지 않을까요?
책을 읽을 때 우리는 지금 읽고 있는 페이지만 눈앞에 펼쳐요. 1000쪽짜리 두꺼운 백과사전의 모든 페이지를 방바닥에 한꺼번에 전부 펼쳐놓고 읽는 사람은 아무도 없죠.
인터넷 세상에서도 완전히 똑같은 일이 일어나요. 사진이 100장이나 들어있는 쇼핑몰 웹사이트에 접속했을 때, 방문자는 맨 위에 있는 상품 서너 개만 슬쩍 훑어보고 곧바로 창을 닫아버릴 수도 있어요.
만약 웹사이트가 처음 접속하자마자 100장의 고화질 사진을 한꺼번에 다 내려받으려고 고집한다면 화면이 하얗게 멈추고 켜지는 데 한참 걸려요. 소중한 스마트폰 데이터 요금도 낭비되고 말죠. 그래서 지연 로딩은 화면에 당장 보이는 부분만 먼저 빠르게 불러오고, 화면 바깥의 사진들은 불러오기를 뒤로 똑똑하게 미뤄둬요.
스크롤이 닿을 때 마법처럼 나타나요
지연 로딩이 적용된 화면 아래쪽에는 무거운 진짜 사진 대신, 용량이 아주 작은 가벼운 빈 상자나 흐릿한 임시 그림(플레이스홀더)이 미리 자리를 잡고 기다려요.
사용자가 손가락으로 화면을 아래로 쓱 내리기 시작하면, 웹 브라우저는 사용자의 시선이 화면 어디쯤 내려왔는지 스크롤 위치를 부지런히 감시해요.
그러다 특정 영역이 화면 안으로 들어오기 직전이 되면, 브라우저가 서버에 신호를 보내 비로소 진짜 고화질 이미지를 쏙 채워 넣어요. 이 방식 덕분에 사용자는 첫 화면을 눈 깜짝할 사이에 만날 수 있고, 웹사이트를 운영하는 서버 역시 한꺼번에 수많은 요청을 받지 않아 과부하를 막을 수 있어요.
조금 더 정확히 말하면
지연 로딩은 눈에 보이는 사진이나 동영상 파일에만 적용되는 기술이 아니에요. 조금 더 정확히 말하면, 앱이나 웹페이지를 움직이는 거대한 프로그램 코드 자체에도 아주 넓게 쓰여요.
요즘 웹사이트는 수많은 기능을 가진 하나의 거대한 소프트웨어예요. 하지만 사용자가 쇼핑만 하고 나갈 수도 있는데, 들어오자마자 쓰지도 않을 복잡한 결제 기능이나 회원정보 수정 코드까지 미리 다 다운로드할 필요는 전혀 없어요.
그래서 개발자들은 전체 프로그램을 잘게 쪼갠 뒤, 사용자가 결제 버튼을 누르는 바로 그 순간에 해당 기능의 코드를 불러오게 만들어요. 이렇게 필요한 시점에 필요한 코드 조각만 가져오는 방식은 기기의 메모리와 배터리를 획기적으로 아껴준답니다.
🤔 흔한 오해
지연 로딩을 쓰면 전체 웹페이지의 데이터 소모량이 무조건 절반으로 줄어든다.
페이지 맨 끝까지 스크롤을 전부 내리면 결국 모든 데이터를 내려받게 돼요. 지연 로딩의 핵심은 데이터 총량을 없애는 것이 아니라, '필요한 순간까지 전송을 미뤄 첫 화면을 빠르게 띄우는 것'이에요.
🧺 일상에서 만나요
모든 데이터를 한꺼번에 받지 않고, 화면에 보이는 순간이나 필요한 시점에 맞춰 나누어 가져오는 속도 최적화 기술이에요.