지금까지 문서 범위에 관한 작업을 하였다. 앞에서 언급했듯이 문서는 문서 머리(document head)과 문서 본문(document body)으로 구분된다. 문서 머리에 관한 작업은 형식적 측면의 작업, 문서 본문에 관한 작업은 내용적 측면의 작업으로 볼 수 있다. 사용자에게 개념(idea) 또는 개요(overview)를 먼저 알리는 것은 아주 중요하다. 아주 두꺼운 책을 머리말 없이 읽는다면 읽는 내내 답답할 것이다. 교사가 수업 시간에 공부할 주제를 미리 알리지 않는다면 학생들은 맥락을 제대로 파악하지 못할 것이다. 이처럼 구체적인 내용을 전달하기 전에는 개괄적인 내용을 미리 알려서 사용자가 개념을 손쉽게 파악하도록 도와야 한다. 책이나 논문이 그렇듯이, 본문이 있으면 머리(말)이 있게 마련이다. 온라인 문서도 마찬가지다.
문서 머리는 문서 제목, 메타데이터 등으로 구성되며, HEAD 요소에 의해 표시된다. 문서 머리를 통해 제공되는 내용들은 웹 문서에 나타나지 않기 때문에 사용자가 직접적으로 경험할 수는 없다. 다만, 검색엔진, 콘텐츠 관리 프로그램 등 기계적 매커니즘을 통해 사용자가 간접적으로 경험할 수는 있다.
<문서 머리 작성하기>를 위한 표준 기술
HEAD 요소
카테고리 | 해당 사항 없음 |
콘텐츠 속성 | 글로벌 속성 |
지원 브라우저 |      |
HEAD 요소는 문서 머리(document HEAD)을 표시한다. 이 요소는 브라우저가 문서 본문(document body)을 처리하기 전에 미리 알아두어야 할 정보, 즉 문서에 대한 메타데이터(metadata)를 포함하고 있다. 메타데이터는 문서를 식별하기 위한 정보, 문서에 대한 소개 정보, 검색엔진의 색인 작업에 도움을 줄 수 있는 정보, 그 밖에 반드시 제공되어야만 하지만 문서 본문에 둘 수 없는 정보 등으로 구성된다.
HEAD 요소는 메타데이터를 표현하기 위한 TITLE 요소, STYLE 요소, BASE 요소, LINK 요소, META 요소, SCRIPT 요소, NOSCRIPT 요소, COMMAND 요소를 포함하는데, 이 중에서 제목을 표시하기 위한 TITLE 요소는 필수 요소이므로 반드시 포함되어야 한다.
<head><title>...</title></head>예제 |
문서 머리를 HEAD 요소로 마크업하였다.
<!DOCTYPE html><html lang=”ko”><head></head>UX Design ~ (중략) ~ 사용자 경험의 순환구조
</html>TITLE 요소
카테고리 | Metadata content |
콘텐츠 속성 | 글로벌 속성 |
지원 브라우저 | |
TITLE 요소는 문서 제목(document TITLE)을 표시하기 위한 요소이다. 중복 지정은 허용되지 않는다. 모든 HTML 문서는 반드시 TITLE 요소를 필요로 하지만, TITLE 요소가 없더라도 브라우저는 HTML 문서의 파일명을 보여주거나 “제목없음”으로 적당히 처리해서라도 HTML 문서를 보여주려고 노력한다. 이 때문에 엉터리 제목을 가진 웹 문서가 양산되고 있다. TITLE 요소는 문서 머리에 둔다. 이곳에는 다양한 종류의 메타데이터가 있는데, 그 중에서 가장 중요한 것은 TITLE 요소다. 따라서 TITLE 요소를 반드시 제공되어야 하며, 사용자에게 도움을 줄 수 있도록 의미 있게 작성되어야 한다.
<title>문서 제목</title>제목은 내용을 대표하거나 식별하기 위하여 붙이는 문서 이름(document name)이다. 제목과 내용은 실과 바늘처럼 함께 따라다닌다. 물론 제목 없는 내용도 있다. 그러나 특정 목적이나 대상을 고려하여 작성한 내용은 반드시 제목이 있다. 제목 없는 논문, 제목 없는 책은 상상할 수 없듯이 말이다. 마찬가지로 웹 문서도 논문이나 책처럼 발행(publishing)의 개념을 갖기 때문에 반드시 제목이 있어야 한다.
웹은 연결된 환경이다. 이곳에서 제목은 내용을 대표하거나 식별하기 위한 이름을 넘어 또 다른 의미를 지닌다. 정보 자원이 서로 연결되기 위해서는 우선 그 위치가 어디에 있는지 알 수 있어야 한다. 이것은 해당 정보 자원으로 접근하기 위한 프로토콜과 위치 정보로 구성되어 있는 URL(Uniform Resource Locator) [24]에 의해 이루어지고 있다. URL이 브라우저를 위한 정보라면 문서 제목은 사람을 위한 정보다. 정보 자원마다 고유한 URL을 부여하듯이 문서 제목도 서로 달라야 한다. 이름이 같으면 식별이나 호칭 상의 어려움이 있듯이 문서 제목이 같으면 목적지를 잘못 선택할 수 있고 정보 자원에 대한 식별이 어려워 진다. 이름을 유일무이하게 짓기 어렵듯이 서로 다른 문서 제목을 부여하는 것 역시 매우 어려운 일이다. 그러나 세상에서 하나뿐인 이름을 짓기 위해 노력하듯이 웹 문서도 하나뿐인 제목을 가질 수 있도록 노력해야 한다.
문서에 제목을 부여하는 이유는 형식적인 것이 아니라 내용적인 것이다. 따라서 문서 제목이 부여되었는가 여부보다는 문서 제목이 얼마나 유용한가 여부가 관건이다. 잘못된 제목을 제공할거라면 오히려 제공하지 않는 편이 더 낫다. 문서 제목은 기계적으로 짓는 것이 아니라 의미 있게 짓는 것이 중요하며, 다음과 같은 사항을 고려하여 작성할 필요가 있다.
-
본문 내용을 대표할 수 있어야 한다. 제목은 형식적인 요소가 아니다. 사용자는 제목을 통해 본문을 읽어야 할지 말아야 할지 판단한다. 예를 들어, 두 개의 제품을 비교하는 내용을 담고 있다면, “비교하기”보다는 “A상품과 B상품의 비교”라는 제목이 본문 내용을 이해하는데 더 도움된다. 특히, 시각 장애를 가진 사용자에게 제목은 그 어떤 정보보다도 중요한 정보이다. 검색엔진은 제목이 본문 내용을 대표한다는 가정 하에 입력된 검색어가 제목에 있는지 여부를 가장 먼저 살핀다. 제목이 본문 내용을 대표하지 않을 경우, 사용자는 원하지 않은 본문 내용을 읽느라 시간과 에너지를 낭비할 수 밖에 없다는 점을 알아야 한다.
-
가능한 짧고 간결해야 한다. 제목은 브라우저의 제목 표시줄, 즐겨찾기의 문서 제목, 검색엔진의 검색 결과에 나타난다. 상황에 따라 제목의 일부분만 노출될 수 있으므로 긴 제목은 제 구실을 하지 못할 수도 있다. 제목을 몇 글자 이내로 제한한다는 규칙은 없지만 굳이 불필요하게 긴 제목을 제공할 필요도 없다. 따라서 제목은 가능한 짧고 간결하게 작성하는 것이 좋다. 그렇다고 의미를 왜곡하면서까지 무리하게 짧고 간결한 제목을 고집할 필요는 없다.
-
문서를 식별할 수 있어야 한다. 문서 제목은 수 많은 문서들 가운데 특정 문서를 식별하기 위한 공식적인 장치이다. 수천, 수만 장의 문서에 같은 제목을 부여하고 있는 웹 사이트를 심심치 않게 만날 수 있다. 이런 경우, 시각 장애를 가진 사용자는 제목만으로 문서를 식별할 수 없기 때문에 일일이 본문 내용을 읽어야만 나름의 판단을 내릴 수 있다. 이것은 엄청난 시간과 에너지를 요구하는 일이다. 시각 장애를 갖고 있지 않더라도 서로 다른 문서에 같은 제목을 부여하면 생각하지 못했던 불편함이 발생한다. 가령, 여러 개의 창을 동시에 열어 놓고 작업하는 사람은 제목 표시줄에 있는 제목을 통해 특정 작업을 식별하는데, 같은 제목을 부여하면 일일이 창을 활성화시킨 다음 내용을 확인해야만 한다. 또한 제목은 즐겨찾기의 문서 제목으로도 이용되는데, 같은 제목을 부여하면 즐겨찾기 리스트가 제 기능을 발휘할 수 없게 된다.
예제 |
문서 제목을 TITLE 요소로 마크업하였다.
<!DOCTYPE html><html lang=”ko”><head><title>UX DESIGN</title></head>UX Design ~ (중략) ~ 사용자 경험의 순환구조
</html>BASE 요소
카테고리 | Metadata content |
콘텐츠 속성 | 글로벌 속성, href, target |
지원 브라우저 | |
BASE 요소는 문서의 기준 URL(document BASE URL)을 표시한다. 문서 내에는 여러 개의 링크가 제공될 수 있는데 이 링크들이 같은 위치를 참조하고 있다면, BASE 요소를 통해 기준 URL을 지정하여 본문 영역의 링크들을 상대 링크(relative link)로 표현할 수 있다. 상대 링크로 작성하면 매번 전체 경로(full-path URL)로 작성하지 않아도 되기 때문에 그만큼 코드가 간결해지고 문서의 파일 크기도 줄어든다.
물론 BASE 요소를 지정하지 않더라도 얼마든지 상대 링크로 작성할 수 있다. 가령, ‘A’ 문서에 있는 링크가 같은 서버에 있는 문서를 참조할 경우, BASE 요소를 지정하지 않더라도 상대 링크로 작성할 수 있다. 그런데 ‘A’ 문서에 있는 링크가 다른 서버에 있는 문서를 참조할 경우, 상대 링크를 사용하면 상대 링크의 기준이 ‘A’ 문서가 있는 서버가 되기 때문에 잘못된 링크가 된다. 따라서 상대 링크의 기준을 ‘A’ 문서가 있는 서버가 아닌 다른 서버로 변경해야 하는데, 이럴 때 BASE 요소가 유용하다.
아래 예제에서 “이벤트”라는 문서는 상대 링크인 “event.html”로 표시되었는데, 이 링크는 문서 영역에 있는 BASE 요소에 의해 “http://www.example.com/info/event.html”이라는 URL을 가지게 된다.
<head><title>UX DESIGN</title><base href=http://www.example.com/info></head><body><a href=”event.html”>이벤트</a></body>BASE 요소는 기본 href 속성과 target 속성을 지정할 수 있는데, 이 속성은 문서 전체에 영향을 주기 때문에 브라우저가 TITLE 요소를 처리한 다음 곧바로 BASE 요소를 처리할 수 있도록 문서 머리 영역의 앞 부분에 두는 것이 원칙이다. BASE 요소는 말 그대로 ‘기준’(base)에 대한 정보를 지정하는 것이므로 하나의 문서에는 하나의 BASE 요소만 둘 수 있다. 따라서 여러 개의 BASE 요소가 있을 경우, 브라우저는 맨 처음에 있는 BASE 요소만 처리하고 나머지는 무시한다.
예제 |
문서의 기준 URL을 ”http://www…example.com/info”로 지정하였고, 이것을 BASE 요소로 마크업하였다.
<!DOCTYPE html><html lang=”ko”><head><title>UX DESIGN</title><base href=”http://www.example.com/info”></head>UX Design ~ (중략) ~ 사용자 경험의 순환구조
</html>LINK 요소
카테고리 | Metadata content |
콘텐츠 속성 | 글로벌 속성, href, rel, media, hreflang, type, sizes |
지원 브라우저 | |
LINK 요소는 다른 문서 또는 외부 소스와의 링크(LINK)를 표시한다. ‘link’는 말 그대로 ‘연결’의 의미를 갖고 있지만, A 요소처럼 다른 문서를 참조하는 것(hyperlink)이 아니라 외부 소스를 연결하여 현재 문서를 좀 더 효과적으로 처리하는 데 사용된다.
가령, 다른 언어로 작성된 번역 버전은 필요할 때만 제공하면 되므로 문서 내부에 굳이 포함시키지 않아도 된다. 이럴 때는 번역 버전을 별도의 문서로 만들어 둔 다음, LINK 요소를 이용하여 연결시키면 마치 문서 내부에 작성한 것과 같은 효과를 얻을 수 있다.
스타일 시트도 마찬가지다. 여러 버전의 스타일 시트가 있다면, 버전별로 문서를 만들어 둔 다음 LINK 요소로 연결시켜 스타일 시트를 적용할 수 있다. 이렇게 하면 HTML 문서와 스타일 시트 문서를 별도로 관리할 수 있기 때문에 보다 효율적으로 문서를 관리할 수 있다.
rel 속성
rel 속성은 현재 문서와 링크된 문서와의 관계(relationship)를 지정한다. 속성값은 alternate, author, help, icon, license, next, pingback, prefetch, prev. search, stylesheet를 가질 수 있다.[25]
-
- rel=”icon” : 현재 문서를 표현할 수 있는 아이콘(icon) 파일 주소를 참조하기 위한 속성값이며, LINK요소에서만 사용할 수 있다. 이 아이콘을 ‘파비콘(favicon)’[26]이라고 부르는데, 사용자가 특정 사이트나 문서를 신속하게 식별할 수 있도록 도움을 준다. 감각 능력이나 매체에 구애 받지 않도록 아이콘은 시각 아이콘(visual icon), 청각 아이콘(auditory icon) 등 다양한 형식으로 제공할 수 있으며, 이를 위해서는 type, media, size 속성을 지정해야 한다.
<link rel=”icon” href=”favicon.png”>
-
- rel=”pingback” : 핑백 서버(pingback sever)의 주소를 참조하기 위한 속성값이며, LINK 요소에서만 사용할 수 있다. 어떤 사람이 A 문서를 B 문서에 링크했을 때, 이 사실을 A 문서의 저작자에게 자동으로 알려주는 것을 ‘핑백(pingback)’이라고 한다. 즉, A 문서의 저작자는 자신의 문서를 어느 문서에서 링크하는지 여부를 알기 위해 핑백 서버를 만들고 LINK 요소의 ‘pingback’ 속성값을 이용하여 링크 여부에 대한 알림 정보(notification)를 자동으로 받을 수 있도록 요청할 수 있다.[27]
<link rel=”pingback” href=”pingback server”>-
- rel=”prefetch” : 특정 문서, 이미지 등을 우선적으로 인출하여(prefetch) 브라우저가 기억하도록 지정하는 속성값이며, LINK, A, AREA 요소에서 사용할 수 있다.[28] 사용자가 현재 문서를 가까운 미래에 다시 방문할 가능성이 크다면 저작자는 브라우저가 현재 문서를 기억하도록 힌트를 줄 필요가 있다. 이 힌트는 ‘prefetch’ 속성값에 의해 표현되며, 이 속성값은 지정된 문서 URL을 브라우저 캐시(cache)에 저장하도록 만든다. 이렇게 저장된 문서는 그렇지 않은 문서보다 더 빠르게 로딩될 수 있다.
<link rel=”prefecth” href=”http://www.example.com/search\_results.html”>-
-
- rel=”search” : 현재 문서에 대한 검색 인터페이스(search interface)를 지정하는 속성값이며, LINK, A, AREA 요소에서 사용할 수 있다. 웹에는 아주 많은 콘텐츠가 있고, 이 콘텐츠를 효율적으로 찾기 위해서는 검색엔진을 이용할 수 밖에 없다. 검색엔진이 모든 종류의 콘텐츠를 찾을 수 있는 것은 아니다. 예컨대, 플래시나 동영상 형식으로 만들어진 콘텐츠는 검색엔진이 찾지 못하거나 찾기 힘든 콘텐츠다. 이것은 현재의 웹이 보편적인 검색 환경을 갖지 못하고 있다는 것을 의미한다. 보편적인 검색 환경은 검색엔진의 특성이나 콘텐츠 형식에 구애 받지 않고 원하는 콘텐츠를 찾는 것이다. 이러한 환경은 기술적 발전이 있어야만 구현할 수 있다. 그런데 기술적 발전이 없더라도 현재 수준에서 검색엔진과 콘텐츠가 서로 의사소통될 수 있다면 지금보다는 훨씬 더 풍부한 검색 결과를 얻을 수 있다. 이를 위해서는 서로 교환될 수 있고 서로 이해될 수 있는 표준 형식의 검색 인터페이스(search interface)가 필요하고, 이것을 XML 문서 형식으로 정의하려는 움직임이 있다.[29] LINK 요소의 rel 속성을 ‘search’로 지정하고 검색 인터페이스로 작성된 XML 문서를 href 속성으로 지정하면 검색엔진이 현재 문서를 색인(indexing)할 수 있게 된다.
-
<link title=”content search results” rel=”search” type=”application/opensearchdescription+xml” href=”http://example.com/search.xml”>-
-
-
- rel=”stylesheet” : 외부 스타일 시트(external stylesheet)를 지정하는 속성값이며, LINK 요소에서만 사용할 수 있다. 스타일 시트를 HTML 문서에 직접 작성하지 않고 외부에 두는 경우, LINK 요소를 통해 외부 스타일 시트(external style sheets)를 불러올 수 있다. 스타일 시트를 HTML 문서에 직접 작성하면 문서의 파일 크기는 커지지만 외부 파일을 불러오기 위한 HTTP 요청은 줄어든다. 그런데 같은 종류의 스타일 시트를 반복적으로 사용할 경우에는 스타일 시트를 외부 파일로 작성한 다음 링크 방식으로 재활용하는 것이 훨씬 효율적이다. 이렇게 하면 HTML 문서를 직접 수정하지 않고 외부에 있는 스타일 시트의 수정만으로 문서의 표현 방식을 간단하게 수정할 수 있다. 특히, 브라우저의 캐시(cache) 기능에 의해 한 번 요청한 스타일 시트는 추가적인 HTTP 요청 없이 재활용할 수 있으므로 스타일 시트가 외부에 있는 것이 오히려 문서 로딩 속도를 향상시킬 수 있다. 이와 같은 여러 가지 장점 때문에 저작자는 스타일 시트를 외부 파일로 작성하며, 이에 대한 정보를 rel=”stylesheet”로 알린다. 브라우저가 문서의 본문을 어떻게 표현할 것인지 우선적으로 판단할 수 있어야 하므로 스타일 시트에 대한 정보는 문서 머리에 있어야 한다.
-
-
<html><head><title>…</title><base href=“http://www.example.com/info”><link rel=”stylesheet” type=”text/css” href=”desktop.css”></head><body></body></html>예제 |
외부 스타일 시트를 참조 방식으로 본문 영역에 적용되도록 하였고, 이것을 LINK 요소로 마크업하였다.
<!DOCTYPE html><html lang=”ko”><head><title>UX DESIGN</title><base href=”http://www.example.com/info”><link rel=”stylesheet” type=”text/css” href=”desktop.css”></head>UX Design ~ (중략) ~ 사용자 경험의 순환구조
</html>META 요소
카테고리 | Metadata content |
콘텐츠 속성 | 글로벌 속성, name, http-equiv, content, charset |
지원 브라우저 | |
META 요소는 메타데이터(METADATA)[30]를 표시한다. 메타데이터는 문서에 관한 정보를 말하는데, 어떤 정보로 구성되어야 하는 가에 대한 규칙은 딱히 정해진 바 없다. 일반적으로 제공자(author), 저작권(copyright), 키워드(keyword), 언어(language) 등 문서의 성격을 파악하는데 도움을 줄 수 있는 정보가 포함된다. 이러한 정보는 사람보다는 기계(브라우저, 검색엔진 등)를 위한 것이다. 책을 읽기 전에 책 표지, 목차, 머리말을 먼저 읽듯이, 브라우저나 검색엔진도 내용을 처리하기 전에 메타데이터를 먼저 처리하면 그만큼 작업의 효과성과 효율성을 높일 수 있게 된다. 이러한 효과성과 효율성의 혜택은 사용자에게 돌아가므로 메타데이터는 어쩌면 사용자를 위한 정보라고도 볼 수 있다.
여하튼 메타데이터는 사용자가 읽어야 할 필요가 없으므로 문서 상에는 노출되지 않는다. 그리고 반드시 지켜야 하는 메타데이터 표준은 아직 마련되어 있지 않아서 어떤 정보를 메타데이터로 제공해야 할 것인지 여부는 저작자의 판단에 따른다. 메타데이터는 문서 본문보다 먼저 처리되어야 하므로 META 요소는 문서 머리에 위치하며, META 요소는 하나의 메타데이터만 표시할 수 있기 때문에 여러 개의 메타데이터를 제공할 경우 META 요소도 여러 번 표시해야 한다.
charset 속성
charset 속성[31]은 문자 세트(character set)를 지정한다. 문자 세트는 사용 언어를 표현하기 위해 필요한 모든 문자를 모아둔 것이다. 여기에는 기호, 공백 등도 포함된다. 문자 세트는 추상 문자(abstract character)에 대한 부분을 설명한다. 문제 세트는 여러 개의 인코딩을 가질 수 있다. HTML 문서를 정확하게 렌더링하기 위해서는 어떤 문자 세트를 사용하고 있는지 브라우저가 알고 있어야 한다. 문자 세트는 레퍼토리(repertoire)와 코드 위치(code positions)로 구성된다. 레퍼토리는 추상 문자의 집합이고 코드 위치는 레퍼토리에 있는 문자 참조(character references)[32]를 위한 정수의 집합이다. 컴퓨터는 코드 위치를 통해 문자를 식별한다. 가령, ASCII 문자 세트의 경우, 코드 위치가 65는 레퍼토리에 있는 문자 ‘C’를 가리킨다.
문자 인코딩(이하 ‘인코딩’)은 문자 세트를 컴퓨터에서 사용하기 적합한 형식으로 변환(coding)하는 것이다.[33] 즉, 문자 세트를 기계가 이해할 수 있는 형식으로 만드는 규칙이다. 이 규칙에 따라 하나의 문자 세트는 여러 개의 인코딩을 가질 수 있다. 브라우저가 인코딩을 정확하게 알아야만 HTML 문서를 제대로 해석하여 문자로 표현할 수 있는 것이다.
모든 HTML 문서는 반드시 인코딩 방식을 선언해야 하며, 이 선언은 문서 당 한 번만 이루어져야 한다. 물론 인코딩 방식을 선언하지 않더라도 브라우저가 알아서 HTML 문서를 제대로 렌더링할 수 있다. 그렇지만 모든 브라우저가 이런 능력을 갖고 있는 것은 아니기 때문에 인코딩 방식을 선언하는 것이 원칙이다. 인코딩 방식은 매우 다양하며, 브라우저가 모든 인코딩 방식을 이해할 수 있는 것은 아니다. 따라서 인코딩 방식을 선언했다고 하더라도 브라우저가 이해할 수 없는 방식이라면 문자 처리가 제대로 이루어지지 않을 수 있다. 인코딩 방식을 선언하지 않으면 브라우저는 문자 세트를 utf-8이나 utf-16으로 인코딩하며, 브라우저가 문서의 문자 인코딩을 결정할 때는 다음과 같은 우선순위를 고려한다.[34]
- Content-Type 필드의 HTTP “charset” 파라미터
- META 요소의 http-equiv에 의한 Content-Type과 charset 속성
- 특정 요소의 charset 속성
과거에는 인코딩 방식을 선언하려면 2개의 속성과 3개의 속성값을 작성해야 했다. 그러다 보니 저작자들이 신중하게 작성하지 않고 복사하여 작성해야 하는 불편함이 있었다(copy & paste). 이렇게 작업하다 보면 잘못된 선언이 생길 수 있으므로 저작자가 직접 작성하는 것이 중요하다. 그래서 브라우저가 기본값으로 처리할 수 있는 http-equiv=”content-type”, content=”text/html”을 생략하였다. 결과적으로 HTML5에서의 인코딩 방식 선언은 아주 간단해 졌다.
- HTML4.x: <meta http-equiv=”content-type” content=”text/html; charset=utf-8”>
- HTML5: <meta charset="utf-8">
http-equiv 속성
http-equiv[35] 속성은 HTTP 헤더와 같은 값(the EQUIValent of HTTP header field)을 지정한다. 웹은 클라이언트-서버 방식(client-server model)으로 데이터를 처리하며, 클라이언트와 서버 사이의 통신 규약은 HTTP(hypertext transfer protocol)다. 웹은 HTTP 프로토콜을 통해 클라이언트(브라우저)는 서버에 요청하고, 이 요청에 대해 서버가 응답하는 방식으로 데이터를 주고 받는다. 이 때 주고 받는 데이터 단위를 HTTP 메시지(http message)라고 부르며, 이 HTTP 메시지는 HTTP 헤더, 바디, 트레일러(trailer)로 구성된다. 통신회수와 전송 데이터를 줄이기 위해 클라이언트와 서버는 HTTP 메시지의 바디(body)를 처리 전에 HTTP 헤더를 먼저 처리하기 때문에 저작자가 적절한 HTTP 헤더를 제공하면 클라이언트와 서버 사이의 작업 효율성을 증가시킬 수 있다.
HTTP 메시지의 구조
HTTP Header |
Body |
Trailer |
http-equiv 속성은 다음과 같은 속성값을 갖는다.
-
http-equiv=”content-type” : 콘텐츠 타입(content type)[36]을 지정한다. 이것은 인코딩 선언 상태(encoding declaration state), 즉 문자 인코딩 방식을 지정하는 것이며, charset 속성의 대체 형식이다. 문자 인코딩 방식에 대한 선언은 한 번만 이루어져야 하므로 charset 속성이든 http-equiv 속성이든 하나만 사용해야 한다.
- http-equiv 속성에 의한 문자 인코딩 지정:
<meta http-equiv="content-type" content="text/html; charset=utf-8">
- charset 속성에 의한 문자 인코딩 지정:<meta charset=”utf-8”> -
default-style: 기본 스타일 시트(default style)를 지정한다. LINK 요소에 의해 여러 종류의 스타일 시트가 정의되어 있는 경우, 기본적으로 적용될 스타일 시트를 지정하는 것이다. LINK 요소의 title 속성값을 content 속성으로 지정하며, 해당 LINK 요소의 스타일 시트가 기본 스타일 시트가 된다.
<meta http-equiv="default-style" content="phone"><link href=”phone.css” rel=”stylesheet” title=”phone”><link href=”desktop.css” rel=”stylesheet” title=”desktop”>-
refresh: 문서 새로고침(refresh)[37] 을 지정한다. 속성값은 숫자 값으로 지정되며, 이 값은 초 단위의 시간 주기를 의미한다. 이 때 URL을 지정하면 새로고침과 동시에 해당 URL에 있는 문서로 자동 이동한다. 이것은 사용자에게 예기지 않은 상황을 경험하게 만들거나 또는 사용자가 자동 전환 자체를 인식할 수 없는 상황을 만들기 때문에 사용자 측면을 고려한다면 권장하기 어려운 기술이다.[38] 만약 URL을 지정하지 않으면 현재 문서가 다시 로딩된다.
- 60초 후에 다른 문서로 이동:
<meta http-equi=”refresh” content=”60; url=refilled.html”>
- 60초 후에 현재 문서를 다시 로딩:<meta http-equiv="refresh" content="60">
name 속성
name 속성은 메타데이터 이름(name)을 지정한다. 이 속성으로 메타데이터의 이름을 지정했다면, content 속성으로 메타데이터의 용도와 성격을 지정한다. 즉, name 속성과 content 속성이 한 쌍으로 작성되는데, name 속성에는 이름, content 속성에는 그 값을 작성하는 것이다.
앞에서 언급했던 것처럼 메타데이터 표준이 별도로 마련되어 있지 않지만, 중요도가 높거나 자주 사용하는 메타데이터는 아래와 같이 name 속성값이 정해져 있다.
- application-name: 웹 애플리케이션 이름(the name of the Web application)을 지정한다. 웹 애플리케이션이 아닌 경우에는 이 속성값을 사용할 수 없으며, 문서 내에서 한 번만 지정할 수 있다.
<meta name=”application-name” content=”Gmail”>- author: 저작자 이름(author)[39]을 지정한다.
<meta name=”author” content=”홍길동”>- description: 문서 설명(description)을 지정한다. 검색엔진은 이 문서 설명을 검색 결과로 보여준다. 문서 내에서 한 번만 지정할 수 있다.
<meta name=”description” content=”신간 UX DESIGN에 관한 소개 웹 사이트”>- generator: 문서 작성에 사용한 저작 도구(generator)를 지정한다. 저작자가 저작 도구를 사용하지 않고 직접 작성한 경우에는 이 속성값을 사용하지 않는다.
<meta name=”generator” content="Dreamweaver CS 5.0">- keywords: 키워드(keywords)를 지정한다. 이 키워드는 문서 내용과 관련 있는 단어로 작성되며, 콤마(‘,’)를 이용하여 복수의 키워드를 제공할 수 있다. 문서마다 다르겠지만, 일반적으로 문서는 많은 양의 정보를 담고 있다. 정보가 많다 보니 정보를 읽는데 소요되는 시간이 만만치 않다. 이것은 사람이나 기계 모두를 힘들게 만든다. 그래서 논문이나 기사처럼 많은 양의 정보를 담고 있는 문서는 개요(overview)나 전문(lead)를 제공하여 개괄적인 이해를 돕는다. 웹 문서의 경우에도 문서 머리의 META 요소를 이용하여 키워드(keyword)나 설명(description)을 제공할 수 있다. 이 키워드와 설명은 웹 문서에 나타나는 것이 아니라 검색엔진와 같은 사용자 도구가 문서 내용을 미리 예측할 수 있도록 돕는다. 물론 스팸 키워드(spam keyword)처럼 관련 없는 키워드와 설명이 임의적으로 포함될 수 있기 때문에 구글(google)과 같은 검색엔진은 메타데이터의 키워드와 설명를 제한적으로 참고하거나 아예 참고하지 않는다.
<meta name="keywords" content="신간, UX DESIGN, 디자인, 사용자 경험">content 속성
content 속성은 메타 정보의 내용(content)을 지정한다. 이 속성은 단독으로 사용될 수 없으며, name, http-equiv 속성과 함께 사용된다. 저작자 정의에 의해 새로운 메타데이터가 생길 수 있고, 자주 사용하는 메타데이터라 할지라도 저작자 의도에 따라 다른 용도로 사용될 수 있다. 따라서 name 속성을 사용하여 메타데이터의 이름을 지정했다면, content 속성을 사용하여 메타데이터가 어떤 용도이며, 어떤 성격인지 알 수 있도록 메타 정보(meta information)를 제공한다.[40]
<meta name="description" content="Free Web tutorials"><meta name="keywords" content="HTML, CSS, XML, JavaScript">예제 |
문자 세트, 문서의 저작자 이름, 문서에 대한 설명, 저작 도구 등 메타데이터를 META 요소로 마크업하였다.
<!DOCTYPE html><html lang=”ko”><head>중략
<meta charset="utf-8"><meta name=”author” content=”홍길동”><meta name=”description” content=”신간 UX DESIGN에 관한 소개 웹 사이트”><meta name=”generator” content="Dreamweaver CS 5.0"></head>UX Design ~ (중략) ~ 사용자 경험의 순환구조
</html>STYLE 요소
카테고리 | Metadata content, Flow content(scoped 속성이 제공될 경우에 한 해) |
콘텐츠 속성 | 글로벌 속성, media, type, scoped |
지원 브라우저 | |
STYLE 요소는 스타일 정보(STYLE information)를 표시한다. 스타일 정보는 콘텐츠를 어떻게 표현할 것인지에 대한 정보를 담고 있는데, 이러한 정보를 포함하고 있는 문서를 스타일 시트(style sheet)라고 부른다. 이 스타일 시트는 문서 전반에 대한 표현 정보를 담고 있어서 문서 머리에서 제공하며, 필요에 따라 한 문서 내에서 여러 번 사용할 수 있다.
STYLE 요소는 콘텐츠의 위치, 크기, 색 등 콘텐츠의 표현 방식을 지정하여 문서의 모양을 결정한다. 따라서 STYLE 요소를 표시하지 않더라도 콘텐츠 구조는 영향을 주지 않지만(내용은 달라지지 않는다), 콘텐츠 표현에는 영향을 준다(모양이 달라진다).
scoped 속성
scoped 속성[41]은 한정된 스타일(scoped style)을 지정한다. 기본적으로 스타일 시트는 문서 전체에 걸쳐 적용되지만, 이 속성은 특정 요소에만 제한적으로 스타일을 적용할 수 있다. 해당 요소가 부모 요소(parent element)인 경우, 자식 요소(child element)에도 같은 스타일가 적용된다. 이 속성을 지정하지 않으면 지정된 스타일이 문서 전체에 적용된다.
아래 예제의 경우, 문서 머리 영역의 STYLE 요소에 의해 H1 요소로 표시되는 제목은 전부 “파란색”(blue)으로 나타난다. 그런데 특정 제목에 한 해 “빨간색”(red)을 입히고 싶다면, 해당 제목 앞에 STYLE 요소와 scoped 속성을 이용하여 색상과 범위를 지정하면 된다.
<head><style>h1 {color:blue}
</style></head><body><style type="text/css" scoped="scoped">h1 {color:red}
</style><h1>제목입니다</h1></body>예제 |
class=”blue”인 DIV 요소로 마크업된 콘텐츠를 파란색으로 처리하기 위해 스타일 시트를 HEAD 영역에 직접 작성하였고, 이것을 STYLE 요소로 마크업하였다.
<!DOCTYPE html><html lang=”ko”><head>중략
<style>div.blue {color:#0000FF}
</style></head>UX Design ~ (중략) ~ 사용자 경험의 순환구조
</html>주석
[24] 정보 자원을 표시하는 표기법은 URI이며, URL은 URI의 하위개념(subset)이다. 이 책에서는 주로 URI의 보편적인 형태를 다루기 때문에 정보 자원의 위치를 나타내는 용어는 웹 문서 주소인 URL을 사용하였다. 자세한 내용은 http://www.ietf.org/rfc/rfc2396.txt에서 확인할 수 있다.
[25] 여기서는 icon, pingback, prefetch, search, stylesheet를 설명하고, 나머지는 속성값은 A 요소의 rel 속성에서 설명하기로 한다
[26] favorite icon
[27] 자세한 내용은 http://www.hixie.ch/specs/pingback/pingback에서 확인할 수 있다.
[28] 자세한 내용은 https://developer.mozilla.org/en/link\_prefetching\_faq에서 확인할 수 있다.
[29] 자세한 내용은 http://www.opensearch.org/Home에서 확인할 수 있다.
[30] 메타데이터는 데이터에 대한 데이터(data about data)를 의미한다.
[31] HTML5에 추가된 속성이다.
[32] 문자 참조 (Character References) : 문자 인코딩으로 모든 문자를 표현할 수 있는 것은 아니다. 입력하기 어렵거나 마크업 언어를 제어하는 문자는 문자 참조에 의해 표현된다. HTML의 경우, 문자 참조는 숫자 문자 참조와 문자 실체 참조로 구분된다.
- 숫자 문자 참조(numeric character references)는 숫자 형식의 문자 코드에 따라 문자 표현이 달라지는 문자 참조 방식이다. 10진수의 사례를 살펴보자. 수식 기호인 (Sigma)는 “Σ”이라는 문자 코드를 입력해야 한다. 앰퍼샌드 기호인 “&”, 해시 기호(“#”), 10진수(decimal number), 쌍반점(“;”) 순으로 입력한다.
[33] 가장 많이 사용되고 있는 인코딩 방식은 유니코드(Unicode)를 위한 인코딩 방식인 utf-8, utf-16이다.
[34] (출처) http://www.w3.org/TR/1999/REC-html401-19991224/charset.html
[35] ‘equiv’는 ‘동등하다’라는 의미의 ‘equivalent’를 줄인 것인데, http-equiv 속성이 HTTP 헤더와 동등한 역할 또는 기능을 수행한다는 의미로 사용되었다.
[36] 인터넷 미디어 타입(internet media type)이라고도 부른다.
[37] 자동 새로고침은 사용자 의지와 상관 없이 이루어지기 때문에 사용성과 접근성 문제를 발생시킬 수 있으므로 제공 여부를 신중하게 검토해야 한다.
[38] 문서 주소의 변경은 클라이언트 측(client-side)보다 서버 측(server-side)에서 이루어지는 것이 바람직하다.
[39] 일반적으로 제공자나 개발자 이름을 기입한다.
[40] META 요소는 다른 요소와 달리, 두 개의 속성이 한 쌍으로 구성되어 속성과 값을 표현한다.
[41] HTML5에 추가된 속성이다.