안동민 개발노트

웹 개발을 처음 시작하면 화면을 만드는 기술부터 배우고 싶어집니다.

하지만 실제로는 브라우저가 요청을 보내고 서버가 어떻게 응답하는지를 모르면, 이후에 배우는 HTML/CSS/JavaScript도 서로 분리된 지식처럼 느껴지기 쉽습니다.

예를 들어 페이지가 느릴 때 원인이 코드인지, 네트워크인지, 서버 응답인지 구분하지 못하면 문제를 잡는 데 시간이 오래 걸립니다.

이 장은 바로 그 막힘을 줄이기 위한 출발점입니다.

웹이 어떤 구조로 동작하고, 왜 지금의 형태로 발전했는지를 먼저 이해하면 기술 선택과 디버깅 판단이 훨씬 빨라집니다.

지금부터 웹의 기본 원리와 역사적 흐름을 연결해 보면서, 앞으로의 학습을 단단하게 받쳐줄 기준을 함께 세우겠습니다.

웹이란 무엇이며, 어떻게 작동할까요?

우리는 매일 인터넷을 통해 다양한 정보를 접하고 소통합니다. 지금 이 순간에도 여러분은 이 글을 웹 브라우저로 읽고 있습니다.

그렇다면 우리가 흔히 웹(Web)이라고 부르는 것은 정확히 무엇일까요? 또, 어떻게 우리가 원하는 정보를 눈앞에 보여줄 수 있을까요?

웹은 흔히 월드 와이드 웹(World Wide Web)이라고 불립니다. 전 세계에 분산된 컴퓨터들이 서로 연결되어 정보를 공유하는 거대한 공간이라는 뜻입니다. 마치 거미줄처럼 복잡하게 얽혀 있다고 해서 웹이라는 이름이 붙었죠.

이러한 웹은 다음과 같은 핵심 요소가 맞물리며 동작합니다.

클라이언트(Client)와 서버(Server): 웹의 작동 원리를 이해하는 핵심은 클라이언트와 서버입니다. 웹 브라우저(Chrome, Edge, Safari 등)는 클라이언트 역할을 하며 정보를 요청합니다. 서버는 데이터를 저장하고 있다가 요청에 맞는 정보를 응답합니다. 지금 보고 있는 페이지도 서버에 저장된 내용을 브라우저가 요청해 받아온 결과입니다.
HTTP(HyperText Transfer Protocol): 클라이언트와 서버가 대화할 때 사용하는 통신 규약입니다. 브라우저가 페이지를 요청하고 서버가 응답할 때 이 약속을 따릅니다. 예를 들어 주소창에 https://www.example.com을 입력하면, 브라우저가 example.com 서버에 페이지를 HTTP 방식으로 요청하게 됩니다.
URL(Uniform Resource Locator): 웹 상의 특정 자원(웹 페이지, 이미지, 동영상 등)의 위치를 나타내는 주소를 URL이라고 합니다. 여러분이 웹 브라우저 주소창에 입력하는 모든 주소가 바로 URL입니다. URL은 마치 우리가 원하는 책을 찾기 위해 도서관의 책꽂이 번호와 제목을 아는 것과 유사합니다. URL을 통해 클라이언트는 서버에게 내가 원하는 정보가 어디에 있는지를 정확하게 알려줄 수 있습니다.
HTML, CSS, JavaScript: 웹 페이지를 구성하는 세 가지 핵심 언어입니다.
- HTML(HyperText Markup Language): 웹 페이지의 뼈대를 만듭니다. 텍스트, 이미지, 링크 등 웹 페이지에 들어가는 내용들의 구조를 정의합니다. 마치 건물의 골조를 세우는 것과 같습니다.
- CSS(Cascading Style Sheets): 웹 페이지의 디자인을 담당합니다. 색상, 글꼴, 레이아웃 등 웹 페이지를 시각적으로 아름답게 꾸미는 역할을 합니다. 잘 지어진 건물에 아름다운 페인트와 장식을 더하는 것에 비유할 수 있습니다.
- JavaScript: 웹 페이지에 동적인 기능을 부여합니다. 버튼을 클릭했을 때 특정 동작을 수행하거나, 애니메이션 효과를 주는 등 사용자와 상호작용할 수 있는 기능을 만듭니다. 건물에 움직이는 엘리베이터나 자동문 같은 기능을 추가하는 것이라고 생각할 수 있습니다.

이러한 요소들이 복합적으로 작용하여 우리가 웹을 원활하게 이용할 수 있도록 돕습니다. 여러분이 웹사이트에 접속하는 순간, 여러분의 브라우저는 서버에 요청을 보내고, 서버는 해당 정보를 HTTP 프로토콜에 따라 HTML, CSS, JavaScript 등으로 구성된 웹 페이지를 보내줍니다. 그리고 여러분의 브라우저는 이 정보들을 해석하여 아름다운 웹 페이지를 화면에 그려내는 것입니다.

여기서 초보 개발자가 자주 하는 오해가 하나 있습니다.
브라우저가 알아서 다 해주니까 네트워크는 크게 중요하지 않다라고 생각하는 경우입니다.
하지만 같은 코드라도 지연 시간(latency), 캐시 정책, 응답 크기에 따라 체감 성능이 크게 달라집니다.
즉 웹 개발은 화면 코드만 잘 쓰는 일이 아니라, 요청-응답 흐름 전체를 함께 설계하는 작업이라는 점을 기억하는 것이 중요합니다.

웹은 어떻게 시작되었고 발전해왔을까요?

오늘날 우리가 누리는 편리한 웹 환경은 결코 하루아침에 이루어진 것이 아닙니다. 수많은 사람들의 노력과 아이디어가 더해져 현재의 모습으로 발전해왔습니다. 웹의 역사를 간략하게 살펴보는 것은 웹 개발의 흐름을 이해하고, 미래를 예측하는 데 중요한 통찰력을 제공할 것입니다.

웹의 탄생 (1989년, 팀 버너스리): 웹의 기원은 스위스 제네바에 위치한 유럽 입자 물리 연구소(CERN)의 팀 버너스리(Tim Berners-Lee) 박사에게서 찾을 수 있습니다. 그는 연구원들 간의 정보 공유의 어려움을 해결하고자, 하이퍼텍스트(Hypertext) 개념을 기반으로 하는 정보 공유 시스템을 제안했습니다. 이것이 바로 월드 와이드 웹의 시초입니다. 그는 최초의 웹 브라우저와 웹 서버를 개발하며 웹의 기반을 다졌습니다.
웹의 대중화 (1990년대 중반): 1990년대 중반, 모자이크(Mosaic)와 넷스케이프(Netscape)와 같은 그래픽 기반의 웹 브라우저가 등장하면서 웹은 폭발적인 성장을 시작했습니다. 이전에는 텍스트 기반의 정보 공유가 주를 이루었다면, 이제는 이미지와 다양한 미디어를 웹에서 쉽게 접할 수 있게 되면서 일반 대중에게도 웹이 급속도로 확산되기 시작했습니다.
웹 2.0 시대의 도래 (2000년대 초반): 2000년대 초반에는 웹 2.0이라는 개념이 등장했습니다. 이는 단순히 정보를 읽는 것을 넘어, 사용자들이 직접 정보를 생성하고 공유하며 참여하는 웹의 시대를 의미합니다. 블로그, 위키, 소셜 미디어 플랫폼(페이스북, 유튜브 등)의 등장이 대표적인 예시입니다. 이 시기부터 웹은 단순히 정보를 소비하는 공간이 아니라, 사용자들이 서로 소통하고 협력하는 상호작용적인 공간으로 진화했습니다.
모바일 웹과 반응형 웹 (2000년대 후반 ~ 현재): 스마트폰의 등장과 함께 웹은 또 한 번의 큰 변화를 맞이합니다. 이제 사람들은 데스크톱 컴퓨터뿐만 아니라 스마트폰과 태블릿을 통해서도 웹에 접속하기 시작했습니다. 이에 따라 다양한 크기의 화면에서 웹 페이지가 최적으로 보일 수 있도록 반응형 웹 디자인과 같은 기술들이 중요해졌습니다. 또한, 웹 애플리케이션의 발전으로 인해 웹 브라우저만으로도 복잡한 기능을 수행하는 서비스들을 이용할 수 있게 되었습니다.
현재와 미래의 웹: 오늘날의 웹은 인공지능, 빅데이터, 블록체인, 가상현실(VR) 및 증강현실(AR) 등 첨단 기술들과 융합하며 끊임없이 발전하고 있습니다. 웹은 이제 단순히 정보 검색의 도구를 넘어, 우리의 일상생활과 비즈니스, 문화 등 모든 영역에 깊숙이 관여하는 거대한 플랫폼으로 자리매김했습니다.

이처럼 웹은 끊임없이 진화하는 살아있는 유기체와 같습니다. 이러한 변화의 흐름을 이해하고 적응하는 것은 웹 개발자로서 매우 중요한 역량입니다. 다음 절에서는 웹 개발을 위한 기본적인 환경을 설정하는 방법에 대해 알아보겠습니다.

다음 절 진입 전 실수 방지 포인트

개발 환경 설정으로 넘어가기 전에 아래 기준을 정리해 두면 초반 시행착오를 줄일 수 있습니다.

운영체제별 명령어 차이를 문서에서 바로 확인할 수 있도록 사용 환경을 먼저 명시합니다.
브라우저 문제, 네트워크 문제, 서버 문제를 구분해 확인하는 기본 진단 순서를 메모합니다.
이후 장에서 나오는 도구 설치는 "기능 구현"보다 "요청-응답 재현 가능성"을 우선 기준으로 점검합니다.

웹 기초 학습 루틴 점검

입문 절에서는 범위를 넓히기보다 반복 가능한 루틴을 만드는 것이 효과적입니다.

HTML/CSS/JS 학습 시간을 주 단위로 고정합니다.
개념 학습 후 바로 작은 페이지를 만들어 적용합니다.
모르는 용어는 정의와 예시를 함께 기록해 재학습 시간을 줄입니다.

웹의 작동 원리와 역사

웹이란 무엇이며, 어떻게 작동할까요?

웹은 어떻게 시작되었고 발전해왔을까요?

다음 절 진입 전 실수 방지 포인트

웹 기초 학습 루틴 점검

목차