9장. VS Code 플러그인으로
1초 만에 index.html 추출하기

바이브 코딩은 의미 없는 타이핑과 반복적인 마우스 드래그를 극도로 경멸합니다. 아무리 정교하고 우아한 철학을 지닌 인프라 대시보드(index.html)라 할지라도, 이를 매번 수동으로 긁어오거나 서식 파일을 찾아 헤맨다면 생산성의 병목이 발생합니다.

우리가 사용하는 로컬 에디터인 **VS Code(Visual Studio Code)**의 내장 기능과 확장 생태계를 결합하면 복잡한 마크업 구조를 단 1초 만에 정밀하게 추출하고 제어할 수 있습니다. 마우스에 손을 대지 않고 키보드 단타로 코드를 뽑아내는 실전 프로토콜을 구현합니다.

⚡ 1. Emmet 스니펫을 이용한 0.1초 본문 골격 생성

VS Code에는 기본적으로 고속 마크업 플러그인인 **Emmet**이 내장되어 있습니다. 빈 문서 파일에서 불필요한 태그를 일일이 적을 필요가 전혀 없습니다.

• 실전 가이드: 저장소에 빈 파일 `index.html`을 만들고 에디터에서 켠 뒤, 느낌표 !를 입력하고 Tab 키를 누릅니다.
• 결과: 모바일 반응형 Meta 뷰포트와 기본 HTML5 규격 뼈대가 0.1초 만에 자동 생성됩니다. 바이브 코딩은 이 기본 뼈대 위에 고유의 고대비 스타일 시트(CSS)만 주입하여 속도를 극대화합니다.

🔌 2. 1초 만에 정적 요소를 복사하는 추천 플러그인 트리오

라이브 주소(`vibecoding.goguma.app`)의 컴포넌트나 매뉴얼 목차를 빠르게 제어하고 로컬로 추출하기 위해 VS Code에 반드시 심어야 할 필수 플러그인 설정입니다.

1. HTML Hint / HTML CSS Support: 코드 작성 중 오타를 실시간으로 감지하고, 기존 챕터(Chapter)에서 사용된 CSS 클래스 매너를 자동 완성하여 디자인 통일성을 유지합니다.
2. Live Preview (by Microsoft): 브라우저를 별도로 켜서 확인하지 않고, VS Code 내부 분할 화면으로 `index.html`이 추출되는 모습을 실시간으로 관측합니다. 와이드 모니터 분할 스킬을 단일 프로그램 안에서 구현하는 방식입니다.
3. Auto Rename Tag / Auto Close Tag: 태그를 하나만 수정해도 쌍을 이루는 닫는 태그가 1초 만에 자동 변경되어 휴먼 에러를 원천 봉쇄합니다.

⌨️ 3. 키보드로 끝내는 1초 추출 및 동기화 커맨드

마우스 드래그로 코드를 선택하다가 줄이 밀리는 현상은 바이브 코딩에서 허용되지 않습니다. 오직 단축키 릴레이로 코드를 다룹니다.

• 전체 선택 및 복사: Ctrl + A ➡️ Ctrl + C (맥은 Cmd) 조합으로 브라우저나 AI 대화창의 코드를 유실 없이 통째로 확보합니다.
• 코드 포맷팅 즉시 강제: 코드를 붙여넣은 뒤 Alt + Shift + F를 누르면, 뒤틀려 있던 마크다운이나 HTML 들여쓰기가 1초 만에 테크 기업 표준 규격으로 일렬종대 정렬됩니다.