번들 크기
웹 앱을 브라우저가 내려받아 실행해야 하는 JavaScript, CSS, 이미지 같은 파일 묶음의 전체 크기이다. 번들 크기가 커지면 첫 화면이 늦게 뜨고, 모바일 네트워크에서는 사용자가 로딩 중 이탈하기 쉽다. 바이브 코딩에서는 AI가 편의를 위해 큰 라이브러리를 쉽게 추가하거나 사용하지 않는 컴포넌트까지 한 번에 import할 수 있으므로, 기능이 동작한 뒤에도 번들 크기 변화를 확인해야 한다. 좋은 기준은 새 기능을 붙일 때 필요한 라이브러리만 추가하고, 빌드 결과에서 큰 청크가 생기면 코드 분할이나 더 가벼운 구현을 검토하는 것이다.
예시
AI가 차트 하나를 위해 무거운 시각화 라이브러리를 추가했다면, 빌드 분석에서 번들 크기 증가를 확인하고 단순 SVG 컴포넌트나 필요한 모듈만 import하는 방식으로 줄인다.
참고
기능 추가 후 성능 회귀를 확인하는 가장 기본적인 지표 중 하나.
카테고리
성능·최적화
난이도
basic
태그
번들크기 · 웹성능
함께 읽기
연관 용어
프론트엔드·UI
문서 객체 모델
브라우저가 HTML 문서를 읽어 JavaScript로 조작할 수 있는 객체 트리로 바꾼 구조이다. 버튼을 클릭하면 문구가 바뀌거나, 입력값에 따라 목록이 다시 그려지는 동작은 DOM을 읽고 변경하는 일이다. React 같은 프레임워크는 직접 DOM을 만지는 코드를 줄여주지만, 결국 화면에 보이는 변화는 DOM 업데이트로 나타난다.
프론트엔드·UI
변수
프로그램이 실행되는 동안 값을 이름으로 저장해 두는 기본 단위이다. 숫자, 문자열, 사용자 입력값, API 응답처럼 나중에 다시 써야 하는 데이터를 변수에 담는다. 바이브 코딩에서 AI가 만든 코드를 읽을 때 변수 이름을 보면 데이터가 어디에서 와서 어디로 전달되는지 추적할 수 있다. 초보자는 변수를 '값에 붙이는 라벨'로 이해하면 좋고, 의미 없는 이름보다 userName, totalPrice처럼 용도를 설명하는 이름을 쓰는 습관이 중요하다.
프론트엔드·UI
함수
특정 작업을 이름 붙여 재사용할 수 있게 묶은 코드 블록이다. 버튼 클릭 처리, 가격 계산, 입력값 검증, API 호출처럼 반복되거나 의미가 분명한 동작을 함수로 분리하면 코드가 읽기 쉬워지고 테스트하기도 쉬워진다. 바이브 코딩에서는 AI에게 '이 로직을 함수로 빼줘'라고 지시하면 거대한 컴포넌트나 핸들러를 더 작은 단위로 나눌 수 있다. 함수는 입력값(매개변수)을 받고 결과값을 반환할 수 있으므로, 데이터 흐름을 명확히 만드는 핵심 도구이다.