VibeCoding 365 로고 VibeCoding 365

지연 로딩

사용자가 당장 보거나 쓰지 않는 코드, 이미지, 데이터를 처음부터 모두 불러오지 않고 필요한 순간에 나누어 불러오는 성능 최적화 방법이다. 첫 화면에 필요 없는 관리자 패널, 긴 댓글 목록, 큰 이미지 갤러리를 지연 로딩하면 초기 로딩 시간이 줄어든다. 바이브 코딩에서는 AI가 모든 컴포넌트를 한 파일에 붙여 넣어 첫 로딩을 무겁게 만들 수 있으므로, 화면에 바로 필요한 부분과 나중에 필요한 부분을 나누라고 요구하는 것이 중요하다. 단, 너무 늦게 불러오면 클릭 후 빈 화면이 보일 수 있어 로딩 상태와 오류 처리를 함께 설계해야 한다.

바이브 코딩 사전

지연 로딩

바이브 코딩 사전

지연 로딩

지연 로딩 · Lazy Loading

카테고리
성능·최적화
난이도
basic
태그
지연로딩 · 코드분할
슬러그
lazy-loading
상태
published
정렬 순서
179

정의

사용자가 당장 보거나 쓰지 않는 코드, 이미지, 데이터를 처음부터 모두 불러오지 않고 필요한 순간에 나누어 불러오는 성능 최적화 방법이다. 첫 화면에 필요 없는 관리자 패널, 긴 댓글 목록, 큰 이미지 갤러리를 지연 로딩하면 초기 로딩 시간이 줄어든다. 바이브 코딩에서는 AI가 모든 컴포넌트를 한 파일에 붙여 넣어 첫 로딩을 무겁게 만들 수 있으므로, 화면에 바로 필요한 부분과 나중에 필요한 부분을 나누라고 요구하는 것이 중요하다. 단, 너무 늦게 불러오면 클릭 후 빈 화면이 보일 수 있어 로딩 상태와 오류 처리를 함께 설계해야 한다.

영어 표기

Lazy Loading

예시

상품 상세 페이지에서 추천 상품 캐러셀은 첫 화면 아래에 있으므로, AI에게 해당 컴포넌트를 동적 import로 분리하고 스켈레톤 로딩 UI를 추가하라고 지시한다.

참고

초기 화면 성능을 개선하지만 로딩 상태 UX가 함께 필요하다.