Web의 역사

Carminido·2020년 2월 7일
0

ComputerScience

목록 보기
2/9

Q. Internet 이란 무엇일까?

너무나도 친숙한 단어인 인터넷! 인터넷이란 무엇이며 어떻게 만들게 된 것일까? 이 세상을 바꿔놓은 대부분의 발명품들이 그렇듯, 인터넷 또한 전쟁을 위해서 만들어졌습니다. 1950년대에 컴퓨터의 개발이 시작되면서 인터넷 또한 개발되기 시작했는데, 처음에는 컴퓨터와 단말기 간, 컴퓨터와 컴퓨터의 연결이 시작이었습니다. 서로 떨어진 것들을 연결하고 어떤 정보를 서로 주고받는 것이 핵심이었습니다.

그러나 우리가 인터넷을 생각했을 때 가장 먼저 떠오른 핵심적인 키워드는 아마도 WWW 일 것입니다. World Wide Web 인터넷이라 불리는 전 세계의 사람들끼리 연결되게 만드는 인터넷은 1990년도에 그 컨셉이 개발되었습니다. HTTP, 프로토콜, HTML 또한 이때쯤에 만들어졌습니다.

Q.Internet으로 생긴 변화는?

인터넷으로 이 세상에는 어떤 변화가 생겼을까? 사람들끼리 연락을 할 수 있게 된 것? ( 영화 <접속>에서는 두 주인공이 PC 통신을 통해서 인연을 만들게 되죠? ) 아니면 정보의 바다라는 인터넷의 닉네임에 걸맞게 수많은 정보를 얻게 된 것?

위의 것들도 큰 변화가 될 수 있었겠지만, 가장 큰 변화는 유통의 혁신 이었습니다. 요즘은 어떤 소프트웨어를 구매하고 싶다면 바로 앱 스토어에 가면 되겠지만, 과거에는 그 스토어가 실제 물리적인 스토어였습니다. 우리가 어떤 소프트웨어를 컴퓨터에 설치하고 싶다면 직접 그 소프트웨어를 사러 나갔어야 했죠. 만약 우리가 어떤 소프트웨어를 만든다고 해도 그것을 팔고 싶다면 바로바로 가능한 것이 아니라 물리적인 제약이 있었습니다.

이전에 플로피 디스크로 어떤 프로그램을 설치하고 저장하던 것이 기억나시나요? 저는 어렸을 때 컴퓨터를 사면 그 컴퓨터 박스 안에 마이크로소프트를 깔기 위한 CD 패키지가 사은품으로 들어있던 것이 기억이 나네요. 만약, 우리가 정말 어마어마한 소프트웨어를 만들었다고 해도 그것을 다른 나라에 팔기 위해서는 비행기로 그 소프트웨어를 담아서 보내야 했겠죠?

하지만 인터넷의 개발로 이 모든 것에는 혁신이 일어나고, 실리콘밸리에서는 벤처(dotcomboom) 붐이 일어났습니다. 1994년부터 2000년까지 인터넷을 기반으로 하는 회사들이 엄청나게 생겨났습니다. 그러다가 2001년 3월에 이런 것들이 무너지면서 대부분의 것들이 문을 닫았다고 하네요. eBay, Amazon.com과 같은 회사들도 이때 위기를 맞았지만 빠르게 회복했다고 합니다.

1세대 웹 : static _ HTML

그렇다면 이때 만들어진 사이트들은 어떤 모습이었을까요? 우리가 HTML로 만들 수 있는 기본적인 홈페이지를 생각하시면 될 것 같습니다. 왜냐하면 이때 만들어진 사이트들은 HTML로 만들어졌기 때문이죠.

HTML이 무엇의 약자인지 아시나요?

Hyper Text Markup Language

하나하나의 의미로 쪼개서 보면,

Hyper Text

hyper를 구글에 검색해보면, hyperactive or unusually energetic. 비슷한 의미로는 over, beyond, above. exceeding 이 나옵니다. 뭔가 기존의 것들을 뛰어넘는 하이 한 느낌의 개념인 것 같아요. 그러면 여기에 hyper text라고 하면 그런 뛰어넘을 수 있는, 즉 다른 사이트로 연결되고 넘어갈 수 있게 해주는 것입니다.

Markup

"a set of tags assigned to elements of a text to indicate their relation to the rest of the text or dictate how they should be displayed."

Mark up은 태그로 표시를 해야 한다는 것입니다. 우리가 어떤 텍스트나 사진을 넣을 때 이것이 어떤 식으로 보여야 할지에 대해서 태그를 통해서 보여주는 것이죠.

그래서 HTML로 우리는 태그를 만들어 어떤 것이 제목인지, 어떤 것이 헤더인지 등 그 안의 내용들을 태그를 통해서 담아낼 수 있습니다. 또 그 텍스트들은 hyper 해서 클릭하면 다른 링크로 연결되고 넘어갈 수 있는 것이죠.

이전에는 파란색 화면에 색이 있는 글씨 정도만 볼 수 있는 PC 통신의 느낌에서 이런 html로 만들어진 사이트들은 그야말로 큰 혁명이었을 것 같습니다. 지금의 우리에게는 너무나 당연하지만 그 당시에는 hyper 한 느낌이었던 거죠.

Static

하지만 HTML로 만들어진 페이지들의 특징이 있습니다. 바로 static하다는 것이었죠. 야후의 초창기 홈페이지 모습을 보면 이 단어가 어떤 의미인지 대충 감이 오실 겁니다.

우리의 쥬니어네이버 게임이 생각나지 않으시나요? 모든 항목들이 다 링크로 연결되어 있고 뭔가 딱딱하게 쌓여 있는 정적인 느낌이죠. 그렇기 때문에 이 이후로는 뭔가 움직일 수 있는 동적인 것에 대한 필요성이 생기게 됩니다. 단순하게 정보만 딱딱 보여주는 것으로는 한계가 느껴지는 것이죠.

2세대 웹 : 동적인 웹 __ JavaScript

가장 쉽게 확인할 수 있는 동적인 웹의 예시가 바로 네이버의 실시간 검색어입니다. 실시간 검색어를 보면 우리가 네이버를 열었을 때 아무런 행동을 하지 않아도 다음 검색어로 보이게 됩니다. 이렇게 움직일 수 있는 홈페이지가 바로 동적인 웹입니다.

이렇게 동적인 웹을 만들기 위해서는 로직이 필요한데요. 우리가 알고 있는 HTML, CSS는 로직을 가지고 있지 않습니다. 그렇기 때문에 우리는 로직을 통해 구현할 수 있는 언어가 필요한데요 그것이 바로 JavaScript입니다. 물론 자바스크립트가 나오기 전에도 다른 언어들이 있었지만, 그러한 언어들은 온전히 웹만을 위해 만드어진 언어가 아니었다고 합니다. 자바 스크립트는 그러면 자바랑 관련이 있는 건가?라고 궁금증을 가지 실 수 있겠습니다만 원래는 다른 이름이었는데 자바라는 언어가 인기가 많아서 그 인기에 편승되고자? 사람들에게 조금 더 어필을 하기 위해서 자바 이름을 땄다고 합니다.

3세대 웹 : SPA __ JavaScript World

우리가 만약 댓글을 달았을 때, 그 댓글이 댓글 목록에 올라가게 하려면 어떻게 해야 할까요? 이미 켜져 있는 파일인데 HTML로 고친 건가? 아니죠. 바로 Javascript로 구현을 한 것입니다. 왜냐하면 자바스크립트로도 태그를 통해서 HTML을 만들 수 있기 때문이죠. 그리하여 이제는 HTML 위주가 아닌 JavaScript 위주가 됩니다. 자바스크립트의 시대가 온 것이죠.

Single Page Application

싱글 페이지란 우리가 다른 링크, 페이지로 넘어가지 않고도 하나의 창 안에서 모든 것을 다 할 수 있는 페이지입니다. 이전에 링크로 타고 타고 가던 시대와는 달리 심플하게 한 곳에서만 할 수 있는 것입니다. 그리고 이런 SPA가 가능하게 해주는 프레임 워크 중에서 가장 유명한 것이 react 리액트이죠.

Single Page Application과 Multi Page Application에 대한 내용은 이 포스트를 참고하시면 될 것 같습니다.

https://medium.com/@goldybenedict/single-page-applications-vs-multiple-page-applications-do-you-really-need-an-spa-cf60825232a3

이 글에서 보면 왜 우리가 싱글 페이지를 쓰면 좋은지에 대한 내용에 서버와의 통신에 대한 부분이 있습니다. 우리는 어떤 페이지를 열 때 그에 대한 정보를 서버로부터 받아와야 하는데 만약 멀티 페이지라면 그 페이지들에 대한 정보를 열 때마다 계속해서 받아와야 합니다. 하지만 싱글 페이지는 그 모든 것들을 전부 하나의 페이지에서 처리하기 때문에 데이터를 한 번만 받아오면 되기 때문에 트래픽이 줄어들었고, 프론트엔드에서는 렌더링을 한 번만 하면 됩니다.

대신에 우리가 필요한 정보들, 데이터들은 계속 받아와야 합니다. 실시간 검색어라면 매시간마다 그 실시간이 바뀌게 되는데 그러한 데이터를 바로바로 서버에서 받아와야 하는 것이죠. 우리는 이전보다 더 역동적인 웹을 구현해야 하고 그 웹에 들어가는 데이터들 또한 이전보다 복잡해지고 다양해졌기 때문에 그에 대한 영향으로 프론트엔드와 백엔드의 구분이 생기게 됩니다.

4세대 웹: Front-end , back-end

사람들에게 보이는 부분, 경험하는 부분 ( UI, UX) 을 담당하는 프론트 엔드.

서버와 데이터를 담당하는 백엔드

이 내용을 보시면 프론트와 백의 차이점을 알 수 있습니다.

https://dev.to/appdevelopmentagency/front-end-vs-back-end-development--what-is-the-core-difference--185f

Big Data

인터넷상에서의 데이터들이 엄청나게 많아지면서 그러한 데이터에 대한 수집과 관리의 필요성이 생기게 되었습니다. 만약 우리가 인스타그램을 사용한다고 한다면 사실 인스타그램의 기능 자체는 간단하지만 수만 명의 업로드를 처리하고 그 업로드된 것들을 보여주고, 또 추천을 해주고 하는 것들을 생각해보면 그 뒤에 얼마나 막대한 데이터들이 있을지 상상조차 하기 힘듭니다. 그래서 이러한 데이터를 관리하고 수많은 사람들이 동시에 이용해도 잘 쓸 수 있도록 서버를 유지하는 것이 중요해진 것입니다. 우리가 보기에는 간단해 보이는 서비스도 사실은 그 뒤에 엄청나게 복잡한 아키텍처가 숨어있습니다.

이번 포스팅에서는 이렇게 웹의 전체적인 역사에 대해서 알아보았습니다. 전체적인 흐름이 감이 오시나요? 그렇다면 이러한 웹에 관련된 직무들이 어떻게 다르고 또 어떤 일을 하는지는 다음 포스팅에서 다루어 보도록 하겠습니다.

profile
나는야 코린이 하지만 무럭무럭 자라고 있죠

0개의 댓글