개발 환경과 첫 페이지

🎯 학습 목표

이 강을 마치면 여러분은 웹 개발을 위한 코드 에디터를 준비하고, HTML 문서의 기본 골격을 직접 손으로 작성한 뒤, 그것을 브라우저로 열어 자신의 첫 웹 페이지를 화면에 띄울 수 있게 됩니다. 지난 강에서 웹과 HTML·CSS가 무엇인지 개념을 잡았습니다. 이번 강은 드디어 직접 코드를 작성하는 실습의 첫걸음입니다.

구체적으로는 세 가지를 배웁니다. 첫째, 코드를 편하게 쓰도록 도와주는 VS Code를 설치합니다. 둘째, 모든 웹 페이지의 뼈대가 되는 HTML 기본 구조를 이해합니다. 셋째, 작성한 파일을 브라우저로 열어 결과를 확인하는 방법을 익힙니다.

🛠️ 개발 환경 준비 — VS Code 설치

이 섹션에서는 웹 페이지를 만들 도구, 코드 에디터를 준비하겠습니다.

HTML 파일은 사실 메모장 같은 아주 단순한 프로그램으로도 작성할 수 있습니다. HTML은 그저 글자로 이루어진 텍스트이기 때문입니다. 그러나 실제로 개발할 때는 코드 에디터라는 전용 도구를 씁니다. 코드 에디터는 코드를 색깔로 구분해 보여 주고(문법 강조), 자동 완성을 도와주며, 실수를 잡아 주는 등 개발을 훨씬 편하게 해 줍니다.

가장 널리 쓰이는 무료 에디터가 마이크로소프트의 비주얼 스튜디오 코드(VS Code)입니다. 이 강좌에서도 VS Code를 기준으로 설명합니다. 설치 방법은 간단합니다. 웹 브라우저에서 VS Code 공식 사이트에 접속해, 자신의 운영체제(윈도우·맥)에 맞는 설치 파일을 내려받아 실행하면 됩니다. 설치 과정은 일반 프로그램과 다르지 않으니, 안내에 따라 진행하면 됩니다.

설치가 끝나면 VS Code를 실행해 봅니다. 처음에는 화면이 낯설게 느껴질 수 있지만, 우리가 지금 쓸 기능은 파일을 만들고 글자를 입력하는 것뿐입니다. 복잡한 기능은 앞으로 하나씩 익혀 갈 테니, 지금은 '코드를 쓰는 공책' 정도로 편하게 생각하면 됩니다. 준비가 되었다면, 이제 첫 HTML 파일을 만들어 보겠습니다.

📄 첫 파일 만들기 — index.html

이 섹션에서는 실제로 HTML 파일을 만들어 보겠습니다.

먼저 컴퓨터에 작업할 폴더를 하나 만듭니다. 예를 들어 바탕화면에 'my-web'이라는 폴더를 만들어 봅시다. 그런 다음 VS Code에서 이 폴더를 열고(File 메뉴의 Open Folder), 그 안에 새 파일을 하나 만듭니다. 파일 이름은 index.html로 짓습니다.

여기서 두 가지가 중요합니다. 첫째, 파일 확장자를 반드시 .html로 해야 합니다. 이 확장자가 있어야 컴퓨터와 브라우저가 '이것은 웹 페이지 파일이구나'라고 알아봅니다. 둘째, 파일 이름을 index로 짓는 데에는 이유가 있습니다. 웹에서 index.html은 관례적으로 대표(첫) 페이지를 뜻하기 때문입니다. 웹사이트의 시작 페이지에 가장 널리 쓰이는 이름이니 익혀 두면 좋습니다.

파일을 만들었다면, 이제 그 안에 코드를 채워 넣을 차례입니다. 다음 섹션에서 모든 웹 페이지의 뼈대가 되는 HTML 기본 골격을 한 줄씩 작성해 보겠습니다.

🦴 HTML 기본 골격 이해하기

이 섹션에서는 이 강의 가장 중요한 부분, 즉 HTML 문서의 기본 구조를 살펴보겠습니다. 아래 코드를 index.html 파일에 그대로 입력해 봅니다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title>나의 첫 페이지</title>
  </head>
  <body>
    <h1>안녕하세요!</h1>
    <p>나의 첫 웹 페이지입니다.</p>
  </body>
</html>

짧지만 이 안에 웹 페이지의 핵심 뼈대가 모두 담겨 있습니다. 한 줄씩 뜯어보겠습니다.

맨 위의 <!DOCTYPE html>은 '이 문서는 최신 HTML(HTML5) 방식으로 작성되었다'고 브라우저에 알려 주는 선언입니다. 모든 HTML 문서의 맨 첫 줄에 반드시 써 주는 약속으로, 이것이 있어야 브라우저가 페이지를 표준에 맞게 올바로 해석합니다.

그다음 <html lang="ko">부터 맨 아래 </html>까지가 문서 전체를 감싸는 최상위 태그입니다. 모든 내용이 이 안에 들어갑니다. lang="ko"는 이 페이지의 언어가 한국어임을 알려 주는 부분으로, 검색 엔진이나 화면 낭독기 같은 도구가 참고합니다.

🧠 head와 body — 두 개의 방

이 섹션에서는 HTML 문서를 이루는 두 개의 큰 영역, head와 body를 자세히 살펴보겠습니다. 이 둘의 구분은 HTML을 이해하는 핵심입니다.

HTML 문서는 크게 head(머리)와 body(몸통)라는 두 개의 방으로 나뉩니다. 이 둘의 역할은 완전히 다릅니다.

head는 화면에 보이지 않는 정보를 담는 방입니다. 페이지의 제목, 문자 인코딩, 스타일 연결 같은 '설정과 정보'가 이곳에 들어갑니다. 위 코드에서 head 안에는 두 가지가 있습니다. 첫째, <meta charset="UTF-8">은 문자 인코딩을 UTF-8로 지정하는 것입니다. 이것이 있어야 한글이 깨지지 않고 제대로 표시되므로, 반드시 넣어 주어야 합니다. 둘째, <title>나의 첫 페이지</title>은 페이지의 제목으로, 브라우저 탭에 표시되는 이름입니다. 페이지 본문이 아니라 탭에 나타난다는 점을 기억하세요.

body는 화면에 실제로 보이는 내용을 담는 방입니다. 우리가 웹 페이지에서 눈으로 보는 제목, 글, 이미지, 버튼은 모두 이 body 안에 들어갑니다. 위 코드의 body 안에는 <h1>안녕하세요!</h1>라는 큰 제목과 <p>나의 첫 웹 페이지입니다.</p>라는 문단이 들어 있습니다. 여기서 <h1>은 가장 큰 제목을 만드는 태그, <p>는 문단(paragraph)을 만드는 태그입니다. 이 태그들은 다음 강에서 더 자세히 배웁니다.

정리하면, head는 '보이지 않는 정보', body는 '보이는 내용'입니다. 이 구분만 확실히 잡아 두면 앞으로의 학습이 훨씬 수월해집니다.

🌐 브라우저로 열어 확인하기

이 섹션에서는 작성한 코드를 실제 웹 페이지로 확인하는 방법을 살펴보겠습니다.

코드를 다 작성했다면 반드시 저장합니다. VS Code에서 저장하지 않으면 변경한 내용이 파일에 반영되지 않습니다. 저장 단축키는 윈도우에서 Ctrl+S, 맥에서 Cmd+S입니다. 앞으로 코드를 수정할 때마다 저장하는 습관을 들이는 것이 중요합니다.

이제 결과를 볼 차례입니다. 방법은 아주 간단합니다. 저장한 index.html 파일을 마우스로 더블클릭하면, 컴퓨터의 기본 웹 브라우저가 열리면서 우리가 만든 페이지가 화면에 나타납니다. 브라우저 탭에는 head에 적은 '나의 첫 페이지'가, 화면 본문에는 body에 적은 '안녕하세요!'라는 큰 글씨와 '나의 첫 웹 페이지입니다.'라는 문장이 보일 것입니다. 축하합니다. 여러분의 첫 웹 페이지가 완성된 것입니다!

여기서 웹 개발의 기본 흐름을 기억해 두세요. ①코드를 작성하고 → ②저장하고 → ③브라우저에서 확인한다는 이 세 단계의 반복이, 앞으로 우리가 계속하게 될 작업의 리듬입니다. 코드를 조금 고칠 때마다 저장하고 브라우저를 새로고침(F5)하면 바뀐 결과를 바로 볼 수 있습니다.

⚠️ 자주 하는 실수

이 섹션에서는 처음 배울 때 흔히 겪는 실수들을 정리하겠습니다.

첫 번째, 파일 확장자 실수입니다. 파일을 저장할 때 실수로 index.html.txt처럼 저장되면 브라우저가 웹 페이지로 인식하지 못합니다. 확장자가 정확히 .html인지 확인하세요. 윈도우에서 확장자가 보이지 않는다면, 폴더 설정에서 '파일 확장명 표시'를 켜 두는 것이 좋습니다.

두 번째, 한글 깨짐입니다. 화면에 한글이 '���'처럼 깨져 보인다면, 십중팔구 <meta charset="UTF-8">을 빠뜨렸거나 잘못 쓴 것입니다. 이 한 줄이 문자 인코딩을 지정하니 반드시 head 안에 넣어야 합니다.

세 번째, 태그 닫기를 잊는 것입니다. HTML 태그는 대부분 <p>로 열고 </p>로 닫는 짝으로 이루어집니다. 닫는 태그(</...>)의 슬래시(/)를 빠뜨리면 화면이 이상하게 나올 수 있으니, 여는 태그와 닫는 태그가 짝을 이루는지 확인하는 습관을 들이세요.

📝 핵심 요약

이번 강에서는 개발 환경을 준비하고 첫 페이지를 만들었습니다.

• VS Code — 코드를 편하게 작성하도록 돕는 무료 에디터로, 이 강좌의 기본 도구입니다.
• index.html — 확장자는 .html, 이름은 대표 페이지를 뜻하는 index로 짓습니다.
• 기본 골격 — <!DOCTYPE html> 선언 아래 <html>이 전체를 감싸고, 그 안에 head와 body가 들어갑니다.
• head와 body — head는 제목·인코딩 같은 '보이지 않는 정보', body는 '화면에 보이는 내용'을 담습니다.
• 확인 흐름 — 작성 → 저장(Ctrl/Cmd+S) → 브라우저로 열기(또는 새로고침 F5)의 반복입니다.

이제 웹 페이지의 뼈대를 만들고 화면에 띄우는 법을 익혔습니다. 다음 강에서는 그 body 안을 채우는 다양한 기본 태그들, 즉 제목·문단·강조 같은 요소를 본격적으로 배워 보겠습니다. 다음 강 「기본 태그」에서 이어가겠습니다.

📚 참고 자료

• Visual Studio Code 공식 다운로드 — Microsoft
• HTML 문서 구조(html·head·body) — MDN Web Docs
• <meta> 요소와 문자 인코딩 — MDN Web Docs