개발을 위한 프로그래밍 지식 5편 - 웹의 역사

---

이번 글은 개발을 위한 프로그래밍 지식 시리즈 제 5편입니다. 이번 글에서는 웹의 역사에 대해서 다룹니다. 사실 웹 자체의 역사라기보다는 HTML과 CSS와 같은 언어들의 역사라거나 웹 서비스들의 흐름, 패러다임에 대해 알아보는 것이라고 하는 게 더 나을지도 모르겠습니다. 웹은 꾸준히 발전을 하고 있고 앞으로도 계속 발전을 할 것입니다. 이제 본론으로 들어가보도록 합시다.

웹의 태동

인터넷이 등장하면서 세계는 급격하게 변했다고 해도 과언이 아닙니다. 하지만 어려웠기 때문에 대중에게 풀려도 제대로 사용되지 않았던 인터넷을 더 확실하고 빠르게 보급한 원인은 바로 웹에 있습니다. 웹은 그나마 사용하기 편했으니까요.

초창기 웹의 의미

웹이 처음 등장하고 성장을 시작하던 1990년대부터 2000년 동안은 웹은 진가를 발휘하지 못한 상태였습니다. 이 시기를 초창기라고 정의한다면, 이 초창기 웹의 시대는 서로 다른 국가에 있던 사람들이 한 공간에 모여 접촉이 가능하게 됐던 역사적인 순간이었다고 할 수 있습니다.

HTML과 CSS

웹이 처음 등장한 이래로 많은 변화가 있었지만 처음에는 초라한 형태였습니다. 팀 버너스리는 웹을 고안하면서 웹에서 보여질 문서의 규격도 같이 고안했습니다. 그게 바로 HTML이라는 언어입니다. html 문서는 HTML로 작성이 되고 이렇게 작성된 파일은 웹 브라우저를 통해서 열람이 가능했습니다. 최초의 웹 페이지를 보면 얼마나 초라했는지 알 수 있습니다.

크게 보기 (새 창)

HTML의 처음 버전은 1이었습니다. 물론 나올 때에는 그냥 HTML이었지만 버전이 올라가면서 최초의 HTML은 버전 1이 되었습니다. 당연하겠죠. 1995년에 HTML 2가 발표되었는데 최초로 표준이 된 버전입니다. 하지만 문제도 많았던 버전이었기 때문에 금방 1997년에 버전 3.2가 등장합니다.

버전 3.2를 내놓은 것은 W3C라는 곳이었는데 이 곳은 웹의 표준화를 추진하는 곳입니다. 웹 표준이라는 것은 어떤 브라우저에서 열더라도 똑같이 출력되는 것을 포함한 대략적인 기준 같은 것이라고 이해하면 됩니다. 이후의 HTML 버전은 이 곳에서 내놓게 됩니다.

초창기의 웹은 문서의 형태를 짙게 띄고 있었습니다. 마치 워드처럼 말입니다. 요즘의 웹과는 많이 다른 형태였고 말 그대로 디자인이 없어서 초라했습니다. 디자인이 가능하게 됐던 순간에도 html 문서에 때려넣었기 때문에 가독성이 개판이 되기도 했습니다.

HTML 4.01부터 HTML이 체계적으로 자리를 잡아가기 시작하면서 디자인. 즉 스타일은 CSS로 분리가 되었습니다. 사실 CSS가 처음 등장한 것은 1996년인데 그 이후에도 HTML에 디자인 요소를 넣곤 했는데 점점 그런 추세는 사라지게 됩니다.

HTML은 웹 페이지의 골격만을 담당하게 되었고 CSS는 웹 페이지의 디자인만을 담당하게 된 것이죠. 체계적인 디자인이 가능해지면서 웹의 환경을 변하기 시작했습니다. 조금 더 화사하게 말이죠.

웹의 발전

초창기의 웹은 HTML과 CSS의 위주로 돌아갔다면 자바스크립트가 등장하고나서 조금 지난 후, 자바스크립트가 웹의 중심점 역할을 하게 됩니다. HTML도 CSS도 전부 자바스크립트로 제어할 수가 있었기 때문이죠. 자바스크립트를 이용하면 HTML과 CSS 만으로는 할 수 없는 일들도 이뤄낼 수 있었습니다.

자바스크립트는 웹 프로그래밍의 본격적인 시작을 알렸습니다. 웹 개발자들이 많이 생겨나기 시작했습니다. 뿐만 아니라 자바스크립트 이외에도 많은 언어들이 웹을 보완, 보조하기 위해 탄생했고 웹을 좀 더 편안하게 구성할 수 있도록 돕기 시작했습니다. 웹과 상관이 없던 프로그래밍 언어들도 웹 개발을 지원하기 시작했죠. 이는 웹이 상당히 중요한 위치에 이르렀다는 것을 의미했습니다.

자바스크립트의 등장

자바스크립트는 본래 웹서버에서 사용될 언어였으나 나가리되고 웹 브라우저에 탑재 되었습니다. 자바스크립트가 웹에 쓰이게 되면서부터 정적이었던 웹 페이지들은 동적인 웹 페이지가 될 수 있었지만 자바스크립트가 등장을 했어도 세상은 아직 HTML과 CSS의 위주로 돌아갔습니다.

그런데 어느순간부터인가 웹에서 동적인 요소들이 부각되기 시작합니다. 자바스크립트의 영역이 점점 더 커지면서 여러 웹 서비스들은 웹 사이트에 동적인 요소를 추가하고 자바스크립트를 적극 활용하기 시작했습니다. 이때부터 웹은 단순한 문서만은 아니게 되었습니다.

오늘날 웹의 세가지 요소는 HTML, CSS, JavaScript라고 알려져 있고 이렇게 굳어져 있습니다. 이 세가지는 떼려야 뗄 수 없는 관계가 되었습니다. 게다가 현재의 웹은 가히 프로그램이라고 할 수 있을만한 위치로 왔습니다. 그저 문서의 측면이었던 과거와는 다르게 웹 페이지와 사용자의 상호작용이 활발하게 이루어지고 있기 때문입니다. 그래서 결론적으로 현재는 웹 문서로서의 측면과 웹 프로그램으로서의 측면이 격돌하고 있습니다. 아마도 지금 이 순간이 과도기일 것입니다.

물론 모든 웹 페이지가 그런 것은 아니기 때문에 문서의 측면이 완전히 사라졌다고는 할 수 없습니다. 그러나 대부분의 웹 사이트는 동적이다 못해 사용자와 소통을 하기도 합니다. 이러나 저러나 웹으로 할 수 있는 것이 점점 많아지고 있다는 의미입니다.

제이쿼리의 등장

자바스크립트를 보다 편하게 사용할 수 있도록 만들어주는 라이브러리인 제이쿼리는 2006년에 처음 나타났습니다. 제이쿼리는 사실 별 기능이 없습니다. 그럼에도 업계를 장악하기 시작했습니다. 제이쿼리가 자바스크립트보다 더 나은 언어인줄 아는 사람들도 있습니다.

제이쿼리는 일반 자바스크립트를 사용할 때보다 개발 속도가 빨랐고 간결한 코드만으로 많은 기능을 구현할 수 있었다는 점에서 인기를 끌었습니다. 장점이 이것 뿐이기에 훗날 다른 기술에게 밀려 점유율을 빼앗기게 되지만요.

반응형 웹의 등장

크게 보기 (새 창)

모바일 기기의 사용량이 많아지고 모바일에서도 웹에 접속할 수 있게 되면서부터 어떤 문제가 발생하게 되었습니다. 모바일이 발달하기 이전에는 웹은 PC의 화면만을 신경쓰면 됐습니다. 그런데 모바일이 발달하면서부터 웹은 모바일용 화면도 따로 구성해야 했습니다. 하나의 사이트가 두개의 버전으로 존재해야 했던 겁니다. 이런 비효율적인 방식을 타파하기 위해서 CSS에서는 미디어 쿼리라는 시스템을 도입했습니다.

미디어 쿼리는 모바일이든 PC든 상관 없이 같은 웹 페이지를 화면의 너비에 따라서 다른 화면으로 보여주는 기술입니다. 정확히는 모바일이면 모바일에 맞게끔 보여주고 PC라면 원래의 모양을 보여주는 것이죠. 이러한 웹 디자인 방식을 반응형 웹 디자인이라고 불렀습니다. 그리고 지금 반응형으로 디자인을 하지 않은 웹 사이트는 별로 없다고 봐도 무방합니다.

SNS의 등장

2000년대 이후에는 SNS라는 웹 서비스들의 등장으로 인해서 사람들은 소비자에서 생산자가 되었습니다. 자신들의 노하우를 공개할 수 있게 되었고 자신들의 생각과 발상을 세상에 내놓을 수 있게 되었습니다. 이러한 활동들은 웹을 더 가득 가득 채우기 시작했고 그 결과 웹은 정보의 바다가 되었습니다. 누군가는 블로그에 글을 작성하기 위해 웹을 이용했고 누군가는 정보를 얻기 위해 웹을 이용했습니다.

이 기조가 현재까지 이어져오고 있습니다. 웹은 이제 인류의 일상이 되었습니다. 웹을 통해서 뉴스를 접하고 새로운 소식을 접하기도 하며 자신들의 일상을 공유하기도 합니다. 지금은 당연하게 느껴지는 것들은 과거엔 전혀 당연하지 않았습니다. 혁신적이었고 가히 신비로운 기술이었습니다. 우리는 이러한 환경이 나타난 것을 정말 다행으로 여겨야 합니다.

Node.js로 인한 자바스크립트의 활용 확대

흔히 노드라고 부르는 이 자바스크립트 런타임은 현 시대의 자바스크립트의 활용성을 최대한으로 극대화시켰습니다. 일반적인 자바스크립트만으로도 충분히 강력한 기능을 구현할 수 있는데 수십, 수백을 넘어 수천가지의 라이브러리 시장을 활성화시켜 어마어마하게 거대한 트렌드와 패러다임을 만들어냈습니다.

현재의 웹 개발 트렌드는 SPA인 듯합니다. 싱글 페이지 애플리케이션이라는 의미입니다. 웹사이트라는 것은 기본적으로 여러개의 페이지가 있어야 했는데 SPA라는 개념으로 인해서 하나의 페이지만으로 여러개의 페이지가 있는 것마냥 브라우저를 속일 수 있는 기술을 얻었습니다. **리액트(React)**나 **뷰(Vue)**가 바로 그런 개념의 기술인데 여기서 말하긴 좀 이른 것 같군요.

노드의 패키지 매니저 시스템인 NPM을 적극 이용해 여러가지 유용한 프로그래밍이 가능해졌고 웹 개발자들은 자신들이 직접 프로그래밍을 해서 기능을 구현시키기보다는 이미 만들어져 있는 기능을 가져와서 자신의 프로그램에 첨가하는 등의 오픈소스의 활용 능력도 중요시하게 다뤄지게 되었습니다. 오늘날의 프로그래밍은 마치 퍼즐과도 같습니다. 잘 어울리는 이미 존재하는 라이브러리, 프레임워크를 어떻게 조합해서 퍼즐을 맞추냐가 관건이죠.

이 부분에 대한 더 자세한 이야기는 웹 프로그래밍 파트로 넘어가서 계속하도록 합시다.

웹의 중요성을 알게 된 개발자들

웹이 발전함에 따라 다양한 프로그래밍 언어들이 웹 프레임워크를 지원하기 시작했습니다. 자바도 파이썬도 C# 같은 언어들도 웹 프로그래밍을 할 수 있는 언어가 되었습니다. 물론 자바스크립트를 따라오긴 아직 멀었다는 생각이 들긴 합니다만 그렇게 변해왔고 앞으로 확대될 거라는 것이 중요하겠죠.

---

글이 길어질 것 같아서 잘랐는데 막상 작성하고 보니 그렇게 길지는 않네요. 사실은 이번 글을 작성하면서 생략한 부분도 많이 있습니다. 빠진 것들은 추후에 정리가 되면 추가를 해보도록 하고 일단은 웹 프로그래밍에 대한 주제를 먼저 다뤄야겠습니다. 이번 글은 여기까지 입니다. 다음 글에서 봅시다.

---