Web의 역사와 웹 표준에 필요한 기술

1. Web의 역사

1.1 WWW(World Wide Web)의 시작

1960년대 소련의 인공위성 발사 성공이 알려지자 이에 위협을 느낀 미국이 국방부 산하에 새로운
기술을 연구하는 ARPA(Advanced Research Project Agency)라는 이름의 부서를 창설하였다.
ARPA는 연구용 통신망을 개발하여 1969년에 UCLA와 SRI 연구소 간에 연결하는데 성공하게 되면
서 이 통신망을 ARPANET이라고 불렀으며 이 통신망은 오늘날 인터넷 망의 시초가 되었다.
ARPANET은 핵전쟁과 같은 위험에서 통신시스템의 데이터를 안전하게 보관하고 전송할 수 있는 네
트워크 시스템으로 이후에 민간연구용 ARPANET과 군사용 MILNET으로 나누어 졌다. 그리고 민간
연구용의 ARPANET이 현재 전 세계의 모든 컴퓨터를 연결하고 있는 인터넷으로 발전하게 된 것이
다. 현재의 웹과 같은 형태는 1989년 당시 유럽원자핵 연구소의 팀 버너스 리(Tim Berners Lee)에
의해 제안 되었다. 이 기술은 하이퍼링크라는 기능을 사용해 네트워크에서 문서와 문서 사이를 이동
할 수 있는 당시에는 새로운 개념이었다. 1991년 팀 버너스리는 자신이 제안한 새로운 개념의 아이
디어를 바탕으로 월드 와이드 웹(World Wide Web)을 개발해 배포 하였다. 이후 월드와이드웹(일명
WWW)을 사용하는 사람들이 폭발적으로 증가하자 1993년 월드와이드웹의 소스를 모든 사람이 사용
할 수 있도록 공개하고 1994년에 웹과 관련된 표준을 재정하고 관리하는 W3C(World Wide Web
Consortium)를 창설하였다.

1.2 브라우저 전쟁과 웹 2.0 

1994년 넷스케이프 커뮤니케이션즈라는 회사에서 네스케이프라는 웹브라우저를 개발해 배포하였는
데 이와 비슷한 시기에 마이크로소프트도 인터넷 익스플로러를 개발해 배포 하였다. 이후 두 브라우
저간의 시장 점유율 경쟁이 치열해 졌고 이 경쟁에서 밀린 네스케이프 커뮤니케이션즈는 모질라 재
단을 세워 넷스케이프 웹브라우저의 소스를 공개하고 웹브라우저 개발에 일반 개발자의 참여를 유도
하였지만 결국 큰 효과는 보지 못하고 오늘날에 이르게 되었다.
이후 인터넷이 점점 발전하면서 웹 컨텐츠 개발에 일반 사용자들이 참여할 수 있는 시대로 접어들
게 된다. 이렇게 사용자가 자신의 아이디어를 바탕으로 컨텐츠를 생산하고 다른 사용자와 더불어 컨
텐츠를 공유하게 되는 시대를 일컬어 웹 2.0 시대라 불렀다.
예를 들어 사용자가 직접 자신의 동영상을 제작하고 유튜브 같은 서비스를 통해 다른 사용자와 공
유하므로 사용자가 컨텐츠 생산자이면서 또 다른 소비자가 되는 거대한 동영상 생태계를 이루어 가
고 있다. 이렇게 어떤 서비스를 제공할 수 있는 플랫폼을 기반으로 서비스 제공자가 아닌 일반 사용
자가 자발적으로 콘텐츠를 생산하고, 공유하고, 소비하는 시대를 일컬어 웹 2.0 시대라고 불렀으며
오늘날은 다양한 플랫폼과 인공지능 기술이 만나 혁신적이며 보다 개인화된 서비스를 제공하는 시대
이며 이를 웹 4.0시대로 분류하고 있는 것 같다.

1.3 HTML5의 탄생

2000년대 들어서 1차 웹 브라우저 전쟁에서 승리한 인터넷 익스플로러가 세계 유일의 표준 브라우
저로 자리 잡아 가는 것 같았지만 당시 W3C 회의에서 모질라 재단을 비롯한 일부 웹 브라우저 제
공업체들이 새로운 HTML 표준안을 제시하게 되었고 그로 인해 제 2의 브라우저 전쟁이 시작된다.
이 때 제시한 새로운 표준안이 채택되지 못하자 2004년 6월 반 인터넷 익스플로러 진영의 웹브라우
저 제공 업체(애플, 모질라 재단, 오페라 소프트웨어 등)들이 모여서 새로운 웹 표준 기관인
WHATWG(Web Hypertext Application Technology Working Group)를 설립하였다. 그리고 발
빠르게 새로운 웹 표준인 Web Application 1.0을 제정하여 발표한다. 이와 비슷한 시기에 W3C에
서는 XHTML 2.0을 새로운 표준으로 발표 하였지만 이 XHTML 2.0은 기존의 표준과 너무 다르고
어려웠으며 무엇보다 당시 빠르게 변화하고 있는 웹의 요구를 반영하지 못하였다. 이로 인해 개발자
들로부터 외면당하였으며 결국에는 폐기되었다. 이런 이유로 W3C는 WHATWG의 Web Application
1.0 표준안을 받아들여 새로운 표준으로 채택하게 되는데 이렇게 만들어진 표준안이 바로 HTML5
이다. HTML5는 2012년에 초안이 발표되었고 2014년 10월 28일에 HTML5 버전의 정식 권고안이
발표되었다. 그리고 스마트폰의 빠른 보급으로 N스크린 시대가 도래 되면서 더욱 더 주목 받는 기
술이 되었다. HTML5라는 단어는 마크업 언어만을 의미하는 것이 아니라 웹과 관련된 전반적인 기
술을 의미하고 있다.

 

2. 웹 표준에 필요한 기술 소개

현존하는 모든 웹브라우저는 HTML5를 지원하고는 있지만 화면에 표시되는 것은 모든 웹브라우저가
동일하게 보여지는 것은 아니며 웹브라우저 마다 조금씩 지원하는 부분이 다를 수 있다.
현재 가장 많이 사용되는 PC 운영체제인 Windows 시리즈에 탑재된 인터넷 브라우저를 Windows
버전별로 비교해 보면 이전에 Windows 7과 Windows 8 기반에서 IE 10 버전을 거쳐서 IE 11 버전으로 넘어오면서 

HTML5를 지원하는 부분이 많이 확대되긴 하였지만 결국 IE는 지원이 중단되었다. 

Windows 10으로 넘어오면서 MS 계열의 새로운 웹 브라우저인 Edge가 제공되고 있으므로

우리는 Chrome과 Edge 등의 브라우저를 사용하여 실습하게 될 것이다.

 

2.1 HTML(Hypertext Markup Language)

하이퍼텍스트(Hyper Text)와 마크업(Markup)은 HTML의 중요한 개념으로 하이퍼텍스트는 

문서 내에 존재하는 컨텐츠에 링크 설정이 가능하여 문서가 서로 연결되어 있다는 의미로 실제 웹 문서의
특정 텍스트나 이미지 등을 클릭하면 다른 문서로 연결되어 이동할 수 있게 된다. 

마크업은 문서 내의 특정 내용에 특별히 지시하는 문장을 추가하여 기본 정보에 추가적인 정보를 

표시할 수 있다는 의미로 글꼴의 색상을 지정하거나 특정 내용을 묶어 하나의 문단으로 출력하기 위해 사용되는 

일련의 문자나 기호들을 마크업이라 한다. 

이렇게 기본적인 내용이 화면에 어떻게 출력될지 지정하는 마크업을 태그라고 부른다.

2.2 CSS(Cascading Style Sheet)

스타일 시트는 HTML 태그만 사용해 웹 문서를 구성할 때 화면 배치나 디자인적인 요소를

표현하는 한계를 보완하기 위해 개발된 언어이다.
예전에는 테이블을 이용해 웹페이지 레이아웃을 구성하는 경우가 많이 있었다. 

하지만 요즘은 웹 표준과 웹 페이지에 대한 시맨틱(Semantic) 요소가 대두되면서 

테이블을 사용한 레이아웃 기법은 더 이상 사용하지 않는다. 

또한 테이블 태그를 이용한 기법은 페이지 레이아웃을 변경할 때 많은 시간과 노력이 필요하거나 

아예 다시 만들어야 하는 상황이 빈번히 발생했으나 HTML5와 CSS를 이용한 레이아웃 기법은

HTML 태그를 수정하지 않고 CSS 코드 수정만으로 새로운 레이아웃을 쉽게 적용 할 수 있는 장점을 가지고 있다.
HTML이 문서의 구조(틀)를 정의한다면 CSS는 문서의 디자인적인 요소를 정의(표현)하기 위해 사용한다.

2.3 XML(eXtensible Markup Laguage)

확장 가능한 마크업 언어라는 단어의 의미에서 알 수 있듯이 기존에 존재하지 않는

새로운 마크업 언어를 개발하기 위한 표준이다. 

HTML은 이미 정의된 태그만을 사용하여 문서를 작성해야 하지만
XML은 정해진 태그가 없기 때문에 특정 단체나 프로그래머가 새로운 태그를 정의하여 사용한다.
또한 XML은 화면에 어떻게 표시할 지에 관심을 두지 않고 태그에 의해 데이터에 특정 의미를 

부여함으로써 구조화된 문서를 작성하여 데이터를 교환할 목적으로 설계된 마크업 언어이다.

2.4 Javascript

넷스케이프 커뮤니케이션즈사와 썬마이크로시스템즈사가 함께 개발한 웹브라우저에서 실행되는 

스크립트 언어로 1995년에 네스케이프 2.0에 탑재되고 1996년 IE 3.0에 탑재된 이후

웹브라우저 표준스크립트 언어로 정착되었으며 현재는 모든 주요 웹브라우저에서 지원하는 핵심 스크립트 언어이다.
자바스크립트가 썬마이크로시스템즈와 함께 개발된 언어이기 때문에 썬마이크로시스템즈가 개발한
자바와 아주 밀접한 관계가 있는 것처럼 오해(?)를 하고 있는 사람들이 있는데 자바스크립트와 자바
는 문법이 약간 닮은 것과 둘 다 웹브라우저에서 실행 될 수 있다는 공통점이 있기 하지만

이 두 언어는 전혀 관련이 없는 언어이다.
이제 웹 표준인 HTML5에서 자바스크립트는 HTML5의 API를 다루는 핵심 언어로 자리매김 하였다.
오늘날 자바스크립트의 기술 규격 표준은 

유럽컴퓨터제조자협회(ECMA, European Computer Manufactures Association)에서 담당하고 있으며 

자바스크립트의 표준 명칭은 ECMAScript라고 부른다.
1997년 ECMAScript의 초판이 제정된 후 ECMAScript의 약자인 ‘ES’와 판 번호를 붙여 ‘ES2’,
‘ES3’와 같이 구분했는데 최근에는 ECMAScript가 1년 마다 새로운 버전으로 업그레이드되면서
‘ES5’, ‘ES6’와 같이 부르지 않고 ECMAScript 2015(ES6)와 같이 버전이 제정된 연도를 사용해 

공식 명칭을 사용하는 것으로 변경되었다. 

참고로 2015년에 새로운 문법과 개념이 많이 추가되어 버전이 만들어졌는데 

그래서 ECMAScript 2015를 모던 자바스크립트라고 지칭하는 경우도 있으며

오늘날 모던 웹 브라우저들은 거의 대부분 이 ECMAScript 2015를 지원하고 있다.

2.5 jQuery

자바스크립트 라이브러리(jQuery, Prototype, dojo) 중의 하나로 2006년 존 레식에 의해 공식으로
소개 되었으며 클라이언트 스크립트 언어 즉 자바스크립트를 단순화하여 편리하게 사용할 수 있도록
설계된 브라우저 호환성(크로스 브라우징)이 아주 뛰어난 가장 인기 있는 자바스크립트 라이브러리이다.

2.6. node.js

웹 개발은 크게 프런트엔드(Front-end) 기술과 백엔드(Back-end) 기술로 나뉜다. 

프런트엔드 기술은 웹브라우저를 통해 사용자가 볼 수 있는

웹페이지 디자인이나 버튼 기능 등을 구현하는 기술을 의미한다. 

이에 반해 백엔드 기술은 사용자가 직접 눈으로 볼 수 없고 서버 쪽에 숨겨져 있는 기술이다. 

이 기술은 웹브라우저가 아닌 서버에서 실행되는 프로그래밍 기술로 인터넷을 통해 사용자가
요청하면 그 요청에 따라서 서버에서 동적으로 처리하는 기술을 의미한다. 

그래서 프론트엔드 기술을 화면 단 기술 혹은 클라이언트 사이드(Client Side) 기술이라고 부르며 백엔드 기술을 서버 단
혹은 서버 사이드(Server Side)기술이라 부른다. 

우리가 앞에서 알아본 HTML, CSS, JavaScript, jQuery 등이 대표적인 프런트엔드 기술이며, 

DB나 서버를 다루는 자바 웹 프로그래밍 기술인 JSP, Servlet, SpringFramework 등이 있으며 

자바 외에도 PHP, Python의 Django와 Flask, asp.net 등이 바로 백엔드를 다루는 기술이다.
앞에서도 언급한 것처럼 자바스크립트는 프런트엔드에서 주로 사용된 클라이언트 사이드 프로그래밍 언어였다. 

하지만 node.js가 등장하면서 지금은 백엔드와 프런트엔드 모두에서 사용되는 프로그래밍 언어가 되었다.
이전에 자바스크립트는 웹브라우저에서만 사용할 수 있는 프로그래밍 언어였으며 여러 다른 환경에
서 사용할 수 있도록 다양한 시도가 있었으나 자바스크립트의 실행 속도 문제로 큰 호응을 얻지 못
하다가 2008년 구글이 크롬의 V8 엔진을 오픈 소스로 공개하면서 자바스크립트는 새롭게 도약할
기회를 맞이하게 된다. V8 엔진은 자바스크립트 엔진과는 다르게 자바스크립트가 매우 빠르게 동작
할 수 있는 실행환경을 제공하였다. 이렇게 속도 문제가 해결되자 2009년에 라이언 달(Ryan Dahl)
에 의해서 크롬의 V8 엔진에서 실행되는 node.js가 세상에 공개되었다.
node.js는 크롬 V8 자바스크립트 엔진으로 빌드 된 자바스크립트 런타임이다. 다시 말해 node.js는
자바스크립트로 작성된 프로그램을 실행할 수 있는 실행환경이며 node.js를 이용하면 자바스크립트
를 웹브라우저가 아닌 다른 컴퓨터 환경에서 사용할 수 있게 된다.

2.7 React

리액트는 메타(구 페이스북)에서 개발한 오픈 소스 자바스크립트 라이브러리 이다. 

리액트는 UI 자바스크립트 라이브러리로 싱글 페이지 애플리케이션(SPA, Single Page Application)의 

UI(User Interface)를 생성하는데 특화된 라이브러리이다. 

리액트는 자바스크립트에 HTML을 포함하는 JSX(JavaScript XML)이라는 간단한 문법과 

단방향 데이터 바인딩(One-way Data Binding)을 사용하고 있다. 

또한 가상 돔(Virtual DOM)이라는 개념을 사용하여 웹 애플리케이션의 퍼포먼스를 최적화한 라이브러리이다. 

또한 기본적으로 모듈형으로 개발하기 때문에 생산성이 높아 요즘 많은 인기가 있는 라이브러리이다.

2.8 Ajax(Asychronous Javascript and XML)

서버와 통신하는 자바스크립트 프로그래밍 기법을 통틀어 Ajax라 일컫는다.
이 Ajax는 XMLHttpRequest 객체를 이용해 서버와 클라이언트가 통신하는 기법으로 

동기식, 비동기식이 있으며 기본적으로 Ajax를 구현하는 것은 비동기통신 방식을 의미한다.
XMLHttpRequest는 서버와 통신을 하거나 서버로부터 데이터를 가져와 이용하는 객체를 통틀어
XMLHttpRequest라고 부른다. 예전에 Ajax 프로그래밍을 구현할 때 순수 자바스크립트만을 사용하
였지만 오늘날에는 자바스크립트를 보다 편리하게 사용할 수 있도록 지원하는 jQuery라는 라이브러
리를 사용해 보다 간편하게 Ajax를 구현할 수 있다.

2.9 웹앱, 네이티브앱, 하이브리드앱

웹 앱은 브라우저를 통해 접속하는 모바일 웹 어플리케이션을 일컫는 말이며,

네이티브 앱은 스마트폰 OS환경에서 제공하는 프로그래밍 언어와 SDK를 이용해 제작된 앱으로 

iOS는 Object-C, 안드로이드는 Java 등의 프로그래밍 언어로 제작된 앱을 말한다. 

하이브리드 앱은 웹앱 + 네이티브 앱의결합된 형태로 먼저 웹앱 형태로 개발한 후 

오픈소스 크로스 프레임워크를 이용하여 네이티브 앱 형태로 변환된 앱을 말한다. 

그 동안 많은 하이브리드 앱 프레임워크가 있었으며 최근에 많이 사용하는 프레임워크에는 

메타에서 개발한 React Native, 앵귤러 js와 Vue가 결합된 형태인 IONIC, 구글에서 개발한 Flutter 그리고 니토비(Nitobi)가 개발하여 어도비 시스템즈가 인수한 폰갭이 있으며 이 폰갭을 오픈 소스로 공개한 코도바(Cordova)가 있다.