AI와 함께 배우는 HTML 첫걸음 01 | 실패 없는 개발 환경 세팅 (VS Code · 확장도구 · 수업자료 다운)

안녕하세요, 리베하얀입니다.
Figma나 프롬프트로 웹페이지를 만들었을 때, "화면은 나오는데 코드가 엉망이네?"라고 느껴보신 적 있으신가요?

단일 페이지 한 장을 만들 때는 상관없지만, 사이트 규모가 커지고 디자인 시스템과 유지보수, 검색 노출(SEO), 웹 접근성까지 고려해야 한다면 결국 코드를 검토하고 판별할 수 있는 기초 역량이 반드시 필요합니다.

단순한 손코딩을 넘어, AI와 똑똑하게 협업하고 유지보수 가능한 웹 환경을 만들기 위한 첫걸음!

1편에서는 실패 없이 따라 할 수 있는 VS Code 개발 환경 세팅과 필수 도구 설치, 수업 실습 자료 연동 방법을 차근차근 정리해 드립니다.

📌 타임라인(Timeline)
00:00 인트로: AI 코딩을 써본 분들이 겪는 현실적인 한계
01:03 우리가 여전히 기초 문법과 웹 표준을 알아야 하는 이유
01:55 AI 협업 방식: 웹 UI(ChatGPT·Gemini)부터 터미널 CLI까지
04:17 에디터 준비: VS Code 다운로드 및 기본 폴더 열기
05:25 터미널(Ctrl + ~) 열고 수업 실습 자료 클론(Git Clone) 받기
06:16 필수 확장도구 설치 (@recommended) & Live Server 실행
08:08 Node.js LTS 다운로드 및 단축키 안내
09:23 다음 강의 예고: 본격적인 HTML 구조 학습 시작


수업자료 다운로드 코드 : npx degit rebehayan/HTMLCSS .

터미널에서 설치가 안되신다면 NodeJS 설치하세요
NodeJS URL : https://nodejs.org/ko/download