웹(WEB)의 역사와 발전 (1/2)

유에·2023년 9월 24일

서비스나 프로덕트에 관해 생각하다 보면 인터넷과 웹 API에 관한 얘기가 수두룩하다. 그래서 인터넷과 웹의 역사에 대해 살펴보고 정리해보기로! 짧은 벨로그 2편으로 요약하기엔 부족하지만 보편적인 개념이나마 살펴보고 넘어가는 것에 초점을 맞췄다.





1. Internet & Web History

✅ Internet

  • 인터넷이란?

인터넷(Internet)이란 여러 통신망을 하나로 연결한다는 Inter + Network 의미한다. 전 세계의 컴퓨터가 서로 연결되어 정보를 교환할 수 있는 하나의 거대한 컴퓨터 통신망이다. 즉, 컴퓨터 네트워크를 의미한다.

  • 1960년대, 인터넷의 탄생

    1950 - 모뎀(Modem)

    1969 - 아르파넷(ARPAnet)

    1983 - TCP/IP & 인터넷(Internet)1-2. Web (World Wide Web, W3)


  • 웹이란?

    "Collection of information which is accessed via the Internet." 월드 와이드 웹(World Wide Web)은 인터넷 네트워크에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 전 세계적인 정보 공간이다. 이를 줄여 웹(Web)이라고 부른다.


  • 1990년, 웹의 탄생

    인터넷이 등장하고 30년 뒤인 1990년에 유럽 입자 물리 연구소(CERN)의 컴퓨터과학자인 팀 버너스리(Tim Berners-Lee)가 인터넷 기반 하이퍼텍스트 시스템인 세계 최초의 웹 브라우저인 WWW(World Wide Web)이라는 프로그램 개발했다.

    • 세계의 여러 대학과 연구기관에서 상호간의 신속한 정보 교환과 문서 유실 방지를 위한 목적으로 프로그램 고안

    • 초창기 월드와이드웹(World Wide Web)은 웹 브라우저의 이름

    • 1990년 웹이 출현하며 인터넷 통신이 대중적으로 사용 되기 시작

    • 인터넷을 사용하는 컴퓨터들 간의 정보 공간이라는 의미로 발전

    • 결국 월드 와이드 웹의 발전에 따라 월드와이드웹 브라우저는 후에 혼돈을 피하기 위해서 Nexus라는 이름으로 변경


  • 인터넷에서 웹으로 발전

    • 웹은 기본적으로 Hypertext를 통해서 정보를 전달. 이를 가능하게 하기 위해서 팀 버너스리(Tim Berners-Lee)는 HTML과 HTTP 개발
    • Hypertext
      • 연결된 순서에 관계없이 사용자들이 원하는 정보에 접근할 수 있도록 제공되는 텍스트
      • 당시의 인터넷 문서들은 독립적인 개체로 존재
      • 기존의 다양한 네트워크를 연결한 검색이 불가능
      • Hypertext가 Internet과 결합하여 HTML의 주요 구성요소로 발전
    • HTML
      • Hypertext는 HTML(Hypertext Mark-up Language)로 작성
    • HTTP
      • 곧 이어 Hypertext 연결 규약인 HTTP(Hyper Text Transfer Protocol) 탄생
      • HTML을 주고 받을 수 있게 됨

  • 웹의 등장과 인터넷의 대중화

    • 웹 서버라는 프로그램을 만들고 그 프로그램이 설치돼 있는 컴퓨터에 info.cern.ch 라는 주소를 부여
    • “Home of the first website” 최초의 원시 웹사이트 탄생
    • 인터넷의 대중화는 웹의 등장으로 시작되었다

✅ 인터넷과 웹이 불러온 혁신

  • 유통 - 인터넷과 웹이 불러온 가장 큰 혁신
    • 정보 유통의 발전
    • 예전에는 소프트웨어를 구입 하려면 물리적인 매개체가 필요 (ex. 신문 - 물리적인 신문 배달 → 인터넷 신문)
  • 웹 기반의 SW 서비스의 시작
    • 정보의 유통이 혁신적으로 발전하며 많은 개발자들이 창업
    • 인터넷에 본인들이 만든 SW 를 올려서 판매 시작
    • 실리콘 밸리, 닷컴붐(Dot-com bubble) (2000년대)
    • Yahoo, Google, Amazon, etc
    • 1세대 웹 서비스의 시작
      • 1세대 웹 서비스 → 정적인 사이트(ex. Yahoo 2000)
      • 정보 전달이 목적
      • 이 때의 기술은 HTML, CSS 가 전부




2. Web Architecture History


✅ Client & Server

  • Client
    • 고객
    • 웹 서비스를 사용하는 고객 → Web Browser
    • cf. Browser - Chrome, Safari, Internet Explorer, etc
  • Server
    • 제공자
    • 웹 서비스를 제공하는 서버

✅ 1세대 웹 - 정적인 웹

  • 1세대 웹 - 정적인 웹
    • 단순한 정보 제공 위주
    • 기능이 많지 않음
    • User Interaction 요구 없음
    • 로직(동적) 없음
    • HTML, CSS 자체가 정적
    • 서버가 HTML 페이지 전체를 클라이언트에게 전송

✅ 2세대 웹 - 동적인 웹

  • 웹서비스의 발전 - 동적인 웹
    • 동적인 2세대 웹 서비스의 출현, 단순한 정적 페이지가 아닌 다이나믹한 요소들이 요구
    • 웹 기반의 언어 자바스크립트의 출현. 서버와 클라이언트가 HTML 페이지와 JavaScript 로직을 통해 필요한 데이터를 주고 받으며 User Interaction 구현
  • 아직 프/백 구분 없이 동일한 서버
    • 자바스크립트의 역할 증대, 하지만 JavaScript 는 일부분에서만 사용
    • 동일한 서버에서 HTML, CSS, Javascript, 그리고 Data 전부가 클라이언트로 전송되는 형태
    • 프론트엔드 / 백엔드 구분 없음

✅ 3세대 웹

  • SPA (Single Page Application) 방식 등장
    • 단일의 HTML 페이지로 전체 웹 서비스 구현
    • 단일 HTML 페이지에 메인 Javascript 파일이 포함
    • JavaScript 가 HTML 요소 생성부터 모든 페이지 및 기능을 동적으로 처리
    • 웹 페이지 렌더링에 필요한 Javascript 코드는 최초의 통신에서 한번에 송수신
    • 그 이후로는 서버와 실시간으로 데이터를 주고 받으며 필요한 화면을 동적으로 구성
  • 프론트엔드와 백엔드 개발의 분리
    • 기존에는 서버가 페이지 구성에 필요한 모든 요소(HTML, JavaScript, Data)를 매번 전송
    • SPA의 등장(Frontend)
      • 웹 페이지 렌더링에 필요한 Javascript 코드는 최초의 통신에서 한번에 송수신
      • 그 이후로는 서버와 실시간으로 데이터를 주고 받으며 필요한 화면을 동적으로 구성
    • 자연스럽게 웹 브라우저가 필요한 서버와의 통신은 데이터 전송 및 연산 작업이 대부분이됨(Backend)
    • 서버의 분리 & 업무의 분리 → 프론트엔드와 백엔드 개발의 분리
profile
유에
hello world
이전 포스트

서버의 기초 개념에 대하여

다음 포스트

웹(WEB)의 역사와 발전 (2/2)

0개의 댓글