개발 환경 설정

개발 환경 설정은 겉으로 보기엔 단순한 준비 작업이지만, 실제로는 학습 속도를 좌우하는 핵심 단계입니다.

초보 시절에는 코드보다 환경에서 더 많이 막히는 일이 자주 생깁니다.

파일 경로가 꼬이거나, 브라우저 새로고침이 반영되지 않거나, 확장 도구 설정이 충돌하면 작은 예제도 원인 파악에 시간을 많이 쓰게 됩니다.

이 절은 설치하세요로 끝나는 안내가 아니라, 왜 이 도구를 쓰는지와 어디서 실수하기 쉬운지까지 함께 설명하는 데 목적이 있습니다.

특히 프로젝트 폴더 구조와 실행 흐름을 초기에 제대로 잡아두면, 이후 장에서 코드가 늘어나도 흔들리지 않습니다.

지금 단계를 정확히 잡아두면 앞으로의 실습에서 디버깅 시간이 줄고, 학습 집중도는 훨씬 올라갑니다.

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

웹 개발은 기본적으로 텍스트를 작성하는 일에서 시작됩니다.

HTML, CSS, 자바스크립트 코드는 모두 일반 텍스트 파일로 저장됩니다.

그래서 이 텍스트를 효율적으로 작성하고 관리할 도구가 필요합니다.

이 역할을 하는 것이 텍스트 편집기(Text Editor) 또는 통합 개발 환경(IDE: Integrated Development Environment)입니다.

일반 메모장으로도 코드를 작성할 수는 있습니다.

하지만 웹 개발용 편집기는 가독성을 높이고 오타를 줄여 줍니다.

무엇보다 반복 작업을 줄여 개발 속도를 안정적으로 끌어올려 줍니다.

초보 개발자에게는 다음 기능이 특히 유용합니다.

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

이 교재에서는 파일 탐색기와 통합 터미널을 함께 사용할 수 있는 Visual Studio Code (VS Code)를 기준으로 설명합니다. 다른 편집기를 쓰더라도 같은 파일을 만들고 저장해 브라우저에서 열 수 있으면 기본 실습을 따라갈 수 있습니다.

마이크로소프트에서 개발했지만, 오픈 소스이며 Windows, macOS, Linux 등 모든 운영체제에서 사용할 수 있습니다.

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

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

설치가 완료되면 VS Code를 실행하여 깔끔한 인터페이스를 확인해 보세요.

이제는 코드를 작성할 준비가 된 것입니다.

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

여러분이 작성한 HTML, CSS, 자바스크립트 코드는 최종적으로 웹 브라우저를 통해 사용자에게 보여집니다.

따라서 다양한 웹 브라우저에서 여러분의 웹 페이지가 어떻게 보이는지 확인하는 것은 매우 중요합니다.

이미 여러분의 컴퓨터에는 기본 웹 브라우저가 설치되어 있을 것입니다.

(예: Windows의 Microsoft Edge, macOS의 Safari)

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

이 교재의 개발자 도구 안내는 Google Chrome의 탭 이름을 기준으로 합니다. 이미 설치된 Edge나 Firefox에서도 요소·콘솔·네트워크를 확인하는 도구를 사용할 수 있습니다.

• 강력한 개발자 도구: Chrome에 내장된 개발자 도구(Developer Tools)는 웹 페이지의 HTML, CSS, 자바스크립트 코드를 실시간으로 검사하고 수정하며, 성능을 분석하고, 네트워크 요청을 확인하는 등 웹 개발에 필요한 거의 모든 기능을 제공합니다. 이 도구는 이후 실습에서 요소 검사, 콘솔 확인, 네트워크 분석에 사용합니다.
• 확인 범위: Chrome에서 정상 동작하는지 확인한 뒤에도 실제 사용할 다른 브라우저와 키보드 조작을 따로 확인합니다. 한 브라우저의 결과가 모든 브라우저의 결과를 보장하지는 않습니다.

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

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

개발자 도구 창이 열리면 다양한 탭을 확인할 수 있습니다.

Elements 탭에서는 HTML 구조와 적용된 CSS 스타일을, Console 탭에서는 자바스크립트 오류 메시지나 출력값을 확인할 수 있습니다.

앞으로 이 개발자 도구를 활용하는 방법을 자주 다루게 될 것입니다.

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

이제 VS Code와 Chrome 브라우저 설치를 완료했으니, 실제 웹 프로젝트를 위한 기본적인 폴더를 만들고 첫 번째 웹 페이지를 생성해 봅시다.

깔끔한 폴더 구조를 유지하는 것은 프로젝트가 커질수록 매우 중요합니다.

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

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

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;
}

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

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

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

VS Code의 가장 큰 장점 중 하나는 바로 확장 프로그램(Extensions)입니다.

몇 가지 유용한 확장 프로그램을 설치하면 개발 효율성을 크게 높일 수 있습니다.

확장 프로그램을 설치한 뒤에는 작성, 저장, 브라우저 확인, 콘솔 점검까지 한 번에 이어지는 루틴을 만들어 두는 것이 좋습니다.

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

앞의 개발 루프 다이어그램은 HTTP 서버로 파일을 제공하는 경우를 보여줍니다. 위의 더블 클릭 방식은 주소가 file:로 시작하며, 파일을 직접 읽습니다. Live Server 방식은 http://localhost:…처럼 HTTP 주소로 열립니다. 이 절의 단순 HTML·CSS·일반 스크립트는 두 방식으로 관찰할 수 있지만, 이후 서버 요청이나 모듈 실습은 해당 절에서 안내하는 HTTP 실행 환경을 사용하세요.

문제가 생기면 파일 세 개를 한꺼번에 고치기 전에 아래처럼 관찰 결과를 나눕니다.

작은 고장 찾아보기

파일은 저장되어 있고 HTML의 제목도 정상입니다. CSS 파일만 styles.css로 만들었는데 HTML의 href는 style.css인 상태라고 가정합니다. 무엇이 다르게 보일지 예측하고, 파일 이름이나 href 중 한 곳만 맞춰 고친 뒤 새로고침해 보세요. 배경색과 글자 스타일이 나타나면 파일 연결을 복구한 것입니다. JS 파일과 버튼의 id가 정상이라면 CSS 연결이 틀려도 버튼의 클릭 동작은 별도로 실행될 수 있습니다.

웹 개발에 필요한 편집기, 브라우저, 첫 HTML 파일 작성과 실행 흐름을 확인했습니다.

개발 환경은 도구 이름보다 반복 루틴이 중요하므로, 앞의 개발 루프를 기준으로 익히면 좋습니다.