한 줄 요약 — VS Code와 Live Server 확장 두 가지면 HTML 학습 환경은 거의 끝납니다. 저장하자마자 브라우저가 새로고침되는 흐름을 한 번 만들어두면 이후 60일이 편해집니다.

학습 목표#

  • VS Code를 설치하고 한국어 메뉴로 맞출 수 있다.
  • Live Server를 띄워 HTML을 저장 즉시 브라우저에서 확인할 수 있다.
  • 작업 폴더와 파일 이름을 안전한 규칙으로 만들 수 있다.
  • 브라우저 개발자 도구를 단축키로 열 수 있다.

오늘의 비유 — 책을 쓰기 전 책상·펜·노트 정리#

긴 글을 쓰려고 마음먹은 첫날, 보통 가장 먼저 하는 일은 책상을 치우고 펜과 노트를 꺼내두는 것입니다. 글이 술술 써질지는 그다음 문제고, 우선 손에 잡히는 도구가 있어야 시작할 수 있습니다.

코드도 같습니다. HTML 파일을 만들고 화면에 띄우려면 글을 쓰는 도구(편집기), 글이 놓일 자리(폴더), 그리고 결과를 펼쳐보는 책상 옆 자리(브라우저)가 필요합니다. 오늘은 이 세 가지를 가지런히 정돈해둡니다.

핵심 개념#

편집기 — VS Code#

VS Code(Visual Studio Code)는 마이크로소프트가 만든 무료 코드 편집기입니다. 메모장과 달리 HTML 태그를 색으로 구분해주고, 닫는 태그를 자동으로 채워주며, 오타가 났을 때 빨간 줄로 알려줍니다. 책상 위에 둘 만년필이라고 생각하면 됩니다.

code.visualstudio.com에서 운영체제에 맞는 설치 파일을 받아 설치합니다. 첫 실행 후 좌측의 네모 네 개 아이콘(Extensions, 단축키 ⇧⌘X 또는 Ctrl+Shift+X)을 누르면 확장 프로그램을 검색할 수 있습니다. 여기서 두 가지만 설치합니다.

  • Korean Language Pack — 메뉴를 한국어로 바꿔줍니다.
  • Live Server — 저장하자마자 브라우저를 새로고침해주는 도구.

확장은 처음부터 많이 설치할 필요가 없습니다. 책상에 펜이 많아 봐야 손에 쥐는 건 한 자루뿐입니다.

작업 폴더 만들기#

데스크톱이든 문서 폴더든 한 곳에 frontend-course라는 폴더를 만듭니다. 그 안에 회차별 폴더(day-02)를 두고, 그 안에 오늘 만들 파일을 둡니다.

frontend-course/
└── day-02/
    └── index.html

VS Code의 파일 → 폴더 열기로 day-02 폴더를 통째로 엽니다. 파일 하나만 여는 것이 아니라 폴더를 "작업 공간"으로 여는 게 핵심입니다. 폴더 안 다른 파일을 만들거나 옮기는 작업을 같은 창에서 처리할 수 있습니다.

Live Server — 저장하면 자동으로 새로고침#

확장을 설치한 뒤 index.html 파일에서 우클릭 → Open with Live Server를 누르면, 브라우저가 열리며 빈 페이지(또는 만든 내용)가 뜹니다. 이때 VS Code 우하단 상태바에 Port: 5500이 켜졌다면 정상입니다.

지금부터는 HTML을 고치고 ⌘S 또는 Ctrl+S로 저장하기만 하면 브라우저가 알아서 다시 그려줍니다. 한 손으로는 글을 쓰고, 다른 손은 책상 옆에 펼쳐둔 원고를 흘끔거리는 흐름이 만들어집니다.

개발자 도구 단축키#

지난 회에 한 번 열어봤던 개발자 도구는 앞으로 자주 쓸 도구입니다. 단축키를 외워두는 편이 좋습니다.

  • 윈도우·리눅스: F12
  • 맥: ⌥⌘I

Elements 탭은 현재 화면의 구조를, Console 탭은 오류 메시지를, Network 탭은 주고받은 자원을 보여줍니다. 오늘은 Elements만 익숙해지면 충분합니다.

함께 따라하기 — index.html 만들고 Live Server로 띄우기#

day-02 폴더 안에 index.html 파일을 새로 만듭니다. 다음 다섯 줄을 그대로 칩니다.

<!DOCTYPE html>
<html lang="ko">
  <head><meta charset="utf-8"><title>오늘의 첫 페이지</title></head>
  <body><h1>안녕, 오늘부터 시작</h1></body>
</html>

저장한 뒤 우클릭 → Open with Live Server를 누릅니다. 브라우저 새 탭이 열리고 화면 좌상단에 큰 글씨로 안녕, 오늘부터 시작이 보입니다. 그 상태에서 VS Code로 돌아가 안녕을 안녕하세요로 바꾸고 저장하면, 브라우저가 자동으로 새로고침되며 글자가 바뀝니다.

이 흐름이 오늘 만들어야 할 가장 중요한 결과물입니다. 이후 모든 회차에서 같은 사이클을 반복합니다.

흔한 실수 3가지#

1. 한글 폴더명·파일명에 공백을 넣는다#

내 첫 페이지/index.html처럼 한글과 공백이 섞인 경로는 한국 PC에서는 그럭저럭 동작하지만, 외부에 공유하거나 GitHub Pages 같은 곳에 올리면 깨지기 쉽습니다.

❌  내 첫 페이지/index.html
✅  day-02/index.html

이름을 짧고 영문이어야 한다는 게 아니라, 사람이 아닌 도구가 읽기 좋게 짓자는 뜻입니다. 영문 소문자와 -로만 짓는 습관을 들이면 두고두고 편합니다.

2. 메모장이나 한컴오피스로 HTML을 저장한다#

윈도우 메모장은 저장 시 BOM(Byte Order Mark)이라는 보이지 않는 표시를 파일 앞에 슬쩍 끼워 넣곤 합니다. 한글이 깨지거나, 첫 줄 <!DOCTYPE html> 앞에 알 수 없는 문자가 들어가 페이지가 이상하게 보일 수 있습니다. 한컴오피스는 더 문제인데, 저장하는 순간 HTML과 무관한 워드 서식이 함께 들어갑니다.

메모장에 장편 소설을 쓰지는 않습니다. HTML도 같은 이유로 항상 VS Code 같은 코드 편집기로만 만지세요.

3. 확장 프로그램을 처음부터 잔뜩 설치한다#

검색해보면 "필수 확장 30선" 같은 글이 많지만, 처음 한 달은 Korean Language Pack과 Live Server 둘이면 충분합니다. 확장이 많아질수록 시작 속도가 느려지고, 자동 완성 동작이 서로 충돌해 원인 모를 오류가 납니다. 책상에 펜이 서른 자루 있어도 손에 쥘 수 있는 건 한 자루뿐입니다.

오늘 배운 것 체크리스트#

  • VS Code가 설치돼 있고 한국어 메뉴로 보인다.
  • Live Server 확장이 설치돼 있다.
  • day-02/index.html을 저장하면 브라우저가 자동으로 새로고침된다.
  • 개발자 도구를 단축키로 열 수 있다.

자주 묻는 질문#

Q. 코딩 처음에 무엇부터 깔아야 하나요?

A. 운영체제 상관없이 VS Code 하나면 시작은 충분합니다. 거기에 Live Server 확장만 더하면 HTML과 CSS 학습 환경은 사실상 완성입니다. 다른 편집기를 이미 쓰고 있다면 굳이 바꿀 필요는 없지만, 본 시리즈의 안내는 VS Code 기준입니다.

Q. Live Server는 어떻게 동작하나요?

A. 내 컴퓨터 안에 아주 작은 웹 서버를 잠깐 띄워 http://127.0.0.1:5500 같은 주소로 HTML을 돌려줍니다. 파일이 바뀌면 그 변경을 감지해 브라우저에 새로고침 신호를 보냅니다. 끄려면 VS Code 우하단의 Port: 5500을 다시 클릭하면 됩니다.

Q. 개발자 도구는 어떻게 켜나요?

A. 윈도우·리눅스는 F12, 맥은 ⌥⌘I입니다. 우클릭 → 검사(Inspect)로도 열 수 있지만, 자주 열게 되니 단축키 쪽이 편합니다.

다음 시간 예고#

내일은 첫 HTML 파일과 문서 구조 — DOCTYPE, html, head, body의 역할을 다룹니다. 오늘 띄운 다섯 줄이 왜 그런 모양으로 생겼는지, 한 줄씩 의미를 풀어봅니다.

더 알아보기#