[Web] 웹 서비스의 역사와 발전

안정현·2021년 5월 2일

Web System Architecture History

(1) 1세대 웹 - 전통적인 Web System Architecture. 정적 웹.
(2) 2세대 웹 - User Interaction 의 증가. 동적 웹(자바스크립트)
(3) 3세대 웹 - SPA(Single Page Application) - 구별되기 시작하는 Frontend와 Backend
(4) Modern WEB - 규모가 커지기 시작하는 Web System의 발전

1. WEB과 Internet의 출현

1) WEB vs. Internet

인터넷 이라는 전체 안에 웹 이라는 서비스가 존재
1960년에 인터넷이 등장
30년 뒤인 1990년에 웹이 등장
Internet - Network. Infrastructure.
Web - "collection of information which is accessed via the Internet."

2) 인터넷의 출현

1. Internet 의 출현.
처음에는 군사 목적으로 출현
- 1960년 핵이 화두. 당시 인류는 핵전쟁을 치른 이후.
- 미국에서 핵 공격을 당한 상황을 시뮬레이션
- 당시 중앙집중적인 통신 시스템은 핵공격에 취약. 전체가 마비.
- 핵 공격에도 견딜 수 있는 강인한 통신 시스템 필요 >>> 인터넷
인터넷 → 물리적으로 떨어져 있는 서버와 서버의 연결을 가능하게 해줌.
- 수많은 물리적 통신 장치 중 하나에 문제가 생겨도 나머지 장치들이 역할을 대체할 수 있는 통신 시스템
처음 인터넷 출현 시 기업이나 연구소, 군대와 같은 거대한 기관에서 사용되던 통신 시스템
1990년 WEB 이 출현하며 대중적으로 사용 되기 시작

3) 웹의 출현

팀 버너스리 스위스 유럽입자물리 연구소.
10년 동안 웹의 전신이 되는 프로그램을 개발 + 1990년 인터넷이 연구소에 들어오기 시작
1990년 10월 세계 최초로 웹 페이지를 만드는 편집기를 개발
1990년 11월 세계 최초의 웹 브라우저인 World Wide Web 이라는 프로그램을 개발
1990년 12월 24일 웹 서버 라는 프로그램을 만들고 그 프로그램이 설치돼 있는 컴퓨터에 info.cern.ch 라는 주소를 부여
"home of the first website"
우리가 일반적으로 생각하는 인터넷, 인터넷의 대중화는 이렇게 웹이 등장하면서 시작됨.

4) 인터넷이 불러온 혁신

가장 큰 혁신 → 유통
예전에는 소프트웨어를 구입 하려면 물리적인 매개체가 필요했음.
이런 유통의 과정이 혁신적으로 줄어들면서 많은 개발자들이 창업을 하기 시작.
닷컴붐(Dot-com bubble) (2000년대). 실리콘 밸리 형성 → 야후, 구글, 아마존 등의 회사가 이 때 출현
웹 기반의 서비스 시작. 인터넷에 본인들이 만든 SW 를 올려서 판매 시작.
1세대 웹 서비스 → 정적인 사이트(ex. Yahoo 2000)
이 때의 기술은 HTML, CSS 가 전부

2. Web System Architecture History

1) 1세대 웹 서비스 - 전통적인 Web System Architecture. 정적 웹.

웹 서버가 HTML 페이지 전체를 클라이언트(ex. Web browser)에게 전송
초창기 웹사이트/서비스에 적합했던 시스템 - 초창기 웹사이트는 단순한 정보 제공 위주였다. 특별히 기능이 많지 않으며, 무엇보다 User Interaction 이 많이 요구되지 않았다.
1세대 웹이 정적인 이유? HTML, CSS 자체가 정적
- Hyper Text : 링크로 연결된 문서
- Markup Language : “이렇게 보여줘라” 에 대한 지시
- HTML : 웹페이지의 내용을 브라우저에게 어떻게 렌더링(rendering) 해주라고 마크업 해주는 것
어떻게 보여지는가에 대한 것이기 때문에 로직(동적)이 없다. 정적.

2) 2세대 웹 서비스 - User Interaction 의 증가. 동적 웹 (자바스크립트).

웹서비스들이 점점 발전함에 따라 단순한 정적 페이지가 아닌 다이나믹한 요소들이 요구됨.
웹 기반의 언어인 자바스크립트가 출현. 자바스크립트의 역할이 커지기 시작함.
참고) 그 이전의 언어들은 사용할 수 없었을까? 왜 자바스크립트가 필요했을까?
: 그 이전의 언어는 브라우저에서 동작을 안 함.
이렇게 2세대 웹 서비스가 출현
Web server에서 전체 HTML 페이지 뿐만이 아니라 JavaScript를 통해 서버와 필요한 데이터만 주고 받음으로 dynamic한 user interaction을 구현하게 됨.
그러나 아직 JavaScript 는 일부분에서만 사용되었고, 또한 현재 통용되는 API 의 개념이 아직은 널리 사용 되지 않음 → 동일한 서버에서 HTML, Javascript(프론트 영역) 데이터(백엔드 영역) 둘 다 전송.

3) 3세대 웹 서비스 - SPA. 구별되기 시작하는 Frontend / Backend.

주객전도. 동적인 기능이 주가 되버림. → 자바스크립트가 주가 되고 그 안에 일부 HTML, CSS 가 포함.
이게 바로 SPA(Single Page Application) - 하나의 파일로 전체 사이트를 구현
이름 그대로, 단일의 html 페이지에서 전체 웹 사이트/서비스를 구현.
기존의 방식대로 서버가 페이지 구성에 필요한 모든 요소(HTML, JavaScript, Data)를 매번 전송하는 것이 아니라, 파일은 처음 한 번만 송수신. 그 뒤로는 실시간 데이터만 주고 받음.
제일 처음 전송된 단일 HTML 페이지에 포함되어 있는 JavaScript 에서 필요한 데이터를 API 서버로부터 호출하여 필요한 화면을 dynamic 하게 새롭게 구성해주는 방식.
HTML 태그 자체를 자바스크립트가 동적으로 생성
“명확히 두 개로 나눌 수 있겠다!” → 프론트엔드와 백엔드가 나뉘게 되는 기점.
즉 HTML/JavaScript 부분과 데이터 부분이 구조적으로 분리 되기 시작
→ Frontend 개발과 Backend 개발이 독립적으로 분리 (프론트 - UI UX / 백엔드 - Data)
명확히 나뉘어진 두 개의 시스템으로 웹이 동작하게됨.
기술 스택도 각자에 맞는 스택을 시용하기 시작함. (ex. Angular 의 출현!)
이후 사용자에게 편하고, 더 멋진 웹 Frontend 를 구현할 수 있게 도와주는 Framework 혹은 Library 들이 탄생. (ex. React, Vue)
프론트엔드가 개발의 혁신이 빠른 이유도 이 분야 자체의 역사가 짧음.
Frontend 와 Backend가 구조적으로 분리가 되면서, Frontend 서버와 Backend API 서버도 분리가 되며 그에 따라 Frontend 개발과 Backend 개발 업무가 분리가 되는 구조로 발전된다.

4) Modern WEB - 규모가 커지기 시작한 Web System의 발전

User Interaction 의 중요성 증가 + 웹 서비스의 복잡성 증가 + 사용자 수, 데이터의 양 증가
(ex. Instagram, Twitter. 기능적으로 복잡한 것은 하나도 없지만 사용자와 데이터의 양이 어마어마함.)
이전에 겪지 못한 두 가지 문제 - 1. 동시 접속자 수, 2. 데이터의 양 → System architecture 의 발전
웹 사이트/서비스들이 엄청나게 발전되고 규모가 커짐에 따라 시스템 구조도 훨씬 더 복잡하고 커지게 된다.

→ Frontend 서버와 Backend 서버의 분리
1. Backend 는 웹 서비스의 스케일이 엄청나게 커짐에 따라(그리고 분석해야 하는 데이터 양이 엄청나게 늘어남에 따라 ) architecture(시스템 구조)가 굉장히 복잡하게 발전 되며 규모도 엄청나게 커진다.
  - Micro Service Architecture (MSA) 등의 새로운 architecture 개념의 발전으로 API 서버들이 훨씬 더 세분화 되며 규모가 커짐
  - 분석해야 하는 데이터의 양이 엄청나게 늘어나면서 소위 "Big Data" 분석 시스템이 많은 회사들의 backend 시스템에 도입
  - 데이터를 통해 Insight 를 도출해내는 것이 다음 도전 과제 (ex. 추천 상품, 음악 플레이리스트 추천)
  - 게다가 최근에는 ML(Machine Learning)과 AI 기술의 발달로 많은 회사들이 ML과 AI 시스템도 활용하게 됨으로 backend 시스템은 계속해서 방대해지는 추세
2. Frontend 는 Node.js 와 React 등의 JavaScript 엔진과 프레임워크/라이브러리의 발달로 웹에서 더 복잡한 기능 구현이 가능 → Node.js 의 발전으로 프론트 개발자가 간단한 백엔드 기능을 직접 구현하는 일도 요즘은 흔함.