웹은 어떻게 작동할까?

웹 개발을 처음 시작할 때, 가장 먼저 알아야 할 것은 웹이 어떻게 작동하는가입니다. 단순히 브라우저에 URL을 입력하면 페이지가 열리는 그 과정을 조금 더 자세히 들여다보면, 웹 개발의 기본 원리를 이해할 수 있어요.

---

1. 브라우저와 서버, 그리고 그 사이의 이야기

우리가 흔히 쓰는 크롬(Chrome), 사파리(Safari), 엣지(Edge) 같은 브라우저는 단순히 정보를 보여주는 도구가 아닙니다.

사용자가 URL을 입력하면 브라우저는 다음과 같은 과정을 거칩니다.

 

1. DNS 조회 – 도메인 이름을 IP 주소로 변환
2. 서버에 요청 전송 – 해당 IP 주소의 서버로 요청(Request)을 보냄
3. 서버 응답 – 서버는 HTML, CSS, JS 등의 파일을 브라우저에 응답(Response)으로 전달
4. 브라우저 렌더링 – 받은 파일들을 조합해 우리가 보는 웹 페이지로 그려냄

 

즉, 브라우저는 클라이언트 역할, 웹 서버는 데이터를 제공하는 역할을 합니다. 그리고 이 둘 사이를 이어주는 건 바로 우리가 작성하게 될 HTML, CSS, JavaScript 파일입니다.

 

---

2. HTML, CSS, JavaScript는 무슨 역할을 하나요?

웹 페이지는 기본적으로 이 세 가지 언어로 구성됩니다.

 

🧱 HTML (HyperText Markup Language)

• 웹 페이지의 골격 역할
• 제목, 문단, 이미지, 링크, 표 등의 내용 구조를 작성
• 시맨틱 태그(header, footer, section, article 등)를 사용하면 구조가 더 명확해짐

 

🎨 CSS (Cascading Style Sheets)

• HTML로 만든 구조에 스타일을 입히는 역할
• 글꼴, 색상, 크기, 배치 등 시각적인 요소를 조정
• 반응형 웹도 CSS로 구현 가능 (미디어 쿼리)

 

⚙️ JavaScript

• HTML과 CSS는 정적인 반면, JavaScript는 웹 페이지에 동적인 기능을 추가
• 버튼 클릭 시 이벤트 발생, 사용자 입력 처리, 서버와의 데이터 통신 등

 

간단하게 말하면,
HTML은 뼈대, CSS는 옷, JavaScript는 근육이라고 볼 수 있어요.

 

---

3. 개발 환경 세팅은 어떻게 할까?

웹 개발을 시작하려면 코드를 작성할 도구가 필요합니다.

많은 개발자들이 사용하는 에디터로는 다음과 같은 것들이 있어요.

• VS Code
• Atom
• Sublime Text
• WebStorm
• Brackets 등

이 중 저는 VS Code(Visual Studio Code)를 사용하려고 합니다.

가볍고 빠르며, 다양한 플러그인을 통해 HTML/CSS 개발에 최적화된 환경을 만들 수 있어요.

 

---

마무리

이번 글에서는 웹 개발의 큰 그림을 한 번 훑어봤어요.

웹은 단순히 코드 몇 줄로 만들어지는 게 아니라, 브라우저와 서버 간의 소통과 세 가지 언어의 협업을 통해 이루어집니다.

 

다음 글에서는 HTML의 기본 구조와 태그들을 하나하나 다뤄볼 예정이에요.

웹 페이지의 뼈대를 어떻게 구성하는지, 시맨틱 태그는 무엇인지, 같이 알아봐요!

 

👉 [다음 글: HTML 기본기 다지기]