개발 환경 설정

개발 환경 설정은 단순한 준비 작업처럼 보이지만 학습 속도를 크게 좌우합니다. 처음에는 코드보다 환경에서 더 자주 막히기 때문입니다. 파일 경로가 어긋나거나, 고친 내용이 브라우저에 반영되지 않거나, 확장 프로그램끼리 설정이 충돌하면 작은 예제 하나에도 원인을 찾느라 오래 걸립니다.

이 글에서는 편집기와 브라우저를 설치하고, 실습 폴더를 만들어 HTML, CSS, 자바스크립트 파일을 연결한 뒤 브라우저에서 확인하는 데까지 진행합니다. 도구를 왜 쓰는지와 어디서 실수하기 쉬운지도 함께 살펴보므로, 앞으로 코드가 늘어나도 같은 방식으로 문제를 좁힐 수 있습니다.

위 그림은 웹 개발에서 반복하는 여섯 단계의 흐름을 보여 줍니다. 편집기에서 한 가지 의도만 담아 코드를 고치고, HTML, CSS, 자바스크립트 파일을 저장한 뒤, 로컬 HTTP 서버가 localhost 주소로 그 파일을 제공합니다. 브라우저에서 새로고침하거나 같은 조작을 다시 해 화면을 재현하고, 개발자 도구의 Elements, Console, Network 패널에서 무엇이 잘못되었는지 확인한 다음, 확인한 원인 하나만 작게 고쳐 다시 편집 단계로 돌아갑니다.

그림 아래의 문장처럼, 도구를 더 설치하기 전에 이 반복이 실제로 한 바퀴 도는지부터 확인하는 것이 중요합니다. 저장하지 않았거나 다른 파일을 열고 있으면 아무리 고쳐도 화면이 바뀌지 않기 때문입니다.

편집기: 코드를 쓰는 도구

HTML, CSS, 자바스크립트 코드는 모두 일반 텍스트 파일로 저장되므로 메모장으로도 쓸 수 있습니다. 하지만 웹 개발용 편집기나 통합 개발 환경(IDE, Integrated Development Environment)을 쓰면 코드를 읽기 쉽고 오타가 줄며 반복 작업도 줄어듭니다. 처음 배울 때는 특히 다음 기능이 도움이 됩니다.

• 구문 강조(syntax highlighting): 언어의 문법에 따라 코드를 색으로 구분해 읽기 쉽게 합니다.
• 자동 완성(auto-completion): 입력 중인 코드를 추천해 입력 시간과 오타를 줄입니다.
• 코드 접기(code folding): 긴 블록을 접어 전체 구조를 한눈에 봅니다.
• 통합 터미널: 편집기 안에서 명령어를 실행합니다.
• 확장 프로그램: 필요한 기능을 추가해 편집기를 자신에게 맞춥니다.

이 교재는 Microsoft가 만든 Visual Studio Code(VS Code)를 기준으로 설명합니다. VS Code는 무료이고, Windows, macOS, Linux에서 모두 쓸 수 있으며, 파일 탐색기와 통합 터미널을 함께 제공하고, HTML과 CSS의 자동 완성, Git 연동 같은 기능을 확장 프로그램으로 더할 수 있습니다. 다른 편집기를 쓰더라도 같은 파일을 만들어 저장하고 브라우저에서 열 수 있다면 실습을 따라올 수 있습니다.

VS Code는 공식 사이트에서 운영체제에 맞는 설치 파일을 내려받아 기본값으로 설치합니다. Windows 설치 프로그램에서 기본으로 켜져 있는 PATH에 추가 옵션을 그대로 두면, 터미널에서 code .를 입력해 현재 폴더를 VS Code로 열 수 있습니다. macOS에서는 VS Code의 명령 팔레트(Command + Shift + P)에서 Shell Command: Install 'code' command in PATH를 실행하면 같은 명령을 쓸 수 있습니다.

웹 브라우저와 개발자 도구

작성한 코드는 결국 웹 브라우저에서 사용자에게 보입니다. 컴퓨터에는 이미 Windows의 Microsoft Edge나 macOS의 Safari 같은 기본 브라우저가 있지만, 개발할 때는 개발자 도구(Developer Tools)가 잘 갖춰진 브라우저를 쓰는 것이 편합니다.

이 교재는 개발자 도구의 패널 이름을 Google Chrome 기준으로 적습니다. Chrome의 개발자 도구로 페이지의 HTML과 CSS를 실시간으로 살펴보고 고치며, 자바스크립트 오류와 네트워크 요청, 성능을 확인할 수 있습니다. Chrome은 공식 사이트에서 설치합니다. Edge와 Firefox에도 요소, 콘솔, 네트워크를 확인하는 비슷한 도구가 있으므로 그 브라우저를 써도 됩니다. 다만 한 브라우저에서 잘 동작한다고 모든 브라우저에서 같게 동작한다는 보장은 없으므로, 실제 사용자가 쓸 다른 브라우저와 키보드 조작도 따로 확인합니다.

개발자 도구는 페이지가 열린 상태에서 다음 방법 가운데 하나로 엽니다.

• Windows와 Linux: F12나 Ctrl + Shift + I
• macOS: Option + Command + I
• 공통: 페이지에서 마우스 오른쪽 버튼을 누르고 검사(Inspect) 선택

개발자 도구에는 여러 패널이 있습니다. Elements 패널에서는 HTML 구조와 각 요소에 적용된 CSS를, Console 패널에서는 자바스크립트의 오류 메시지와 출력값을, Network 패널에서는 페이지가 보낸 요청과 받은 응답을 확인합니다. 앞으로의 실습에서 이 세 패널을 자주 씁니다.

실습 폴더와 첫 페이지

이제 실습 파일을 둘 폴더를 만들고 첫 페이지를 만들어 보겠습니다. 바탕화면이나 문서 폴더처럼 찾기 쉬운 곳에 web-dev-practice 폴더를 만들고, 앞으로의 실습 파일을 이 안에 모읍니다. VS Code를 실행해 File 메뉴의 Open Folder...로 이 폴더를 열면, 왼쪽 탐색기에 폴더 이름이 표시됩니다.

탐색기에서 폴더 이름 위에 마우스를 올리면 나타나는 새 파일 아이콘을 눌러 index.html을 만들고, 같은 방법으로 style.css와 script.js도 만듭니다. .html, .css, .js는 각각 HTML, CSS, 자바스크립트 파일임을 나타내는 확장자입니다.

index.html을 열고 다음 코드를 입력합니다. VS Code에서는 빈 HTML 파일에 !나 html:5를 입력하고 Tab 키를 누르면 기본 뼈대가 자동으로 만들어지므로, 그 위에 필요한 부분만 더해도 됩니다.

<!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>이것은 <strong>나 혼자 웹 개발</strong>과 함께 만든 첫 번째 웹 페이지입니다.</p>
    <button id="myButton">클릭해보세요!</button>

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

<link rel="stylesheet" href="style.css">는 같은 폴더의 style.css를 이 문서의 스타일 시트로 연결하고, <script src="script.js"></script>는 script.js를 불러와 실행합니다. 두 경로는 index.html이 있는 폴더를 기준으로 해석되므로 파일 이름과 위치가 정확히 맞아야 합니다.

이어서 style.css에 다음 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;
}

body, h1, p, button 같은 선택자는 같은 이름의 요소 전체에 규칙을 적용합니다. button:hover는 마우스가 버튼 위에 있는 동안에만 적용되는 규칙이고, button 규칙에 적은 transition 때문에 배경색이 0.3초에 걸쳐 부드럽게 바뀝니다.

마지막으로 script.js에는 다음 자바스크립트를 씁니다. 버튼은 HTML에 붙인 id인 myButton으로, 제목은 태그 이름 h1로 찾아 변수에 담아 두고, 버튼이 클릭될 때마다 실행할 함수를 addEventListener로 등록하는 구조입니다.

// 버튼 요소를 선택합니다.
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, macOS는 Command + S)한 뒤, 파일 탐색기에서 index.html을 더블 클릭해 브라우저로 엽니다. 클릭하기 전에는 “안녕하세요, 웹 개발자님!” 제목과 “클릭해보세요!” 버튼이 연한 하늘색 배경 위에 보입니다. 버튼을 누르면 제목이 “클릭 성공! 웹 개발 준비 완료!”로, 버튼 글자가 “다시 클릭해보세요!”로 바뀌고 배경이 연두색이 됩니다. 다시 눌러도 같은 값을 다시 넣을 뿐이므로 처음 상태로 돌아오지 않으며, 새로고침하면 저장된 HTML과 CSS의 처음 상태로 돌아옵니다.

파일로 열기와 서버로 열기

더블 클릭으로 연 페이지는 주소창의 주소가 file:로 시작합니다. 브라우저가 디스크의 파일을 직접 읽은 것입니다. 앞 그림의 흐름처럼 로컬 HTTP 서버로 열면 주소가 http://localhost:…처럼 시작하고, 브라우저는 실제 웹 서버에 요청하듯 HTTP로 파일을 받습니다.

이 글의 HTML, CSS, 일반 스크립트는 두 방법 모두에서 똑같이 동작합니다. 하지만 서버에 데이터를 요청하는 fetch()나 자바스크립트 모듈은 file: 주소에서 브라우저의 보안 규칙 때문에 막힐 수 있으므로, 그런 실습은 그 글에서 안내하는 HTTP 실행 환경을 씁니다.

문제가 생기면 세 파일을 한꺼번에 고치지 말고, 보이는 증상에 따라 확인할 곳을 나눕니다.

VS Code 확장 프로그램(선택)

VS Code의 확장 프로그램을 몇 가지 설치하면 앞의 반복 흐름을 더 빠르게 돌릴 수 있습니다. 확장 프로그램은 왼쪽 사이드바의 확장 아이콘(정사각형 네 개 모양)을 눌러 이름으로 검색해 설치합니다.

• Live Server: 파일을 로컬 HTTP 서버로 열고, 저장할 때마다 브라우저를 자동으로 새로고침합니다. Ritwick Dey가 만든 Live Server를 설치한 뒤, index.html을 연 상태에서 편집기 오른쪽 아래의 Go Live 버튼을 누르거나, 탐색기에서 index.html을 마우스 오른쪽 버튼으로 눌러 Open with Live Server를 고릅니다. 새 브라우저 탭이 http://127.0.0.1:5500/index.html 같은 주소로 열리며, 이후 코드를 고쳐 저장하면 화면이 바로 바뀝니다.
• Prettier - Code formatter: HTML, CSS, 자바스크립트의 들여쓰기와 줄 바꿈을 일정한 규칙으로 정리합니다. VS Code에는 HTML, CSS, 자바스크립트용 기본 포매터가 이미 있으므로, 설치한 뒤 설정(Ctrl + ,, macOS는 Command + ,)에서 Default Formatter를 검색해 Prettier - Code formatter로 고르고 Format On Save를 검색해 켭니다. 그러면 저장할 때마다 Prettier가 코드를 정리합니다.

실습 중에 오류가 생겼을 때는 도구를 더 설치하기보다 저장, 새로고침, 개발자 도구 확인, 작은 수정을 반복하는 편이 빠릅니다.

정리

• 편집기는 구문 강조, 자동 완성, 통합 터미널로 코드를 쓰는 일을 돕고, 이 교재는 VS Code를 기준으로 합니다.
• 개발자 도구의 Elements, Console, Network 패널로 HTML과 CSS, 자바스크립트 오류, 요청과 응답을 확인합니다.
• index.html은 <link>로 CSS를, <script>로 자바스크립트를 연결하며, 두 경로는 HTML 파일이 있는 폴더를 기준으로 해석됩니다.
• 더블 클릭으로 연 페이지는 file: 주소, 로컬 서버로 연 페이지는 http://localhost 주소이며, 서버 요청이나 모듈은 HTTP로 열어야 합니다.
• 고치고, 저장하고, 다시 열어 확인하고, 원인 하나만 고치는 흐름을 반복하며 문제를 좁힙니다.

연습 문제

1. 이름이 다른 CSS 파일

파일은 모두 저장했고 HTML도 정상입니다. 그런데 CSS 파일을 styles.css로 만들었고, HTML의 href는 style.css입니다. 화면은 어떻게 보일까요? 버튼을 누르면 어떻게 될까요?

2. 고쳤는데 그대로인 제목

index.html의 제목을 “반갑습니다”로 고치고 브라우저를 새로고침했는데 예전 제목이 그대로 보입니다. 가능한 원인 두 가지와 확인 방법을 말해 보세요.

3. 버튼을 두 번 누르면

첫 페이지에서 버튼을 한 번 누른 뒤 한 번 더 눌렀습니다. 화면은 어떻게 될까요? 누를 때마다 처음 상태와 바뀐 상태를 번갈아 보여 주려면 무엇을 바꿔야 할까요?

다음 글 첫 웹 페이지 만들기에서는 이 환경에서 자기소개 페이지를 직접 만들어 봅니다.