인간이 발명한 가장 효율적인 전달 수단
textㆍHTMLㆍCSS
일러두기 : ⓐ, ⓑ 등으로 표시되는 것은 주석이다. 흐름을 방해하지 않도록 글의 가장 뒤에 배치한다.
textㆍHTMLㆍCSSㆍJavaSript
열쇠말 : 텍스트, HTML, 하이퍼 텍스트, 마크업 언어, CSS, JavaScript
위키피디아에 따르면 인류가 문자를 사용하게 된 시기는 청동기까지 거슬러 올라간다.ⓐ 글자로 기록하게 되면서 인류의 지식은 축적되고 시간과 공간의 제약을 벗어나 전달될 수 있었다. 예를 들어 우리는 플라톤이 쓴 <대화편>을 통해 멀리(시간적으로, 공간적으로) 그리스의 철학자를 직접 만날 수 있다.
인간의 축적된 지식은 비약적인 기술발전으로 나타나게 되었고 콘텐츠의 유형은 다양해졌다. 특히 통신환경의 극적인 변화로 이제는 고화질의 영화 한 편을 순식간에 내려받을 수 있다. 그러나 여전히 '문자로 읽는 콘텐츠', '텍스트'의 힘은 살아있다.
http://www.ttlnews.com/article/travel_report/5062한 조사기관ⓑ이 2019년 콘텐츠 시장을 예측해보기 위해 조사한 결과를 보면, 전체 콘텐츠 시장에서 동영상이 차지하는 비중이 높긴 하지만 여전히 텍스트 콘텐츠는 22.3%를 차지해 무시하지 못할 지위를 유지하고 있었다. 또 이 조사는 '모든 분야의 콘텐츠'를 대상으로 한 것이어서 만약 뉴스 콘텐츠로 영역을 제한한다면 더 높은 점유율이 나올 것이다. 그런데 왜 그럴까?
텍스트는 가볍고 건너뛸 수 있는 콘텐츠
텍스트 콘텐츠는 정보량에 비해 가볍다. 예를 들어 <거침없는 '팽창' 본능...日 '공격 가능한 국가'로>라는 방송사 리포트를 보자. 앵커멘트 포함 3분 정도 길이인데, 기자의 목소리와 화면이 담긴 동영상 파일(대개 mp4)과 그 기사 내용 텍스트(혹은 스크립트)가 함께 인터넷 페이지에 담겨 유통된다.
이 기사 내용을 텍스트 파일로 바꿔서 크기를 재보았다. 약 3KB 정도(3,151 byte)에 불과하다.
반면 같은 내용을 담고 있는(물론 영상과 음성 같은 다양한 정보가 함께 들어가지만) 동영상 파일(MP4)의 경우 19.9MB(19,900,000 byte)를 차지한다. 6,300배에 달하는 크기다.
텍스트는 동영상이나 사진 등 다른 유형의 콘텐츠와 비교할 때 '공정'의 측면에서도 상대적으로 간단하다. 쉽게 말해 글만 쓰면 된다.
또한 텍스트는 건너뛸 수 있는 비선형(非線型) 콘텐츠이다. 기사의 첫 문장을 읽다가 휙 넘겨서 기사의 마지막 부분으로 가는 것이 얼마든지 가능하다. 신문, 책, 잡지는 물론 디지털 기기로 만나는 콘텐츠도 문자로 되어있다면 다 마찬가지이다.
HTML은 텍스트 콘텐츠가 유통되는 형식이다
그런데, 이렇게 가벼운 콘텐츠인 텍스트도 아무런 가공 없이 디지털 미디어 플랫폼으로 유통되는 것은 아니다. 즉 디지털 미디어 플랫폼에서 텍스트 콘텐츠가 유통되려면 통일된 형식을 따라야 한다.
가장 일반적인 형식은 HTML이다. 위키피디아의 정의는 다음과 같다.
HTML은 하이퍼텍스트 마크업 언어(HyperText Markup Language, 문화어: 초본문표식달기언어, 하이퍼 본문 표식 달기 언어)라는 의미의 웹 페이지를 위한 지배적인 마크업 언어다. HTML은 제목, 단락, 목록 등과 같은 본문을 위한 구조적 의미를 나타내는 것뿐만 아니라 링크, 인용과 그 밖의 항목으로 구조적 문서를 만들 수 있는 방법을 제공한다. 그리고 이미지와 객체를 내장하고 대화형 양식을 생성하는 데 사용될 수 있다.
여기에 나온 말들을 다 이해할 필요는 없다. 딱 두 가지만 이해하고 넘어가자.
첫 번째, '하이퍼텍스트'는 링크를 포함한 텍스트를 말한다. 일반적인 모바일 인터넷 화면을 생각해보자. '인링크'든 '아웃링크'든 당연히 링크가 들어간다. 두 번째, '마크업 언어'란 '미리 약속된 기호를 통해서 문서가 보이는 형식을 나타내 주는 언어'를 말한다. 위 사진에서 보았던 기사 역시 HTML이라는 형식으로 만들어진 웹페이지다.
PC의 경우 인터넷 페이지 위에서 마우스의 오른쪽을 클릭하면 메뉴들이 팝업으로 뜨고 그 메뉴 가운데 '페이지 소스 보기'를 선택하면 아래와 같은 화면이 나온다. 이를테면 <거침없는 '팽창' 본능...日 '공격 가능한 국가'로> 기사를 '해부'해 본 것이다. 여러분도 재미삼아 한 번 해보시라.
아까 HTML과 관련해서 두 가지만 이해하자고 했는데 하나는 하이퍼텍스트, 두 번째는 마크업이었다.
먼저, "<a href="로 시작하는 부분이 하이퍼텍스트이다. 즉 HTML에서는 "<a href="라는 약속된 마크업(markup)을 통해 하이퍼텍스트(링크)를 정의해주고 있는 것이다.
궁금증이 생길 것이다. 왜 똑같은 텍스트 콘텐츠를 이렇게 복잡한 방식으로 보여줘야 하는 것일까?
학교에서 리포트를 제출할 때, 회사에서 문서를 작성할 때 까다로운 상관이나 교수를 만나본 일이 있는가? 보고서를 받는 사람이 내용이 아닌 형식- 글자의 폰트나 크기, 문단을 어떻게 나눴는지, 표를 어떻게 그렸는지 등등 -에 집착하면 같은 보고서를 여러 번 수정해서 제출하는 일이 종종 벌어진다.
HTML이 필요한 이유가 바로 여기에 있다. 텍스트 파일(. txt) 자체에는 이런 폰트나 글자의 크기, 문단 나누기, 표, 그림, 링크 등등의 정보를 담을 방법이 없다. 그래서 하이퍼텍스트 마크업 언어로 표현하기로 사람들이 함께 약속을 한 것이다.
http://html.net/tutorials/css/lesson2.php그런데 사람들이 HTML을 쓰다가 꾀가 났다. 위 그림에서 보는 것처럼 같은 형식(폰트와 문단 등)으로 여러 개의 문서를 만드는데 같은 내용을 매번 반복해서 쓰기가 싫어진 거다.
그래서 딱 한 번만 별도 파일에 써놓고, '문서 스타일은 그 파일을 참고해!'라고 HTML에 딱 한 줄만 써놓기로 했다. 이게 CSS, Cascading Style Sheet이다.
'스타일'을 담당하는 CSS는 반복이 귀찮아 만들어졌다
복잡해 보일지 모르겠지만 아래 그림에서 빨간색으로 되어 있는 부분이 바로 그런 뜻이다. 여러 개의 HTML 파일에 일일이 써놓기가 귀찮아서 'style.css 라는 파일에 써놨으니 알아서 참조하라'는 뜻이다. 그러니까 CSS는 이를테면 파티의 드레스코드를 알려주는 주문인 셈이다.
http://html.net/tutorials/css/lesson2.php내친김에 딱 하나만 더 욕심을 내보자.
CSS라는 말과 함께 자바스크립트(JavaScript)라는 말도 많이 들어봤을 것이다. CSS를 이해했다면 자바스크립트를 이해하는 것도 어렵지 않다. CSS가 HTML로 만들어지는 문서의 '스타일'을 담당한다고 할 때, 자바스크립트는 HTML 문서에서 '움직임'을 담당한다. 아주 단순화한 설명이지만 그냥 딱 그 정도만 알면 된다.
자바스크립트는 '움직임'을 담당한다
예를 들어 아래 사이트에는 3장의 배너가 일정한 시차를 두고 번갈아 노출되는 부분이 있다. 아까처럼 HTML 페이지의 해당 부분을 해부해서 오른쪽에 펼쳐보았다. HTML과 달리 'function'이라는 말과 '( ), { }'가 많이 등장하는 형태는 전형적인 자바스크립트이다.
최근 동향을 보면 뉴욕타임스나 워싱턴포스트 등 디지털 미디어 콘텐츠에서 앞서가는 회사들이 텍스트, 그림, 동영상 등등을 따로따로 유통시키지 않고 한데 묶어 종합적으로 서비스하는 경우가 많다.
기후변화를 다룬 아래 콘텐츠를 한 번 보시라.
이런 디지털 미디어 콘텐츠를 이해하기 위해서 HTML, CSS, JavaScript를 모두 완벽히 알아야 하는 것도 아니고 또 그럴 필요도 없다. 훌륭한 '웹 퍼블리셔'의 영역이다.
다만 개념들을 이해하고 있어야 무엇이 가능하고 무엇이 불가능한지 생각할 수 있다. 특히 이런 콘텐츠를 만들어야 할 기획자라면 더더욱.
| 주석 |
