안동민 개발노트

앞선 두 장을 통해 웹이 무엇이며, HTML, CSS, 자바스크립트가 각각 어떤 역할을 하는지 알아보는 귀중한 시간을 가졌습니다. 이제 이론을 넘어, 여러분의 아이디어를 실제 웹 페이지로 구현할 준비를 해볼 차례입니다. 그림을 그리기 위해 스케치북과 연필이 필요하듯이, 웹 개발을 위해서는 적절한 도구와 환경이 갖추어져야 합니다.

이번 장에서는 웹 개발의 첫걸음을 내딛기 위해 반드시 필요한 '개발 환경 설정' 방법에 대해 알아보겠습니다. 이 과정은 여러분이 코드를 작성하고, 작성한 코드가 웹 브라우저에서 어떻게 보이는지 확인하며, 오류를 찾아 수정하는 데 필수적인 기반을 마련해 줄 것입니다. 너무 어렵게 생각하지 마세요. 단계별로 차근차근 따라오시면 누구나 쉽게 자신만의 개발 환경을 구축할 수 있습니다.

텍스트 편집기와 IDE: 코드를 작성하는 도구

웹 개발은 기본적으로 '텍스트'를 작성하는 일에서 시작됩니다. HTML, CSS, 자바스크립트 코드는 모두 일반 텍스트 파일로 저장됩니다. 따라서 이 텍스트를 효율적으로 작성하고 관리할 수 있는 도구가 필요한데, 이것이 바로 텍스트 편집기(Text Editor) 또는 통합 개발 환경(IDE: Integrated Development Environment) 입니다.

일반 메모장으로도 코드를 작성할 수 있지만, 웹 개발에 특화된 텍스트 편집기는 코드의 가독성을 높여주고, 오타를 줄여주며, 개발 과정을 훨씬 편리하게 만들어주는 다양한 기능들을 제공합니다. 초보 개발자에게는 다음과 같은 기능들이 특히 유용합니다.

구문 강조 (Syntax Highlighting): 각 언어의 문법에 따라 코드를 색상으로 구분하여 표시해 주어 코드의 가독성을 높입니다.
자동 완성 (Auto-completion): 코드를 입력할 때 자동으로 완성될 만한 코드를 추천하여 입력 시간을 줄이고 오타를 방지합니다.
코드 접기 (Code Folding): 긴 코드 블록을 접어서 한눈에 볼 수 있도록 하여 전체 코드 구조를 파악하기 쉽게 합니다.
통합 터미널: 편집기 내에서 명령어를 실행할 수 있는 터미널 창을 제공하여 개발 효율성을 높입니다.
확장 프로그램/플러그인: 다양한 기능을 추가할 수 있는 확장 기능을 지원하여 개발 환경을 사용자 정의할 수 있습니다.

추천 텍스트 편집기: Visual Studio Code (VS Code)

오늘날 웹 개발 분야에서 가장 많은 개발자들이 사용하고, 초보자에게도 강력하게 추천되는 텍스트 편집기는 바로 Visual Studio Code (VS Code) 입니다. 마이크로소프트에서 개발했지만, 오픈 소스이며 Windows, macOS, Linux 등 모든 운영체제에서 사용할 수 있습니다.

VS Code를 추천하는 이유는 다음과 같습니다.

무료: 강력한 기능을 제공함에도 불구하고 무료로 사용할 수 있습니다.
가볍고 빠름: 성능이 뛰어나고 빠르게 실행됩니다.
풍부한 확장 생태계: 수많은 개발자들이 만든 확장 프로그램(Extension)을 통해 기능을 무한히 확장할 수 있습니다. 예를 들어, HTML/CSS 자동 완성, 실시간 미리 보기, Git 연동 등 웹 개발에 필요한 거의 모든 기능을 추가할 수 있습니다.
직관적인 사용자 인터페이스: 깔끔하고 사용하기 쉬운 인터페이스를 제공하여 초보자도 쉽게 적응할 수 있습니다.

VS Code 설치 방법:

다운로드: 웹 브라우저를 열고 https://code.visualstudio.com/ 에 접속합니다.
운영체제 선택: 여러분의 운영체제(Windows, macOS, Linux)에 맞는 설치 파일을 다운로드합니다.
설치 진행: 다운로드한 설치 파일을 실행하고, 안내에 따라 설치를 진행합니다. 특별한 설정을 변경할 필요 없이 기본값으로 설치를 완료하는 것이 일반적입니다. (Windows의 경우, 'PATH에 추가' 옵션을 반드시 체크하여 명령 프롬프트에서 code . 명령어를 사용할 수 있도록 설정하는 것이 좋습니다.)

설치가 완료되면 VS Code를 실행하여 깔끔한 인터페이스를 확인해 보세요. 이제 여러분은 코드를 작성할 준비가 된 것입니다.

웹 브라우저: 웹 페이지를 확인하는 필수 도구

여러분이 작성한 HTML, CSS, 자바스크립트 코드는 최종적으로 웹 브라우저를 통해 사용자에게 보여집니다. 따라서 다양한 웹 브라우저에서 여러분의 웹 페이지가 어떻게 보이는지 확인하는 것은 매우 중요합니다. 이미 여러분의 컴퓨터에는 기본 웹 브라우저가 설치되어 있을 것입니다. (예: Windows의 Microsoft Edge, macOS의 Safari)

하지만 개발 과정에서는 여러 종류의 브라우저에서 테스트해 볼 필요가 있으며, 특히 개발자 도구(Developer Tools)가 잘 갖춰진 브라우저를 사용하는 것이 편리합니다.

추천 웹 브라우저: Google Chrome

Google Chrome은 전 세계적으로 가장 많이 사용되는 웹 브라우저 중 하나이며, 웹 개발자들에게 특히 사랑받는 브라우저입니다.

강력한 개발자 도구: Chrome에 내장된 '개발자 도구(Developer Tools)'는 웹 페이지의 HTML, CSS, 자바스크립트 코드를 실시간으로 검사하고 수정하며, 성능을 분석하고, 네트워크 요청을 확인하는 등 웹 개발에 필요한 거의 모든 기능을 제공합니다. 이 도구는 앞으로 여러분의 웹 개발 학습에 있어 가장 강력한 조력자가 될 것입니다.
높은 시장 점유율: 많은 사용자가 Chrome을 사용하므로, Chrome에서 잘 작동하는 웹 페이지는 대부분의 사용자에게도 좋은 경험을 제공할 것입니다.

Google Chrome 설치 방법

다운로드: 웹 브라우저를 열고 https://www.google.com/chrome/ 에 접속합니다.
설치 진행: 'Chrome 다운로드' 버튼을 클릭하여 설치 파일을 다운로드하고, 안내에 따라 설치를 완료합니다.

개발자 도구 실행 방법

Chrome 브라우저에서 어떤 웹 페이지든 열려 있는 상태에서 다음 방법 중 하나를 선택하여 개발자 도구를 열 수 있습니다.

F12 키 누르기 (Windows/Linux)
Ctrl + Shift + I 키 누르기 (Windows/Linux)
Option + Command + I 키 누르기 (macOS)
마우스 오른쪽 클릭 후 '검사(Inspect)' 선택

개발자 도구 창이 열리면 다양한 탭을 확인할 수 있습니다. 'Elements' 탭에서는 HTML 구조와 적용된 CSS 스타일을, 'Console' 탭에서는 자바스크립트 오류 메시지나 출력값을 확인할 수 있습니다. 앞으로 이 개발자 도구를 활용하는 방법을 자주 다루게 될 것입니다.

폴더 구조 및 첫 웹 페이지 생성하기

이제 VS Code와 Chrome 브라우저 설치를 완료했으니, 실제 웹 프로젝트를 위한 기본적인 폴더를 만들고 첫 번째 웹 페이지를 생성해 봅시다. 깔끔한 폴더 구조를 유지하는 것은 프로젝트가 커질수록 매우 중요합니다.

프로젝트 폴더 생성
- 여러분이 원하는 아무 곳에 'web-dev-practice'와 같은 이름의 새 폴더를 만듭니다. 이 폴더 안에 앞으로 모든 웹 개발 실습 파일을 저장할 것입니다. (예: 바탕화면이나 '문서' 폴더 내에 생성)
VS Code로 폴더 열기
- VS Code를 실행합니다.
- 메뉴에서 File (파일) > Open Folder... (폴더 열기...)를 선택합니다.
- 방금 생성한 'web-dev-practice' 폴더를 찾아 선택하고 '폴더 선택' 버튼을 클릭합니다.
- VS Code의 왼쪽 사이드바(탐색기)에 'web-dev-practice' 폴더가 표시될 것입니다.
새 파일 생성
- VS Code의 왼쪽 사이드바에서 'web-dev-practice' 폴더 위에 마우스 커서를 올리면 나타나는 '새 파일' 아이콘(빈 페이지 모양)을 클릭합니다.
- 파일 이름을 index.html이라고 입력하고 Enter 키를 누릅니다. (.html은 HTML 파일임을 나타내는 확장자입니다.)
- 동일한 방법으로 style.css (CSS 파일)와 script.js (자바스크립트 파일)도 생성합니다.
이제 여러분의 'web-dev-practice' 폴더 안에는 다음과 같은 파일들이 생성되어 있을 것입니다.
```
web-dev-practice/
├── index.html
├── style.css
└── script.js
```

첫 HTML 코드 작성 및 미리 보기

index.html 파일을 VS Code 편집기에서 엽니다.
다음 HTML 코드를 입력합니다. (VS Code에서 html:5를 입력하고 Tab 키를 누르면 기본적인 HTML 뼈대가 자동 완성됩니다.)

index.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>나의 첫 웹 페이지</title>
    <link rel="stylesheet" href="style.css"> </head>
<body>
    <h1>안녕하세요, 웹 개발자님!</h1>
    <p>이것은 '나 혼자 웹 개발'과 함께 만든 첫 번째 웹 페이지입니다.</p>
    <button id="myButton">클릭해보세요!</button>

    <script src="script.js"></script> </body>
</html>

참고: <link rel="stylesheet" href="style.css">는 style.css 파일을 HTML에 연결하는 코드입니다.
<script src="script.js"></script>는 script.js 파일을 HTML에 연결하는 코드입니다.

CSS 및 자바스크립트 코드 작성

style.css 파일을 열고 다음 CSS 코드를 작성합니다.

style.css

body {
    font-family: Arial, sans-serif;
    background-color: #e0f2f7;
    color: #004d66;
    text-align: center;
    padding-top: 80px;
}
h1 {
    color: #007bff;
    font-size: 2.5em;
    margin-bottom: 25px;
}
p {
    font-size: 1.1em;
    line-height: 1.5;
    margin-bottom: 40px;
}
button {
    background-color: #28a745;
    color: white;
    padding: 12px 25px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.1em;
    transition: background-color 0.3s ease;
}
button:hover {
    background-color: #218838;
}

script.js 파일을 열고 다음 자바스크립트 코드를 작성합니다.

script.js

// 버튼 요소를 선택합니다.
const myButton = document.getElementById('myButton');
// 제목 요소를 선택합니다.
const titleElement = document.querySelector('h1');

// 버튼 클릭 이벤트 리스너를 추가합니다.
myButton.addEventListener('click', function() {
    // 제목 텍스트를 변경합니다.
    titleElement.textContent = '클릭 성공! 웹 개발 준비 완료!';
    // 버튼 텍스트도 변경합니다.
    myButton.textContent = '다시 클릭해보세요!';
    // 배경색을 변경합니다.
    document.body.style.backgroundColor = '#d4edda'; // 연두색 계열
});

웹 브라우저에서 열기
- 작성한 파일을 모두 저장합니다. (Ctrl + S 또는 Command + S)
- web-dev-practice 폴더로 이동하여 index.html 파일을 찾습니다.
- index.html 파일을 더블 클릭하여 웹 브라우저(기본 브라우저 또는 Chrome)에서 엽니다.
이제 여러분은 방금 작성한 HTML, CSS, 자바스크립트가 적용된 웹 페이지를 볼 수 있을 것입니다! '클릭해보세요!' 버튼을 눌러보세요. 제목과 버튼의 텍스트가 바뀌고 배경색도 변하는 것을 확인할 수 있습니다.

VS Code 확장 프로그램 활용하기 (선택)

VS Code의 가장 큰 장점 중 하나는 바로 '확장 프로그램(Extensions)'입니다. 몇 가지 유용한 확장 프로그램을 설치하면 개발 효율성을 크게 높일 수 있습니다.

추천 확장 프로그램

Live Server
- 기능: HTML 파일을 저장할 때마다 자동으로 웹 브라우저를 새로고침하여 변경 사항을 즉시 반영해 줍니다. 개발 중에는 매번 브라우저를 새로고침하는 것이 번거로운데, Live Server가 이 과정을 자동화해 주어 매우 편리합니다.
- 설치 방법:
  - VS Code 왼쪽 사이드바에서 '확장' 아이콘 (정사각형 4개 모양)을 클릭합니다.
  - 검색창에 Live Server를 입력하고, Ritwick Dey가 만든 'Live Server'를 찾아 'Install' (설치) 버튼을 클릭합니다.
- 사용 방법:
  - index.html 파일을 열어 놓은 상태에서, VS Code 에디터 창의 오른쪽 하단에 생겨난 'Go Live' 버튼을 클릭하거나, index.html 파일 위에서 마우스 오른쪽 클릭 후 'Open with Live Server'를 선택합니다.
  - 새로운 브라우저 탭이 열리며 웹 페이지가 표시됩니다. 이제 VS Code에서 코드를 수정하고 저장하면, 브라우저가 자동으로 새로고침되어 변경 사항을 실시간으로 확인할 수 있습니다.
Prettier - Code formatter
- 기능: HTML, CSS, 자바스크립트 등 다양한 언어의 코드를 일관된 스타일로 자동으로 정렬해 줍니다. 들여쓰기, 줄 바꿈 등 코딩 스타일을 깔끔하게 유지하여 가독성을 높여줍니다.
- 설치 방법: '확장' 탭에서 Prettier를 검색하여 설치합니다.
- 사용 방법:
  - VS Code 설정 (단축키: Ctrl + , 또는 Command + ,)에서 'Format On Save'를 검색하여 체크하면, 파일을 저장할 때마다 자동으로 코드가 정렬됩니다.

이제 여러분은 웹 개발을 위한 기본적인 모든 환경 설정을 마쳤습니다. 텍스트 편집기와 웹 브라우저, 그리고 첫 번째 웹 페이지까지 성공적으로 만들었습니다.

개발 환경 설정

텍스트 편집기와 IDE: 코드를 작성하는 도구

웹 브라우저: 웹 페이지를 확인하는 필수 도구

폴더 구조 및 첫 웹 페이지 생성하기

VS Code 확장 프로그램 활용하기 (선택)

On this page