[Web] Web의 역사와 발전

Internet vs. Web

인터넷과 웹의 차이점을 알고 계시나요? 결론부터 말하면, 웹은 인터넷 내에 있는 서비스를 의미합니다. 흔히 인터넷이라고 하면 떠올리는 각종 웹사이트 등의 시초는 1990년대 팀 버너스리가 개발한 월드와이드웹입니다. 인터넷은 그저 물리적으로 떨어져 있는 서버와 서버의 연결을 가능하게 해주는 컴퓨터 네트워크 통신망을 의미합니다. 그러면 인터넷은 어떤 과정으로 개발되었고, 웹은 어떤 과정으로 개발되었는지를 살펴보겠습니다.

Internet

인터넷은 1960년대에 미국 국방부에서 군사적인 목적으로 처음 개발되었습니다. 당시의 중앙집중적인 통신 시스템은 핵 공격에 취약했습니다. 그렇기에 핵 공격에도 견딜 수 있는 강인한 통신 시스템이 필요했고, 그러한 필요에 의해 개발된 것이 바로 인터넷 입니다.

인터넷은 물리적으로 떨어져 있는 서버와 서버의 연결을 가능하게 해주기 때문에 통신 장치 중 하나에 문제가 생겨도 나머지 장치들이 역할을 대체할 수 있는 통신 시스템입니다.

Web

1989년에 팀 버너스리에 의해 시작된 프로젝트로, 팀 버너스리는 웹서버와 웹 브라우저를 개발하고, 이 둘이 통신할 때 사용하는 프로토콜인 HTTP 통신 규약을 정의하고, 웹 브라우저에 정보를 표현할 수 있게 하는 프로그래밍 언어인 HTML을 발명하였습니다.

이러한 기술들을 공개하면서 폭발적인 발전을 이루었고 웹으로 인해 인터넷이 대중적으로 사용되기 시작하였습니다.

웹은 WWW, 즉 World Wide Web이라고도 불리는데요, 인터넷을 통해 정보를 검색할 수 있도록 만들어진 시스템이라고 정의 내려집니다.

웹을 통해 인터넷이 대중적으로 사용되기 시작했다고 말씀드렸는데요. 이것의 가장 큰 혁신은 바로 유통입니다. 인터넷 발달 전에는, 소프트웨어 사용을 위해 물리적인 유통이 필요했습니다. 예를 들어, 게임을 다운로드 받는다면 오늘날의 웹 사이트에서 다운받는 것이 아닌 CD등의 하드웨어 유통을 통해 소프트웨어를 다운받을 수 있었던 것입니다. 하지만, 웹이 발달하면서 모든 서비스를 온라인으로 배포할 수 있게 되었고 이로 인해, 서비스를 개발하는 데에 장벽이 많이 낮아졌습니다. 이로인해 200년대 초반에는 인터넷 관련 주식이 급상승하는 닷컴 버블이라는 현상도 발생했다고 합니다.이처럼 웹의 발명은 사람들에게 큰 영향을 미치기 시작했습니다.

Web의 역사

본격적으로 이러한 웹이 어떻게 발전되어서 지금에 이르렀나를 살펴보겠습니다.

WorldWideWeb

세계 최초의 웹 브라우저입니다. WWW(World Wide Web)과 구분해주셔야 합니다. 띄어쓰기를 하면 여태까지 설명했던 웹을 의미하고, 띄어쓰기없이 쓰면 세계 최초의 웹 브라우저를 의미합니다. 이에 혼동이 생겨 나중에는 Nexus라는 이름으로 변경하였습니다.

이는 팀 버너스리와 로버트 카이오가 공동으로 개발한 웹 브라우저입니다. 개발 당시 데모 영상도 유튜브에 있던데 WWW의 아버지라 불리는 팀 리버스 리 분께서 데모하시는 모습이 신기했습니다. 이들은 1990년 크리스마스에 자신들의 컴퓨터에서 월드와이드웹을 통해 http://info.cern.ch/ 라고 등록한 웹 서버에 등록을 했는데 이것이 바로 최초의 웹 사이트입니다.

Mosaic

텍스트만 보여주던 기존의 웹 브라우저와 달리 이미지 표현까지 가능한 최초의 그래픽 웹 브라우저 입니다. 1993년 미국 일라노이대학교의 마크 앤드리슨과 에릭 바나가 공동으로 개발하였습니다.

마크 앤드리슨은 동료들을 데리고 1994년에 넷스케이프를 설립하여 넷스케이프 내비게이터 브라우저를 개발하게 되고, 이에 따라 모자이크는 개발이 중단됩니다.

넷스케이프에 밀린 모자이크는 스파이글래스라는 회사에 인수되어 스파이글래스 모자이크로 이름이 변경되었습니다. 이후 마이크로소프트가 스파이글래스에 저작권료를 지급하고 모자이크 소스코드를 이용해 인터넷 익스플로러를 개발하였습니다.

Netscape Navigator

1994년 모자이크 개발자 마크 앤드리슨이 동료들을 데리고 나와 설립한 넷스케이프에서 개발한 브라우저입니다. 개발 당시 인기가 폭발하여 점유율이 90%나 되었다고 합니다.

물론, 1995년 마이크로소프트가 인터넷 익스플로러를 개발한 뒤에는 점유율이 급격하게 감소하긴 했습니다. 마이크로소프는은 Windows 운영체제에 무료로 포함해 브라우저를 배포했지만, 넷스케이프는 운영체제와 별도로 브라우저를 구매해야한다는 점, 무리한 표준화 시도로 인해 하위호환성을 잃었다는 점 등의 단점으로 인기가 사그라들었습니다.

1997년 넷스케이프 커뮤니케이터를 내놓아 인터넷 익스플로러에 대항하려 했지만 패배하고 말았습니다. 그렇게 2008년을 끝으로 개발은 중단되게 됩니다.

이렇게 망해버린 넷스케이프 출신 개발자들이 별도로 모질라 재단을 설립해 2002년에 새로 출시한 브라우저가 바로 파이어폭스입니다.

Internet Explorer

마이크로소프트가 1995년에 출시한 웹 브라우저입니다. Windows 운영체제에 기본으로 브라우저를 포함해 판매하는 전략으로 사용자가 증가하여 2003년에 점유율 95%에 다다랐습니다.

이후 모질라 파이어폭스 등 다른 브라우저들이 출시되고 마이크로소프트는 자사 제품 이외의 플랫폼에서는 지원을 중단하며 인기가 점점 떨어졌습니다.

브라우저 전쟁

브라우저 전쟁이란, 2003년 인터넷 익스플로러 이후에 나오는 구글 크롬, 모질라 파이어폭스, 사파리, 오페라 등 모던 브라우저들과의 경쟁을 의미합니다. 2021년 기준으로는 구글 크롬의 점유율이 가장 높다고 합니다.

이외에도 모바일 브라우저도 생기면서, 모바일의 한계 내에서 사용자 경험을 상승시킬 수 있는 웹서비스를 제공하는 것이 과제가 되기도 했습니다.

Web의 발전 과정

이제까지 Web의 역사에 대해 살펴봤다면, 이러한 역사를 지나쳐가는 동안 Web에는 어떠한 발전 과정이 있었는 지를 살펴보겠습니다. 발전 과정 순서대로 1세대, 2세대, 3세대로 구분하는데요. 자세하게 살펴보기 전에 각각은 어떤 웹 서비스를 의미하는지 간략하게 설명하도록 하겠습니다. 먼저, 1세대 웹 서비스는 html, css 기반의 정적 웹 서비스입니다. 2세대 웹 서비스는 자바스크립트 기반의 동적 웹 서비스입니다. 3세대 웹 서비스는 Single Page Application을 의미하는 SPA의 등장에 따라 Frontend/Backend가 구별되는 웹 서비스입니다. 이제 각각 하나씩 자세히 살펴보겠습니다.

1세대 웹 서비스

먼저, 1세대 웹 서비스입니다. html, css 기반의 정적 웹 서비스라고 소개해드렸는데요. 이는 전통적인 웹 시스템 아키텍처입니다. 먼저, html은 hyper text markup language의 약자로서, 하이퍼텍스트를 마크업해주는 언어로 링크를 기반으로 서비스가 이루어지는 웹페이지를 구성하는 언어입니다.

여기에서 말하는 하이퍼텍스트는 우리가 하이퍼텍스트 기능이라고 흔히 알고 있는 바로 그 기능입니다. 지정된 것을 클릭하면 한 문서에서 다른 문서로 바로 접근할 수 있는 텍스트를 의미하는데요. 1세대 웹 서비스에서 사실상 가장 핵심적인 개념이 바로 이 하이퍼텍스트라는 개념입니다. 그렇기에 문서 간 이동하며 정보를 읽는 웹 브라우징만을 목적으로 만들어진 것입니다.

2세대 웹 서비스

하지만 User Interaction이 증가하면서 동적 웹 서비스가 필요해졌습니다. 이에 따라 넷스케이프에서 자바스크립트를 개발하였고 자바스크립트로 인해 동적인 브라우저가 탄생할 수 있었습니다.

여기에서 말하는 동적인 브라우저는 사용자가 새로고침을 하지 않았음에도 동적으로 반응하는 웹 브라우저를 의미합니다.

하지만, 동적 웹 서비스의 필요성이 증가했다고 해도 여전히 자바스크립트보다는 html, css가 주를 이루고 있는 게 바로 2세대 웹 서비스입니다.

3세대 웹 서비스

하지만 사용자 경험 향상이 점점 더 핵심 가치가 됨에 따라 동적인 요소는 계속해서 중요해져갔습니다. 이에 따라 html, css보다는 자바스크립트가 주를 이루게 됩니다. 이를 3세대 웹 서비스라고 구분짓습니다.

이 때 SPA 개념이 등장하게 되는데, SPA란 Single Page Application의 약자로서 단일의 html 페이지에서 전체 웹 서비스를 구현하는 것을 의미합니다. 이를 전통적인 웹 방식과 비교해보겠습니다.

전통적인 웹 방식에서는 link tag를 이용합니다. 즉, 새로운 페이지를 요청할 때마다 정적 리소스를 다운로드하여 전체 페이지를 매번 다시 렌더링하는 방식을 사용합니다. 그렇기에 비효율적일 수밖에 없는 방식입니다.

이에 반해 SPA는 필요한 모든 정적 리소스를 최초에 한 번만 다운로드한 후 새로운 페이지 요청 시, 페이지 갱신에 필요한 데이터만을 전달받아 페이지를 갱신합니다. 제일 처음 전송된 단일 html 페이지에 포함되어있는 자바스크립트에서 필요한 데이터를 api 서버로부터 호출하여 필요한 화면을 동적으로 새롭게 구성해주는 방식입니다. 부분적으로 갱신한다는 점에서 전체적인 트래픽이 감소하고 새로고침이 발생하지 않아 사용자 경험을 향상시킵니다.

동적인 요소가 계속해서 중요해지다보니 html/자바스크립트 부분과 데이터 부분이 구조적으로 분리되기 시작합니다. 명확히 나뉘어진 두 개의 시스템으로 웹이 동작하다보니 Frontend와 Backend로 개발 업무가 분리되는 구조로 발전됩니다. 분리되다보니 기술 스택도 각자에 맞는 스택을 사용할 수 있게 됩니다. 그렇기에 이후 사용자에게 편하고 더 멋진 웹 frontend를 구현할 수 있게 도와주는 프레임워크나 라이브러리들이 탄생합니다.

Modern Web

오늘날의 웹서비스는 어떤 형태를 취하고 있을까요? 여전히 User Interaction의 중요성은 계속해서 증가하고 웹 서비스의 복잡성 또한 증가하고 있습니다. 이에 따라 두 가지 중요한 문제에 직면해있는데, 첫 번째는 동시 접속자 수이고, 두 번째는 데이터의 양입니다. 이러한 문제를 해결하기 위해 시스템 아키텍처가 발전하게 됩니다.

frontend는 어떻게 발전했을까요? 우리가 잘 알다시피, Node.js와 앵귤러 등의 javascript 엔진과 프레임워크/라이브러리의 발달로 웹에서 더 복잡한 기능이 구현 가능해졌습니다. Node.js의 발전은 프론트 개발자가 간단한 백엔드 기능을 직접 구현할 수도 있게 했습니다.

backend는 어떻게 발전했을까요? 시스템구조가 굉장히 복잡하고 거대한 규모로 발전하였습니다. 그래서 저번 세미나 주제로 발표했던 Micro Service Architecture를 의미하는 MSA 등의 새로운 아키텍처 개념이 발전하기 시작하였습니다. 그로인해 API 서버들이 훨씬 더 세분화되면서 규모가 커졌습니다. 분석해야하는 데이터 양도 증가하면서 빅데이터 분석 시스템의 중요성이 대두되었습니다. 데이터를 통해 Insight를 도출하는 과제에 많은 기업들이 직면해있습니다. 뿐만 아니라, 머신러닝, AI 기술의 발달로 많은 회사들이 해당 시스템도 활용하고 있습니다. 이렇게 backend는 계속해서 방대해지는 추세입니다.

Web의 작동 방식

3세대 웹 서비스를 소개하면서 SPA의 개념에 대해 간단하게 소개했습니다. 이 밖에도 웹은 다양한 방식으로 동작하게 되는데 SPA, MPA, CSR, SSR이 무엇을 의미하는 지를 살펴보겠습니다.

그 전에 알아둬야 할 용어 한 가지 소개하겠습니다. 바로 SEO라는 용어입니다. Search Engine Optimization의 약자로 검색 엔진 최적화를 의미합니다. 쉽게 말해, 사용자가 우리의 홈페이지, 컨텐츠를 쉽게 발견할 수 있도록 하는 작업입니다. 즉, 사용자가 특정 컨텐츠를 검색했을 때 검색 엔진이 미리 카테고리화 해둔 정보 가운데에서 우선적으로 보여줄 정보를 자체적으로 보유한 평가 알고리즘에 의해 선별해서 보여주는 것입니다.

SPA

SPA는 SEO에 불리한 방식입니다. 왜냐하면, SPA는 앞서 설명했듯이 최초 한 번만 html 페이지를 내려받고 이후에는 javascript를 이용해 동적으로 특정 영역만 새로 모듈을 호출하고 데이터를 바인딩하는 방식의 웹 어플리케이션입니다. 최초에 html+css+javascript같은 리소스를 한 번에 다 내려받아 각각의 html 페이지가 아닌, 하나의 html 페이지에 javascript로 렌더링하기 때문에, javascript 렌더링을 지원하지 않는 대부분의 검색엔진 및 크롤러가 아무 컨텐츠도 수집할 수 없게 됩니다.

물론, 구글은 javascript 렌더링을 지원한다고 합니다. 하지만 네이버나 다음은 아직이라고 합니다. 구글이 검색이 잘 된다는 말이 이런 데에서 기인하는 것이 아닐까 조심스럽게 유추도 해보았습니다.

MPA

SPA와 대조되는 개념으로 Multi Page Application의 약자인 MPA도 있습니다. 이는 여러 개의 페이지로 구성된 어플리케이션입니다. 새로운 페이지를 요청할 때마다 정적 리소스를 내려받고 전체페이지를 다시 렌더링하는 방식입니다.

SPA와 달리, MPA의 경우 각 html 페이지마다 중요한 키워드에 맞게 컨텐츠를 최적화할 수 있으며 모든 페이지에 태그를 포함시킬 수 있어서 SEO에 유리합니다.

SPA와 MPA의 장단점을 비교해보겠습니다. SPA의 장점으로는 필요한 데이터만 전달받고 갱신하기 때문에 페이지 전환이 부드럽고 빨라 UX/UI를 향상시킵니다. 또한, 페이지 전환하는 부분 등 서버에서 부담해야하는 일을 클라이언트가 부담하기 때문에 서버 부담이 감소합니다. 또한, Backend/Frontend 개발 영역이 명확하게 구분되어 업무 분배 등에 유리합니다. 반면 단점으로는, 초반에 html+css+Javascript를 한 번에 다운받아야하기 때문에 초기 로딩 속도가 오래 걸리고, 앞에서 얘기했던 바와 같이 SEO에 불리합니다. 이 중 초기 로딩 속도 개선을 위해 chunking, code splitting이라는 방법을 사용하기도 합니다. 이처럼 치명적인 단점이 없어 MPA보다 SPA가 더 좋은 것이 아니냐 MPA 왜 쓰냐 하는 생각이 들 수도 있는데요. 사실 둘 중 무엇이 더 우월하다고 단언할 수는 없습니다. MPA의 장점을 살펴보겠습니다. 실제로 Amazon, eBay등은 MPA를 사용하고 있습니다. 또한 SEO에 유리합니다. 단점으로는 Frontend/Backend가 강하게 결합되어 있다는 점. 프론트엔드에서 요청을 보내면, 서버측에서 html 파일을 완성하고 완성된 html 파일을 응답하는 방식이기 때문에 backend의 응답이 없으면 사실상 아무것도 보여줄 수 없게 된다는 단점이 있습니다. 또한, 페이지가 전환될 때마다 새로운 html 파일을 계속해서 요청해야하기 때문에 사용자의 정보와 상태를 유지하기 어렵습니다. 또한, 바뀌는 부분 뿐만 아니라 바뀌지 않는 부분도 매번 불러오고 렌더링하기 때문에 불필요한 로딩이 생겨 UX/UI를 감소시킵니다. 이처럼 두 가지 방식은 장단점이 확실한, 어떻게 보면 대립되는 방식이라고 볼 수 있습니다.

CSR

다음으로 CSR과 SSR을 알아보겠습니다. 먼저, CSR은 Client Side Rendering의 약자로서 자바스크립트를 사용하여 브라우저에서 페이지를 직접 렌더링하는 것을 의미합니다. 미리 완성된 페이지를 그대로 보여주는 것이 아닌, 브라우저에서 직접 html과 자바스크립트를 조합해서 페이지를 렌더링합니다.

SSR

반대로 SSR은 Server Side Rendering의 약자로 서버에서 사용자에게 보여줄 페이지를 모두 구성해서 완성된 html 파일 자체를 응답하는 방식을 의미합니다.

동적인 웹사이트나 SPA도 활용이 가능하여 SPA가 SEO 문제를 해결하기 위해 SSR 방식으로 렌더링하기도 합니다. SSR 방식은 이미 완성된 html 파일이 오기 때문에 SEO에 유리하기 때문입니다.