VIBECODING 365 / DICTIONARY
Lazy Loading
DEFINITION
사용자가 당장 보거나 쓰지 않는 코드, 이미지, 데이터를 처음부터 모두 불러오지 않고 필요한 순간에 나누어 불러오는 성능 최적화 방법이다. 첫 화면에 필요 없는 관리자 패널, 긴 댓글 목록, 큰 이미지 갤러리를 지연 로딩하면 초기 로딩 시간이 줄어든다. 바이브 코딩에서는 AI가 모든 컴포넌트를 한 파일에 붙여 넣어 첫 로딩을 무겁게 만들 수 있으므로, 화면에 바로 필요한 부분과 나중에 필요한 부분을 나누라고 요구하는 것이 중요하다. 단, 너무 늦게 불러오면 클릭 후 빈 화면이 보일 수 있어 로딩 상태와 오류 처리를 함께 설계해야 한다.
ENGLISH
Lazy Loading
EXAMPLE
상품 상세 페이지에서 추천 상품 캐러셀은 첫 화면 아래에 있으므로, AI에게 해당 컴포넌트를 동적 import로 분리하고 스켈레톤 로딩 UI를 추가하라고 지시한다.
NOTES
초기 화면 성능을 개선하지만 로딩 상태 UX가 함께 필요하다.
NEXT STEP
RELATED TERMS
Latency
요청을 보낸 후 응답을 받기까지 걸리는 시간으로, AI 코딩 도구에서는 프롬프트를 전송한 후 코드가 생성되기 시작할 때까지의 대기 시간을 의미한다. 밀리초(ms)에서 수 초(s)까지 다양하며, 개발자의 작업 흐름과 생산성에 직접적 영향을 미친다. AI 모델의 지연시간은 여러 요인에 의해 결정된다: 모델 크기(파라미터 수가 많을수록 느림), 입력 토큰 수(컨텍스트가 길수록 느림), 출력 토큰 수(긴 응답일수록 느림), 서버 부하(동시 사용자 수), 네트워크 거리(API 서버 위치). 바이브 코딩에서의 트레이드오프: Claude Opus 4.6은 가장 정확한 코드를 생성하지만 응답이 느리고, Codex mini나 Claude Sonnet은 빠르지만 복잡한 작업에는 부족하다. 이로 인해 많은 개발자가 '빠른 모델로 초안 생성 → 정확한 모델로 검증·수정'이라는 이중 모델 전략을 사용한다. 스트리밍 응답(streaming)은 전체 응답을 기다리지 않고 토큰이 생성되는 대로 표시하여 체감 지연을 줄이는 기법이며, 대부분의 AI 코딩 도구에서 기본으로 사용된다.
성능·최적화 번들 크기Bundle Size
웹 앱을 브라우저가 내려받아 실행해야 하는 JavaScript, CSS, 이미지 같은 파일 묶음의 전체 크기이다. 번들 크기가 커지면 첫 화면이 늦게 뜨고, 모바일 네트워크에서는 사용자가 로딩 중 이탈하기 쉽다. 바이브 코딩에서는 AI가 편의를 위해 큰 라이브러리를 쉽게 추가하거나 사용하지 않는 컴포넌트까지 한 번에 import할 수 있으므로, 기능이 동작한 뒤에도 번들 크기 변화를 확인해야 한다. 좋은 기준은 새 기능을 붙일 때 필요한 라이브러리만 추가하고, 빌드 결과에서 큰 청크가 생기면 코드 분할이나 더 가벼운 구현을 검토하는 것이다.
성능·최적화 캐시Cache
자주 쓰는 데이터나 계산 결과를 다시 만들거나 다시 요청하지 않도록 잠시 저장해 두는 방법이다. 브라우저 캐시, 서버 캐시, CDN 캐시, 데이터베이스 쿼리 캐시처럼 여러 층에서 사용된다. 캐시는 페이지를 빠르게 만들지만, 오래된 데이터를 계속 보여주는 문제가 생길 수 있으므로 언제 갱신하고 언제 무효화할지 정해야 한다. 바이브 코딩에서는 AI가 성능 문제를 해결한다며 캐시를 추가해도 최신성 조건을 빼먹는 경우가 많기 때문에, 캐시 키, 만료 시간, 갱신 트리거를 함께 확인해야 한다.
NEXT STEP / PRACTICE