디바운스
디바운스는 사용자가 입력하거나 클릭할 때마다 바로 코드를 실행하지 않고, 마지막 동작이 끝난 뒤 짧은 대기 시간이 지나면 한 번만 실행하는 UI 제어 방식이다. 검색창 자동완성, 저장 버튼, 창 크기 변경처럼 이벤트가 빠르게 반복되는 화면에서 AI가 만든 코드가 요청을 과도하게 보내거나 상태를 흔들지 않도록 막아 준다. VIBE 코딩에서는 프롬프트에 대기 시간, 취소 조건, 로딩 표시, 최종 검증 이벤트를 함께 적어야 실제 사용자 경험과 비용을 모두 지킬 수 있다.
영어 표기
Debounce
예시
검색어 입력 필드에서 사용자가 한 글자씩 칠 때마다 API를 호출하지 않고 300ms 동안 추가 입력이 없을 때만 검색을 실행하도록 AI에게 지시한다. 이후 브라우저 네트워크 탭에서 빠른 입력 중 호출이 폭주하지 않는지, 마지막 검색어만 결과로 남는지 검증한다.
카테고리
프론트엔드·UI
난이도
basic
태그
프론트엔드 · UI
함께 읽기
연관 용어
브라우저·노코드 빌더
볼트.뉴
영어 표기 Bolt.new
StackBlitz 팀이 개발한 비주얼 퍼스트(visual-first) 바이브 코딩 플랫폼으로, 빠른 프론트엔드 개발에 최적화되어 있다. 가장 큰 강점은 즉각적인 시각적 피드백으로, 자연어로 요청하면 코드가 생성됨과 동시에 라이브 프리뷰에서 결과를 바로 확인할 수 있다. '랜딩 페이지를 만들어줘'라고 입력하면, 코드가 작성되는 과정을 실시간으로 보면서 프리뷰 화면에서 결과가 렌더링되는 것을 동시에 볼 수 있어, 개발 경험이 없는 사용자도 'AI가 코드를 만드는 과정'을 직관적으로 이해할 수 있다. StackBlitz의 WebContainers 기술을 활용하여 브라우저 내에서 전체 Node.js 환경을 실행하므로, 서버 사이드 코드도 브라우저에서 직접 동작한다. 원클릭 배포를 지원하여 결과물을 즉시 공유할 수 있다. v0가 UI 컴포넌트에 특화되어 있다면, Bolt.new는 랜딩 페이지, 마케팅 사이트, 간단한 웹 앱 등 '완성된 페이지' 단위의 빠른 제작에 더 적합하다.
프론트엔드·UI
HTML
영어 표기 HTML (HyperText Markup Language)
웹 페이지의 뼈대를 만드는 마크업 언어이다. 제목, 문단, 링크, 이미지, 입력 폼처럼 화면에 놓일 콘텐츠의 의미와 구조를 태그로 표현한다. 바이브 코딩에서 AI에게 웹 화면을 만들게 할 때도 HTML 구조가 먼저 잡혀야 CSS 스타일과 JavaScript 동작이 안정적으로 붙는다. 초보자는 HTML을 '웹 페이지의 골격'으로 이해하면 좋다.
프론트엔드·UI
CSS
영어 표기 CSS (Cascading Style Sheets)
HTML로 만든 구조에 색상, 간격, 글꼴, 배치, 반응형 디자인을 입히는 스타일 언어이다. HTML이 집의 뼈대라면 CSS는 인테리어와 레이아웃에 해당한다. 바이브 코딩에서는 AI가 화면을 예쁘게 만들 때 CSS나 Tailwind CSS 클래스를 생성하는 경우가 많으므로, 어떤 속성이 화면을 바꾸는지 기본 감각을 갖추면 결과를 더 쉽게 검토할 수 있다.