icon
1장 : 웹 개발 입문

웹의 작동 원리와 역사

이 책의 첫 페이지를 열어주신 여러분께 진심으로 감사드립니다.

'나 혼자 웹 개발'은 여러분이 혼자서도 웹 개발의 넓고 깊은 세계를 탐험할 수 있도록 돕는 든든한 길잡이가 될 것입니다.

첫 번째 장에서는 웹 개발의 가장 근간이 되는 '웹의 작동 원리'와 '웹이 걸어온 길'에 대해 차분히 알아보는 시간을 갖겠습니다.

이 지식들은 앞으로 여러분이 만나게 될 수많은 웹 기술들을 이해하는 데 굳건한 토대가 되어줄 것입니다.

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

우리는 매일 인터넷을 통해 다양한 정보를 접하고 소통합니다. 지금 이 순간에도 여러분은 이 글을 웹 브라우저를 통해 읽고 계실 것입니다. 그렇다면 우리가 흔히 '웹(Web)'이라고 부르는 것은 정확히 무엇이며, 어떻게 우리의 눈앞에 원하는 정보들을 보여주는 것일까요?

웹은 흔히 '월드 와이드 웹(World Wide Web)'이라고 불리며, 전 세계에 분산된 컴퓨터들이 서로 연결되어 정보를 공유하는 거대한 공간을 의미합니다. 마치 거미줄처럼 복잡하게 얽혀 있다고 하여 '웹'이라는 이름이 붙었죠. 이러한 웹은 다음과 같은 핵심적인 요소들이 유기적으로 결합하여 작동합니다.

  • 클라이언트(Client)와 서버(Server): 웹의 작동 원리를 이해하는 데 있어 가장 중요한 개념은 바로 '클라이언트'와 '서버'입니다. 여러분이 웹사이트에 접속하기 위해 사용하는 웹 브라우저(예: Chrome, Edge, Safari 등)는 '클라이언트'의 역할을 수행합니다. 클라이언트는 웹에 접속하여 정보를 요청하는 주체입니다. 반면, 웹사이트의 정보들을 저장하고 있다가 클라이언트의 요청에 응답하여 정보를 제공하는 컴퓨터를 '서버'라고 부릅니다. 여러분이 보고 있는 이 페이지의 내용 또한 어딘가에 존재하는 서버에 저장되어 있다가, 여러분의 브라우저(클라이언트)가 요청함으로써 화면에 표시된 것입니다.

  • HTTP(HyperText Transfer Protocol): 클라이언트와 서버가 서로 대화하기 위한 약속, 즉 통신 규약을 'HTTP'라고 합니다. 웹 브라우저가 서버에게 웹 페이지를 요청하거나, 서버가 브라우저에게 웹 페이지를 보내줄 때 이 HTTP라는 약속에 따라 정보를 주고받습니다. 예를 들어, 여러분이 웹 브라우저 주소창에 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 등으로 구성된 웹 페이지를 보내줍니다. 그리고 여러분의 브라우저는 이 정보들을 해석하여 아름다운 웹 페이지를 화면에 그려내는 것입니다.

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

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

  • 웹의 탄생 (1989년, 팀 버너스리): 웹의 기원은 스위스 제네바에 위치한 유럽 입자 물리 연구소(CERN)의 팀 버너스리(Tim Berners-Lee) 박사에게서 찾을 수 있습니다. 그는 연구원들 간의 정보 공유의 어려움을 해결하고자, 하이퍼텍스트(Hypertext) 개념을 기반으로 하는 정보 공유 시스템을 제안했습니다. 이것이 바로 월드 와이드 웹의 시초입니다. 그는 최초의 웹 브라우저와 웹 서버를 개발하며 웹의 기반을 다졌습니다.

  • 웹의 대중화 (1990년대 중반): 1990년대 중반, 모자이크(Mosaic)와 넷스케이프(Netscape)와 같은 그래픽 기반의 웹 브라우저가 등장하면서 웹은 폭발적인 성장을 시작했습니다. 이전에는 텍스트 기반의 정보 공유가 주를 이루었다면, 이제는 이미지와 다양한 미디어를 웹에서 쉽게 접할 수 있게 되면서 일반 대중에게도 웹이 급속도로 확산되기 시작했습니다.

  • 웹 2.0 시대의 도래 (2000년대 초반): 2000년대 초반에는 '웹 2.0'이라는 개념이 등장했습니다. 이는 단순히 정보를 '읽는' 것을 넘어, 사용자들이 직접 정보를 '생성하고 공유하며 참여하는' 웹의 시대를 의미합니다. 블로그, 위키, 소셜 미디어 플랫폼(페이스북, 유튜브 등)의 등장이 대표적인 예시입니다. 이 시기부터 웹은 단순히 정보를 소비하는 공간이 아니라, 사용자들이 서로 소통하고 협력하는 상호작용적인 공간으로 진화했습니다.

  • 모바일 웹과 반응형 웹 (2000년대 후반 ~ 현재): 스마트폰의 등장과 함께 웹은 또 한 번의 큰 변화를 맞이합니다. 이제 사람들은 데스크톱 컴퓨터뿐만 아니라 스마트폰과 태블릿을 통해서도 웹에 접속하기 시작했습니다. 이에 따라 다양한 크기의 화면에서 웹 페이지가 최적으로 보일 수 있도록 '반응형 웹 디자인'과 같은 기술들이 중요해졌습니다. 또한, 웹 애플리케이션의 발전으로 인해 웹 브라우저만으로도 복잡한 기능을 수행하는 서비스들을 이용할 수 있게 되었습니다.

  • 현재와 미래의 웹: 오늘날의 웹은 인공지능, 빅데이터, 블록체인, 가상현실(VR) 및 증강현실(AR) 등 첨단 기술들과 융합하며 끊임없이 발전하고 있습니다. 웹은 이제 단순히 정보 검색의 도구를 넘어, 우리의 일상생활과 비즈니스, 문화 등 모든 영역에 깊숙이 관여하는 거대한 플랫폼으로 자리매김했습니다.

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

HTML, CSS, 자바스크립트 소개

Next Page