제목에 대한 작업을 마쳤다면, 이젠 내용에 대한 작업을 할 차례다. 내용에 대한 작업은 작성(writing), 수정(correcting, rewriting), 편집(editing)으로 구분할 수 있다. 작성과 수정은 글쓰기 차원의 작업이고 이미 원문이 주어진 상태이므로 내용에 대한 작업은 편집 작업만 남았다.
편집(editing)은 정해진 기준이나 원칙 아래 내용을 일정한 형태로 완성해가는 작업이다. 일반적으로 편집은 추가 및 삭제, 배치 및 변환 등 내용을 정리하는 작업 정도로 인식되고 있으나, 좀 더 넓게 보면 편집은 매체에 맞게 형식을 만들고 커뮤니케이션 촉진을 위해 의미를 표현하는 작업까지도 포함한다.
먼저 할 일은 링크를 표시하는 것이다. 웹이 갖고 있는 가장 두드러진 특징은 연결성(connectivity)이다. 웹은 다른 문서, 이미지, 영상물, 소리, 프로그램 등 다양한 형식의 콘텐츠를 연결할 수 있다. 이것을 ‘하이퍼링크(hyperlink)’[97] 또는 ‘링크(link)’라고 부른다. 이 링크를 선택하면 보고 있던 문서에서 다른 문서로 순식간에 이동할 수 있다. 이러한 링크를 포함하고 있는 웹 문서를 하이퍼텍스트(hypertext)[98]라고 부른다. 웹 저작에 있어 이 사실은 아주 중요하다. 링크는 서로 다른 정보 또는 개체가 연결되는 것을 말하고, HTML에서는 주로 A 요소를 사용하여 서로 다른 정보 또는 개체를 연결한다.
‘A’는 ‘Anchor’, 즉 닻을 의미한다. 링크된 글자는 ‘닻’, 링크된 글자가 가리키는 웹 문서 또는 개체는 ‘배’에 비유할 수 있다. 웹 저작자는 A 요소를 사용하여 배가 어디에 떠 있는지 알려주는 것이다. 이 요소에 의해 링크가 생기면 다른 글자와 구분될 수 있도록 기본적으로 파란색과 밑줄이 표시된다. 홈문서(메인 문서)처럼 링크된 글자가 많은 경우가 아니라면 링크 여부를 직관적으로 확인할 수 있도록 링크된 글자는 기본 설정인 파란색과 밑줄로 표현하는 것이 바람직하다. 그리고 기본적으로 링크된 글자를 선택하면 현재 창에서 다른 웹 문서가 나타난다. 그런데 의도적으로 현재 창을 그대로 둔 채, 다른 웹 문서를 새 창으로 불러와야 할 때가 있다. 이런 경우에는 새 창으로 열린다는 단서(cue)를 제공해 주는 것이 좋다.
링크 표시를 완료했다면, 그 다음엔 중요도가 높은 단어(keyword)를 강조한다. 어떤 단어가 중요한지 여부는 임의로 결정할 수 없다. 원저작자가 직접 지정하는 것이 가장 좋은데, 여의치 않다면 웹 저작자가 주제와 문맥을 고려하여 신중하게 지정하면 된다. 이 때 중요한 단어가 너무 많게 되면 강조 효과가 나타나지 않으므로 개수를 적절하게 조절해야 한다.
특별한 의미를 갖는 내용은 사용자가 좀 더 주의 깊게 살필 수 있도록 특별하게 표시해야 하며, 이러한 표시는 단순히 시각적 표현에 그치지 않고 의미적 표현을 포함해야 한다. 문서를 작성하면서 어떤 단어나 어구를 강조해야 할 때, 어떻게 표시할까? 다른 색으로 칠하기, 굵은 서체로 만들기, 밑줄 긋기, 이탤릭체로 만들기, 형광펜으로 표시하기 등 다양한 표시 방법이 있다. 다른 색을 칠하는 것은 색을 구분할 수 없는 사람에겐 무용지물이며, 밑줄 긋기는 링크된 텍스트로 오해 받을 수 있고, 형광펜으로 표시하는 것은 표준 기술로 구현할 수 없다. 따라서 웹에서 강조를 위해 시각적 표현과 의미적 표현을 모두 만족시키는 표시 방법은 “이탤릭체”와 “굵은 서체”이며, HTML에서도 이 두 가지 방법을 사용한다. 일반적으로 EM 요소는 약한 강조를 의미하며 적용된 글자는 “이탤릭체”로 표현하며, STRONG 요소는 약한 강조를 의미하며 적용된 글자는 “굵은 서체”로 표현된다.
문서를 작성하다 보면, 논문의 참고문헌처럼 다른 곳의 내용을 끌어다 써야 하는 경우가 있다. 남의 말이나 글을 자신의 말이나 글처럼 표시하는 것은 표절이다. 누가 저술했는지, 내용의 출처는 어디인지 밝히고 그 내용을 적절하게 이용하는 것을 인용이라고 부른다. 저작자와 출처에 따라 내용의 성격이나 문맥(context)이 달라질 수 있다. 만약 더 권위 있는 사람의 말이나 글을 인용했다면, 사용자는 인용된 내용보다는 그 출처에 더 많은 관심을 가질 것이다. 웹은 하이퍼링크를 통해 외부 문서로 자유자재로 이동할 수 있기 때문에 저작자가 마음만 먹는다면 사용자를 정보의 보고(information repository)로 손쉽게 안내할 수 있다. HTML에서는 출처를 표시하거나 참조하기 위해 CITE 요소와 Q 요소를 사용한다. 둘 다 인용 여부를 알리는데 사용되지만, 용도 측면에서 약간 차이가 있다. CITE 요소는 인용된 작품 제목, Q 요소는 인용된 내용을 표시하는 용도로 사용한다. 예제의 경우, 상세이미지가 다른 사람의 작품이므로 이를 알리기 위해서는 CITE 요소를 사용하면 된다.
문장 속에는 심심치 않게 약어나 두문자어가 등장한다. 어떤 단어를 줄인 것인지 또는 어떤 단어의 첫 글자인지 모른다면, 우리는 약어나 두문자어를 이해할 수 없을 수도 있다. 이것은 브라우저도 마찬가지일 것이다. 브라우저가 약어나 두문자어를 일반 단어와 구별하게 만드는 것은 중요하다. “UX”는 “User”와 “eXperience”의 첫 글자를 따서 만든 두문자어다. 이 단어를 두문자어라고 표시하지 않으면 브라우저는 전혀 다른 의미로 해석할지도 모른다. 이와 같은 해석 오류는 브라우저와 연동하여 작동되는 프로그램(예, 번역 프로그램)에도 부정적인 영향을 끼친다. 약어나 두문자어의 표시는 ABBR 요소를 사용하면 되는데, 이 요소를 사용하더라도 약어나 두문자어가 어떤 단어인지를 설명하지는 못할 수 있으므로 title 속성을 사용하여 단어 설명이 툴팁으로 나타나도록 만드는 것이 좋다.
본문 내용을 살펴보면, 용어가 자주 등장하는 것을 알 수 있다. “사용성”, “사용자 가치”처럼 용어 설명을 리스트로 구성된 경우에는 DL과 DT 요소를 사용하면 되지만, 용어 설명이 문장의 한 부분으로 구성된 경우에는 DFN 요소를 사용해야 한다. 이 요소를 사용하면 문장 내에서 어떤 부분이 용어에 해당하는지 좀 더 쉽게 알 수 있다. DFN 요소가 적용된 글자는 대개 이탤릭체로 표현되는데, 한글의 경우 글자를 기울이면 가독성이 급격하게 떨어지기 때문에 스타일 시트를 사용하여 이탤릭체가 적용되지 않도록 처리하기도 한다.
원문에는 없지만, 저작자가 본문 아래 영역에 “최종수정일”을 넣었다. 이 내용은 본문 영역에 있지만, “본문”이라고 볼 수 없는 내용이다. “본문”이라하면 문서에서 주가 되는 글인데[99], 문서를 작성하다 보면 “주가 되는 글”은 아니지만 구성 상 본문 영역에 배치해야 할 경우가 불가피하다. 본문 영역에 있지만 내용적으로 본문이 아닌 내용, 본문과 다른 성격의 내용, 굳이 전달하지 않아도 되는 내용, 소극적으로 표현해도 되는 내용 등 본문과 다르게 표현해야 하는 내용이 있을 수 있는데, 이런 사실을 사용자는 문맥을 통해 알 수 있지만 브라우저는 알 수 있는 방법이 없다. 이럴 때, SMALL 요소를 사용하는 것도 한 방법이다.
SMALL 요소는 단순히 글자를 더 작게 표시하기 위한 표준 기술이므로 이 요소를 사용했다고 해서 본문 여부를 객관적으로 표현할 수 있는 것은 아니다. 다만, 사용자처럼 브라우저에게도 문맥을 제공하여 본문 영역에 있지만 본문과 다르게 표현된 내용을 파악할 수 있도록 도울 수는 있다. SMALL 요소를 적용된 글자는 더 작게 표현되기 때문에 한글의 경우 글자가 깨질 수 있다. 이럴 때는 글자 크기를 유지시킬 수 있도록 스타일 시트를 사용한다.
“1st”의 “st”는 위 첨자(superscript)로 표현해야 하므로 SUP 요소를, “2012년 1월 25일”은 날짜 정보이므로 TIME 요소를 사용한다.
원문에는 없지만, 아래와 같이 사이드바 영역에 “예약구매혜택”을 제공하기로 했다. 과거와 현재의 구매 조건을 비교하여 보여주기 위해 “1월 예약고객 독서대 증정”이라는 문구에 취소선이 그어져 있는데, 이것은 S 요소로 표시한다. 취소선은 스타일 시트를 사용하여 표시할 수도 있지만, 이 방법은 취소 여부를 단순히 시각적으로만 표현하는 것이므로 브라우저까지 그 의미를 알 수 있도록 S 요소를 사용한다.
일반적으로 문서 맨 아래에는 소위 “푸터(footer)”라고 불리는 꼬리말이 있다. 이 꼬리말은 문서의 저작자, 주소, 연락처 등으로 구성되는데, 이런 정보는 본문 내용과는 다른 성격을 지닌다. 성격이 다른 만큼 표시하는 방법도 다르게 처리할 필요가 있으며, 주로 ADDRESS 요소를 사용하여 표현한다.
푸터 영역에 있는 연락처 정보를 보면, “#+내선번호”라는 문구가 있다. 이 문구는 특별한 규칙을 알아야만 이해할 수 있다. 우선 “#”은 키보드의 “#(샵)” 버튼을 의미한다. 정확하게 표현하려면 “키보드의 <#> 버튼을 누르시오”라고 기술해야 하지만, 간단하게 표현하기 위해 “#”만 기술하기도 한다. 이것을 좀 더 명확하게 표시하기 위해서는 키보드 입력을 나타내는 KBD 요소를 사용해야 한다.
그리고 “내선번호”는 변수(variable)에 해당한다. 변수를 변수로 읽지 않고 글자 그대로 읽게 되면 문제가 생길 것이다. 이것은 브라우저에게도 마찬가지이므로 변수는 VAR 요소를 사용하여 표시해야 한다.
<내용 편집하기>를 위한 표준 기술
A 요소
카테고리 | Flow content, Phrasing content, Interative content |
콘텐츠 속성 | 글로벌 속성, href, target, rel, media, hreflang, type |
지원 브라우저 |      |
A 요소는 앵커(Anchor, 닻)를 표시한다. 서로 다른 두 지점을 연결하려면, 두 지점에 대한 정보와 연결방향이 필요하다. 두 지점에 대한 정보를 앵커라고 부르며, 이 앵커는 소스 앵커(source anchor)와 목적지 앵커(destination anchor)로 구분된다. 이렇게 앵커를 구분하는 이유는 앵커의 용도가 다르기 때문이다. 앵커의 용도는 크게 다른 문서로 연결하기 위한 것과 같은 문서 내에 있는 다른 지점으로 연결하는 것으로 나뉜다. 다른 문서를 연결할 때는 다른 곳에 있는 문서(hypertext)를 참조(reference)하기 위해 href 속성을 사용한다. 이 속성이 있는 앵커는 하이퍼링크로 작동하며, 이것을 소스 앵커(source anchor)라고 부른다.
<링크의 구조>
같은 문서 내에 있는 다른 지점으로 연결할 때는 name 속성이나 id 속성을 사용하여 이동하고자 하는 지점을 표시해야 한다. 이 지점에 사용되는 앵커를 목적지 앵커라고 부른다. 즉, 다른 문서를 연결할 때는 소스 앵커만 필요하지만, 같은 문서 내에 있는 다른 지점으로 연결할 때는 소스 앵커와 목적지 앵커가 필요하다. 소스 앵커는 href 속성을 통해 목적지가 있는 문서를 표시하고 목적지 앵커는 name 속성을 이용하여 목적지가 있는 지점을 표시하는 것이다. 링크된 텍스트는 단순히 읽기를 위한 텍스트가 아니기 때문에 본문 글자(normal text)와는 다른 형태를 가질 필요가 있었다. 그래서 A 요소가 적용된 글자는 파란색으로 바뀌고 밑줄이 생긴다.
<a>Home</a>href 속성
href 속성은 문서(hypertext)를 참조(reference)하기 위한 속성이다. A 요소가 하이퍼링크 기능을 수행하기 위해서는 반드시 href 속성이 필요하다. 이 속성이 없으면 브라우저는 A 요소를 하이퍼링크로 인식하지 않는다. href 속성은 다른 서버에 있는 문서, 같은 서버에 있는 문서, 같은 문서 내에 있는 특정 지점 그리고 이미지, 동영상, PDF 파일 등 다른 형식의 파일 등 다양한 문서와 파일을 참조할 수 있다.
<a href=”http://www.example.com/index.html”>Home</a>이 때 href 속성은 문서나 파일이 있는 위치를 참조하므로 속성값은 링크 주소(URL)가 되며, 이 링크 주소는 크게 세 가지 방식으로 나뉜다.
- 절대 경로: href=”http://www.example.com/index.html”
- 상대 경로: href=”index.html”
- anchor URL: href=”#top”
rel 속성
rel 속성은 현재 문서와 링크된 문서와의 관계(relationship)를 지정한다.[100] ‘링크(link)’의 사전적 의미는 서로 다른 것을 연결하는 일 또는 수단이다. 서로 다른 것이 아무 이유 없이 연결되지는 않을 것이다. 서로 다른 것이 연결되면 둘 사이에 나름의 관계 또는 관련성이 생기는데, 이것을 링크 관계(link relation)라고 부른다.
웹 문서는 그 중요도가 점점 높아지고 있으며 그 형식도 더욱 다양해지고 있다. 이런 환경에서는 문서와 문서 사이의 관계를 이해하는 것이 중요하다. 사실 링크 레이블만으로 문서와 문서 사이의 관계, 즉 링크가 어떤 종류, 어떤 성격인지 제대로 알리기 어렵다. 설사 알린다 하더라도 종류나 성격이 규격화되지 않으면 브라우저는 의미 있는 정보를 얻을 수 없다. 이러한 문제를 해결하기 위해 rel 속성이 마련되었다.
rel 속성이 사용자에게 직접적으로 혜택을 가져다 주는 것은 아니다. 저작자가 브라우저나 검색엔진에게 링크 관계에 대한 정보를 알려주면, 이 정보를 활용한 브라우저나 검색엔진은 사용자 요청에 보다 정확하게 대응할 수 있게 된다.
링크의 종류와 성격을 규격화하기 위해 다음과 같은 속성값이 정의되었다. 이 속성값을 작성하다 보면, 한 가지 속성값만으로는 링크의 종류와 성격을 단정 짓기 어려운 경우가 생긴다. 예컨대, 링크된 문서가 번역 문석이면서 외부 서버에 있는 문서라면, rel=”alternate external”이라고 지정한다. 이 때 속성값은 띄어쓰기로 구분한다. rel은 href 속성을 위한 추가 정보이므로 href 속성이 있을 때만 지정되어야 한다. <link rel=”stylesheet”>처럼 링크 관계는 주로 문서의 헤더에서 사용해 왔다. 그런데 문서와 문서 사이의 연결 관계를 밝히는 것이 여러 모로 도움되기 때문에 링크 관계를 A와 AREA 요소에서도 지정할 수 있게 되었다.
- rel=”alternate”: 현재 문서를 대체(alternate)하기 위한 문서 링크를 지정하기 위한 속성이다. LINK, A, AREA 요소에서 사용할 수 있다. ‘대체’는 다른 것으로 대신한다는 뜻이다. rel=”alternate”으로 지정하면 링크된 문서가 현재 문서와 딴판인 내용이나 성격을 갖고 있는 것이 아니라, 인쇄용 문서, 번역 문서처럼 현재 문서와 내용은 같지만 형식이 다른 문서라는 사실을 미리 알 수 있게 해준다.
<a href=”http://www.example.com/web\_standards\_print.html” rel=”alternate”>인쇄</a>- rel=”author”: 현재 문서의 저작자(author)에 관한 문서 링크를 지정하기 위한 속성이다. LINK, A, AREA 요소에서 사용할 수 있다. 작성자, 연락처 등 문서의 운영과 관리에 대한 구체적인 정보를 별도의 문서에서 제공할 경우 author 속성값을 사용한다.
<a href=”http://www.example.com/profile.html” rel=”author”>저자 소개</a>- rel=”bookmark”: 고유 주소(permalink)를 가진 문서 링크를 지정하기 위한 속성이다. A와 AREA 요소에서 사용할 수 있다. 중요한 문서는 그 주소가 바뀌지 않아야만 즐겨찾기(bookmark)로 등록한 사용자가 나중에 다시 찾아올 수 있다. 현재 문서 주소가 변경될 가능성이 있다면 사용자를 고유 주소로 이동시킨 다음 그곳에서 즐겨찾기 등록이 이루어지도록 해야 할 때 ‘bookmark’ 속성값을 사용한다.
<a href=”http://www.example.com/web\_standards.html” rel=”bookmark”>이 문서의 원본으로 가기</a>- rel=”external”: 외부(external)에 있는 문서 링크를 지정하기 위한 속성이다. A와 AREA 요소에서 사용할 수 있다. 이 속성값은 링크된 문서가 다른 웹 사이트 일부라는 사실을 알려준다.
<a href=”http//www.w3c.org/html5.html” rel=”external”>HTML5</a>- rel=”help” : 도움말(help)이 있는 문서 링크를 지정하기 위한 속성이다. LINK, A, AREA 요소에서 사용할 수 있다. 간혹 전문 용어나 사용 방법을 안내하기 위해 도움말을 링크시키는 경우가 있다. 예를 들어, 어떤 사용자가 상품을 구매하기 위해 결제 문서에서 과업을 수행하고 있고, 데이터를 입력하는 폼 요소 옆에 ‘공인인증서’라는 링크가 있다고 가정해 보자. 맥락적으로는 이 링크가 도움말과 연결되어 있다는 사실을 조심스럽게 짐작할 수 있지만, 스크린 리더 사용자는 이러한 맥락을 쉽게 알아차리기 어려울 것이다. 다시 말해, ‘공인인증서’라는 링크가 도움말과 연결되었는지 아니면 공인인증서 다운로드 문서와 연결되어 있는지 알기 어렵다. 물론 레이블을 좀 더 의미 있게 작성하면 스크린 리더 사용자를 도울 수 있지만 스크린 리더나 브라우저와 같은 사용자 도구를 직접적으로 도울 수는 없다. 따라서 사용자 도구가 링크가 갖고 있는 맥락을 이해할 수 있도록 rel 속성을 적절히 지정하는 것이 중요하다.
<a href=”http://www.example.com/public\_certi.html” rel=”help”>공인인증서</a>- rel=”license” : 현재 문서에 대한 저작권 정보(license, copyright)가 있는 문서 링크를 지정하기 위한 속성이다. LINK, A, AREA 요소에서 사용할 수 있다. 문서 전체에 대한 권리를 표시하기 위해 푸터 영역에서 저작권 정보를 제공한다. 그런데 문서 내에 있는 외부 콘텐츠의 출처를 표시할 경우에는 저작권 정보를 별도로 제공할 필요가 있다. 이 때 해당 링크가 저작권에 관한 정보라는 사실을 알리기 위해 license 속성값을 사용한다.
<a href=”http://creativecommons.org/licenses.html” rel=”license”>CCL</a>- rel=”nofollow” : 검색엔진이 링크된 문서로 따라가지 않도록(no follow)[101] 문서 링크를 지정하는 속성이다. A와 AREA 요소에서 사용할 수 있다. 검색엔진이 문서 내에 있는 모든 링크를 따라가지 않도록 하려면 ‘nofollow’를 헤더의 META 요소에서 지정하고 특정 링크마다 개별적으로 지정하려면 A나 AREA 요소에서 지정한다. 구글과 같은 검색엔진은 외부 문서에서 유입되는 링크에 따라 문서에 대한 가치를 매긴다. 이러한 작업을 위해서는 검색엔진이 나름의 규칙에 따라 링크를 따라다니면서 문서를 분석/분류하는데, 이것을 인덱싱(indexing)이라고 부른다. 그런데 제 아무리 기계라도 인덱싱에는 적지 않은 시간과 노력이 필요하다. 검색엔진 입장에서는 불필요한 인덱싱을 줄인다면 작업 효율을 높일 수 있기 때문에 인덱싱할 필요가 없는 문서를 미리 표시하자는 생각을 하게 되었다. 구글의 경우, 신뢰성이 낮은 콘텐츠(untrusted content), 유료 링크(paid link), 수집 우선순위가 낮은 문서(예, 로그인 문서) 등은 인덱싱할 필요가 없으므로 이러한 문서나 링크는 ‘nofollow’로 지정하길 원하고 있다. [102]
<meta name=”robots” content=”nofollow”><a href=”login.html” rel=”nofollow”>로그인</a>- rel=”noreferrer” : 링크를 선택하더라도 레퍼러가 발생하지 않도록(no referrer) 문서 링크를 지정하는 속성이다. A와 AREA 요소에서 사용할 수 있다. 사용자가 A 문서에 있는 링크를 통해 B 문서를 방문하게 되면, 브라우저는 B 문서를 참조한 문서, 즉 A 문서의 URL 정보를 B 문서가 있는 웹 서버로 보낸다. 이 때 A 문서의 URL 정보를 바로 ‘레퍼러(referrer)’ 또는 ‘HTTP 레퍼러(HTTP referrer)’[103]라고 부르며, 이 속성값이 지정된 A 또는 AREA 요소를 사용자가 선택하더라도 브라우저는 레퍼러를 전송하지 않아야 한다.
<a rel=”noreferrer” href=”http://www.reference.com” target=”\_blank”>참고문서</a>- rel=”sidebar” : 링크된 문서를 사이드바(side bar) 용도로 지정하는 속성이다. LINK, A, AREA 요소에서 사용할 수 있다. 사이드바는 문서 본문의 측면에 자리잡고 있는 영역을 의미한다.[104] 단순한 정보로 이루어진 문서는 본문 영역만으로 구성될 수 있지만, 정보가 복잡해지면 본문 영역 이외에도 내비게이션 영역(navigation section), 관련 콘텐츠 영역(related contents section) 등 여러 가지 성격을 지닌 영역이 필요하게 된다. 그리고 이 영역이 본문 영역 없이 독립적으로 운용될 필요가 있는 경우, 사이드바 형태로 제공된다면 다른 문서 또는 브라우저의 플러그인 기능에서 유용하게 활용할 수 있다. 저작자는 rel=”sidebar”를 통해 링크된 문서가 사이드바로 이용될 수 있다는 사실을 표시할 수 있다.
<a href=”toc.html” rel=”sidebar” title=”Help”>Create panel with table of contents for Opera help</a>
사이드바 형태로 만들어진 문서[105]
- rel=”tag” : 현재 문서에 대한 태그(tag)를 지정하는 속성이다. LINK, A, AREA 요소에서 사용할 수 있다. 태그는 검색을 위한 키워드 또는 주제어로 볼 수 있다. 링크된 텍스트에 rel=”tag” 속성을 지정하면, 이 텍스트는 현재 문서에 대한 태그가 된다. 태그가 되더라도 사용자에겐 별 다를 게 없다. 그러나 검색엔진은 링크된 텍스트를 단순히 링크된 텍스트가 아니라 현재 문서를 핵심적으로 설명하는 키워드로 인식하고, 이러한 텍스트 위주로 색인 작업(indexing)을 하게 되면 작업 효율성을 크게 높일 수 있다.
<a rel=”tag” href=”http://www.example.com/allaboutdesign.html>디자인</a>- rel=”prev” : 이전 문서(previous document)를 지정한다. LINK, A, AREA 요소에서 사용할 수 있으며, 연속적인 정보 구조에서 현재 문서보다 이전에 있는 문서를 가리킨다. 속성값을 지정했을 때 어떤 효과가 있는지 아직 명확하게 밝혀진 바가 없지만, 문서마다 이전, 다음에 대한 정보가 있다면 브라우저나 검색엔진이 문서의 순서나 구조를 전체적으로 파악하는데 도움을 줄 수 있을 것으로 본다.
<a rel=”previous” href=”page1.html”>첫 번째 문서</a>- rel=”next" : 다음 문서(next document)를 지정한다. LINK, A, AREA 요소에서 사용할 수 있으며, 연속적인 정보 구조에서 현재 문서보다 다음에 있는 문서를 가리킨다.
<a rel=”next” href=”page3.html”>세 번째 문서</a>media 속성
media 속성은 대상 문서(target document)[106]의 전달 매체(media 또는 device)를 지정한다. 얼마 전까지만 해도 브라우저는 컴퓨터 환경만 생각했다. 그래서 서버로부터 전송 받은 HTML 문서는 아무런 판단 과정 없이 컴퓨터 모니터 화면에 맞게 출력해 주면 되었지만, 음성 출력기, 점자 출력기, 휴대폰, TV 등 웹 콘텐츠를 이용할 수 있는 매체가 다양해 지면서 브라우저는 어떻게 하면 HTML 문서를 매체에 맞게 잘 출력할 수 있을지에 대한 고민이 필요하게 되었다. 어떤 매체는 글자를 표현하는 방식이 다르고, 어떤 매체는 화면 크기가 아주 작고, 또 어떤 매체는 구현할 수 있는 색이 제한되어 있다. 매체 특성에 맞게 HTML 문서를 만들게 되면, 그 문서의 크기, 레이아웃 등도 나름의 특성을 갖게 된다. 이러한 특성을 브라우저가 이해할 수 있도록 도울 필요가 있어 링크된 문서에 대한 정보를 좀 더 자세하게 알려주어야 할 필요가 생긴 것이며, 링크된 문서가 조금 다른 형식으로 구성되었으니 조금 다르게 출력해야 한다고 브라우저에게 알려주기 위해 media 속성이 필요한 것이다. media 속성은 조언의 성격(advisory)을 지니고 있으므로 지정하지 않는다고 해서 문제가 생기는 것은 아니지만, 저작자가 media 속성을 이용하여 매체의 종류와 출력 규격을 정확하게 지정해 준다면 브라우저의 고민을 크게 덜어줄 수는 있다. 매체에 따라 다른 표현 방식을 적용하는 것은 주로 스타일 시트에서 다루어 왔다. 그런데 매체의 특성은 문서의 구조적 특성에도 영향을 주기 때문에 이에 대한 정보는 HTML의 media 속성에서 지정해 주는 추세로 발전하고 있다.
우선 지정할 수 있는 매체 종류(media types)는 다음과 같은데, 여러 가지 매체를 지정할 경우에는 쉼표를 사용하여 지정한다.[107]
여러 가지 매체를 지정할 경우의 예: media=”projection, screen”
-
media=”all”: 대상 문서가 모든 매체(all media)에 적합한 경우, 속성값을 “all”로 지정한다. “all”은 기본값(default)이므로 별도로 지정하지 않으면 브라우저는 대상 문서가 모든 매체에서 적합한 문서라고 판단한다.
-
media=”aural”: 대상 문서가 음성 출력 기기(aural device)[108]에 적합한 경우, 속성값을 “aural”로 지정한다.
-
media=”braille”: 대상 문서가 점자 출력기(braille)에 최적화되어 있는 경우, 속성값을 “braille”로 지정한다.
-
media=”handheld”: 대상 문서가 소형 기기(handheld)에 최적화되어 있는 경우, 속성값을 “handheld”로 지정한다. 대체적으로 소형 기기는 해상도와 대역대가 낮다.
-
media=”projection”: 대상 문서가 영사기(projection, projector)에 최적화되어 있는 경우, 속성값을 “projection”으로 지정한다.
-
media=”print”: 대상 문서가 인쇄물(print)에 최적화되어 있는 경우, 속성값을 “print”로 지정한다. 인쇄물은 웹 문서와 달리 ‘스크롤’의 개념이 적용되지 않는다. 많은 양의 정보를 담고 있는 문서가 인쇄물로 전환될 때에는 어쩔 수 없이 문서 나누기(pagination) 방식으로 출력되어야 한다. 그리고 인쇄물은 용지가 정해져 있으므로 글자 크기가 포인트(pt), 피카(pica) 등 고정 크기로 설정될 수 있다.
-
media=”screen”: 대상 문서가 컴퓨터 화면(computer screen)에 최적화되어 있는 경우, 속성값을 “screen”으로 지정한다.
-
media=”tty”: 대상 문서가 전보(teletype)[109], 터미널(terminal)[110] 등과 같이 고정폭 문자(fixed-pitch character)를 사용하는 매체에 최적화되어 있는 경우, 속성값을 “tty”로 지정한다(픽셀 단위를 사용할 수 없다).
-
media=”tv”: 대상 문서가 텔레비전(TV)에 최적화되어 있는 경우, 속성값을 “tv”로 지정한다.[111]
출력 방식이나 레이아웃 등 매체 특성(media features)은 다음과 같은 방법[112]으로 지정하는데, “device-“가 붙은 속성값은 특정 출력 매체를 지정할 때 사용한다. orientation, scan, grid를 제외한 나머지 속성값은 “min-“(최소값)과 “max-“(최대값)를 이용하여 범위 또는 제한 조건을 미리 지정할 수 있다.
-
width: 출력 영역의 가로 크기(width)를 지정한다.
(예1) media=”print and (min-width: 25cm)”: 인쇄 출력 영역이 최소 25cm 이상일 때(최소 가로 크기가 25cm 이상이어야만 문서가 제대로 출력될 수 있다).
(예2) media=”screen and (min-width: 400px) and (max-width: 700px)”: 가로 화면이 400~700 픽셀인 컴퓨터 화면일 때(문서가 컴퓨터 화면의 400~700 픽셀 사이에서 출력된다).
(예3) media=”handheld and (min-width: 20em), screen and (min-width: 20em)”: 가로 화면이 최소 20em[113] 이상인 소형기기와 컴퓨터 화면일 때(가로 크기가 최소 20em 이상이어야만 문서가 제대로 출력될 수 있다). -
height: 출력 영역의 높이(height)를 지정한다.
-
device-width: 출력 매체의 가로 화면 크기(device width)를 지정한다.
(예) media=”screen and (device-width: 800px)”: 가로 화면이 800 픽셀인 컴퓨터 화면일 때 -
device-height: 출력 매체의 세로 화면 크기(device height)를 지정한다.
width와 device-widht의 차이
-
orientation: 출력 매체의 화면 방향(orientation)을 지정한다. 화면 방향은 수직 방향(portrait)과 수평 방향(landscape)으로 구분된다.
(예) media=”all and (orientation: landscape)”: 화면 방향이 수평인 매체일 때 -
aspect-ratio: 화면 비율(aspect ratio)를 지정한다. 가로/세로 크기로 표현하는데, 비율을 지정하는 것이 목적이므로 실제 수치를 입력하지 않고 비례값을 입력할 수도 있다.
(예1) media=”screen and (aspect-ratio: 16/9)”: 화면 비율이 16/9(가로/세로)인 컴퓨터 화면일 때
(예2) media=”screen and (aspect-ratio: 1280:720)”: 화면 비율이 1280:720 픽셀(가로:세로)인 화면일 때 -
device-aspect-ratio: 출력 매체의 화면 비율(device aspect-ratio)를 지정한다. 가로/세로로 표현하는데, 비율을 지정하는 것이 목적이므로 실제 수치를 입력하지 않고 비례값을 입력할 수도 있다.
(예1) media=”screen and (device-aspect-ratio: 16/9)”: 화면 비율이 16/9(가로/세로)인 컴퓨터 화면일 때
(예2) media=”screen and (device-aspect-ratio: 1280:720)”: 화면 비율이 1280:720 픽셀(가로:세로)인 컴퓨터 화면일 때 -
color: 출력 매체의 색 깊이(color depth)[114]를 지정한다. 비트 수가 많을수록 많은 색을 표현할 수 있다.
(예1) media=”all and (color)” 또는 media=”all and (min-color: 1)”: 모든 컬러 매체에 적용할 때
(예2) media=”all and (min-color: 3)”: 색 깊이가 최소 3 비트 이상인 매체일 때 -
color-index: 출력 매체의 색 지수(color index)를 지정한다. 색 지수는 기기에서 사용할 수 있도록 색을 체계적으로 분류한 것을 말하며, 색 지수가 높을수록 색의 가지 수도 많아진다.
(예1) media=”all and (min-color-index: 256)”: 최소 256가지의 색을 지원하는 매체일 때 -
monochrome: 흑백기기(monochrome frame buffer)[115]의 색 깊이(color depth, bits per pixel)를 지정한다.
(예1) media=”all and (monochrome)” 또는 media=”all and (monochrome: 1)”: 영상을 흑백으로 처리하는 매체일 때
(예2) media=”all and (min-monochrome: 2)”: 색 깊이가 최소 2비트 이상인 매체일 때 -
resolution: 출력 매체의 해상도(resolution, pixel density)를 지정한다. 해상도 단위는 dpi(dots e per inch) 또는 dpcm(dots per centimeter)을 사용한다.
(예) media=”all and (min-resolution: 300dpi)”: 해상도가 최소 300dpi 이상인 매체일 때 -
scan: 텔레비전의 주사 방식(scanning process)을 지정한다.
(예) media=”all and (scan: progressive)”: 주사 방식이 순차적 주사 방식(progressive scanning process)일 때 -
grid: 그리드(grid) 방식의 출력을 지정한다.[116] 이 속성값은 출력기기가 그리드 방식의 기기인지 아니면 비트맵(bitmap) 방식의 기기인지 알려준다. 그리드 방식의 기기는 속성값을 ‘1’, 그렇지 않은 경우는 ‘0’으로 지정한다.
(예) media=”handheld and (grid:1)”: 그리드 방식의 소형기기일 때
target 속성
target 속성은 링크된 문서가 열리는 곳(target window 또는 target frame)을 지정한다. 이 속성은 href 속성으로 지정된 문서의 제공 방식을 정의하는 것이므로 반드시 href 속성과 함께 사용되며, 네 가지 속성값을 갖는다.
_blank: 링크된 문서를 새 창으로 연다. 앞에서 살펴보았듯이, 링크는 소스와 목적지 사이의 연결이며, 이 연결은 수직적 연결이 아닌 수평적 연결을 의미한다. 따라서 소스와 목적지 사이는 브라우저의 뒤로 버튼과 앞으로 버튼(Back and forward button)에 의해 오갈 수 있어야 한다. 그런데 경우에 따라서는 창을 하나 더 띄우더라도 기존 창을 그대로 둔 채 목적지로 이동해야 할 때가 있는데, 이 때 ‘_blank’ 속성을 사용한다.
그런데 링크된 문서를 새 창으로 여는 것은 몇 가지 문제점을 안고 있다. 우선 스크린 리더 사용자처럼 시각적으로 정보를 처리할 수 없는 경우, 새 창이 열렸는지 여부는 알기 어렵다. 물론 새 창이 열리면 초점(focus)이 새 창으로 이동하지만, 열린 창이 새 창인지 현재 창인지는 신속하게 파악할 수 없다. 따라서 title 속성을 사용하여 링크된 문서가 새 창으로 열린다는 사실을 미리 알려줄 필요가 있다. 그런데 일부 스크린 리더는 ‘_blank’ 속성을 만나면 새 창으로 열린다는 사실을 자동으로 알려준다. 이런 경우, 새 창에 대한 정보가 중복적으로 제공될 수 있기 때문에 문제가 될 수 있다. 큰 문제는 아니지만 워낙 링크가 많다 보니 중복 제공은 사용자에게 불편을 줄 수 있다. 그런데 일부 스크린 리더에서 ‘_blank’ 속성을 만나더라도 새 창으로 열린다는 사실을 자동으로 알려주지 않을 수 있다. 따라서 title 속성을 사용하여 새 창으로 열린다는 사실을 알리는 것이 원칙이며, 스크린 리더 사용자가 자동으로 알려주는 기능의 설정값을 해제하여 새 창 알림이 중복적으로 제공되지 않도록 하는 것이 바람직하다.
새 창 열기의 또 다른 문제는 창의 개수가 많아질 수 있다는 점이다. 단순히 창이 하나 더 생기는 것이 아니라 새 창에서 또 다른 링크를 선택하면 또 다른 새 창이 나타날 수 있다. 이런 식으로 브라우징을 하다 보면 3~4개의 창이 열리는 것은 순식간이다. 이것은 사용자에게 혼란을 줄 뿐만 아니라 사용자 컴퓨팅 환경에도 부담을 준다. 마지막으로 뒤로 버튼이 닫기 버튼보다 더 조작하기 쉽다는 것이다. 링크된 문서를 새 창으로 열면 닫기 버튼을 눌러야 하지만, 현재 창으로 열면 뒤로 버튼을 누르면 된다.
_self: 현재 창(또는 프레임)에서 링크된 문서를 연다. 이것은 가장 기본적인 방식이므로 기본값으로 설정되어 있다. 그래서 별도로 target 속성을 지정하지 않으면 링크된 문서는 현재 창에서 열린다. ‘self’는 현재 창 또는 현재 프레임 그 자체(itself)라는 의미이므로 링크된 문서는 사용자가 현재 보고 있는 창이나 프레임에서 열리게 된다. 가령, 프레임의 경우, 여러 프레임 중에서 현재 링크가 있는 프레임에서 링크된 문서가 열리게 되는 것이다.
_parent: 부모 창(또는 프레임세트)에서 링크된 문서를 연다. 부모 창(parent window)이 있다는 것은 자식 창(child window)이 있다는 것을 의미하며, 프레임세트(frameset)가 있다는 것은 다른 프레임세트나 프레임(frame)이 있다는 것을 의미한다. 이런 상황에서는 브라우징이 다양한 양상으로 전개될 수 있기 때문에 ‘_parent’나 ‘_top’과 같은 속성값이 필요하다. 우선 부모 창과 자식 창이 열려 있는 경우, 자식 창에 있는 링크를 ‘_parent’로 지정하면 링크된 문서는 부모 창에서 열리게 된다. 또한 프레임에 있는 링크를 ‘_parent’로 지정하면 링크된 문서는 해당 프레임이 속해 있는 프레임세트에서 열리게 된다.
_top: 전체 영역에서 링크된 문서를 연다. 이 속성값은 문서 내에 독립적인 영역이 있을 때 필요하다. 가령, DIV나 FRAME 요소 단위로 데이터를 호출하는 경우, 브라우징은 전체 영역이 아니라 부분 영역 단위로 진행된다. 이 때 전체 영역 수준에서 브라우징이 진행되는 것을 상위 레벨 브라우징(top-level browsing)이라고 본다면, 부분 영역 수준에서 브라우징이 진행되는 것을 하위 레벨 브라우징(secondary-level browsing nested browsing)[117]이라고 볼 수 있다. 브라우징이 하위 레벨에서 진행되다가 상위 레벨로 바꿔야 할 때가 있을 것이다. 가령, 프레임 방식으로 제공되는 문서의 경우, 대개 프레임 단위로 문서를 불러오지만 경우에 따라서는 전체 영역으로 불러와야 할 때도 있다. 이 때 ‘_top’을 사용한다. 프레임에 있는 링크를 ‘_top’으로 지정하면 모든 프레임을 없애고 링크된 문서를 전체 영역으로 연다. ‘_parent’와 비슷한 결과가 나타날 수 있으나, ‘_parent’는 전체 영역이 아니라 프레임세트로 링크된 문서를 연다는 점이 다르다. 프레임세트는 또 다른 프레임세트를 포함할 수 있으므로 프레임세트가 반드시 전체 영역이라고 볼 수는 없다. 따라서 ‘_parent’는 전체 영역이 아니라 일부 영역만을 지정한다는 점에서 ‘_top’과는 다르다.
accesskey 속성
accesskey 속성은 바로가기 키(access key)를 지정한다. 바로가기 키는 미리 정해진 기능을 키보드의 키 조합으로 수행할 수 있도록 만든 단축 키(shortcut key)를 말한다. 컴퓨터의 기본 입력 장치는 마우스가 아니라 키보드이다. 따라서 문서에 있는 모든 요소는 키보드로 제어할 수 있어야 한다. accesskey 속성이 적용된 요소는 포커스를 받거나 또는 실행이 이루어진다. 가령, accesskey 속성이 INPUT 요소에 적용되면 포커스를 받게 되고, A 요소에 적용되면 곧바로 목적지로 이동한다.
속성값은 키보드에 있는 문자인데, 알파벳이나 숫자 중에서 원하는 문자를 선택하여 지정할 수 있다. 주로 한 자리 문자를 지정하는데, 만약 하나의 요소에 두 개 이상의 문자를 정의할 경우에는 띄어쓰기로 구분해야 한다.
<a href=”http://www.google.com/” accesskey=”g”>Google</a>한 문서 내에 여러 개의 바로가기 키를 제공할 경우, 기억하기 쉬운 문자를 사용하는 것이 바람직하다. accesskey 속성은 브라우저에 따라 렌더링하는 방식이 달라진다. 가령, Windows의 인터넷 익스플로러(Internet Explorer)는 Alt 키, Mac OS X의 사파리(Safari)는 Cmd 키를 함께 사용한다. 바로가기 키가 있으면 키보드만으로 원하는 요소로 바로 이동할 수 있으므로 키보드 내비게이션이 편리해진다.
그런데 문제도 있다. 우선 바로가기 키가 있는지 여부를 미리 알 수 없다는 점이다. 또 어떤 경우에는 스크린 리더의 단축 키와 충돌되는 경우도 생길 수 있다. 그래서 바로가기 키가 주된 내비게이션 방법이 되긴 어렵겠지만, 자주 찾는 메뉴나 요소를 바로가기 키로 일관성 있게 지정한다면 보조 내비게이션 방법로써는 충분한 가치가 있다. 이를 위해서는 표준에 입각한 바로가기 키가 필요한데, 그 좋은 예가 바로 영국 정보의 바로가기 키 권고안이다.
영국의 정부, 공공기간, 대학 사이트를 이용하다 보면 바로가기 키에 대한 안내 문서를 종종 볼 수 있는데, 거의 동일한 바로가기 키를 사용하고 있다는 사실을 발견할 수 있다. 영국 정부에서 바로가기 키에 대한 권고안을 제시했고, 웹 사이트에서는 이 권고안을 기본적으로 이행하고 있었다.
※ 영국 정부의 바로가기 키 권고안
S – Skip navigation
1 – Home page
2 – What’s new
3 – Site map
4 – Search
5 – FAQ
6 – Help
7 – Complaints procedure
8 – Terms and conditions
9 – Feedback form
0 – Access key details
영국 공공기관 웹 사이트의 웹 접근성 안내 문서
(http://www.ukpayments.org.uk/about\_ukpayments/-/page/365/)
title 속성
title 속성은 요소에 관한 제목(title)을 지정한다. 여기에서 말하는 “제목”은 문서 제목처럼 내용을 대표하기 위한 이름이 아니라 특정 요소에 관한 추가 정보(additional information)를 의미한다. 이 속성은 “추가적(extra)”, “부가적(additional)”, “조언적(advisory)”의 성격을 지니고 있으며, 주로 특정 요소의 특성이나 성질을 설명하기 위한 용도로 사용된다. 언제 어떻게 설명해야 하는지 구체적으로 정해진 바가 없다. 그리고 거의 모든 요소에 사용할 수 있으므로 다음과 같이 상황에 따라 title 속성의 용도는 달라진다.[118] 그래서 다른 속성과 달리 창의적인 작성이 필요하다.
- A 요소: 링크가 어디를 향하는지, 링크를 누르면 어떤 현상이 발생하는지 설명하고자 할 때
<a href=”http://www.vdlab.com/” title=”새창”>VDLab</a>- P 요소: 문단에 관한 주석(note)를 제공할 때
<p title=”이 내용은 다음 회기에 개정될 예정입니다”>- IMG 요소: 이미지 파일에 관한 추가 설명이 필요할 때
<img src=”../shoe\_1234.jpg alt=”어린이 등산화” title=”사진 속 크기는 실제와 동일합니다”>- INPUT 요소: 입력 컨트롤에 관한 사용 설명이 필요할 때
<input type=”tel” title=”숫자만 입력”>- ABBR 요소: 약어나 두문자어를 풀이할 때. 단, 중요도가 높은 약어는 title 속성으로 설명하지 않고 본문에 직접 출력되는 것이 바람직하다.
<abbr title=”HyperText Markup Language”>HTML</abbr>문서는 텍스트, 리스트, 테이블, 그림 등 다양한 요소로 구성되며, 이러한 요소들이 의미적으로 전개되면서 내용을 만든다. 내용은 주로 본문에 담는다. 그런데 본문에 담기 어려운 내용도 있다. 요소에 대한 설명(advisory information)나 주석(annotation)이 바로 그것이다. 이런 정보를 본문에 담게 되면 내용이 복잡해지거나 텍스트 흐름을 방해할 수 있기 때문에 필요할 때만 처리되도록 만드는 것이 좋은데, 이럴 때 title 속성을 사용하면 된다.
TITLE 요소는 필수적이지만 title 속성은 선택적이다. 그리고 TITLE 요소는 문서 당 하나만 존재해야 하지만 title 속성은 요소마다 제공될 수 있므로 한 문서 내에 여러 개의 title 속성이 존재할 수 있다. title 속성으로 처리된 정보를 브라우저가 어떻게 처리해야 하는지에 대한 규칙은 명확하지 않지만, 일일반적으로 다음과 같은 방법으로 출력한다.
- 툴팁(tool tip): 마우스를 링크된 텍스트나 입력 컨트롤 위에 대면, title 속성으로 지정된 텍스트가 풍선말 형태로 나타난다.
- 음성 출력: 내용을 음성으로 출력하는 보조기기(audio user agent)가 title 속성으로 지정된 텍스트를 음성으로 출력한다.
툴팁의 경우, 마우스 조작에 의해서만 나타난다는 점에 유의해야 한다. 이것은 마우스를 대지 않거나 또는 키보드를 사용할 때는 title 속성으로 지정된 텍스트를 볼 수 없다는 것을 의미한다. 또한 title 속성으로 지정된 텍스트는 인쇄나 복사와 같이 브라우저의 기본 기능이 적용되지 않는다. 따라서 사용자가 반드시 처리해야 하는 정보는 title 속성이 아닌 본문을 통해 제공하는 것이 원칙이다.
예제 |
현재까지 작업한 결과, 다른 소스를 참조하거나 연결해야 할 곳은 다음과 같으며, 이것을 A 요소로 마크업하였다.
- 로고
- 내비게이션
- 위키피디어
- 상세이미지 캡션
- 배너
- 비디오 파일 링크 (비디오 파일을 재생할 수 없는 경우, 원문 주소로 이동할 수 있는 링크 제공)
- 오디오 파일 링크 (오디오 파일을 재생할 수 없는 경우, 원문 주소로 이동할 수 있는 링크 제공)
<!DOCTYPE html><html lang=”ko”><head>중략
</head><body><header><div id=”logo”><a href=”http://uxdesign.example.com”><img src=”http://www.example.com/img.gif” alt=”ux design 홈” width=”120” height=”50”></a></div><div id=”search”>검색창
</div></header><nav><ul><li><a href=”info.html>책소개</a></li><li><a href=”author.html>저자소개</a></li><li><a href=”preview.html>미리보기</a></li><li><a href=”comment.html>서평</a></li><li><a href=”event.html>이벤트</a></li><li><a href=”sell.html>구입처</a></li></ul></nav><section id=”main”><h1>책소개</h1><section id=”sub\_overview”><h2>개요</h2><hgroup><h3>UX Design, 1st Edition</h3><h4>사용자가 경험하는 모든 것을 디자인하라</h4></hgroup><p><a href=”http://www.wikipedia.org” target=”_blank”>위키피디어</a>에 따르면, UX는 사용자가 제품, 시스템 또는 서비스를 이용하면서 얻게 되는 총체적 경험이다.
</p>중략
<section id=”sub\_picture”><h2>상세이미지</h2><figure><figcaption>본문 내용은 아래와 같이 구성되어 있습니다.<a href=”http://www.example.com/more.html target=”\_blank”>더보기</a></figcaption><figure><img src="/UX\_UPA.jpg” alt="UX 프로세스 썸네일" width="200" height="180"><figcaption><a href=”http://www.example.com/photos\_UPA.html>UX 프로세스 by UPA</a></figcaption></figure><figure><img src=”/UX\_Jess.jpg” alt=”경험의주기 썸네일” width="200" height="180"><figcaption><a href=”http://www.example.com/photos\_Jess.html>경험의 주기 by Jess</a></figcaption></figure><figure><img src=”/UX\_Peter.jpg” alt=”UX의 중요성 썸네일” width="200" height="180"><figcaption><a href=”http://www.example.com/photos\_Peter.html>UX의 중요성 by Peter</a></figcaption></figure></figure></section><article id=”sub\_comment”><h2>댓글</h2></article></section><aside id=”sidebar”><section id=”flash\_ad”><object data=”brazil.swf” type=”application/x-shockwave-flash” width=”250” height=”250”><p><a href=”http://www.exmaple.com/ad\_brazil.html target=”\_blank”>Brazil Eucalyptus Plantations</a></p><param name=”autoplay” value=”true”></object></section><section id=”video”><h3>Podcast</h3><video src=”mappingexperience.mp4” controls=”controls” muted=”muted” width=”250”, height=”350” poster=”slide\_title.jpg”><p><a href=”http://www.exmaple.com/mappingexperience.html>Mapping the Experience Lisbon</a></p></video><p>\[비디오\] Mapping the Experience 42분</p></section><section id=”audio”><audio src=”human.mp3” controls=”controls” preload=”none” width=”250”, height=”80”><source src=”human.ogg” type=”audio/ogg”><source src=”human.mp3” type=”audio/mp3”><p><a href=”http://www.exmaple.com/human\_cast.html>Maual for Human Experience </a></p></audio>중략
</body></html>EM 요소
카테고리 | Flow content, Phrasing content |
콘텐츠 속성 | 글로벌 속성 |
지원 브라우저 | |
EM 요소는 강조(EMphasis)를 표시한다. 문장 내에서 무엇을 강조하느냐에 따라 문장의 의미는 달라질 수 있다. 우리가 말할 때 같은 내용이더라도 어떤 내용에 스트레스(stress, 상대적 강도)를 주느냐에 따라 미세한 어감 차이가 생긴다는 사실을 알 수 있는데, 이러한 차이는 전체적인 의미를 변화시키기도 한다. 어떻게 변화시키는지 예를 들어 살펴보자.[119]
구분 | 상황 | 문장 |
강조점이 없는 경우 | 일반적인 상황 | <p>고양이는 귀여운 동물입니다.</p> |
‘고양이’를 강조한 경우 | “강아지가 귀엽다”라는 주장에 대응하는 상황 | <p><em>고양이</em>는 귀여운 동물입니다.</p> |
동사를 강조한 경우 | “고양이는 귀엽지 않다”라는 주장에 대응하는 상황 | <p>고양이는 귀여운 동물<em>입니다</em>.</p> |
‘귀여운’을 강조한 경우 | “고양이는 성질이 나쁘다”라는 주장에 대응하는 상황 | <p>고양이는 <em>귀여운</em> 동물입니다.</p> |
‘동물’을 강조한 경우 | “고양이는 인간이다”라는 주장에 대응하는 상황 | <p>고양이는 귀여운<em>동물</em> 입니다.</p> |
EM 요소로 지정된 텍스트는 다른 글자(normal text)와 구분될 수 있도록 이탤릭체로 표현된다.
예제 |
“총체적 경험”을 강조하였고, 이것을 EM 요소로 마크업하였다.
<!DOCTYPE html><html lang=”ko”><head>중략
</head><body>중략
<p><a href=”http://www.wikipedia.org” target=”_blank”>위키피디어</a>에 따르면, UX는 사용자가 제품, 시스템 또는 서비스를 이용하면서 얻게 되는 <em>총체적 경험</em>이다.
</p>중략
</body></html>STRONG 요소
카테고리 | Flow content, Phrasing content |
콘텐츠 속성 | 글로벌 속성 |
지원 브라우저 | |
STRONG 요소는 높은 중요도(STRONG importance)을 표시한다. 앞에서 살펴본 EM 요소는 문맥을 통해 의미의 변화를 이끌어내기 위한 요소라면 STRONG 요소는 중요한 내용(keyword, key sentence)를 강조하여 쉬운 이해를 돕기 위한 요소라고 볼 수 있다. 그래서 EM 요소는 문장의 의미를 변화시키지만, STRONG 요소는 문장의 의미를 변화시키지 않는다.
STRONG 요소로 지정된 텍스트는 다른 글자(normal text)와 구분될 수 있도록 굵은 서체로 표현된다. B 요소로 지정된 글자도 굵은 서체로 표현되는데, 이것은 STRONG 요소처럼 강조의 의미로 사용되는 것이 아니라 단순히 시각적 용도로 사용된다. 따라서 중요도가 높은 내용을 B 요소로 표시하는 것은 잘못된 방법이며, 시각적 목적으로 굵게 표현하려면 B 요소보다는 CSS를 이용하는 것이 바람직하다.
<p>가장 중요한 것은 바로 <strong>올바른 판단</strong>이다.</p>예제 |
“UX”를 좀 더 강조하기 위해 STRONG 요소로 마크업하였다.
<!DOCTYPE html><html lang=”ko”><head>중략
</head><body>중략
<p><a href=”http://www.wikipedia.org” target=”_blank”>위키피디어</a>에 따르면, <strong>UX</strong>는 사용자가 제품, 시스템 또는 서비스를 이용하면서 얻게 되는 <em>총체적 경험</em>이다.
</p>중략
</body></html>I 요소
카테고리 | Flow content, Phrasing content |
콘텐츠 속성 | 글로벌 속성 |
지원 브라우저 | |
I 요소는 이탤릭체(Italic)가 적용될 텍스트 범위를 표시한다. 앞에서 살펴보았던 EM 요소를 사용하더라도 이탤릭체가 적용되는데, EM 요소는 강조의 의미가 있지만 I 요소는 특별한 의미가 없다. 단순히 다른 글자(normal text)와의 구분을 위해 이탤릭체로 표현하는 것이므로 주로 분류 명칭(taxonomic designation), 기술 용어(technical term), 관용구(idiomatic phrase) 등 시각적 또는 청각적 구분이 필요한 곳에 I 요소를 사용한다.
사용자가 정보를 시각적으로 처리하는 경우, 기울지 않은 글자를 읽다가 기운 글자가 나타나면 형태 대비에 의해 기운 글자를 주의 깊게 살피게 된다. 이러한 원리는 음성출력에도 적용된다. EM과 I 요소가 적용된 글자는 같은 모양으로 표현되지만, 그 용도는 다르다. 만약 저작자가 I 요소를 강조의 의미로 사용하게 되면, 시각적 해석이 어려운 스크린 리더 사용자에게 잘못된 정보를 제공할 수 있다는 점에 유의해야 한다.
<p>오늘 프랑스 요리인 <i lang=”fr”>Foie gras</i>을 먹었다.</p>B 요소
카테고리 | Flow content, Phrasing content |
콘텐츠 속성 | 글로벌 속성 |
지원 브라우저 | |
B 요소는 굵은 서체(Bold text)가 적용될 텍스트 범위를 표시한다. 앞에서 살펴보았듯이 STRONG 요소도 글자를 굵은 서체로 표현한다. STRONG 요소가 ‘의미적 강조’(strong emphasis)를 위한 것이라면, B 요소는 ‘시각적 강조’(visual highlighting)를 위한 것이다. 의미적으로 강조할 필요가 없는 글자를 시각적으로 강조할 필요가 있을까? 사실 이런 경우는 드물다. 사람들은 시각적 강조는 곧 의미적 강조라고 인식한다. 그래서 시각적 강조가 함부로 이루어져서는 안 된다.
STRONG 요소와 B 요소가 적용된 글자는 같은 모양으로 표현되지만, 그 용도는 다르다. 만약 저작자가 B 요소를 중요도를 표현하기 위한 용도로 사용하게 되면, 시각적 해석이 어려운 스크린 리더 사용자에게 잘못된 정보를 제공할 수 있다는 점에 유의해야 한다. 따라서 B 요소는 다음과 같이 반드시 필요한 상황에서만 제한적으로 사용되어야 한다.
- 특정 단어를 상대적으로 잘 보이게 처리하여 읽기 흐름을 도울 때
- 읽기 시작점을 표시하여 빠른 읽기를 도울 때
<p><b>고래</b>는 고래과의 포유 동물의 총칭으로, 동물 중에서 가장 크다.<br> <b>고기</b>는 식용, <b>기름</b>은 공업용, 뼈･수염은 공예용으로 이용된다. 너무 크기 때문에 1m정도로 분단하고, 또한 몇 매로 분할해서 무두질한다.<br> <b>섬유조직</b>은 거칠지만 튼튼하고 흡수성도 좋은데 이용은 적은 편이다.</p>CITE 요소
카테고리 | Flow content, Phrasing content |
콘텐츠 속성 | 글로벌 속성 |
지원 브라우저 | |
CITE 요소는 인용된 작품 제목(CITEd title of a work)을 표시한다. 여기에서 작품(work)이란 책, 논문, 에세이, 노래, 영화, 게임 등을 의미하므로 내용 중에 다른 사람의 작품을 소개하는 내용이 있을 때 CITE 요소를 사용한다. CITE 요소는 인용를 위한 규격이지만, 인용 여부와 상관 없이 작품 제목을 표시하는 용도로 사용할 수도 있다.
‘Citation’과 ‘Quotation’을 사전에서 찾아보면 둘 다 ‘인용’ 또는 ‘인용구’라고 나와있다. 사전적 의미는 같지만 용도나 목적은 조금 다르다. HTML에서도 CITE 요소와 Q 요소를 구분하여 정의하고 있다. CITE 요소는 참고 또는 출처에 관한 “제목”을 인용하는 것이라면, Q 요소는 참고 또는 출처에 있는 “내용”을 인용하는 것이다. CITE 요소는 인라인 요소이며, 대부분의 브라우저는 CITE 요소로 마크업된 글자를 이탤릭체로 표시하고 있다.
<p>이 글은 <cite>UX DESIGN</cite>에 기초하여 작성되었습니다.</p>예제 |
상세이미지는 다름 사람의 이미지를 인용한 것이므로 인용 여부를 표시하기 위해 CITE 요소로 마크업하였다.
<!DOCTYPE html><html lang=”ko”><head>중략
</head><body>중략
<section id=”sub\_picture”><h2>상세이미지</h2><figure><figcaption>본문 내용은 아래와 같이 구성되어 있습니다.<a href=”http://www.example.com/more.html target=”\_blank”>더보기</a></figcaption><figure><img src="/UX\_UPA.jpg” alt="UX 프로세스 썸네일" width="200" height="180"><figcaption><cite><a href=”http://www.example.com/photos\_UPA.html>UX 프로세스 by UPA</a></cite></figcaption></figure><figure><img src=”/UX\_Jess.jpg” alt=”경험의주기 썸네일” width="200" height="180"><figcaption><cite><a href=”http://www.example.com/photos\_Jess.html>경험의 주기 by Jess</a></cite></figcaption></figure><figure><img src=”/UX\_Peter.jpg” alt=”UX의 중요성 썸네일” width="200" height="180"><figcaption><cite><a href=”http://www.example.com/photos\_Peter.html>UX의 중요성 by Peter</a></cite></figcaption></figure></figure></section>중략
</body></html>Q 요소
카테고리 | Flow content, Phrasing content |
콘텐츠 속성 | 글로벌 속성, cite |
지원 브라우저 | |
Q 요소는 인용된 내용(Quoted content)을 표시한다. 일반적으로 인용은 직접 인용과 간접 인용으로 구분된다. 직접 인용은 인용된 내용만으로 문장을 만드는 것이고, 간접 인용은 남의 말이나 글을 내가 쓴 말이나 글에 포함시켜서 문장을 만드는 것이다. 아래의 예를 보면 알 수 있듯이, 인용 여부를 판단하는 데 있어서는 인용 부호(큰 따옴표, double quotation marks)를 사용한 직접 인용이 간접 인용보다 더 직관적이다. 이와 같이 Q 요소는 직접 인용을 위한 표준 기술인데, 이 규격를 사용하면 브라우저가 인용 부호를 제공하므로 인용된 내용에 별도로 인용 부호를 작성하지 않아도 된다.
CITE 요소와 Q 요소는 같으면서도 다르다. 인용한다는 측면에서는 같지만, 인용 대상 측면에서는 다르다. CITE 요소는 반드시 외부에 있는 내용을 인용할 때 사용하지만, Q 요소는 인용된 내용이라면 내부이든 외부이든 상관 없이 사용할 수 있다. Q 요소도 CITE 요소와 마찬가지로 인라인 요소이며, 대부분의 브라우저는 Q 요소로 마크업된 글자를 이탤릭체와 큰 따옴표로 표현하고 있다.
간접 인용의 예:
철수는 인생은 아름답다고 말했다. 🡪 <p>철수는 인생은 아름답다라고 말했다.</p>
직접 인용의 예:
철수는 “인생은 아름답다.”라고 말했다. 🡪 <p>철수는 <q>인생은 아름답다.</q>라고 말했다.</p>
예제 |
“UX는 ~ 총체적경험”이 인용된 내용이므로 인용 여부를 밝히기 위해 Q 요소로 마크업하였다.
<!DOCTYPE html><html lang=”ko”><head>중략
</head><body>중략
<p><a href=”http://www.wikipedia.org” target=”_blank”>위키피디어</a>에 따르면, <q><strong>UX</strong>는 사용자가 제품, 시스템 또는 서비스를 이용하면서 얻게 되는 <em>총체적 경험</em></q>이다.
</p>중략
</body></html>CODE 요소
카테고리 | Flow content, Phrasing content |
콘텐츠 속성 | 글로벌 속성 |
지원 브라우저 | |
CODE 요소는 컴퓨터 코드(computer CODE)를 표시한다. 문서를 작성하다 보면, 다음의 예제처럼 컴퓨터 코드를 직접 설명해야 할 때가 있다. 이 때 브라우저가 컴퓨터 코드가 소스가 아니라 콘텐츠로 인식할 수 있도록 CODE 요소를 사용하며, 대개 ‘Courier’와 같은 고정폭 글꼴(fixed-width typeface, monospace font)로 표현된다.
<pre><code>function Panel(element, canClose, closeHandler) {
this.element = element;
this.canClose = canClose;
this.closeHandler = function () { if (closeHandler) closeHandler() };
}
</code></pre>
function Panel(element, canClose, closeHandler) {
this.element = element;
this.canClose = canClose;
this.closeHandler = function () { if (closeHandler) closeHandler() };
}
SAMP 요소
카테고리 | Flow content, Phrasing content |
콘텐츠 속성 | 글로벌 속성 |
지원 브라우저 | |
SAMP 요소는 프로그램이나 컴퓨터에 의해 얻어지는 샘플 출력물(SAMPle output)을 표시한다. ‘샘플’(sample)의 사전적 의미는 ‘표본’, ‘견본’이지만, 여기에서는 ‘사례’(example)의 의미도 갖고 있다. 프로그램이나 컴퓨터가 어떤 출력물을 제공하는지 설명해야 할 때 견본이나 사례를 들어 쉬운 이해를 돕는데, 이 때 실제와 샘플 출력물을 구분하지 않으면 혼란을 야기시킬 수 있으므로 SAMP 요소를 사용하면 둘 사이의 구분을 명확하게 표현할 수 있다. 이 요소는 일반적인 문서에서는 만나기 어렵지만, 교재나 설명서에서는 자주 사용한다.
<p>브라우저가 해당 웹 문서를 찾을 수 없을 경우, 오류 메시지 <samp>”Ooops! Google Chrome could not find www.example.com”</samp>이 출력된다.</p>ABBR 요소
카테고리 | Flow content, Phrasing content |
콘텐츠 속성 | 글로벌 속성 |
지원 브라우저 | |
ABBR 요소는 약어(ABBReviation) 또는 두문자어(acronym)를 표시한다. 약어는 단어를 간단하게 표현하기 위해 단어의 일부 또는 첫 글자만으로 구성된 말이며, 두문자어는 각 단어의 첫 글자만으로 구성된 말이다. 예컨대, ‘abbr’은 ‘abbreviation’의 약어이며, ‘WWW’는 ‘World Wide Web’의 두문자어다.
약어와 두문자어로 인해 당황했던 경험은 누구나 한두 번쯤 있을 것이다. 글쓰기와 커뮤니케이션 측면에서 약어와 두문자어의 사용은 장점과 단점이 너무나도 극명하게 나타난다. 약어와 두문자를 이미 알고 있다면 빠른 의사소통을 도울 수 있지만, 모른다면 의사소통 자체가 이루어지지 않는다. 특히, 웹 문서는 스크린 리더, 검색엔진, 번역기 등 다양한 기계에 의해 이용되기 때문에 잘 알려지지 않은 약어와 두문자어는 사용자와 기계 모두를 힘들게 만든다.
또한 약어와 두문자어를 이해하는 것도 어렵지만, 읽는 것도 만만치 않다. 가령, ‘RADAR’와 같은 두문자어는 이미 잘 알려져 있으므로 스크린 리더가 ‘레이더’라고 읽도록 설정될 수 있지만, ‘KISA’와 같은 두문자어는 ‘키사’로 읽어야 할지 ‘케이아이에스에이’로 읽어야 할지 난감하다. 여하튼 언어는 사회적 약속의 산물이므로 단순히 규칙만으로 의사소통 방법을 결정하는 것이 결코 쉽지 않다. 이러한 어려움을 마크업 언어로 해결할 것인지 아니면, 글쓰기 영역에서 해결하도록 유도할 것인지 고민스럽다. HTML 4.X 버전에서 두문자어를 표시하기 위한 표준 기술인 ACRONYM 요소[120]가 HTML5에서는 없어진 것으로 보아, 복잡하고 미묘한 언어적 이슈는 마크업 언어보다는 글쓰기 영역에서 해결하는 것이 낫다고 판단한 것 같다. 예컨대, 두문자어 ‘WWW’를 설명하기 위해 굳이 ABBR 요소와 같은 HTML 규격을 사용할 필요 없이, 글쓰기 영역에서 ‘WWW(World Wide Web)’라고 표현해 주면 되는 것이다.
ABBR 요소는 약어나 두문자어라는 사실을 표시만 할 뿐, 약어나 두문자어를 설명해 주지는 못한다. 따라서 약어나 두문자어에 관한 설명은 title 속성을 사용해야 한다. title 속성은 문서에 나타나지 않으므로 사용자가 약어나 두문자어에 마우스를 올려야만 title 속성으로 작성된 내용을 풍선말(tooltip) 방식으로 볼 수 있다. 그런데 title 속성으로 작성된 내용은 전달될 가능성이 낮다. 무엇보다도 사용자가 약어나 두문자어에 마우스를 댈거라는 보장이 없다. 스크린 리더의 경우에도 title 속성을 음성으로 출력하지만, 사용자 설정에 따라 title 속성을 출력하지 않을 수도 있다. 또한 마우스 없이 키보드만으로 이용하는 경우, 풍선말이 보이도록 할 수 없기 때문에 title 속성으로 작성된 내용을 확인할 수 없다. 특히, 문서를 인쇄할 경우에는 title 속성은 출력되지 않는다는 점에서 중요도가 높은 약어는 title 속성으로 설명하지 않고 본문에 직접 출력되도록 작성하는 것이 바람직하다.
<abbr title="World Wide Web">WWW</abbr>
예제 |
“UX”가 두문자어라는 사실을 밝히기 위해 ABBR 요소로 마크업하였다.
<!DOCTYPE html><html lang=”ko”><head><title>UX DESIGN</title>중략
</head><body>중략
<p><a href=”http://www.wikipedia.org” target=”_blank”>위키피디어</a>에 따르면, <q><strong><abbr title=”user experience”>UX</abbr></strong>는 사용자가 제품, 시스템 또는 서비스를 이용하면서 얻게 되는 <em>총체적 경험</em></q>이다.
</p>중략
</body></html>DFN 요소
카테고리 | Flow content, Phrasing content |
콘텐츠 속성 | 글로벌 속성 |
지원 브라우저 | |
DFN 요소는 용어 정의(DeFiNing term)를 표시한다. ‘용어’는 일정한 분야에서 주로 사용하는 말이므로[121] 일반적으로 사용하는 말과 다르게 표현할 필요가 있다. DFN 요소는 단순히 “용어”라는 사실을 알리는 역할만 하기 때문에 직접 용어를 설명해야 할 경우에는 title 속성을 사용해야 한다.
<p>자세한 설명은 <dfn title=”오디오 파일 또는 비디오 파일형태로 뉴스나 드라마 등 다양한 콘텐츠를 인터넷망을 통해 제공하는 서비스”>팟캐스트</dfn>을 참조하세요</p>특히, 용어와 설명으로 구성된 문장은 용어라는 사실을 명확하게 밝히는 것이 전체 내용을 이해하는 데 도움된다. 아래 예제는 용어와 설명으로 구성된 문장이다. 예제 1처럼 굳이 용어에 별도의 강조점을 두지 않더라도 어떤 것이 용어이고 어떤 것이 설명인지 내용을 통해 구분할 수 있다. 그런데 많은 문장으로 구성된 문서라면 상황은 달라질 수 있으므로 용어 표시를 통해 읽고 있는 문장이 용어와 설명으로 구성된 문장이라는 사실을 알릴 필요가 있다. 이렇게 하면 사용자는 아무래도 좀 더 주의를 기울일 것이다. 특정 용어를 강조하고자 할 때, 글 쓰는 사람들은 대개 예제 2나 예제 3처럼 표현한다. 이런 표현은 시각적 표현이다. 웹 문서는 의미적 표현도 구현되어야 하므로 용어에 대한 별도의 표시가 필요하며, 이 때 DFN 요소를 사용한다. 일부 브라우저는 DFN 요소로 표시된 글자를 이탤릭체로 표현하는데, 이것이 마음에 들지 않는다면 스타일 시트를 이용하여 다른 표현을 적용시키면 된다.
(예제1) 용어란 일정한 분야에서 주로 사용하는 말이다. 🡪 <p>용어란 일정한 분야에서 주로 사용하는 말이다.</p>
(예제2) ‘용어’란 일정한 분야에서 주로 사용하는 말이다. 🡪 <p>’용어’란 일정한 분야에서 주로 사용하는 말이다.</p>
(예제3) 용어: 일정한 분야에서 주로 사용하는 말 <p><dfn>용어</dfn>: 일정한 분야에서 주로 사용하는 말</p>
예제 |
“UX”, “User Experience”, “인터랙티브 제품”이 전문 용어라는 사실을 밝히기 위해 DFN 요소로 마크업하였다. “UX”의 경우 ABBR 요소로 표시할 예정이므로 DFN 요소를 사용하지 않았고, “User Experience”와 “인터랙티브 제품”은 문장 속에 용어 설명이 포함되어 있기 때문에 별도로 title 속성을 제공하지 않았다.
<!DOCTYPE html><html lang=”ko”><head><title>UX DESIGN</title>중략
</head><body>중략
<blockquote cite=” http://en.wikipedia.org/wiki/User\_experience”><div class=”blue”>[위키피디어 원문] <dfn>User experience</dfn> is the way a person feels about using a product, system or service. User experience highlights the experiential, affective, meaningful and valuable aspects of human-computer interaction and product ownership, but it also includes a person’s perceptions of the practical aspects such as utility, ease of use and efficiency of the system.
</div></blockquote><p><dfn>인터랙티브 제품</dfn>은 상호작용이 이루어지는 제품을 일컫는다. 이러한 제품을 다루는 것이 이미 일상이 되었기 때문에 그 과정이 지루하거나 건조하다면 제품과 함께 하는 시간은 고통의 연속일 것이다. 한 동안 사용성(사용하기 쉽고 편리한 정도)이 중요하게 다뤄져 왔지만, 사용성은 제품을 구성하고 있는 부분적 속성일 뿐 이것만으로는 사용자 가치(사용자가 제품으로 얻을 수 있는 모든 것)를 제대로 구현하기가 어렵다.
</p>중략
</body></html>SUB 요소
카테고리 | Flow content, Phrasing content |
콘텐츠 속성 | 글로벌 속성 |
지원 브라우저 | |
SUB 요소는 아래 첨자(SUBscript)를 표시한다. 첨자는 문자나 기호로 이루어져 있으며, 특별한 규칙에 의해 크기와 위치가 정해진다. 첨자를 단순히 시각적인 방법으로 크기를 작게 하거나 위치를 아래에 둔다면 브라우저는 해당 글자가 첨자인지 알 수 없으므로 SUB 요소를 사용하여 의미적으로 표현하는 것이 바람직하다.
<p>H<sub>2</sub>O</p>
아래 첨자[122]
SUP 요소
카테고리 | Flow content, Phrasing content |
콘텐츠 속성 | 글로벌 속성 |
지원 브라우저 | |
SUP 요소는 위 첨자(SUPerscript)를 표시한다. 첨자는 문자나 기호로 이루어져 있으며, 특별한 규칙에 의해 크기와 위치가 정해진다. 첨자를 단순히 시각적인 방법으로 크기를 작게 하거나 위치를 위에 둔다면 브라우저는 해당 글자가 첨자인지 알 수 없으므로 SUP 요소를 사용하여 의미적으로 표현하는 것이 바람직하다.
<var>E</var>=<var>m</var><var>C</var><sup>2</sup>
위 첨자[123]
예제 |
“1st”의 “st”가 위 첨자라는 사실을 밝히기 위해 SUP 요소로 마크업하였다.
<!DOCTYPE html><html lang=”ko”><head><title>UX DESIGN</title>중략
</head><body>중략
<section id=”main”><h1>책소개</h1><section id=”sub\_overview”><h2>개요</h2><hgroup><h3>UX Design, 1<sup>st</sup> Edition</h3><h4>사용자가 경험하는 모든 것을 디자인하라</h4></hgroup>중략
</body></html>DEL 요소
카테고리 | Flow content, Phrasing content |
콘텐츠 속성 | 글로벌 속성, cite, datetime |
지원 브라우저 | |
DEL 요소는 삭제된 글자(DELeted text)를 표시한다. 대부분의 문서는 최종 상태(current state)로 제공되지만, 규칙이나 지침처럼 개정 여부가 중요한 콘텐츠는 변경 전과 변경 후의 내용을 비교 평가할 수 있게 구성하기도 하며, 이럴 때 DEL 요소를 사용한다.
삭제 여부는 중요한 정보이므로 대부분의 브라우저는 DEL 요소가 적용된 글자를 삭선(취소선)[124]으로 표현한다.
<h1>오늘의 행사</h1><ul><li>주민과의 대화</li><li><del>워크숍 개최</del></li><li>자선 바자회</li></ul>
cite 속성
cite 속성은 삭제 이유가 기술된 문서(cited document that contains the reason for deletion)를 지정한다. 경우에 따라서는 변경 이유를 자세하게 알려야 할 때가 있다. 이런 경우, 변경 이유를 별도의 문서로 작성한 다음 cite 속성을 이용하여 연결할 수 있다. CITE 요소와 달리, cite 속성값은 URL 형식으로 지정되어야 한다.
<h1>오늘의 행사</h1><ul><li>주민과의 대화</li><li><del cite=”http://www.exmaple.com/promotion.html” >워크숍 개최</del></li><li>자선 바자회</li></ul>datetime 속성
datetime 속성은 변경 시점의 날짜와 시간 정보(date and time)를 지정한다. 지정 방법은 다음과 같다.
- YYYY : 년도
- MM : 월
- DD : 날짜
- T : 구분자
- hh : 시
- mm : 분
- ss : 초
- TZD : 시간대 지정(Time Zone Designator)[125]
<h1>오늘의 행사</h1><ul><li>주민과의 대화</li><li><del cite=”http://www.exmaple.com/promotion.html datetime=”2011-04-20T22:33:44+09:00”>워크숍 개최</del></li><li>자선 바자회</li></ul>INS 요소
카테고리 | Flow content, Phrasing content |
콘텐츠 속성 | 글로벌 속성, cite, datetime |
지원 브라우저 | |
INS 요소는 삽입(추가)된 글자(INSerted text)를 표시한다. 저작자가 이전 버전과 다르게 어떤 내용을 추가했고 이를 알리고자 할 때 INS 요소를 사용한다. 일반적으로 DEL 요소와 짝을 이루어 사용하며, 대부분의 브라우저는 INS 요소로 처리된 글자를 밑줄 있는 글자로 표시한다. DEL 요소와 마찬가지로 cite 속성과 datetime 속성을 갖는다.
<p>다음 내용이 추가되었습니다.</p><p><ins>응모 기회를 1인 1회로 제한합니다.</ins></p>
S 요소
카테고리 | Flow content, Phrasing content |
콘텐츠 속성 | 글로벌 속성 |
지원 브라우저 | |
S 요소는 취소선이 있는 글자(text with Strike-through)를 표시한다. 취소선은 글자 가운데에 그어진 선을 말하며, 더 이상 정확하지 않거나 적절하지 않다라는 사실을 표현할 때 사용한다. 가령, 판매가와 할인가를 비교하여 보여줘야 할 때 ‘판매가’에 S 요소를 사용하여 취소선이 나타나게 만든다. 그리고 저작자는 이 취소선을 통해 ‘판매가’가 더 이상 현재 상황에 맞지 않는다는 점을 시각적•의미적으로 동시에 표현할 수 있다.
HTML에서 취소선을 표현할 수 있는 요소는 S 요소와 DEL 요소다. 이 두 요소를 사용하면 똑 같이 취소선이 나타나지만, 그 용도와 의미는 조금 다르다. S 요소에 의한 취소선은 더 이상 정확하지 않거나 적절하지 않다는 사실을 알리기 위해 것이지만, DEL 요소에 의한 취소선은 삭제되었다는 사실을 알리기 위한 것이다.
<p><s>정확하지 않은 사실</s></p><p>정확한 사실</p>
예제 |
사이드바 영역에 “예약구매혜택” 정보를 추가하였는데, 이 중 일부 내용은 과거 사항이므로 삭선 처리가 이루어질 수 있도록 S 요소로 마크업하였다.
<!DOCTYPE html><html lang=”ko”><head><title>UX DESIGN</title>중략
</head><body>중략
<section id=”benefits”><h3>예약구매혜택</h3><p><s>1월 예약고객 독서대 증정</s></p><p>2월 예약고객 10% 할인</p></section>중략
</body></html>ADDRESS 요소
카테고리 | Flow content, Phrasing content |
콘텐츠 속성 | 글로벌 속성 |
지원 브라우저 | |
ADDRESS 요소는 저작자 또는 문서에 관한 연락처 정보(the address or information on author or document)를 표시한다. 내용을 읽고 궁금한 사항을 문의하거나 누가 작성한 내용인지 궁금할 수 있으므로 문서의 저작자(author), 제공자(owner), 연락 가능한 이메일 주소, 회사 주소, 전화번호 등을 밝히는 경우가 있는데, 이럴 때 ADDRESS 요소를 사용한다. 이 요소는 회사 주소와 같은 지리적 주소 외에도 다양한 연락 정보를 포함할 수 있는데, 반드시 현재 문서와 관련된 연락 정보에만 사용할 수 있으며 연락 정보가 아닌 다른 성격의 정보는 포함할 수 없다.
연락처 정보가 어떤 내용에 대한 것인지는 ADDRESS 요소의 위치에 따라 달라진다. 가령, 문서 전체를 위한 푸터에서 제공되었다면 연락처 정보는 전체 내용에 대한 것이지만, 특정 섹션에서 제공되었다면 연락처 정보는 특정 섹션에 국한한 것이다.
ADDRESS 요소는 블록 레벨 요소를 포함할 수 없으며, 인라인 요소와 텍스트만 포함할 수 있다. 표시 위치가 지정된 것은 아니지만, 주로 문서의 시작이나 종료 지점에서 사용한다. 대부분의 브라우저가 ADDRESS 요소로 마크업된 텍스트를 이탤릭체로 표시하는 동시에 줄띄기(line spacing)나 줄바꿈(line breaks)을 통해 다른 정보와 구분되도록 한다.
<footer><address>서울 강남구 역삼동 123 | 문의: 02-888-8888(담당자 직접 연결:# + 내선번호)
</address>©Valuable Design Lab
</footer>
예제 |
푸터 영역에 연락처와 저작권 정보를 추가하였고, 연락처 정보를 표시하기 위해 ADDRESS 요소로 마크업하였다.
<!DOCTYPE html><html lang=”ko”><head><title>UX DESIGN</title>중략
</head><body>중략
<footer><address>서울 강남구 역삼동 123 | 문의: 02-888-8888(담당자 직접 연결:# + 내선번호)
</address>©Valuable Design Lab
</footer></body></html>VAR 요소
카테고리 | Flow content, Phrasing content |
콘텐츠 속성 | 글로벌 속성 |
지원 브라우저 | |
VAR 요소는 변수(VARiable)를 표시한다. 수학이나 프로그래밍에 관한 내용은 변수를 포함하게 마련이다. 변수는 일정한 범위 내에서 값이 변하는 수이며, 변수를 어떻게 이해하느냐에 따라 전체 내용에 대한 이해도가 달라질 수 있다. 그만큼 변수는 중요한 키워드이다. 만약 변수를 일반적인 문자처럼 인식한다면 변수가 포함된 문장을 제대로 이해하지 못할 것이다. 가령, “원하시는 전화번호로 착신하려면 키보드의 * + 88 + 착신희망번호 + *를 누르시면 됩니다”라는 문구에서 ‘착신희망번호’를 변수로 읽지 않고 글자 그대로 이해하게 되면 문제가 생길 것이다. 이럴 때, VAR 요소를 사용하여 변수를 표시하여 잘못된 이해를 예방할 필요가 있다. 변수는 다른 글자와 다르게 표시되어야 하고 신속하게 구별되어야 하므로 VAR 요소가 적용된 글자는 대개 이탤릭체로 표현된다.
<p>사건이 발생할 경우의 수는 <var>n</var>가지이다.</p>예제 |
푸터 영역의 연락처 정보 중 “내선번호”는 변수이므로 VAR 요소로 마크업하였다.
<!DOCTYPE html><html lang=”ko”><head><title>UX DESIGN</title>중략
</head><body>중략
<footer><address>서울 강남구 역삼동 123 | 문의: 02-888-8888(담당자 직접 연결:# + <var>내선번호</var>)
</address>©Valuable Design Lab
</footer></body></html>KBD 요소
카테고리 | Flow content, Phrasing content |
콘텐츠 속성 | 글로벌 속성 |
지원 브라우저 | |
KBD 요소는 키보드 입력(KeyBoarD input)을 표시한다. 키보드 입력은 Ctrl, Alt, Shift, Delete 등처럼 키보드의 특정 키(key)를 선택하여 명령을 실행하는 것 또는 키보드를 이용하여 텍스트 필드에 텍스트를 입력하는 것을 말한다.
“Delete를 누르세요” 또는 “아이디 입력란에 Guest라고 입력하세요”라는 문장의 경우, 별도의 표시가 없더라도 ‘Delete’나 ‘Guest’를 키보드로 입력해야 한다는 사실을 알 수 있다. 그런데 이것은 문맥적으로 파악되는 것이므로 내용의 전후 관계, 사전 학습, 내용에 대한 이해가 필요하다. 내용이 복잡할수록 문장이 많아질수록 문맥은 파악하기 어려워진다. 그리고 브라우저와 같은 기계를 위해서는 분명하게 용도를 나타낼 필요가 있다. 이런 이유로 키보드 입력을 위한 텍스트를 KBD 요소로 표시하며, 대개 ‘Courier’와 같은 고정폭 글꼴(fixed-width typeface, monospace font)로 표현된다.
<p><kbd>Delete</kbd>를 누르세요</p><p>아이디 입력란에 <kbd>Guest</kbd>라고 입력하세요</p>예제 |
푸터 영역의 연락처 정보 중 “#”는 키보드 입력이므로 KBD 요소로 마크업하였다.
<!DOCTYPE html><html lang=”ko”><head><title>UX DESIGN</title>중략
</head><body>중략
<footer><address>서울 강남구 역삼동 123 | 문의: 02-888-8888(담당자 직접 연결:<kbd>#</kbd> + <var>내선번호</var>)
</address>©Valuable Design Lab
</footer></body></html>SMALL 요소
카테고리 | Flow content, Phrasing content |
콘텐츠 속성 | 글로벌 속성 |
지원 브라우저 | |
SMALL 요소는 작은 글자(small text)를 표시한다. 이 요소가 적용된 글자는 기본 크기의 글자보다 더 작게 표현되는데, 이것은 메인 콘텐츠(main content)가 아니라 주석(side comment)이라는 점을 밝히기 위해서다.
SMALL 요소는 문단(paragraph), 리스트(list), 섹션(section) 등 많은 분량의 글에 적용되는 것은 바람직하지 않기 때문에 다음과 같이 짧은 분량의 글에 적용하는 것이 적합하다.
-
- 저작권(copyrights)처럼 굳이 자세히 읽을 필요가 없거나 읽지 않아도 그 내용을 파악할 수 있는 콘텐츠를 표현할 때
- 법적 규제(legal restrictions)처럼 밝히고 싶지 않은 콘텐츠를 소극적으로 표현할 때
- 코멘트(comment)처럼 중요하지 않지만 본문 내용을 이해하는데 도움되는 콘텐츠를 표현할 때
예제 |
본문 아래 영역에 “최종수정일”을 추가하였다. 본문 내용과의 차이를 표현하기 위해 SMALL 요소로 마크업하였다.
<!DOCTYPE html><html lang=”ko”><head><title>UX DESIGN</title>중략
</head><body>중략
<article id=”sub\_comment”><h2>댓글</h2></article><div id=”pubdate”><p><small>최종수정일: 2012년 1월 25일</small></p></div></section>중략
</body></html>TIME 요소
카테고리 | Flow content, Phrasing content |
콘텐츠 속성 | 글로벌 속성, datetime |
지원 브라우저 | 없음 |
TIME 요소[126]는 날짜(date), 시간(TIME), 시간대 차이(time-zone offset), 기간(duration)을 표시한다. 이미 시간이나 날짜를 표현하는 관습적인 규칙(문법)이 있지만, 이러한 규칙을 브라우저는 이해하지 못한다. 그래서 특정 글자가 시간 또는 날짜를 의미한다는 사실을 브라우저가 신속하게 알 수 있도록 TIME 요소가 제안되었다. 이 요소로 인해 스크립트를 이용하지 않더라도 일정 정보나 알림 기능을 좀 더 쉽게 구현할 수 있게 되었다.
pubdate 속성
pubdate 속성[127]은 발행일(publication date)을 지정한다. 이 속성의 용도는 TIME 요소와 관련 있는 요소가 언제 발행되었는지 알려주는 것인데, 이 때 TIME 요소에는 datetime 속성이 있어야 하며 이 속성으로 지정된 시간이 발행일이라는 사실을 pubdate 속성이 알려준다.
예제 |
최종수정일의 날짜 정보를 TIME 요소로 마크업하였다.
<!DOCTYPE html><html lang=”ko”><head><title>UX DESIGN</title>중략
</head><body>중략
<article id=”sub\_comment”><h2>댓글</h2></article><div id=”pubdate”><p><small>최종수정일:<time datetime=”2012-01-25” pubdate=”pubdate”>2012년 1월 25일</time></p></div></section>중략
</body></html>WBR 요소
카테고리 | Flow content, Phrasing content |
콘텐츠 속성 | 글로벌 속성 |
지원 브라우저 | |
WBR 요소는 단어 줄바꿈(Word BRreak)을 표시한다. 행의 끝 지점에 긴 단어가 올 경우, 브라우저가 단어를 마음대로 끊어서 보여줄 수 없으므로 단어 전체가 다음 행으로 넘어간다. 이런 경우, 행의 끝 지점에 빈 공간이 생긴다. 빈 공간이 좋지 않은 것은 아니지만, 나름의 이유에 따라 빈 공간이 생기는 것을 원하지 않을 때도 있다. 이럴 때 WBR 요소를 사용하면 단어를 끊어서 보여줄 수 있다. 이 요소는 BR 요소와 달리 강제적으로 줄 바꿈을 하는 것이 아니라 단어가 행의 끝 지점에 와서 단어를 끊어서 보여주어야 할 때만 줄바꿈이 이루어진다.
예제인용[128]
- 줄바꿈을 적용하지 않은 경우,
<p>To learn AJAX, you must be familiar with the XMLHttpRequest Object.</p>- 줄바꿈을 적용한 경우
<p>To learn AJAX, you must be familiar with the XML<wbr>Http</wbr>Request Object.</p>
SPAN 요소
카테고리 | Flow content, Phrasing content |
콘텐츠 속성 | 글로벌 속성 |
지원 브라우저 | |
SPAN 요소[129]는 인라인 범위(inline SPAN)[130]를 표시한다. 이 요소는 텍스트를 묶기 위한 범용적인 텍스트 컨테이너(generic text container)로써 텍스트의 시작 지점과 종료 지점을 표시하여 인라인 텍스트를 묶어준다.
역할이나 기능적인 측면에서 SPAN 요소는 DIV 요소와 비슷하다. DIV 요소가 블록 단위로 콘텐츠를 묶는 것이라면, SPAN 요소는 인라인 형태로 콘텐츠를 묶는 것이다. SPAN 요소는 DIV 요소처럼 단순히 콘텐츠를 묶는 용도이므로 class, lang, dir과 같은 속성과 함께 작성해야만 쓸모 있게 사용할 수 있다. .
<p>최신 뉴스는<span class=”blue”>파란색</span>으로 표시하였습니다.</p>BDO 요소
카테고리 | Flow content, Phrasing content |
콘텐츠 속성 | 글로벌 속성 |
지원 브라우저 | |
BDO 요소는 양방향 오버라이드(Bi-Directional Override)[131] 여부를 표시한다. 이 요소는 텍스트 방향(text direction)을 임의로 바꿀 때 사용한다. 텍스트 방향은 관습적으로 정해진다. 대부분의 언어는 쓰기와 읽기 방향이 좌에서 우로 진행되며(LTR), 이에 따라 브라우저도 기본적으로 텍스트 방향을 좌에서 우로 표현한다. 반면에 아랍어와 히브리어는 텍스트 방향이 우에서 좌로 진행한다.
기본적으로 대부분의 브라우저는 텍스트 방향을 양방향으로 표현할 수 있어서(bidirectional algorithm),[132] 같은 문장 내에서도 영어는 좌에서 우로, 아랍어는 우에서 좌로 표현할 수 있다. 그런데 경우에 따라서는 텍스트 방향을 단방향으로 표현해야 할 때가 있으며(BDO, bidirectional override), 이럴 때 BDO 요소를 사용한다.
dir 속성
dir 속성은 텍스트 방향(text direction)을 지정하는 속성이다. 텍스트는 다음과 같이 두 가지 방향으로 진행될 수 있다.
- 좌 우 (LTR, Left-to-right text)
- 우 좌 (RTL, Right-to-left text)
- dir=”ltr”: 텍스트를 좌에서 우로 표현한다.
- dir=”rtl”: 텍스트를 우에서 좌로 표현한다.
<p><bdo dir=”ltr”>abc</bdo></p> 🡪 abc
<p><bdo dir=”rtl”>abc</bdo></p> 🡪 cba
BDI 요소
카테고리 | Flow content, Phrasing content |
콘텐츠 속성 | 글로벌 속성 |
지원 브라우저 | |
BDI 요소는 양방향 분리(Bi-Directional Isolation) 여부를 표시한다. 이 요소가 적용된 텍스트는 주변 텍스트와 다른 방향을 가질 수 있다. 저작자가 텍스트 방향을 알고 있다면 BDO 요소와 dir 속성으로 텍스트 방향을 설정하면 되지만, 아예 모르고 있다면 저작자가 임의로 텍스트 방향을 설정할 수 없다. 댓글과 같은 사용자 제작 콘텐츠(user generated content)가 좋은 예일 것이다. 이럴 때 BDI 요소를 사용하여 작성된 상태의 텍스트 방향을 유지시킬 수 있다.
<ul><li>User <bdi>jcranmer</bdi>: 12 posts.
<li>User <bdi>hober</bdi>: 5 posts.
<li>User <bdi>إيان</bdi>: 3 posts.
</ul>RUBY 요소
카테고리 | Flow content, Phrasing content |
콘텐츠 속성 | 글로벌 속성 |
지원 브라우저 | |
RUBY 요소[133]는 루비 주석(RUBY annotation)[134]의 기준 텍스트(base text)를 표시한다. 루비(ruby)는 한자 옆에 붙이는 글이며, 주석(annotation)은 단어를 쉽게 풀이하기 위한 글이다. 루비 주석을 제공하려면 RUBY 요소와 RT 요소가 필요한데, RUBY 요소는 주석을 필요로 하는 기준 텍스트(base text), RT 요소는 주석으로 제공되는 루비 텍스트(ruby text)를 표현한다.
<ruby>한<rt>漢</rt>자<rt>字</rt></ruby>
RT 요소
카테고리 | 해당 사항 없음 |
콘텐츠 속성 | 글로벌 속성 |
지원 브라우저 | |
RT 요소[135]는 루비 텍스트(Ruby Text)을 표시한다. 루비 텍스트는 주석으로 제공되는 글자를 말하며, 주로 기준 텍스트에 대한 설명이나 음을 붙이는데 사용된다.
RP 요소
카테고리 | 해당 사항 없음 |
콘텐츠 속성 | 글로벌 속성 |
지원 브라우저 | |
RP 요소[136]는 루비 괄호(Ruby Parenthesis)을 표시한다. 이 요소는 브라우저가 RT 요소를 지원하지 않을 때, 주석을 괄호로 표현하기 위해 사용한다. 다음의 사례에서 볼 수 있듯이, RT 요소의 지원 여부에 따라 주석은 다르게 표현된다.
<ruby>漢 <rp>(</rp><rt>かん</rt><rp>)</rp>
字 <rp>(</rp><rt>じ</rt><rp>)</rp>
</ruby>- RT 요소를 지원하는 경우
- RT 요소를 지원하지 않는 경우
BR 요소
카테고리 | Flow content, Phrasing content |
콘텐츠 속성 | 글로벌 속성 |
지원 브라우저 | |
BR 요소는 행 바꿈(line BReak)을 표시한다. 문장을 작성하다 보면 읽기 흐름을 바꾸어야 할 때가 있다. SECTION 요소나 P 요소를 이용하여 섹션이나 문단을 만드는 것은 읽기 흐름을 크게 바꾸는 작업이라고 볼 수 있다. 이와 달리 BR 요소는 문단 내에서 행 바꿈을 통해 읽기 흐름을 가볍게 바꿀 때 사용한다. 일반적인 문서에서는 BR 요소를 자주 사용하지 않는다. 특히, 웹 문서의 경우, 끊어읽기를 지원하기 위해 3~4 행 단위로 문단을 나누므로 BR 요소를 사용할 기회가 많지 않지만, 시(poem)처럼 읽기 시작점이 새로운 행에서 시작되는 경우에 BR 요소를 자주 사용한다.
BR 요소를 연속적으로 표시하면 그 횟수만큼 행과 행 사이의 공간(blank lines)이 만들어지는데, 이 공간은 단지 시각적 구분만을 제공할 뿐이므로 의미적 구분을 주고 싶다면 P 요소로 표시하는 것이 옳다. 행 바꿈은 행을 강제적으로 종료시키는 것이다. 그런데 이와 반대로 행 바꿈을 원하지 않는 경우가 있는데, 이럴 때는 단어 사이에 ‘ ’가 있으면 두 단어 사이에 행 바꿈이 일어나지 않는다. 이것은 두 단어 사이에 여백 문자가 포함됨으로써 두 단어가 하나의 단어로 인식되는 효과가 생기는 것이다. 가령, ‘user interface’처럼 ‘user’와 ‘interface’가 다른 행으로 나뉘는 것을 원하지 않을 때는 두 단어 사이에 여백 문자를 넣어 ‘user interface’라고 작성하면 된다. 이렇게 되면 ‘user interface’이라는 단어는 항상 같은 행에 있게 된다.
<p>죽는 날 까지 하늘을 우러러
한 점 부끄럼이 없기를
잎 새에 이는 바람에도
나는 괴로워 했다.</p>
<p>죽는 날 까지 하늘을 우러러<br>한 점 부끄럼이 없기를<br>
잎 새에 이는 바람에도<br>
나는 괴로워 했다.</p>
예제 |
“~연속일 것이다.”와 “한 동안~” 사이를 다른 행으로 구분하기 위해 BR 요소로 마크업하였다. (사실 이 부분은 굳이 행을 구분할 필요는 없지만, 예제를 위해 BR 요소를 사용하였다).
<!DOCTYPE html><html lang=”ko”><head><title>UX DESIGN</title>중략
</head><body>중략
<p><dfn>인터랙티브 제품</dfn>은 상호작용이 이루어지는 제품을 일컫는다. 이러한 제품을 다루는 것이 이미 일상이 되었기 때문에 그 과정이 지루하거나 건조하다면 제품과 함께 하는 시간은 고통의 연속일 것이다.<br> 한 동안 사용성(사용하기 쉽고 편리한 정도)이 중요하게 다뤄져 왔지만, 사용성은 제품을 구성하고 있는 부분적 속성일 뿐 이것만으로는 사용자 가치(사용자가 제품으로 얻을 수 있는 모든 것)를 제대로 구현하기가 어렵다.
</p>중략
</body></html>[지금까지의 소스와 결과물]
소스
<!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”><meta charset="utf-8"><meta name=”author” content=”홍길동”><meta name=”description” content=”신간 UX DESIGN에 관한 소개 웹 사이트”><meta name=”generator” content="Dreamweaver CS 5.0"><style>div.blue {color:#0000FF}
</style><script type="text/javascript" src="demo\_time.js"></script></head><body><header><div id=”logo”><a href=”http://uxdesign.example.com”><img src=”http://www.example.com/img.gif” alt=”ux design 홈” width=”120” height=”50”></a></div><div id=”search”>검색창
</div></header><nav><ul><li><a href=”info.html>책소개</a></li><li><a href=”author.html>저자소개</a></li><li><a href=”preview.html>미리보기</a></li><li><a href=”comment.html>서평</a></li><li><a href=”event.html>이벤트</a></li><li><a href=”sell.html>구입처</a></li></ul></nav><section id=”main”><h1>책소개</h1><section id=”sub\_overview”><h2>개요</h2><hgroup><h3>UX Design, 1<sup>st</sup> Edition</h3><h4>사용자가 경험하는 모든 것을 디자인하라</h4></hgroup><p><a href=”http://www.wikipedia.org” target=”_blank”>위키피디어</a>에 따르면, <q><strong><abbr title=”user experience”>UX</abbr></strong>는 사용자가 제품, 시스템 또는 서비스를 이용하면서 얻게 되는 <em>총체적 경험</em></q>이다.
</p><blockquote cite=” http://en.wikipedia.org/wiki/User\_experience”><div class=”blue”>[위키피디어 원문] <dfn>User experience</dfn> is the way a person feels about using a product, system or service. User experience highlights the experiential, affective, meaningful and valuable aspects of human-computer interaction and product ownership, but it also includes a person’s perceptions of the practical aspects such as utility, ease of use and efficiency of the system.
</div></blockquote><p><dfn>인터랙티브 제품</dfn>은 상호작용이 이루어지는 제품을 일컫는다. 이러한 제품을 다루는 것이 이미 일상이 되었기 때문에 그 과정이 지루하거나 건조하다면 제품과 함께 하는 시간은 고통의 연속일 것이다.<br> 한 동안 사용성(사용하기 쉽고 편리한 정도)이 중요하게 다뤄져 왔지만, 사용성은 제품을 구성하고 있는 부분적 속성일 뿐 이것만으로는 사용자 가치(사용자가 제품으로 얻을 수 있는 모든 것)를 제대로 구현하기가 어렵다.
</p><dl><dt>사용성:</dt><dd>사용하기 쉽고 편리한 정도</dd><dt>사용자 가치:</dt><dd>사용자가 제품을 통해 얻을 수 있는 모든 것</dd></dl><p>이 책은 UX 디자인이란 무엇인가, UX 디자인을 잘 하려면이라는 질문에 제대로 된 대답을 하기 위해 저자 스스로 사용자 경험 디자인을 이해하기 위해 노력했던 과정을 담았다.
</p></section><section id=”sub\_index”><h2>목차</h2><ol><li>사용자 경험 디자인이란</li><li>경험의 흐름</li><li>지식화에 의한 경험 형성</li><li>소비자-사용자 경험</li><li>사용자 경험의 순환구조</li></ol></section><section id=”sub\_picture”><h2>상세이미지</h2><figure><figcaption>본문 내용은 아래와 같이 구성되어 있습니다.<a href=”http://www.example.com/more.html target=”\_blank”>더보기</a></figcaption><figure><img src="/UX\_UPA.jpg” alt="UX 프로세스 썸네일" width="200" height="180"><figcaption><cite><a href=”http://www.example.com/photos\_UPA.html>UX 프로세스 by UPA</a></cite></figcaption></figure><figure><img src=”/UX\_Jess.jpg” alt=”경험의주기 썸네일” width="200" height="180"><figcaption><cite><a href=”http://www.example.com/photos\_Jess.html>경험의 주기 by Jess</a></cite></figcaption></figure><figure><img src=”/UX\_Peter.jpg” alt=”UX의 중요성 썸네일” width="200" height="180"><figcaption><cite><a href=”http://www.example.com/photos\_Peter.html>UX의 중요성 by Peter</a></cite></figcaption></figure></figure></section><article id=”sub\_comment”><h2>댓글</h2></article><div id=”pubdate”><p><small>최종수정일:<time datetime=”2012-01-25” pubdate=”pubdate”>2012년 1월 25일</time></p></div></section><aside id=”sidebar”><section id=”flash\_ad”><object data=”brazil.swf” type=”application/x-shockwave-flash” width=”250” height=”250”><p><a href=”http://www.exmaple.com/ad\_brazil.html target=”\_blank”>Brazil Eucalyptus Plantations</a></p><param name=”autoplay” value=”true”></object></section><section id=”video”><h3>Podcast</h3><video src=”mappingexperience.mp4” controls=”controls” muted=”muted” width=”250”, height=”350” poster=”slide\_title.jpg”><p><a href=”http://www.exmaple.com/mappingexperience.html>Mapping the Experience Lisbon</a></p></video><p>\[비디오\] Mapping the Experience 42분</p></section><section id=”audio”><audio src=”human.mp3” controls=”controls” preload=”none” width=”250”, height=”80”><source src=”human.ogg” type=”audio/ogg”><source src=”human.mp3” type=”audio/mp3”><p><a href=”http://www.exmaple.com/human\_cast.html>Maual for Human Experience </a></p></audio><p>\[오디오\] Manual for Human Experience 3분</p></section><section id=”benefits”><h3>예약구매혜택</h3><p><s>1월 예약고객 독서대 증정</s></p><p>2월 예약고객 10% 할인</p></section><section id=”bookstore”><h3>인터넷서점</h3><img src=”bookstore.gif” width=”200” height=”100” alt=”” usemap=”#bookstoremap”><map name=”bookstroremap”><area shape=”rect” coords=”3, 43, 89, 137” href=”http://www.yes24.co.kr” alt=”예스24”><area shape=”rect” coords=”7, 38, 84, 237” href=”http://www.kyobobook.co.kr” alt=”교보문고”><area shape=”rect” coords=”9, 27, 79, 269” href=”http://www.aladdin.co.kr” alt=”알라딘서점”></map></section><section id=”external\_ad”><iframe src=”http://www.ancestry.com/advertisement.html” title=”Ancestry.com 광고 배너”></iframe></section></aside><footer><address>서울 강남구 역삼동 123 | 문의: 02-888-8888(담당자 직접 연결:<kbd>#</kbd> + <var>내선번호</var>)
</address>©Valuable Design Lab
</footer></body></html>결과물
주석
[97] 하이퍼링크(hyperlink) = 하이퍼텍스트 링크(hypertext link)
[98] 일반적인 문서처럼 연속된 것이 아니라 사이사이에 연결이 있어서 어떤 부분을 보다가 그에 관련된 다른 부분을 그 연결을 따라가면서 참조할 수 있는 문서 (출처: 컴퓨터인터넷IT용어대사전, 일진사)
[99] (출처) 네이버 어학사전
[100] rel 속성은 A 요소, AREA 요소, LINK 요소에 사용되며, 일부 속성은 요소에 따라 용도가 다르다. 여기에서는 A 요소를 기준으로 rel 속성을 설명하였다.
[101] Don’t follow links on this page
[102] 자세한 내용은 http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=96569에서 확인할 수 있다.
[103] (참고) http://en.wikipedia.org/wiki/HTTP\_referrer
[104] 오페라(Opera Software)에서는 ‘사이드바(sidebar)’를 ‘웹 패널(web panel)’이라고 부르고 있다.
[105] (출처) http://help.opera.com/Windows/9.21/en/toc.html
[106] 링크를 선택했을 때 불러오는 문서
[107] 자세한 내용은 www.w3.org/TR/CSS2/media.html, www.w3.org/TR/css3-mediaqueries에서 확인할 수 있다.
[108] 청각을 이용한 사용자 도구이며 음성 합성기(speech synthesizer)에 이에 속한다.
[109] 타자기로 문자를 치고, 이 정보가 전기적 신호로 전송되는 통신 방식
[110] 텔레비전 화면과 같은 것은 같고 있는 전기타자기 비슷한 기계장치를 부르는 일반용어. 이것을 통해 뉴스기사나 다른 편집 자료들을 입력시키거나 다시 불러내어 편집을 하거나 인쇄하게 만든다. (출처: 한국언론진흥재단)
[111] TV는 컴퓨터에 비해 해상도가 낮고 화면 스크롤이 제한되거나 사용할 수 없다는 특징을 갖고 있다.
[112] 자세한 내용은 www.w3.org/TR/css3-mediaqueries/에서 확인할 수 있다.
[113] ‘em’은 상대적 크기를 정하기 위한 방법이며, 현재 설정된 글자 크기와 동일한 크기를 의미한다. 가령, 현재 문서의 글자 크기가 10 pt라면 1em은 1pt가 되므로 20em은 200 pt가 된다.
[114] W3C에서는 “The ‘color’ media feature describes the number of bits per color component of the output device.”라고 기술되어 있는데, “the number of bits per color component”는 “color depth”로 이해하였다(저자 주).
[115] ‘monochrome frame buffer’는 영상 정보를 흑백 모드로 저장하는 기억 장치를 말한다.
[116] 그리드 방식은 글자 크기를 기준으로 레이아웃을 구성한다.
[117] HTML에서는 문서 내에서 이루어지는 브라우징을 ‘nested browsing’이라고 표현하고 있는데, 이것은 ‘브라우징 내에서의 브라우징’이라는 의미를 갖는다.
[118] title 속성을 사용할 수 없는 요소: HTML, HEAD, META, BASE, BASEFONT, SCRIPT, PARAM, TITLE
[119] 더 자세한 내용은 http://dev.w3.org/html5/spec/single-page.html#the-em-element에서 확인할 수 있다.
[120] 두문자어를 표시하기 위한 요소
[121] (출처) 네이버 국어사전
[122] (출처) http://en.wikipedia.org/wiki/Subscript\_and\_superscript
[123] (출처) http://en.wikipedia.org/wiki/Subscript\_and\_superscript
[124] 글자 가운데에 선을 긋는 기법(strike-through 또는 line-through)
[125] 그리니치 표준시(Greenwich Mean Time)를 기준으로 계산한 시차
[126] HTML5에 추가된 속성이다.
[127] HTML5에 추가된 속성이다.
[128] http://www.w3schools.com/html5/tag\_wbr.asp
[129]
과거에는 <TEXT>, <C>로 표시했었는데, 1996년 버전부터 <SPAN>을 사용해 왔다. 자세한 내용은 http://tools.ietf.org/html/draft-ietf-html-i18n-01에서 확인할 수 있다.
[130] ‘span’은 두 지점 사이의 거리를 의미한다.
[131] ‘override’는 “덮어씌우기”, “중단”, “방지”의 의미를 갖고 있는데, 여기에서는 양방향보다 다른 방향을 더 “우선한다”라는 의미가 더 적절해 보인다.
[132] 자세한 내용은 http://www.w3.org/TR/REC-html40/struct/dirlang.html#h-8.2.1에서 확인할 수 있다.
[133] HTML5에 추가된 속성이다.
[134] 자세한 내용은 http://www.w3.org/TR/ruby/에서 확인할 수 있다.
[135] HTML5에 추가된 속성이다.
[136] HTML5에 추가된 속성이다.