환영합니다!
웹이 가야할 길
지난 5개월간 웹 표준과 웹 접근성에 관한 이야기를 했다. 웹 표준이란 어떤 것이며 현재 국내의 상황은 어떤지, 왜 지켜져야 하는지, 어떻게 해야 웹 사이트를 더 잘 만들 수 있는가에 관한 내용이었다. 올해 중순까지 미래의 웹에 관한 여러 컨퍼런스나 세미나, 토론회 등이 있었고 많은 전문가들이 Web 2.0, 웹 표준, RIA 등에 관해 이야기하며 미래에 웹이 어떻게 변화할 것인지, 미래를 만들어갈 기술이 어떤 것인지를 말해왔다.
원론으로 돌아가는 듯 하지만, 웹이라는 도구가 무엇을 위해, 어떤 일을 하기 위해 이렇게 많은 변화를 맞고 있는지를 이야기하기 전에 먼저 그 시작을 되짚어 보는 일이 필요할 것 같다.
웹은 왜 만들어졌나
흔히 웹의 역사를 말하면 Tim Berners-Lee 경이나 정보 공유를 좀 더 쉽게 할 수 있는 수단으로써 만들어졌다는 이야기를 하게된다. 이것은 웹이 고안되기 이전의 정보 저장을 위한 수단이 종이처럼 시간적, 공간적 제약을 받는 매체를 사용하는 하는 것이라고 보기 때문이다. 물론 컴퓨터가 등장하고 디스크라는 저장 매체가 나왔지만, 인터넷이 등장하기 이전에는 저장 용적의 확장 이상이 될 수 없었던 것이다.
인터넷이라는 통신 수단은 여러 가지 방식을 통해서 이러한 시간적, 공간적 제약을 뛰어넘을 수 있는 방법을 제공하였고, 그 중 하나가 현재 널리 쓰이고 있는 웹이다. 이미 알고 있는 사실이겠지만, 이 웹이라는 수단은 기본적으로 Markup 언어를 통해서 정보를 쉽게 공유할 수 있도록 하는데 초점을 맞추고 있다.
정보의 공유라는 것은 불특정 다수에 대한 무조건적인 공개만을 의미하는 것은 아니다. 물론, 그런 용도로 사용되는 경우도 많이 있지만, 특정 대상이나 그룹만을 위해 공개할 수 있도록 하는 것 역시 공유의 범주에 속할 수 있다. 이를 위해 웹을 제작하는데 사용되는 많은 방법들은 보안 등의 개념을 포함하고 있기도 한다. 그래서, 정보를 담기위한 그릇으로써 Markup 언어만이 아니라, 서버 사이드에서 사이트를 제어하는 언어들이 많이 사용되고 있다. 또, 웹이 Telnet이나 FTP, Usenet 등 여타의 인터넷 서비스 방식에 비해 보다 시각적으로 인식하기 쉬운 형태라는 점 때문에 다른 프로토콜을 이용하는 서비스를 끌어오기도 하였다.
이런 요소들이 현재의 웹을 만들어냈으며, 단순히 문서의 저장고 역할만이 아니라 사회적, 상업적 가치를 생산하는 공간으로 웹을 진화시켰다고 할 수 있다.
Web 2.0
2005년 하반기부터 Web2.0이라는 말이 유행처럼 거론되고 있고, 현재에는 관련 내용이 이미 많이 알려져있다. 특정한 기술이라기 보다는 진화하고 있는 웹의 특징을 간추린 이 단어는 많은 사람들이 그 실체에 대해 의문을 표시하고 있는 대상이기도 하다. 실제로 Web 2.0은 다양한 해석을 낳고 있으며, 일부 전문가들이 말하는 ‘거품이 빠져버린 IT 시장을 살려내기 위한 상업적 단어’만은 아니라 할 수 있다.
UCC의 본래 의미가 무엇이었든, 현재 대한민국에서 UCC라는 말을 못들어본 사람은 별로 없을 것이다. 흔히 인터넷이라고 부르는 웹은 이미 한국 사람들의 생활에 깊이 파고 들었고, 어떤 면에서는 오프라인에서 일어나는 일보다 빠르고 폭넓게 영향을 미치고 있는 것이다.
Web 2.0이 어떤 식으로 해석이 되던, 기본적으로 진보하는 웹에 대한 것을 다루고 있다는 점에 대해서는 이견을 달 수 없을 것이다. 이는 고착화되었던 웹 콘텐트와 서비스 모델이 어떻게 변화하는지를 보여주고 있으며, 웹이 더 많은 장치에서 더 다양하게 이용될 수 있다는 점을 본격적으로 보여주고 있다.
가까워진 미래, 유비쿼터스
90년대 후반에 폭발적으로 사용자가 증가한 휴대폰부터, MP3, PMP, 휴대용게임콘솔, UMPC, 노트북에 이르기까지 사람이 기계를 휴대하고 다니는 일이 흔해졌다. 게다가 이런 모바일 장치들은 단일 용도가 아닌 다용도 기기(Conversions)로 변화하고 있다.
고성능의 전자장비와는 무관해보였던 자동차의 경우도 마찬가지다. GPS 기술은 길을 안내해주는 차량용 네비게이션으로 등장하였고, 버스의 위치를 확인하여 언제 원하는 버스를 이용할 수 있는지를 안내해주는 시스템(BMS:Bus Management System)이 사용되고 있다.
최근 TV의 아파트 광고는 버튼으로 제어하는 주거 환경에 초점을 맞추고 있으며, 필요에 따라 투명도를 변경할 수 있는 스마트 유리, 집 안팎의 전화를 통합해서 사용할 수 있는 시스템, 가정 내의 전자 제품을 하나로 통합해서 제어하는 홈 서버 시스템 등 우리의 생활을 좀 더 편리하고 윤택하게 만들어줄 기술이 하나씩 세상에 모습을 드러내고 있다.
예를 들어, 과거에는 단방향 시청만을 해왔던 TV는 현재 IPTV라는 이름의 양방향 서비스로 변화하고 있다. 이는 방송국에서 송출되는 프로그램만이 아니라, 사용자가 원하는 프로그램을 원하는 때에 볼 수 있게 해주는 서비스다. 단순히 수신 중인 채널 중에서 골라서 보는 것이 아니라, 리모콘 등의 입력 장치를 통해서 원하는 프로그램을 직접 선택하여 다운로드 받아 시청하는 형태이다. 이는 나아가 쇼핑 채널을 시청하다가 리모콘의 버튼으로 바로 상품을 구매한다던지, 프로그램의 출연자 정보를 TV 화면상에서 바로 검색해볼 수 있는 시스템을 예고하는 것이라 할 수 있다.
한가지 예를 더 들어보자면 운전 중에 사용하는 네비게이션 프로그램이 기존에는 목적지까지의 도로만을 찾아줬지만, 이제는 같은 목적지라도 이용할 도로의 상황을 파악하여 더 빠르게 목적지로 갈 수 있는 길을 알려주는 서비스가 나타났다. 이는 기본적으로 제공되던 정보와 함께 관련 정보를 함께 적용하여 사용자가 더 유용하게 기능을 이용할 수 있도록 하는 기술이다.
현재에는 단방향에서 양방향으로, 단일 정보에서 관련 정보를 포함한 형태로 변화하고 있지만, 가까운 미래에 더욱 복잡한 정보를 사용자가 원하는 형태로 가공하여 제공하는 시대가 올 것임을 예견하고 있는 것이다.
기계가 인터넷을 쓰는 세상
그 동안 우리가 웹 사이트를 만들어왔던 방식은 사람이 인식하기 쉬운 형태로 만드는 것이었다. 그래서 웹 사이트의 외형적인 디자인을 중시해왔다. 물론, 웹 사이트 이용의 주체는 사용자이며 사람이 인식하고 사용하기 쉬운 형태로 만드는 것은 예나 지금이나 중요한 과제다. 그러나, 현재는 기계가 쉽게 인식하고 그 내용을 파악할 수 있도록 만드는 것이 전보다 중요해지고 있다. 그것은 바로 앞에서 이야기한 유비쿼터스 시대가 다가오고 있기 때문이다.
CSS와 뗄 수 없는 웹 디자인
웹과 디자인
디자인이란 인간 생활에 필요한 조형 활동이다. 디자인은 숟가락 하나에서부터 초대형 빌딩까지 사람이 사용하는 모든 물건에 적용되는 것이다. 그래서 디자인에는 미학적인 면과 함께 그 실용적인 면이 반드시 강조된다. 웹 디자인 역시 마찬가지라 그 아름다움과 더불어 사용자 경험에 근거했을 때 얼마나 페이지를 가독성이나 사용성이 높게 구성하느냐가 매우 중요해지는 것이다. UI나 UX가 웹 디자인에서 대두되는 이유는 바로 웹 페이지가 예술품이 아니라 사용했을 때 인간의 생활이 더 편리해지는 하나의 도구로 인식되고 있기 때문이다.
웹이 인간의 도구라는 점을 굳이 장황하게 설명할 필요는 없을 것이다. 다만, 그 도구가 어떤 용도로 사용되고 있는지는 짚어볼 필요가 있다. 2006년 한국정보문화진흥원의 조사에 따르면 우리 나라 사람들이 웹을 이용하는 가장 큰 목적이 정보나 자료를 찾는데 있는 것으로 나타났다. 사람들이 웹을 정보를 쉽게 얻을 수 있는 곳으로 인식하고 있다는 증거라 하겠다. 그런데도, 국내 웹에 올라와 있는 정보들은 형태적으로는 그럴 듯해도 구조적으로 정리되지 않은 경우가 훨씬 많아서 단일 웹 페이지 이외에서 그 페이지의 정보를 재활용하거나 기계적으로 내용을 파악하기 어렵다.
웹 페이지를 더욱 보기 좋게
웹 페이지를 구성하는데 필요한 많은 도구가 있지만, CSS는 웹 사이트의 디자인을 해주는 아주 중요한 도구라고 할 수 있다. CSS는 기본적으로 혼자서 사용될 수는 없는 언어이다. HTML과 같은 Markup 언어가 있어야만 동작하며, 이는 CSS의 역할이 Markup 언어를 보조하는 것이라는 점을 분명히 알려준다. HTML이 웹 페이지의 뼈대를 만들어준다면, CSS는 그 뼈대 위에 장식을 해주는 역할을 한다. 그래서 HTML이 어떻게 작성되어 있느냐에 따라 CSS를 사용하는 방법이 달라지게 된다.
예를 들어, 기존에 흔히 하던대로 table 태그만을 이용해 웹 페이지를 작성한다면, 각각 다른 영역과 구성 요소에 굉장히 많은 종류의 클래스를 사용하여 각 영역을 구별하고, 별도의 속성을 지정해줘야 한다. 이는 콘텐트 간의 구분을 지어주는 요소가 없기 때문이다.
반대로 6월호에서 소개한 방식으로 웹 표준을 지켜서 HTML을 작성한다면 사용해야 하는 클래스는 굉장히 적어지고 HTML 코드 역시 더 간결해진다. 이는 HTML 태그가 CSS를 적용해야 하는 지점을 명확하게 구별해주기 때문이라 할 수 있다.
웹 디자인은 구조 디자인
아래에 나올 선택자의 종류를 자세히 살펴보면 알 수 있겠지만, 웹은 문장이나 그림을 나열하는 것이 아니라 정보를 구조화해서 배치할 수 있도록 만들어져 있다. Cascading Style Sheet라는 이름에서 Cascading(계층적)이라는 말이 바로 이런 점을 그대로 드러내고 있다. 그래서 CSS는 HTML 문서의 상하 구조 순서와 요소에 따라 그 속성을 상속할 수 있다.
일례로 많이 쓰고 있는 바와 같이 body 태그에 CSS로 글자 크기를 지정할 경우, body 안에 들어가는 요소의 글자도 같은 속성을 상속받게 된다. 일부의 태그는 경우에 따라 상위 요소의 속성을 그대로 상속받지 않기도 한다. CSS에서 상속은 매우 중요한 특징이며, 이로 인해 CSS는 많은 부분을 중복하여 사용하지 않아도 사이트의 스타일을 지정할 수 있게 된다. 이런 이유 때문에 HTML에서 상하 구조를 잘 설계해서 작성하는 것이 중요해지는 것이다.
Selector
HTML의 구조에 따라 CSS는 어떤 부분을 어떻게 꾸밀지를 결정할 수 있고, Selector(선택자)라는 도구가 이를 이용할 수 있게 해준다. 흔히 사용하는 클래스 역시 이 Selector의 한 종류에 불과하다.
Element Selector(요소 선택자)
요소 선택자란 HTML Element인 태그를 선택자로 사용하는 경우이다. 예를 들어 아래와 같이 CSS를 사용한다면, 이 CSS가 적용되는 문서에서 P 태그가 쓰인 모든 곳의 글자 색상은 검정색이 될 것이다.
p { color:black; }
ID Selector(아이디 선택자)
특정 ID가 부여되어있는 요소에 대해 속성을 적용하게 된다. CSS에서 ID는 # 부호를 이용하여 구별한다.
#MENU { border:1px solid #333; }
<h2 class="menu">내용</h2> <p class="menu">내용</p>
윗 줄은 CSS의 코드이고 아랫줄은 HTML의 코드이다. 클래스와 사용하는 방법은 유사하지만, HTML 문서 내에서 동일한 ID는 중복 사용할 수 없다.
Class Seleotor(클래스 선택자)
특정 class에 해당하는 모든 요소에 속성을 적용한다. Class는 . 부호를 이용하여 구별한다.
.menu { background:#EEE; }
ID와 class가 다른 점이라면, 동일한 ID는 문서당 한번만 사용할 수 있지만, class는 동일한 이름을 여러 번 사용해도 된다는 점이다.
Contextual Selector(문맥 선택자)
문맥 선택자란 페이지의 구조에 따라 태그나 ID, 클래스 등을 상위 요소부터 차례대로 찾아나가는 방식이다. 이 때 문맥 선택자임을 나타내기 위해 요소와 요소 사이에 공백 문자를 넣어주게 된다.
HTML은 구조적인 문서를 만든다.
HTML과 콘텐트
웹이 정보의 공유를 원활하게 하기 위해 만들어졌다는 점 때문에, HTML을 비롯하여 웹 브라우저에서 구동되는 마크업 언어들은 기본적으로 텍스트 포맷으로 작성된다. 이는 MS Word나 한글 파일과 같은 바이너리 형식과는 달리 대단히 개방적이기 때문에 어떤 플랫폼이나 프로그램에서도 읽어들이기 쉽다는 장점을 갖고 있다. 물론, 브라우저라는 해석기가 이 HTML 파일을 좀 더 보기 좋게 담아주기는 하지만, HTML 파일은 기본적으로 간단한 텍스트 편집기 만으로도 그 내용을 읽어낼 수 있다는 뜻이다.
웹 사이트에서 콘텐트란 말 그대로 페이지에 담아야할 내용이다. 이는 문서 형태를 정하는 서식이나 문서에 관한 정보를 말하는 것이 아니라, 사용자에게 전달되어야할 내용 그 자체를 말하는 것이다. 이러한 콘텐트의 형식에는 텍스트나 이미지 등이 있으며 이를 좀 더 세분화하면 일반 텍스트와 표, 이미지, 멀티미디어 등이 있겠다.
HTML 문서는 이런 콘텐트를 좀 더 구조적으로 작성할 수 있도록 만들어진 언어인 것이다. 따라서 콘텐트를 직접 담는 부분(Body)이 아닌 곳에서는 문서 자체에 대한 정보나, 콘텐트의 서식에 관한 것들을 지정할 수 있도록 만들어져있다. 똑같은 문서를 작성하는 도구지만 HTML이 MS Word와 다른 이유는 파일 포맷만이 아니라, 그것이 포함하는 정보의 내용이 다르기 때문이다.
Word와 같은 워드프로세서 프로그램들은 일반적으로 콘텐트만이 아니라 콘텐트의 형태를 정의하는 서식 정보를 함께 포함하여 파일로 저장하게 된다. 그러나 HTML은 기본적으로 콘텐트의 내용만을 저장하며, 서식 정보 등은 외부 파일을 참조하도록 만들어져 있는 것이다. 만약 HTML을 Word와 같은 도구로 사용해 본다면 그 기능에 얼마나 제약이 있는지 쉽게 알 수 있을 것이다.
물론, 낮은 버전의 HTML에서는 서식을 지정하는 속성을 태그에 사용할 수 있도록 하기도 했다. 하지만 그것은 W3C에서 표준안을 제작할 때 의도했던 바라고 하기 보다는, 좀 더 새로운 방향으로 확장을 꾀했던 브라우저 제조사들의 무분별한 확대 해석 때문이라고 할 수 있다. 실제로 서식을 직접적으로 지정하는 몇몇 태그들은 W3C의 아이디어가 아니라 브라우저 제조사에서 만들어졌으며, 이를 사용자들이 더 많이 사용하게 되면서 표준안에 포함되게 되었던 경우라 할 수 있다.
이렇게 탄생한 태그나 속성들 때문에, 문서를 제작한 사람들은 처음의 의도와는 다르게 브라우저마다 문서가 다르게 보이는 결과에 부딪힐 수밖에 없었다. 새로운 기술과 시장 지배에 대한 욕심이 오히려 사용자의 선택권을 제한하거나 사용성을 떨어뜨려 버린 것이다. 실제로 현존하는 여러 브라우저들은 똑같은 HTML 문서를 처리하는데 서로 다른 방법을 사용하고 있다.
문서가 구조적이어야 하는 이유
문서 제목은 그 문서가 담고 있는 정보가 어떤 내용인지를 독자가 손쉽게 파악할 수 있도록 도와준다. 일반적으로 대제목이 소제목보다 크게 표시되는 이유는 강조의 정도에 따라 어떤 것이 더 많은 부분을 포함하고 있는지를 관습적으로 설명할 수 있기 때문이다. 이런 이유에서 소제목이 대제목을 포함하는 것은 말이 안되는 일이 된다.
이렇듯 상위 요소와 하위 요소의 등급을 확실히 하고, 해당 요소에 포함되는 내용을 명확하게 구분해서 정리하는 것이 바로 구조화라 할 수 있다. 문서 구조화를 통해서 얻을 수 있는 이점은 무엇이 있을까?
인식의 용이
앞서 설명한 바와 같이 내용의 상하 등급이 분명하면, 이를 읽는 사람들도 좀 더 손쉽게 내용을 파악할 수 있게된다. 내용과 내용 사이의 구별이 쉬워지는 것은 말할 것도 없고, 어떤 것이 중요한지 아닌지를 더 알기 쉬워지는 것이다.
재활용 가능한 데이터로써 콘텐트
웹 사이트의 콘텐트란 파일 형식의 데이터로 볼 수도 있다. 이는 HTML 파일이 단순히 문서 형태로 사람의 눈에 인지되기 위한 존재만이 아니라, 가공을 통하여 프로그램 간에 주고 받을 수 있는 데이터로 사용될 수도 있는 것이다. 이 때 파일 내의 정보가 잘 짜여진 구조를 가지고 있다면, 단순히 파일 단위의 데이터가 아니라 태그를 통해 구별할 수 있는 작은 단위의 정보를 활용할 수도 있게 될 것이다.
검색의 효율성 제고
우리가 검색 엔진을 이용할 때에는 특정 키워드나 몇 개의 키워드를 조합하여 결과를 얻곤 한다. 많은 검색엔진이 그렇지만 이 때 나오는 검색 결과를 보다보면 그 키워드가 페이지의 제목인 경우보다 내용 중의 일부분, 그것도 문장 중에 연속된 형태로 나오는 경우보다 떨어져있는 단어를 각각 찾아주는 경우를 더 많이 볼 수 있다. 이는 검색 엔진이 문서 전체를 검색해서 해당하는 키워드가 있는 경우를 모두 찾아내기 때문이다.
만약 검색엔진이 페이지를 처음부터 끝까지 찾는 것이 아니라 제목 중심으로 검색을 해준다면 어떨까? 앞서 이야기한 바와 같이, 문서의 제목이란 문서가 담고 있는 내용을 압축적으로 전달해준다. 문서의 시작점부터 끝점까지를 다 읽는 것과, 제목만 먼저 읽는 것 중에 무엇이 더 빠를지는 명확하다. 어쩌면, 해당 키워드와 비슷한 의미의 단어가 사용된 제목을 찾아줄 여유도 생기지 않을까?
구조를 만드는 방법
꼭 HTML 형식이 아니라고 하더라도 여러분은 많은 문서를 작성하고 있을 것이다. 아마 Word 프로그램으로 문서를 만든다고 생각하면 이해가 쉬울 것이다. 처음부터 끝까지 똑같은 글자 크기로 줄한번 바꾸지 않고 쓰는 문서란 이미 다른 사람에게 회람할 수 있는 형태가 아닐 것이다. 마찬가지로, 문단의 내용이 변경될 때는 단락을 바꾸고, 내용이 다른 것을 다루기 시작할 때는 다음 내용의 제목을 먼저 써주고 다음 단락을 쓰면 된다.
이렇게 문서를 작성하다보면 우리가 일반적으로 트리 구조라고 부르는 형태가 전체적으로 만들어진다. 문서 전체를 대표하는 모든 내용은 상위 요소를 가지게 되는 하위 요소의 형태가 되는 것이다. 이렇게 문서를 구조화 하는 형태를 DOM(Document Object Model)이라고도 하며 이를 잘 지키는 것은 스타일시트나 스크립트를 활용할 때에도 매우 중요한 역할을 한다.
이를 그림으로 표현하면 위와 같은 형태가 되며, 이를 태그를 이용하면 아래 그림처럼 만들 수 있다. 내용 칸에는 필요에 따라 다양한 태그를 이용하여 여러 내용을 넣을 수도 있고, 내용간의 구별을 위해 구분자를 사용할 수도 있다.
구체적인 내용을 다루는 태그 안에는 강조나 첨삭, 설명을 위한 태그들이 사용될 수 있으며 이는 사용자가 내용을 이해하는데 도움을 줄 수 있다. 필요한 속성을 적절히 사용하는 것 역시 마찬가지로 내용의 이해에 도움이 된다.
RSS
