Web과 HTML

HTML, CSS, 그리고 JavaScript

앞서 프론트엔드와 백엔드를 설명하는 포스팅을 하면서 HTML, CSS, JavaScript에 대해서 따로 설명하지 않고 넘어갔습니다. 이번 포스팅에서는 이들 언어가 어떤 역할을 하는지 그리고 웹과 어떻게 관계하고 있는지에 대해서 알아보겠습니다.

HTML(Hyper Text Markup Language)

: 웹 페이지의 문서를 작성하기 위한 기본 언어(The backbone of the web)

CSS(Cascading Style Sheets)

: HTML 문서가 보여지는 방식을 지정해 둔 스타일 시트

JavaScript

: 개발자와 클라이언트 사이에서 동적인 인터랙션이 일어날 수 있도록 해주는 프로그래밍 언어

그럼 각각의 언어에 대해서 조금 더 구체적으로 알아보겠습니다.

웹에서 사용하는 텍스트, 이미지, 링크 등의 여러 요소를 다루고 표시할 수 있는 언어가 HTML입니다. 즉, 텍스트형식(.txt), 이미지형식(.jpb)과 같이 웹 문서의 형식이 ".html"입니다. 그리고 HTML로 작성된 웹 문서를 사용자에게 보여주는 프로그램이 크롬(Chrome), 사파리(Safari), 인터넷익스플로러(IE) 등과 같은 웹 브라우저입니다.

<다양한 인터넷 브라우저>

1994년, WWW(World Wide Web)의 창시자인 팀 버너스 리(Tim Berners Lee)는 웹의 표준 규격을 논의 및 제안하는 'W3C(World Wide Web Consortium)'라는 단체를 설립하였습니다. 그리고 다음 해에 기존의 HTML 기술을 정비하여 웹에서 사용하는 표준 언어로 HTML2.0을 발표했습니다. 이후 1997년에 HTML4.0이 나오고, 2000년에 XHTML을 발표하였지만, 이때까지는 W3C의 표준안은 힘을 발휘하지 못했습니다.

그러나 몇 년 후, 당시 인터넷익스플로러(IE)의 제작사인 마이크로소프트(MS)사를 제외하고 애플, 모질라, 구글 등 주요 브라우저 제작 업체들은 실질적인 웹 표준 제정에 대한 필요성을 느꼈습니다. 이들은 2004년, WHATWG(Web Hypertext Application Technologies Working Group)를 구성하고 웹 표준에 대해 연구하기 시작했습니다. 결국, 2007년 W3C가 WHATWG를 받아들이며 HTML5 개발의 시작을 알렸습니다. 그리고 2014년 HTML5의 최종 표준안이 발표되었습니다.

기존의 HTML의 경우 자체적으로 동적인 효과를 표현할 수 없었기 때문에 액티브엑스(ActiveX), 플래시(Flash)와 같은 외부 기술을 이용해야 했습니다. 이러한 한계를 극복하고 HTML5에서는 외부 기술에 의존하지 않고 마크업 언어(Markup Language) 선에서 대부분을 해결할 수 있는 방향으로 발전했습니다. 특히 모바일에서 배터리 소모의 문제점을 갖고 있는 플래시를 대체하고, 인터넷 쇼핑이나 뱅킹을 할 때 무수히 설치해야 하는 외부 플러그인을 대체할 가능성을 갖고 있다는 점에서 HTML5를 통한 웹 표준은 매우 중요하다고 할 수 있습니다.

또한, HTML5를 이용하면 전문가들이 사용하는 프로그래밍 언어를 사용하지 않더라도 모바일용 애플리케이션을 만들 수 있습니다. 기존의 애플리케이션은 모바일 OS에 따라 그에 맞추어 개발해야 했습니다. 네이티브 앱(Native App)이라 불리는 이러한 모바일 앱을 만들기 위해서는 아이폰은 iOS에 맞게 Objective-C라는 프로그래밍 언어를 이용해서 개발하고, Android는 Java라는 프로그래밍 언어로 개발해야 했습니다. 하지만 HTML5를 이용한다면 한 번의 제작으로 모든 OS에서 똑같이 실행할 수 있는 웹앱(Web App)이라 불리는 애플리케이션을 제작할 수 있습니다. (물론 네이티브 앱과 비교하여 단점도 많습니다.)

HTML5의 등장 이후 웹은 콘텐츠와 디자인이 확실하게 분리되었습니다. 즉 웹을 구축할 때, HTML로 웹의 전체적인 구조와 기능을 만들고 이를 CSS로 디자인하도록 권장하고 있습니다. 콘텐츠와 디자인의 분리는 웹 표준 외에 웹 접근성 측면에서도 중요합니다. HTML과 CSS의 분리된 구조를 통한 웹 구축은 HTML 페이지에 담겨 있는 콘텐츠를 의미 있는 콘텐츠로 만듭니다. 즉 '컴퓨터가 읽을 수 있는(Semantic)' 웹 페이지가 됩니다.

브라우저를 통해 보이는 웹 페이지의 외형이 같더라도 하나는 콘텐츠와 디자인이 분리되어 구축되어 있고, 다른 하나는 분리되지 않은 웹입니다. 예를 들어 중요한 텍스트가 jpg나 png와 같은 이미지 파일로 되어 있거나 디자인 요소 구현을 위해 여러 이미지가 덕지덕지 붙어있다면 컴퓨터가 읽기 힘들기 때문입니다. 전자처럼 콘텐츠와 디자인이 분리되어 있다면, 시각장애인에게 페이지를 설명해 주거나 데이터를 분석하는 데 매우 효과적입니다. 또한, CSS를 이용한 디자인의 분리는 웹 페이지의 부하를 줄여 반응속도를 높이고 유지보수도 쉽게 만들어줍니다.

HTML5와 CSS3를 통해 콘텐츠와 디자인이 분리된 웹 페이지는 아래 그리과 같은 웹 페이지 구조를 가집니다. 웹 페이지 전체 폴더 아래 페이지의 콘텐츠 정보를 갖고 있는 html파일(index.html)이 있고, 디자인 정보를 갖고 있는 CSS 파일들을 모아 놓은 폴더, 동적 인터랙션 등의 정보를 갖고 있는 스크립트 파일들을 모아 놓은 폴더, 페이지에 사용된 이미지 파일들을 모아 놓은 폴더로 구성되는 것이 기본입니다. (아주 기본적인 페이지 구조로, 실제로는 상황에 맞게 유동적으로 구성됩니다.)

<웹 페이지의 기본 구조>

이처럼 웹 브라우저에서 콘텐츠를 볼 수 있도록 HTML을 사용하고, HTML로 작성된 웹 페이지에 디자인을 입히고 레이아웃을 정리하는 데에는 CSS를 사용합니다. 하지만 이렇게 완성된 웹 페이지는 사용자(Client)가 방문했을 때, 어떠한 동적 작용을 할 수 없습니다. 즉 웹 페이지에 방문자가 동작을 취하더라도 아무런 반응을 하지 않습니다. (정확하게는 상당히 제한적인 동적 작용만이 가능합니다.) 따라서 다른 기술을 사용해서 웹 페이지의 동적 반응을 구현해야 하는데, 웹 페이지가 클라이언트와 상호작용할 수 있게 만들어 주는 언어(기술)가 자바스크립트입니다.

자바스크립트는 다양한 라이브러리(다양한 기능들을 쉽게 구현할 수 있도록 한 함수들의 집합)를 갖고 있는데, 대표적인 것이 바로 제이쿼리(jQuery)입니다. 또한 제이쿼리 외에도 D3, Node.js, AngularJS, React, Vue 등 다양한 라이브러리(또는 프레임워크)들이 개발되고 있습니다.

웹 페이지를 이루고 있는 언어에 대해서 간략하게 알아보았는데, 웹 표준화 작업이 진행되면서 콘텐츠와 디자인 그리고 동작이 구분되었다고는 하나 실제적으로 서로 복잡하게 얽혀 구동되기 때문에 경계가 모호한 부분도 존재한다고 생각됩니다. 한 예로 페이스북이 개발한 리액트(React)는 이전과는 다르게 컴포넌트 중심의 개발을 지향하고 있습니다. 이러한 점을 고려하면, 웹페이지를 기획하고 제작하는 과정에서 콘텐츠, 디자인 그리고 동작을 기본적으로 고려하여 설계하는 것이 중요하다고 생각합니다. 그렇기 때문에 이 세 언어가 어떻게 작동하는 지를 대략적으로라도 파악하고, 시작 단계에서 부터 이러한 속성들을 고려하는 것이 필요하다고 생각합니다.