1장 웹프로그래밍과 데이터시각화

1.1 인터넷과 웹

1946년 미국 펜실베니아대학의 존 에커트와 존 모클리에 의해 처음 개발되었던 현대 디지털 컴퓨터는 1960년대 이후 현실에 응용되기 시작하여 지난 반세기 동안 엄청난 발전 을 이룩하고 우리 사회의 많은 변화를 가져왔다. 특히 1980년대 이후 컴퓨터와 컴퓨터의 연결이 시작되고, 개인용 컴퓨터가 활성화되고, 유무선 정보통신 기술이 발전되면서 최근에는 전 세계의 거의 모든 컴퓨터가 유무선 인터넷을 통하여 연결되어 있다. 2000년대 이후에는 성능이 우수한 컴퓨터가 소형화 되면서 전화기와 통합된 스마트폰이 탄생되어 우리 사회에 획기적인 변화를 가져왔다. [표1.1]은 1960년대 이후 컴퓨터와 정보통신 기술의 발전을 간략히 요약하였다.

2000년대 전 세계의 대형컴퓨터와 개인용 PC, 스마트폰 등이 연결되면서 활성화된 World Wide Web은 인터넷 기능 중의 하나로 웹문서를 쉽게 주고받을 수 있게 도와주는 검색 시스템이다. World Wide Web을 줄여서 www로 약칭하고 (web)이라 부른다.

방대한 네트워크를 이용하여 효율적으로 정보를 주고받기 위하여 컴퓨터 관련 학자나 회사들은 표준화된 웹문서(web document) 문법인 HTML을 만들고 이를 해독할 수 있는 웹브라우저를 만들게 되었다. HTML은 계속 진화해서 2008년 월드와이드 웹 컨소시엄(W3C)은 국제 표준(ISO)으로 HTML5 버전을 만들었다. 웹브라우저는 시장에서 여러 제품이 많은 부침을 하다가 현재는 데스크탑 PC의 경우 구글의 Chrome이 독보적인 시장 점유를 하고 그 뒤를 사파리, 엣지 등이 따르고 있다.

웹은 컴퓨터의 기능을 서버(server)와 클라이언트(client)로 나누어 웹 서버는 문서, 이미지, 동영상 등의 데이터를 저장하고 클라이언트는 서버로부터 데이터를 다운받아 사용자에게 보여준다. 사용자의 데이터를 서버로 업로드할 수도 있다. 인터넷에는 많은 웹서버 소프트웨어를 탑재한 웹서버가 있다. 웹서버에는 많은 웹페이지와 데이터베이스를 가지고 웹사이트가 만들어진다. 클라이언트는 크롬 같은 웹브라우저를 통해 웹서버에 접속하게 된다.

2000년대 이후에는 스마트폰의 보급이 활성화되어 우리나라의 경우에는 대부분의 성인이 스마트폰을 보유하고 있다. 스마트폰은 내장 컴퓨터에 강력한 프로세서를 장착하고, 대용량 메모리를 가지고 있으며, 깨끗하고 선명한 화면, 카메라 장착, 편리한 운영체제 및 다양한 응용 애플리케이션(앱)을 가지고 있다. 스마트폰은 전자우편 및 인터넷 검색 등이 가능하며, 문서, 사진 및 동영상 등을 여러 사람들이 공유할 수 있고, 사용자 간의 의사소통과 정보 공유가 가능하여 개인 또는 그룹의 사회적 관계를 생성하고 강화해주는 SNS(Social Network Service) 도구가 되었다.

현재는 컴퓨터와 우리 주변의 모든 사물에 센서와 통신기능을 내장하여 인터넷으로 연결(Internet of Things, IoT)시키며, 인간보다 우수한 지능을 가진 인공지능(Artificial Intelligence, AI) 컴퓨터, 그리고 빅데이터를 이용하여 초예측(Big Data Mining)을 하는 4차 산업혁명이 진행되고 있다.

1.2 웹프로그래밍

인터넷의 홈페이지(Home Page)는 개인이나, 회사, 단체 등이 다양한 목적으로 다양한 사용자에게 원하는 정보를 인터넷을 통해 알리는 웹문서로 이루어져 있다. 홈페이지의 웹문서는 HTML(Hyper Text Markup Language)이라는 언어를 이용하여 만든다. 웹브라우저(Web Browser)는 웹문서를 각 컴퓨터에서 동일한 모양으로 볼 수 있도록 도와주는 소프트웨어로서 현재 MS의 엣지(Edge), Google의 크롬(Chrome)이 많이 이용된다.

웹프로그래밍(Web Programming)이란 웹브라우저에서 공통적으로 사용하는 HTML 웹문서를 제작하고, 이 문서를 CSS라는 언어를 이용하여 모양을 꾸미며, 자바스크립트(JavaScript)라는 언어를 이용하여 웹브라우저를 통해 정보 제공자와 사용자가 의사소통을 할 수 있도록 도와주는 기능을 부여하는 프로그래밍 작업을 의미한다.

이 책의 2장에서 3장까지는 HTML에 대해서 설명하고, 4장은 CSS, 5장에서 8장까지는 자바스크립트에 대해서 설명한다.

1.2.1 HTML

최근 개인, 회사, 관공서에서 사용하는 문서는 ᄒᆞᆫ글, MS사의 Word, 파워포인트 등 컴퓨터 소프트웨어를 이용하여 제작되는데 이를 전자문서(electronic document)라 부른다. 이러한 전자문서들은 소프트웨어가 제공하는 여러 가지 도구를 이용하여 글자의 모양, 크기, 색 등을 지정하고 그림 등을 삽입하여 제작한다.

전자문서는 인터넷으로 상대방과 주고 받을 수는 있으나 두 상대방이 반드시 같은 소프트웨어를 사용하여야 한다. 이런 불편함을 해소하기 위하여 모든 컴퓨터에서 공통적으로 사용될 수 있는 문서형식이 필요하게 되었다. 인터넷으로 다른 컴퓨터에 접속하여 서로가 정보를 공유하는 홈페이지의 제작은 HTML(Hyper Text Markup Language)이라는 공통된 문서 형식을 이용하는데 이를 웹문서(web document)라고 부른다.

하이퍼 언어(Hyper Language)는 프로그램을 순차적으로 실행하는 선형 언어(Linear Language)에 상대되는 언어를 뜻하는데 링크(link)를 통해 실행 순서가 자유로운 언어라는 뜻이다. 텍스트 마크업(Text Markup)은 텍스트로 문서의 형식을 지정하는 명령문을 의미한다. 즉 HTML은 텍스트 문장이나 이미지 등에 실행순서가 자유로운 적당한 명령문을 주어 전체 문서를 웹 브라우저에서 잘 보일 수 있도록 꾸며주는 표준 언어로서 웹 사이트를 만들려면 이 언어를 배워야 한다.

HTML은 1990년에 Tim Berners-Lee가 서로 다른 대학에 있는 과학자들이 연구 자료를 쉽게 공유하기 위해 개발하였는데 그 후 HTML 2.0(1995년), HTML 3.2(1997년), HTML 4.01 (1999년), XHTML(2000년), HTML5(2014년)로 진화되었다.

HTML5는 가장 최신의 HTML 표준 버전으로 여러 가지 웹브라우저에서 서로 다른 형태의 플러그인으로 삽입되었던 애니메이션, 그래픽, 음악, 영화 등 멀티미디어를 표준화 된 태그로 브라우저에서 쉽게 볼 수 있도록 해 준다. 과거 버전에 대비한 HTML5의 특징을 요약하면 다음과 같다.

1.2.2 웹브라우저와 URL

웹브라우저(Web Browser)는 HTML 언어로 작성된 웹문서를 번역하여 화면에 보여주는 응용 프로그램으로 1990년 Tim Berners-Lee에 의해 처음 개발되었다. 1994년 넷스케이프(Netscape)라는 편리한 웹브라우저가 출현하여 선풍적인 인기를 끌었는데 그후 마이크로소프트사의 윈도우 운영체제에 끼워 배포한 IE(Internet Explorer)에 선두자리를 내주었다. 현재는 구글(Google)의 크롬(Chrome)이 전 세계에서 제일 많이 이용되고 있고 그 뒤를 인터넷 익스플로러(Internet Explorer), 파이어폭스(Firefox), 엣지(Edge), 사파리(Safari), 오페라(Opera) 등이 따르고 있다.

웹 브라우저는 서버에 저장된 웹 페이지를 가져오기 위해(웹 문서를 열기 위해) 웹서버와 http(hyper-text transfer protocol)로 통신한다. http를 이용해 웹 페이지를 가져올 뿐 아니라 웹 서버에 정보를 송신하기도 한다.

대부분의 웹브라우저는 HTML 외에 JPEG, PNG, GIF 이미지 포맷들을 지원하고, CSS, 자바스크립트, 쿠키, 그밖에 플러그인을 지원한다.

여러 가지 웹브라우저는 최신 HTML5의 명령어를 모두 지원하고 있지는 않아서 HTML5로 만든 파일을 화면에 보여줄 때 약간씩 다르게 보여준다.

모든 웹브라우저에는 자신이 보여줄 HTML형식의 파일 디렉토리(file directory)나 인터넷 상의 주소인 URL(Uniform Resource Locator)을 입력할 수 있는 주소창이 있다. 주소창에 디렉토리명이나 URL 주소를 입력하면 웹브라우저는 인터넷 네트워크를 이용하여 해당 사이트를 찾아서 이 사이트에 연결된 HTML 파일(대개htm 파일)을 화면에 보여준다. 일반적으로 URL의 형식은 다음과 같다.

접속방법://정보검색시스템.서버이름.기관이름

예) 숭실대학교의 URL은 http://www.ssu.ac.kr 이다.

– 접속방법은 http(또는 https), ftp 등 자원에 접근할 프로토콜 이름을 사용한다.

접속방법 다음에는 구분자인 “:”을 적고, IP 혹은 도메인 정보가 필요한 프로토콜

이라면 “//”를 추가로 적는다.

– 정보검색시스템은 www를 일반적으로 많이 사용하는데 World Wide Web의 약자로서

인터넷상의 정보를 하이퍼텍스트 방식과 멀티미디어 환경에서 검색할 수 있게 해주는

정보 검색 시스템이다.

– www는 1989년 스위스의 CERN 연구소에서 전 세계적으로 정보를 공유하기 위해 만든

소프트웨어이다.

– 서버이름은 회사/기관명이나 웹사이트의 상징적인 이름이다(예: ssu).

– 기관이름은 미국 회사인 경우에 com, 기관인 경우에 org를 사용하고 국적을 표시하지

않으나, 다른 나라는 기관 이름과 국적을 같이 사용한다(예: ac.kr).

1.2.3 CSS

HTML 문서의 각 요소(element)에 스타일을 지정해 놓으면 쉽게 다른 색이나 모양으로 그 요소를 바꿀 수 있는데 이때 사용되는 것이 계단형 스타일시트(Cascading Style Sheet; CSS)이다. CSS는 ᄒᆞᆫ글이나 워드의 스타일과 유사한 것으로서 CSS를 활용하면 여러 웹페이지 문서의 형식을 일순간에 바꿀 수 있어 시간이 절약된다.

CSS는 HTML 문서를 화면이나, 종이 그리고 다른 미디어에 어떻게 보여줄 것인지 디자인, 레이아웃, 색, 폰트 등의 스타일을 지정해주는 언어이다. CSS로 만든 스타일은 HTML 문서 내부에서도 지정할 수 있지만 대개 외부 파일(확장자 css)로 지정하여 복잡하고 많은 HTML 문서를 작성할 때 많이 이용된다.

HTML 문서의 모양을 가꾸어주는 CSS 언어도 최근에는 CSS3로 진화되었다.

1.2.4 자바스크립트

자바스크립트(JavaScript)는 1995년 넷스케이프(Netscape Communications Corporation)사에서 개발되어 Netscape 2.0 브라우저에 최초로 탑재된 웹프로그래밍 언어이다.

자바스크립트는 C나 Java 언어와 유사하지만 작성이 쉽고 호환성도 좋아 시스템에 구애받지 않고 사용할 수 있다. 자바스크립트는 단순히 순서대로 보여주는 명령의 집합인 HTML을 여러 가지 조건에 따라 집행 순서를 바꾸어 주거나, 비슷한 명령을 반복시킬 수 있는 프로그래밍 언어이다.

자바스크립트 프로그램은 컴파일 과정 없이 브라우저 내부의 인터프리터(interpreter)에 의해 바로 실행된다. 자바스크립트는 일반 프로그래밍 언어와 유사하게 상수, 변수에 관한 문법이 있고 if, for, while 등의 제어문을 가지고 있으며, 버튼 등 여러 가지 입력폼에 대한 이벤트 처리를 할 수 있게 하여준다.

자바스크립트는 HTML 파일 내부에 <head>나 <body> 부분에 삽입할 수도 있고, 별도의 파일(확장자가 js)에 저장한 후 HTML 파일에서 불러올 수도 있다. 여러 개의 자바스크립트를 HTML 문서에 넣을 수도 있다. 자바스크립트는 HTML 문서에서 다음 기능을 부여하고자 할 때 사용된다.

– HTML 문서의 내용 및 모양의 제어

– HTML 입력폼에 사용자가 입력한 값의 처리

– 브라우저의 제어

– 웹 서버와의 통신

1.3 데이터시각화

컴퓨터와 정보통신 기술의 발달로 정보화 시대가 된 결과로서 우리 주변에는 수많은 데이터가 만들어졌다. 그 중에는 과거에는 상상할 수 없었던 크기의 데이터들이 만들어 졌는데 이를 빅데이터(big data)라 부른다. 예를 들면 스마트폰의 SNS 데이터, 인터넷의 웹로그(web log) 데이터, 은행거래 데이터 등이 있다.

빅데이터가 가지고 있는 정보를 알아내어 현실에 응용하는 기법을 데이터마이닝(data mining)이라 부른다. 데이터마이닝의 첫 단계는 데이터의 전반적인 형태, 구조, 특성을 조사하는데 이를 탐색적 데이터 분석(exploratory data analysis)이라 한다. 탐색적 데이터 분석의 시작은 그래픽을 이용하여 데이터의 특징이나 정보를 요약하는 데이터시각화(data visualization)이다. 단지 한 데이터를 그래픽으로 표현하는 것도 넓은 의미의 데이터시각화라고 할 수 있지만 이 책에서는 탐색적 데이터 분석의 관점에서 데이터시각화를 설명한다. 그래픽을 보는 이에게 어떻게 정보를 잘 전달할 수 있을지를 설명한 분야를 인포그래픽(infographic)이라 부르는데 이것은 다른 분야이므로 참고 문헌을 참조하기 바란다.

<그림1.1>은 이 책에서 연구할 D3라는 자바스크립트 라이브러리의 웹사이트 https://d3js.org에서 보여주는 다양한 데이터시각화의 예이다.

<그림 1.1.1> 웹사이트 https://d3js.org에 있는 D3 예제

 

<그림 1.1.1 (계속)> 웹사이트 https://d3js.org에 있는 D3 예제

데이터시각화는 응용이 다양해서 모든 주제를 이 책에서 다룰 수는 없다. 여기서는 빅데이터 분석의 핵심인 통계 그래픽을 이용한 데이터시각화에 초점을 맞추었다.

데이터를 HTML과 자바스크립트 등 웹프로그래밍을 이용하여 그래픽을 그린 후 홈페이지 등을 통해 이용자에게 쉽게 전달할 수 있다. 이를 웹데이터시각화(web data visualization)라 부른다. 이 책에서는 웹데이터시각화를 위해 9장에서 HTML 그래픽스에 대해 설명하고, 10장에서 js 라이브러리를 이용한 다이나믹 데이터시각화를 설명한다. 11장과 12장에서는 통계 데이터의 시각화에 대해 설명하고 13장에서는 계층적 데이터, 네트워크 데이터, 지리적 데이터 등 고급 데이터시각화에 대해서 설명한다.