반응형 디자인

Cascading Style Sheets

HTML·XML 문서의 화면·인쇄 등 표현을 기술하는 스타일시트 언어. 선택자·선언 규칙으로 DOM에 스타일을 입히며, 지금은 단일 CSS3가 아니라 모듈별 레벨로 발전한다.

Hot Reload

코드 변경 시 전체 앱을 재시작하지 않고 변경된 부분만 실시간으로 브라우저/앱에 반영하는 개발 기능이다. Hot Module Replacement(HMR)라고도 불리며, 바이브 코딩에서 핵심적인 피드백 루프를 제공한다. AI가 코드를 수정할 때마다 브라우저에서 즉시 결과를 확인할 수 있으므로, '프롬프트 → 코드 생성 → 즉시 시각적 확인'이라는 빠른 반복 주기가 가능하다. 전통적 개발에서는 코드 수정 → 빌드 → 브라우저 새로고침 → 상태 재설정이라는 지루한 과정을 거쳤지만, 핫 리로드는 앱의 현재 상태(로그인 상태, 입력된 폼 데이터 등)를 유지한 채 변경된 부분만 교체하므로 개발 경험이 극적으로 개선된다. Next.js(React), Vite, Remix 등 현대 웹 프레임워크는 핫 리로드를 기본 제공하며, Bolt.new는 이 기능을 활용하여 AI가 코드를 작성하는 동시에 라이브 프리뷰를 실시간 업데이트한다. React Native에서는 Expo Go를 통해 모바일 기기에서도 핫 리로드가 가능하다.

Tailwind CSS

Adam Wathan이 2017년에 만든 유틸리티 퍼스트(utility-first) CSS 프레임워크로, 미리 정의된 작은 CSS 클래스들을 HTML에 직접 조합하여 스타일을 구성하는 방식이다. 전통적 CSS가 '.login-button { background: blue; padding: 8px 16px; ... }'처럼 별도 파일에 클래스를 정의하는 반면, Tailwind는 '<button className="bg-blue-500 py-2 px-4 rounded">'처럼 HTML 안에서 바로 스타일을 적용한다. 바이브 코딩에서 AI가 가장 선호하는 스타일링 방식으로, 그 이유는 HTML과 스타일이 같은 파일에 있어 AI가 컨텍스트를 파악하기 쉽고, 클래스 이름이 스타일 값을 직접 설명하므로(bg-blue-500 = 파란 배경) AI가 의미를 이해하기 쉬우며, 별도의 CSS 파일을 관리할 필요가 없어 멀티파일 수정이 줄어들기 때문이다. v0, Bolt.new 등의 AI UI 빌더가 기본 스타일링 시스템으로 Tailwind를 채택하고 있으며, shadcn/ui 같은 인기 컴포넌트 라이브러리도 Tailwind 기반이다.