웹사이트를 만들고 싶다면 꼭 알아야 할 두 가지 도구가 있어요. 바로 웹 편집기(Web Editor)와 웹 브라우저(Web Browser)입니다.
웹 편집기란?
웹 편집기는 우리가 HTML/CSS/JavaScript 코드를 직접 작성하고 편집할 수 있도록 도와주는 프로그램이에요. 쉽게 말해, 웹사이트의 ‘설계도’를 만드는 도구라고 생각하면 됩니다.
윈도우에 기본으로 설치된 메모장(Notepad) 같은 문서 편집기에서도 코드를 작성하고, .html 등의 확장자로 저장하면 웹 브라우저에서 열어볼 수 있어요.
하지만 메모장에는 다음과 같은 코딩에 특화된 기능들이 빠져 있어요:
- 코드 하이라이팅 (색깔 구분)
- 자동완성
- 실시간 미리보기
이런 기능이 없으면 코드가 조금만 길어져도 작성과 수정이 점점 불편해지죠. 그래서 메모장은 간단한 실습용으로만 잠깐 사용하고, 대부분은 비주얼 스튜디오 코드(Visual Studio Code) 같은 전문 웹 편집기로 자연스럽게 옮겨가게 돼요.
대표적인 웹 편집기
| 이름 | 특징 | 가격 | 공식 사이트 |
|---|---|---|---|
| 비주얼 스튜디오 코드 (Visual Studio Code) |
전 세계에서 가장 인기 많은 무료 코드 에디터 (강추!) | 무료 | 공식 사이트 |
| 서브라임 텍스트 (Sublime Text) |
빠르고 가벼운 성능의 에디터 | 유료 | 공식 사이트 |
| 어도비 드림위버 (Adobe Dreamweaver) |
시각적 디자인과 코딩을 함께 지원하는 에디터 (Adobe Creative Cloud 포함) | 유료 | 공식 사이트 |
예전엔 Brackets(Adobe), Atom(GitHub)도 많이 사용됐지만 2021~2022년 사이에 공식 지원이 중단되었고, 지금은 두 도구 모두 비주얼 스튜디오 코드(Visual Studio Code)로의 마이그레이션을 권장하고 있어요.
웹 브라우저란?
우리가 일상생활에서 인터넷을 사용하는 건 웹 브라우저를 통해 웹사이트에 접속하고 보는 것을 의미해요. Chrome, Safari, Edge 같은 프로그램들이 바로 웹 브라우저예요.
대표적인 웹 브라우저
| 이름 | 특징 |
|---|---|
| 크롬 (Chrome) |
빠른 속도, 개발자 도구가 강력해요 |
| 마이크로소프트 엣지 (Microsoft Edge) |
윈도우에 기본 설치 |
| 사파리 (Safari) |
macOS와 iOS에서 기본 브라우저 |
웹 브라우저의 역할
HTML/CSS/JavaScript 코드 렌더링
웹 브라우저는 우리가 작성한 HTML, CSS, JavaScript 코드를 읽고 해석해서, 그 내용을 시각적으로 화면에 보여주는 도구예요. 작성한 코드를 사람이 보기 좋게 ‘예쁘게 그려주는 역할’을 하죠. 이 과정을 렌더링(rendering)이라고 불러요. 브라우저가 없으면 사용자는 웹페이지를 볼 수 없죠.
사용자가 웹사이트와 상호작용할 수 있게 도와줌
브라우저는 버튼 클릭, 입력, 페이지 전환 등 사용자가 웹사이트와 자연스럽게 상호작용할 수 있도록 도와주는 인터페이스 역할도 해요.
개발자 도구(F12)로 코드 디버깅 가능
개발자에게도 웹 브라우저는 아주 유용한 도구예요. 브라우저에서 F12 키를 누르거나, 마우스 오른쪽 클릭 후 ‘검사’를 선택하면 개발자 도구가 열려요.
여기에서는 다음과 같은 작업들을 할 수 있어요:
- 코드에 문제가 있을 때 오류를 추적하고 수정하는 디버깅(Debugging)
- 콘솔 로그를 통해 변수 값이나 함수 실행 결과 확인
- HTML/CSS를 실시간으로 수정해 보며 스타일을 바로 테스트하기
(* 디버깅(Debugging)은 코드에 생긴 오류(버그)를 찾아내고 고치는 과정을 말해요.)
한눈에 보는 웹 편집기 vs 웹 브라우저
| 항목 | 웹 편집기 | 웹 브라우저 |
|---|---|---|
| 목적 | 코드를 작성하고 수정 | 코드를 해석해 보여줌 |
| 사용자 | 주로 개발자 | 일반 사용자 + 개발자 |
| 예시 | index.html을 작성 | 만든 파일을 열어 실제 화면 확인 |
| 기능 |
|
|
웹 개발의 대표 조합: VS Code + Chrome
웹 개발에서 가장 널리 사용되는 도구는 Visual Studio Code(비주얼 스튜디오 코드)와 Chrome 브라우저예요.
VS Code는 코드 작성을 위해 최적화된 에디터로, 자동완성, 오류 감지, 다양한 확장 기능을 지원하며 무료로 사용할 수 있어 많은 개발자들이 가장 선호하는 도구예요.
Chrome 브라우저는 빠른 속도와 함께 강력한 개발자 도구(F12)를 제공하여, HTML/CSS 수정, JavaScript 디버깅, 반응형 테스트 등 다양한 작업을 실시간으로 확인하고 조정할 수 있게 해줘요.
이 두 도구를 함께 사용하면, 코드를 작성한 뒤 Visual Studio Code의 Live Server 확장 기능을 사용해 브라우저에서 자동 새로고침하며 결과를 바로 확인하는 개발 흐름이 효율적이예요.