웹의 탄생과 원리 - 웹개발입문기초편01화

웹은 어떻게 탄생하고 발전했는가?

웹은 1991년 유럽입자물리연구소의 팀 버너스 리가 연구소 내 효율적인 자료 공유를 위해 HTTP 프로토콜과 WWW(World Wide Web)를 제안하며 탄생 했으며 , 초기에는 정적인 HTML 문서 출력 기능만 제공했으나 , CGI와 HTTP 1.0의 등장으로 동적인 웹 시대가 열렸고 , PHP, MySQL 등의 기술 발전과 함께 웹 애플리케이션 개념이 생겨나며 다양한 서비스가 가능해졌습니다 .

웹의 발전에 기여한 주요 기술들은 무엇인가?

• HTTP 프로토콜: 웹 서버와 웹 브라우저 간의 통신 규약
• CGI (Common Gateway Interface): 웹 서버와 외부 애플리케이션을 연결하는 인터페이스
• PHP: HTML 문서에 삽입하여 동적인 웹 페이지 생성을 가능하게 하는 언어
• MySQL: 오픈 소스 DBMS로, PHP와 연동하여 게시판, 쇼핑몰 등 복잡한 웹 서비스 구현에 기여
• CSS: HTML 문서의 디자인 요소를 추가하는 스타일 시트 언어

​

이 콘텐츠는 웹의 탄생 배경과 핵심 원리를 쉽고 명확하게 설명하여, 복잡하게 느껴졌던 웹 개발 용어들의 근본적인 개념과 관계를 이해하는 데 큰 도움을 줍니다. 인터넷과 웹의 차이, IP 주소와 도메인의 역할, 그리고 HTTP 프로토콜과 HTML의 발전 과정을 통해 웹이 어떻게 현재의 모습으로 진화했는지 역사적 흐름과 기술적 맥락을 한눈에 파악할 수 있습니다. 특히, 정적인 웹에서 동적인 웹으로의 변화를 이끈 CGI와 PHP의 등장, 그리고 모바일 시대의 웹 서비스 변화까지 짚어주어 웹 개발의 기초 지식을 탄탄하게 다지고 싶은 분들에게 필수적인 입문 가이드가 될 것입니다.

1. 웹의 탄생 배경 및 인터넷과의 관계

1. 인터넷과 웹의 구분
   1. 인터넷은 웹의 일부이며, 웹은 인터넷 위에서 동작하는 서비스이다.

1. 인터넷의 탄생 (1960년대)
   1. 시작: 1960년대 미국 국방부의 군사적 목적으로 연구가 시작되었다.
   2. 발전: 1968년 TCP/IP 프로토콜을 기반으로 인터넷이 탄생하였다.
   3. 데이터 전송 방식: TCP/IP는 데이터를 전송하는 방식으로, 네트워크상에서 자신의 위치를 공유하고 데이터 전송의 신뢰성을 보장하는 역할을 한다.
   4. IP 주소:
      1. 택배 주소에 비유되는 숫자로 구성된 주소이다.
      2. 이 주소가 공유되어야 정보 교환이 이루어진다.
   5. 도메인:
      1. 숫자로 된 IP 주소를 사용자가 편리하게 사용할 수 있도록 의미 있는 명칭으로 변환한 것이다.
      2. DNS 서버가 도메인을 IP 주소로 변환하여 인터넷을 쉽게 사용할 수 있게 한다.

1. 웹의 탄생 (1991년)
   1. 초기 인터넷 기능: HTTP 웹 서버는 인터넷 탄생 이후에 만들어졌으며, 초기 인터넷에는 SMTP 이메일 서버, FTP 파일 서버, 텔넷 원격 서버 등이 주로 사용되었다.
   2. 웹의 시작: 1989년 유럽입자물리연구소(CERN)의 팀 버너스 리(Tim Berners-Lee)가 연구소 내 효율적인 자료 공유를 목적으로 웹 개발을 시작하였다.
      1. 페이지에 텍스트와 멀티미디어 자료를 추가하고, 페이지 간 자료 이동을 자유롭게 하는 하이퍼텍스트(Hypertext) 시스템을 고안하였다.
   3. WWW의 탄생: 1991년 팀 버너스 리는 이 시스템을 구현하기 위해 HTTP 프로토콜과 HTML을 발표하였고, 이를 월드 와이드 웹(World Wide Web, WWW)이라 불렀으며, 줄여서 '웹'이라고 부르게 되었다.

2. 초기 웹의 동작 원리 및 정적 웹의 한계

1. 초기 웹 프로토콜의 기능: HTML 문서를 불러와 출력하는 정적인 기능만 수행하였다.

1. 웹 브라우저의 역할:
   1. URL 주소에 있는 HTML 문서를 해석하여 화면에 표시해 주는 역할을 한다.
   2. URL 주소는 서버를 가리키는 도메인과 서버 내 문서의 경로로 구성된다.

1. 웹 페이지 출력 과정:
   1. 사용자가 URL 주소를 입력하면 웹 브라우저는 인터넷을 통해 웹 서버에 접근을 시도하고 요청을 보낸다.
   2. 요청을 받은 웹 서버는 해당 HTML 문서를 찾아 웹 브라우저에 응답한다.
   3. 웹 브라우저는 받은 HTML 문서를 출력하며, 이미지 등 추가 자료가 필요하면 다시 웹 서버에 요청하여 자료를 가져오는 과정을 반복하여 완성된 페이지를 출력한다.

3. 동적 웹의 등장과 발전

3.1. CGI와 HTTP 1.0의 등장

1. CGI (Common Gateway Interface)
   1. 웹 서버와 외부 애플리케이션을 연결하기 위한 일종의 규약이다.
   2. 1993년 NCSA에서 CGI를 활용한 예제를 최초로 배포하였다.
   3. CGI 기술의 발전으로 1996년 HTTP 1.0이 발표되며 정적인 웹에서 동적인 웹으로 발전하는 계기가 되었다.

1. HTTP 1.0의 기능:
   1. GET과 POST 명령을 통해 인자 값을 전달할 수 있게 되었다.
   2. GET 방식: URL 주소 뒤에 물음표(?)를 붙여 인자 값을 전달한다.
   3. POST 방식: 요청 본문(Request Body)에 인자 값을 담아 전달한다.

1. 동적 웹 시대의 개막: CGI와 HTTP 1.0의 등장으로 HTML만 출력하던 정적인 시대에서 데이터를 입력하고 검색할 수 있는 동적인 웹 시대가 열렸다.

3.2. PHP와 MySQL의 확산

1. 초기 CGI 개발의 어려움: 초기에 CGI는 주로 C언어로 개발되었으나, 개발의 어려움으로 인해 대중화되지 못했다.

1. PHP 언어의 등장과 대중화:
   1. 1995년 라스무스 러도프(Rasmus Lerdorf)가 PHP 언어를 발표하며 CGI의 대중화가 시작되었다.
   2. PHP는 HTML 문서 안에 소스를 삽입하면 웹 서버 측에서 작성자가 원하는 페이지를 생성해주는 방식으로, 기존 언어에 비해 직관적인 웹 페이지 제작을 가능하게 했다.

1. MySQL과의 결합 및 웹 서비스 확장:
   1. 1995년 오픈 소스 DBMS인 MySQL이 발표되면서 PHP 사용이 급증하였다.
   2. PHP가 MySQL API를 지원하면서 게시판, 회원 관리, 쇼핑몰 등 다양한 홈페이지 제작이 가능해졌다.
   3. PHP 언어의 특성상 소스가 노출되어 실행되므로, 개발된 소스가 공개되는 오픈 소스 문화가 확산되었다.
   4. CGI, PHP, MySQL의 등장으로 웹 처리 능력이 향상되었고, 인터넷을 통해 MySQL 데이터를 조회하고 처리하는 단계가 생겨났다.

1. 동적 웹 페이지 처리 과정:
   1. 웹 브라우저의 요청을 웹 서버가 응답한다.
   2. PHP가 HTML 문서를 처리하는 과정에서 DBMS(MySQL)의 데이터도 함께 처리하여 HTML 문서에 포함시킨 후 응답한다.

1. 웹 애플리케이션의 발전:
   1. 브라우저, 서버, 데이터베이스가 연동되는 3-Tier 아키텍처가 확산되었다.
   2. PHP 외에도 ASP, JSP, Java, C# 등 다양한 웹 개발 언어가 등장하기 시작했다.
   3. CGI 개발 환경도 개선되어 웹 애플리케이션(Web Application)이라는 개념이 생겨났다.
   4. 이 시기에 국내에서는 다음, 네이버, 야후, 싸이월드 같은 웹사이트와 제로보드, 그누보드, 텍스트큐브 같은 오픈 소스 솔루션이 등장했다.

4. 모바일 시대의 웹 서비스 변화

1. CGI 기술의 진화:
   1. CGI 기술은 급속도로 발전하여 단순히 HTML을 응답하는 것을 넘어, 웹 브라우저가 아닌 여러 디바이스에 데이터를 공급하는 역할까지 하게 되었다.

1. 스마트폰 시대의 도래:
   1. PC 인터넷 시대가 저물고 2007년 아이폰의 등장으로 스마트폰 시대가 시작되었다.
   2. 이로 인해 모바일 애플리케이션이라는 새로운 개발 영역이 등장했다.

1. 모바일 앱 개발의 특징:
   1. 초기 모바일 앱 개발은 각 단말기에 맞춰 개발해야 하는 어려움이 있었다.
   2. 하지만 앱 스토어와 플레이 스토어를 통해 쉽게 앱을 배포하고 확보할 수 있어 빠르게 대중화되었다.

1. 웹 서비스의 변화:
   1. 모바일 애플리케이션 개발은 웹 브라우저가 없는 웹 서비스를 요구하게 되었다.
   2. 실제로 많은 웹 애플리케이션이 RESTful API 서비스를 제공하기 시작했다.
   3. RESTful API는 HTML 문서 대신 모바일 애플리케이션이 이해할 수 있는 데이터 형식(예: JSON)으로 데이터를 전달하여 개발자가 쉽게 접근할 수 있도록 했다.

5. HTML과 CSS의 발전 및 웹 표준화

1. 초기 HTML의 한계:
   1. 초기 HTML은 스타일 시트 개념이 없었으며, 다중 태그에서 지원하는 색상 기능 등을 사용하여 출력하는 수준이었다.

1. CSS의 도입 (1996년)
   1. 1996년 CSS Level 1 표준화가 발표되면서 HTML 문서에 디자인 요소를 추가하는 CSS(Cascading Style Sheets)가 도입되었다.
   2. CSS 적용 방식:
      1. 인라인 방식: 태그의 style 속성으로 직접 입력한다.
      2. 내부 스타일 시트: HTML 문서의 <style> 태그 사이에 선언한다.
      3. 외부 스타일 시트: 별도 CSS 파일을 지정하여 HTML의 <link> 태그를 통해 사용한다.

1. CSS의 발전:
   1. CSS Level 1은 정적인 디자인 요소만 정의하였다.
   2. 이후 Level 2, Level 3가 발표되면서 디자인 효과, 웹 표준 및 반응형 웹 관련 기능들이 개선되었다.

1. 웹 표준화의 필요성:
   1. 1991년 웹 탄생부터 HTML 4.01이 발표되기까지, 브라우저마다 HTML 문서 출력 방식이 달라 개발자들에게 많은 어려움을 주었다.
   2. 넷스케이프, 인터넷 익스플로러 등 여러 브라우저가 존재했고, 초기에는 HTML 태그조차 통일되지 않아 브라우저별로 따로 작성해야 했다.
   3. 1995년 HTML 2.0 발표를 통해 처음으로 표준화가 이루어져 일괄적인 HTML 작성이 가능해졌다.

1. 웹 표준화의 지속적인 노력:
   1. 웹 표준은 CSS 설정까지 포함하여 2014년 HTML5 발표까지 지속되었다.
   2. HTML5 발표 전까지 인터넷 익스플로러가 브라우저 시장을 지배했으나, 브라우저 버전별로 CSS 기능이 제대로 작동하지 않는 문제가 발생했다.
   3. 2007년 스마트폰 등장으로 웹 표준화의 문제가 더욱 심화되었고, PC 웹뿐만 아니라 스마트폰에서의 웹 서핑 경험도 중요해졌다.

6. 웹 기술 발전의 과제

1. 초기 웹 기술의 문제점:
   1. 인터넷 등장 이후 PC와 모바일 코딩 환경이 급성장했지만, 초기 웹 기술은 특정 업체들의 독점적인 문제에 직면하기도 했다.

1. 향후 다룰 내용:
   1. 다음 영상에서는 CSS로 인한 문제들을 어떻게 해결하는지, 그리고 자바스크립트와 프레임워크를 통해 어떻게 발전할 수 있는지 그 과정을 다룰 예정이다.

브라우저와 Javascript – 웹 개발입문기초편02화 바로가기

브라우저와 Javascript - 웹 개발입문기초편02화 - 하나이프 블로그