주어진 원문은 서로 다른 성격의 내용들이 섞여있다. 이런 상태로 전달 하게 되면 효과적인 커뮤니케이션이 일어나지 않기 적절한 편집 과정을 거쳐야 한다. 우선 같거나 비슷한 성격의 내용을 묶는 작업을 해야 한다. 우선 원문은 크게 개요와 목차 부분으로 나눌 수 있다.
개요 부분 | UX Design, 1st Edition 사용자가 경험하는 모든 것을 디자인하라 위키피디어에 따르면, UX는 사용자가 제품, 시스템 또는 서비스를 이용하면서 얻게 되는 총체적 경험이다. 인터랙티브 제품은 상호작용이 이루어지는 제품을 일컫는다. 이러한 제품을 다루는 것이 이미 일상이 되었기 때문에 그 과정이 지루하거나 건조하다면 제품과 함께 하는 시간은 고통의 연속일 것이다. 한 동안 사용성(사용하기 쉽고 편리한 정도)이 중요하게 다뤄져 왔지만, 사용성은 제품을 구성하고 있는 부분적 속성일 뿐 이것만으로는 사용자 가치(사용자가 제품을 통해 얻을 수 있는 모든 것 )를 제대로 구현하기가 어렵다. 이 책은 UX 디자인이란 무엇인가, UX 디자인을 잘 하려면이라는 질문에 제대로 된 대답을 하기 위해 저자 스스로 사용자 경험 디자인을 이해하기 위해 노력했던 과정을 담았다. [위키피디어 원문] User experience 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. |
목차 부분 | 사용자 경험 디자인이란 경험의 흐름 지식화에 의한 경험 형성 소비자-사용자 경험 사용자 경험의 순환구조 |
우선 개요 부분은 좀 더 쉬운 이해를 도울 수 있도록 내용을 묶고, 순서를 조정하고, 용어 설명을 따로 구성하였다. 그랬더니, 아래와 같이 자연스럽게 5개의 내용 묶음(content group), 즉 문단(paragraph)이 만들어졌다.
UX Design, 1st Edition 사용자가 경험하는 모든 것을 디자인하라 위키피디어에 따르면, UX는 사용자가 제품, 시스템 또는 서비스를 이용하면서 얻게 되는 총체적 경험이다. [위키피디어 원문] User experience 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. 인터랙티브 제품은 상호작용이 이루어지는 제품을 일컫는다. 이러한 제품을 다루는 것이 이미 일상이 되었기 때문에 그 과정이 지루하거나 건조하다면 제품과 함께 하는 시간은 고통의 연속일 것이다. 한 동안 사용성(사용하기 쉽고 편리한 정도)이 중요하게 다뤄져 왔지만, 사용성은 제품을 구성하고 있는 부분적 속성일 뿐 이것만으로는 사용자 가치(사용자가 제품으로 얻을 수 있는 모든 것)를 제대로 구현하기가 어렵다. 사용성 : 사용하기 쉽고 편리한 정도 사용자 가치: 사용자가 제품을 통해 얻을 수 있는 모든 것 이 책은 UX 디자인이란 무엇인가, UX 디자인을 잘 하려면이라는 질문에 제대로 된 대답을 하기 위해 저자 스스로 사용자 경험 디자인을 이해하기 위해 노력했던 과정을 담았다. |
이메일이나 문서를 작성할 때는 엔터키를 눌러 아주 쉽게 문단을 만들 수 있지만, HTML에서는 P 요소를 사용하여 일일이 문단을 표시해야 한다.
P 요소를 사용하여 문단을 표시하였더니, 내용 구성이 좀 더 명확해 졌다. 그런데 P 요소를 사용하여 일률적으로 문단을 표시하다 보니 문단 사이의 관계가 잘 표현되지 않았다. 사실 첫 번째 문단은 제목과 부제목, 두 번째 문단은 본문 내용, 세 번째 문단은 본문 내용 중 인용문, 네 번째 문단은 본문 내용, 다섯 번째 문단은 본문 내용 중 용어 리스트, 여섯 번째 문단은 본문 내용 중 종결부(closing section)에 해당한다. 따라서 용도에 맞게 표시하여 내용을 좀 더 의미 있게 묶는다.
- 제목과 부제목 🡪 H 요소
- 본문 내용 🡪 P 요소
- 인용문 🡪 BLOCKQUOTE 요소
- 용어 리스트 🡪 DL 요소
다음은 목차 부분(index)이다. 목차를 문장처럼 표현하면 내용 전달이 잘 이루어지지 않는다. 항목별로 끊어읽을 수 있도록 리스트 형태로 표현하되, 순서가 있는 리스트로 표현하도록 한다.
요구사항에는 “2~3컷의 이미지 제공”이라는 요구사항이 나와있다. 이미지는 텍스트와는 다른 성격을 갖는다. 그래서 이미지와 같은 시각 콘텐츠는 좀 더 다르게 표시할 필요가 있으므로 SECTION 요소보다는 FIGURE 요소를 사용하는 것이 더 적합하다. 이 요소를 사용하면 일정 영역 내에 사진, 일러스트, 다이어그램 등 다양한 형태의 시각 콘텐츠를 묶어서 표시할 수 있다.
지금까지 P 요소, BLOCKQUOTE 요소, DL요소, OL 요소, FIGURE 요소 등을 사용하여 전체 내용을 의미 있게 나누었다. 이제부터는 각 요소들을 어떻게 사용하는지 살펴보겠다.
<내용 묶기>를 위한 표준 기술
P 요소
카테고리 | Flow content, Phrasing content |
콘텐츠 속성 | 글로벌 속성 |
지원 브라우저 |      |
P 요소는 문단(Paragraph)을 표시한다. 저작자는 주제를 전달하기 위해 내용을 만든다. 하나의 문서는 큰 주제(headline) 아래에 여러 개의 작은 주제(sub-headline)를 포함하고 있고, 이 주제에 따라 내용이 나뉘어져야 쉬운 이해와 편리한 읽기를 도울 수 있다. 이렇듯 어떤 주제를 의미 있게 전달할 수 있는 기본 단위를 ‘문장’(sentence)[58]이라고 부르며, 이 문장들이 모여서 문단(paragraph)을 만든다. 따라서 문단은 같은 주제를 전달하기 위해 묶여진 문장 덩어리로 볼 수 있다.
문단을 통해 저작자는 동일 주제의 시작 지점과 종료 지점을 알릴 수 있다. 즉, 시작 지점은 “지금부터 새로운 주제의 내용이 시작됩니다”, 종료 지점은 “새로운 주제의 내용은 여기까지 입니다. 이제 다른 주제의 내용이 시작될 것입니다”라는 사실을 알리는 것이다. 그래서 다른 내용과 시각적으로 구분될 수 있도록 대부분의 브라우저는 P 요소로 마크업된 곳의 앞과 뒤에 공간을 만든다.[59] 만약 소설책처럼 문단의 첫 줄을 들여쓰기로 표현하거나 첫 글자를 크게 두고 싶다면, 스타일 시트를 이용하면 된다.
P 요소는 A 요소, INPUT 요소 등 다양한 요소를 포함할 수 있다. 이것은 HTML 문서에서는 텍스트 이외에도 멀티미디어 콘텐츠, 컨트롤 요소 등 문서 구성요소까지 ‘문단’의 대상이 된다는 것을 의미한다.
<P>내용</P>예제 |
개요 영역에 있는 콘텐츠는 주제에 따라 6개의 그룹으로 구성할 수 있는데, 이 중에서 3개의 그룹을 P 요소로 마크업하였다.
<!DOCTYPE html><html lang=”ko”><head>중략
</head><body><header>로고와 검색창
</header><nav>책소개
저자소개
미리보기
서평
이벤트
구입처
</nav><section id=”main”><section id=”sub\_overview”><hn>UX Design, 1st Edition
사용자가 경험하는 모든 것을 디자인하라
</hn><p>위키피디어에 따르면, UX는 사용자가 제품, 시스템 또는 서비스를 이용하면서 얻게 되는 총체적 경험이다.
</p><blockquote>…
<blockquote><p>인터랙티브 제품은 상호작용이 이루어지는 제품을 일컫는다. 이러한 제품을 다루는 것이 이미 일상이 되었기 때문에 그 과정이 지루하거나 건조하다면 제품과 함께 하는 시간은 고통의 연속일 것이다. 한 동안 사용성(사용하기 쉽고 편리한 정도)이 중요하게 다뤄져 왔지만, 사용성은 제품을 구성하고 있는 부분적 속성일 뿐 이것만으로는 사용자 가치(사용자가 제품으로 얻을 수 있는 모든 것)를 제대로 구현하기가 어렵다.
</p><dl>…
</dl><p>이 책은 UX 디자인이란 무엇인가, UX 디자인을 잘 하려면이라는 질문에 제대로 된 대답을 하기 위해 저자 스스로 사용자 경험 디자인을 이해하기 위해 노력했던 과정을 담았다.
</p></section><section id=”sub\_index”>사용자 경험 디자인이란 경험의 흐름 지식화에 의한 경험 형성 소비자-사용자 경험 사용자 경험의 순환구조
</section><section id=”sub\_picture”>그림 영역
</section><article id=”sub\_comment”>댓글 영역
</article></section><aside id=”sidebar”>사이드바 영역
</aside><footer>푸터 영역
</footer></body></html>BLOCKQUOTE 요소
카테고리 | Flow content, Phrasing content |
콘텐츠 속성 | 글로벌 속성, cite |
지원 브라우저 | |
BLOCKQUOTE 요소는 블록 형태의 인용문(BLOCK QUOTation)을 표시한다. Q 요소가 인라인 요소(inline element)로써 짧은 인용(short quotation)를 위한 요소라면, BLOCKQUOTE 요소는 블록 레벨 요소(block-level element)로써 긴 인용(long quotation)을 위한 요소다. 긴 인용은 문장 내에 두기 어렵고 따옴표와 같은 기호로는 표시가 나지 않으므로 문단(paragraph)처럼 별도로 구성되도록 표시하며, 인용된 내용은 특별한 내용이므로 사용자가 신속하게 파악할 수 있어야 한다. 그래서 BLOCKQUOTE 요소로 마크업된 블록은 양쪽 들여쓰기(left and right indentation)가 적용되어 다른 내용(normal paragraph)과 확연하게 구분된다. BLOCKQUOTE 요소는 CITE 요소와 같이 반드시 외부에 있는 내용을 인용할 때 사용된다. 이것은 내부에 있는 내용까지 인용할 수 있는 Q 요소와는 다른 점이다. 인용문이 아닌 텍스트 블록을 단순히 들여쓰기로 표현하고 싶다면 BLOCKQUOTE 요소를 사용하지 말고 스타일 시트를 사용해야 한다.
cite 속성
cite 속성은 인용된 내용의 출처(source of the cited content)를 지정한다. 이 속성은 BLOCKQUOTE나 Q 요소에서 사용하는 속성으로 정의되어 있지만, 그 용도를 구체적으로 밝히지 않고 있으며 아직까지는 브라우저도 이 속성을 제대로 지원하지 못하고 있다.
<blockquote cite=”http://www.example.com”><p>…contents…</p></blockquote>예제 |
위키피디어 원문은 인용된 내용이므로 BLOCKQUOTE 요소로 마크업하였다.
<!DOCTYPE html><html lang=”ko”><head>중략
</head><body><header>로고와 검색창
</header><nav>책소개
저자소개
미리보기
서평
이벤트
구입처
</nav><section id=”main”><section id=”sub\_overview”><hn>UX Design, 1st Edition
사용자가 경험하는 모든 것을 디자인하라
</hn><p>위키피디어에 따르면, UX는 사용자가 제품, 시스템 또는 서비스를 이용하면서 얻게 되는 총체적 경험이다.
</p><blockquote cite=” http://en.wikipedia.org/wiki/User\_experience”>[위키피디어 원문] User experience 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.
</blockquote><p>인터랙티브 제품은 상호작용이 이루어지는 제품을 일컫는다. 이러한 제품을 다루는 것이 이미 일상이 되었기 때문에 그 과정이 지루하거나 건조하다면 제품과 함께 하는 시간은 고통의 연속일 것이다. 한 동안 사용성(사용하기 쉽고 편리한 정도)이 중요하게 다뤄져 왔지만, 사용성은 제품을 구성하고 있는 부분적 속성일 뿐 이것만으로는 사용자 가치(사용자가 제품으로 얻을 수 있는 모든 것)를 제대로 구현하기가 어렵다.
</p><dl>…
</dl><p>이 책은 UX 디자인이란 무엇인가, UX 디자인을 잘 하려면이라는 질문에 제대로 된 대답을 하기 위해 저자 스스로 사용자 경험 디자인을 이해하기 위해 노력했던 과정을 담았다.
</p></section><section id=”sub\_index”>사용자 경험 디자인이란 경험의 흐름 지식화에 의한 경험 형성 소비자-사용자 경험 사용자 경험의 순환구조
</section><section id=”sub\_picture”>그림 영역
</section><article id=”sub\_comment”>댓글 영역
</article></section><aside id=”sidebar”>사이드바 영역
</aside><footer>푸터 영역
</footer></body></html>LI 요소
카테고리 | 해당 사항 없음 |
콘텐츠 속성 | 글로벌 속성 |
지원 브라우저 | |
LI 요소는 리스트 항목(List Item)을 표시한다. 항목(item)은 리스트를 구성하는 단위 요소이며, 이 항목을 어떤 기준에 따라 모아 둔 것이 리스트(list)다. 따라서 LI 요소는 리스트 자체가 아니라 리스트를 구성하는 항목을 표현하기 위한 것이며, 부모 요소인 OL 요소, LI 요소, MENU 요소와 함께 사용해야 한다.
value 속성
value 속성은 리스트 항목의 서수 값(ordinal value)[60]을 지정한다. 이 속성은 리스트 항목의 순서를 표현하므로 OL 요소와 함께 사용될 때만 유효하다. 순서 있는 리스트는 ‘1’부터 시작되는 경우가 일반적이지만, 경우에 따라서는 특정 숫자부터 리스트가 시작될 필요가 있다. 이럴 때 value 속성을 사용하여 첫 번째 리스트 항목에 시작 숫자를 지정하면, 나머지 리스트 항목은 시작 숫자에 따라 숫자가 매겨진다.
<ol><li value=”100”>사과</li><li>배</li><li>포도</li><li>수박</li><li>딸기</li></ol>
UL 요소
카테고리 | Flow content, Phrasing content |
콘텐츠 속성 | 글로벌 속성 |
지원 브라우저 | |
UL 요소는 순서 없는 리스트(Unordered List)를 표시한다. 이 요소는 리스트 타입을 지정하며, 자식 요소인 LI 요소와 함께 사용한다. 순서 없는 리스트는 순서를 매기지 않고 리스트 항목을 단순하게 나열하며, 불릿(bullet)을 이용하여 각각의 리스트 항목을 표시한다. 리스트 내에 또 다른 리스트를 넣을 수 있다. 이렇게 하면 들여쓰기에 의해 리스트 구조가 바뀌게 되며, 이를 통해 상위 리스트와 하위 리스트를 표현할 수 있다.
예제 |
내비게이션 영역에 있는 메뉴를 순서 없는 리스트로 구성하였고, 이것을 UL 요소와 LI 요소로 마크업하였다.
<!DOCTYPE html><html lang=”ko”><head>중략
</head><body><header>로고와 검색창
</header><nav><ul><li>책소개</li><li>저자소개</li><li>미리보기</li><li>서평</li><li>이벤트</li><li>구입처</li></ul></nav>중략
</body></html>OL 요소
카테고리 | Flow content, Phrasing content |
콘텐츠 속성 | 글로벌 속성, reversed, start, type |
지원 브라우저 | |
OL 요소는 순서 있는 리스트(Ordered List)를 표시한다. 이 요소는 리스트 타입을 지정하며, 자식 요소인 LI 요소와 함께 사용한다. 순서 있는 리스트는 리스트 항목을 일정한 기준에 따라 순서대로 나열하는 방식으로 순서가 중요한 의미를 가질 때 사용한다.
type 속성
type 속성은 순서 표시의 종류(type)를 지정한다. 순서 표시는 숫자와 문자로 구분되며, 속성값은 다음과 같다.
속성값 | 설명 | 예 |
1 | 숫자에 의한 표시(기본값) | 1, 2, 3, ... |
a | 소문자 알파벳에 의한 표시 | a, b, c, ... |
A | 대문자 알파벳에 의한 표시 | A, B, C, ... |
i | 소문자 로마숫자에 의한 표시 | i, ii, iii, ... |
I | 대문자 로마숫자에 의한 표시 | I, II, III, ... |
<ol type=”1”><li>백두산</li><li>한라산</li><li>설악산</li></ol>
<ol type=”A”><li>백두산</li><li>한라산</li><li>설악산</li></ol>
start 속성
start 속성은 리스트의 시작 숫자(start number)를 지정한다. 속성값은 반드시 숫자(정수)만 올 수 있으며, 첫 번째 리스트 항목에 표시된다. 시작 숫자를 지정하는 것은 LI 요소의 value 속성을 이용할 수도 있다. 만약 OL 요소의 start 속성과 LI 요소의 value 속성이 중복적으로 지정된 경우, value 속성이 우선한다.
<ol type=”1” start=”10”><li>백두산</li><li>한라산</li><li>설악산</li></ol>
reverse 속성
reverse 속성[61]은 리스트를 역순서(reversed order)로 지정한다. 기본적으로 리스트 순서는 오름차순(예, 1, 2, 3, …)이지만, reverse 속성을 이용하면 리스트 순서를 내림차순(예, …, 3, 2, 1)으로 바꿀 수 있다.
<ol type=”1” start=”10” reversed=”reversed”><li>백두산</li><li>한라산</li><li>설악산</li></ol>
예제 |
책의 목차를 순서 있는 리스트로 구성하였고, 이것을 OL 요소와 LI 요소로 마크업하였다
<!DOCTYPE html><html lang=”ko”><head>중략
</head><body>중략
<section id=”sub\_index”><ol><li>사용자 경험 디자인이란</li><li>경험의 흐름</li><li>지식화에 의한 경험 형성</li><li>소비자-사용자 경험</li><li>사용자 경험의 순환구조</li></ol></section>중략
</body></html>DL 요소
카테고리 | Flow content |
콘텐츠 속성 | 글로벌 속성 |
지원 브라우저 | |
DL 요소는 정의 리스트(Definition Lists)을 표시한다. 여기에서 ‘정의’(definition)란 어떤 아이템(어휘나 말)을 규정하고 설명하는 것을 의미한다. 그래서 정의 리스트는 아이템을 나열하는 기능 이외에 아이템을 규정하고 설명하는 기능도 함께 갖고 있다.
정의 리스트는 순서 없는 리스트처럼 아이템을 표기한 순서대로 나열하지만, 리스트가 용어(term)와 설명(description), 2개의 부분으로 구성된다는 점에서 다르다. 리스트의 시작과 끝을 DL 요소로 표시하며, 용어 부분은 DT 요소(definition term), 설명 부분(definition description)은 DD 요소로 표시한다. ‘용어’를 어떤 분야에서 사용하는 단어(말)라고 한정 짓게 되면, DL 요소를 사용할 기회는 그렇게 많지 않을 것이다. DL 요소를 어떤 용도로 사용해야 하는지에 대한 의견은 분분하지만, ‘용어’에 대한 개념을 좀 더 유연하게 해석하려는 경향이 우세하다. 그래서 HTML5에서는 ‘용어’(term)-‘설명’(description)이라는 표현 대신 ‘명칭’(name)-‘해당값’(value)이라는 표현을 사용하고 있다.
DL 요소의 용어 부분과 설명 부분은 같은 행으로 처리되지 않는다. 즉, 용어 부분과 설명 부분은 각각 다른 행으로 표현되는데, 이것은 DT 요소로 표시되는 용어 부분을 읽기 시작점으로 이용하기 위해서다.[62]
현재 HTML에는 순서 있는 리스트, 순서 없는 리스트, 정의 리스트, 이렇게 세 가지 형식의 리스트가 있는데, 콘텐츠를 작성하다 보면 리스트 형식이 좀 더다양했으면 좋겠다는 생각이 든다. 순서 있는 리스트나 순서 없는 리스트로 커버하지 못하는 경우가 많기 때문에 정의 리스트를 적절하게 응용할 필요가 있다. 과연 어떻게 응용할 수 있는지 살펴보자.
1. 용어 해설
<dl><dt>인간</dt><dd>동물의 일원이지만 다른 동물에서 볼 수 없는 고도의 지능을 소유하고 독특한 삶을 영위하는 고등동물이다.</dd></dl>
2. 항목 정의
<dl><dt>담당부서</dt><dd>인사과</dd><dt>담당자</dt><dd>전지현</dd><dt>연락처</dt><dd>123-1234</dd></dl>
3. 주어부와 술어부의 관계로 이루어진 리스트
<dl><dt>가장 많이 팔린 상품</dt><dd>아이폰4</dd><dt>가장 인기 있는 상품</dt><dd>닌텐도 DS</dd><dt>가장 최근에 출시된 상품</dt><dd>플레이북</dd></dl>
4. 사용법 절차 및 설명
<p><h1>사용 방법</h1><dl><dt>적립 버튼을 누르면</dt><dd>포인트가 현금으로 적립됩니다.</dd><dt>차감 버튼을 누르면</dt><dd>포인트가 차감됩니다.</dd><dt>전환 버튼을 누르면</dt><dd>포인트가 상품권으로 전환됩니다.</dd></dl></p>
5. 질문과 답변
<p><h1>자주 묻는 질문과 답변</h1><dl><dt>카드혜택은 무엇인가?</dt><dd>모든 매장에서 판매가의 10%를 할인해 드립니다.</dd><dt>해지 시 위약금이 있나요?</dt><dd>별도의 위약금은 부과되지 않습니다.</dd></dl></p>
이처럼 DL 요소는 생각보다 활용도가 높은 요소라고 볼 수 있다. 다만, 오남용에 대한 주의가 필요하다. 예컨대, 주어부와 술어부의 관계로 구성되어 있다고 해서 무조건 DL, DT, DD 요소를 사용할 수 있는 것은 아니다. HTML 4.01에서는 대화(dialogue, conversation)를 표현할 때, 말하는 사람을 DT 요소, 대화 내용을 DD 요소로 지정하는 것도 한 방법이라고 기술했었다. 그러나 HTML5에서는 P 요소와 구두점(punctuation)을 사용하는 것이 바람직하다고 밝히고 있다.[63]
DL 요소를 이용하여 대화를 표현한 경우
<dl><dt>철수</dt><dd>영희야, 학교 가자!</dd><dt>영희</dt><dd>그래, 같이 가자!</dd></dl>
P 요소와 구두점을 이용하여 대화를 표현한 경우
<p>철수: 영희야, 학교 가자!</p><p>영희: 그래, 같이 가자!</p>
용어와 설명 부분이 항상 일대일 대응 관계를 이루는 것은 아니다. 한 개의 용어에 여러 개의 설명이 붙을 수 있고, 반대로 여러 개의 용어에 한 개의 설명이 붙을 수도 있다. 이 때문에 정의 리스트는 다른 리스트 형식보다 복잡한 구성을 갖는다.
한 개의 용어(term 또는 name)에 여러 개의 설명(description 또는 value)이 붙는 경우
<dl><dt>기획</dt><dd>홍길동</dd><dd>전지현</dd><dt>디자인</dt><dd>김철수</dd></dl>
여러 개의 용어에 한 개의 설명이 붙는 경우
<dl><dt>전문어</dt><dt>전용어</dt><dd>일정한 계층이나 부문에서만 쓰는 말</dd></dl>
DT 요소
카테고리 | 해당 사항 없음 |
콘텐츠 속성 | 글로벌 속성 |
지원 브라우저 | |
DT 요소는 정의 리스트에서 용어 부분(Definition Term)을 표시한다. DT 요소는 DL 요소 내에서만 사용되며, 반드시 DD 요소와 짝을 이루어 사용되어야 한다. 정의 리스트는 아이템을 규정하고 설명하기 위한 목적으로 사용하기 때문에 주어부와 서술부가 바뀌면 그 의미가 달라질 수 있다. 따라서 DT 요소는 반드시 DD 요소 앞에 위치해야 한다.
DT 요소는 텍스트만 포함할 수 있으며, P 요소, H 요소와 같은 블록 레벨 요소를 포함할 수 없다.
DD 요소
카테고리 | 해당 사항 없음 |
콘텐츠 속성 | 글로벌 속성 |
지원 브라우저 | |
DD 요소는 정의 리스트에서 설명 부분(Definition Description)을 표시한다. DT 요소와 마찬가지로 DD 요소는 DL 요소 내에서만 사용되며, 반드시 DT 요소와 짝을 이루어 사용되어야 한다. 정의 리스트는 아이템을 규정하고 설명하기 위한 목적으로 사용하므로 주어부와 서술부가 바뀌면 그 의미가 달라질 수 있다. 따라서 DT 요소 - DD 요소 순으로 구성되어야 한다.
DD 요소는 DT 요소와 달리 P 요소, H 요소와 같은 블록 레벨 요소를 포함할 수 있다.
예제 |
“사용성”과 “사용자 가치”를 용어 리스트 형태로 제공하였고, DL 요소, DT 요소, DD 요소로 마크업하였다
<!DOCTYPE html><html lang=”ko”><head>중략
</head><body><header>로고와 검색창
</header><nav><ul><li>책소개</li><li>저자소개</li><li>미리보기</li><li>서평</li><li>이벤트</li><li>구입처</li></ul></nav><section id=”main”><section id=”sub\_overview”><hn>UX Design, 1st Edition
사용자가 경험하는 모든 것을 디자인하라
</hn><p>위키피디어에 따르면, UX는 사용자가 제품, 시스템 또는 서비스를 이용하면서 얻게 되는 총체적 경험이다.
</p><blockquote cite=” http://en.wikipedia.org/wiki/User\_experience”>[위키피디어 원문] User experience 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.
</blockquote><p>인터랙티브 제품은 상호작용이 이루어지는 제품을 일컫는다. 이러한 제품을 다루는 것이 이미 일상이 되었기 때문에 그 과정이 지루하거나 건조하다면 제품과 함께 하는 시간은 고통의 연속일 것이다. 한 동안 사용성(사용하기 쉽고 편리한 정도)이 중요하게 다뤄져 왔지만, 사용성은 제품을 구성하고 있는 부분적 속성일 뿐 이것만으로는 사용자 가치(사용자가 제품으로 얻을 수 있는 모든 것)를 제대로 구현하기가 어렵다.
</p><dl><dt>사용성:</dt><dd>사용하기 쉽고 편리한 정도</dd><dt>사용자 가치:</dt><dd>사용자가 제품을 통해 얻을 수 있는 모든 것</dd></dl><p>이 책은 UX 디자인이란 무엇인가, UX 디자인을 잘 하려면이라는 질문에 제대로 된 대답을 하기 위해 저자 스스로 사용자 경험 디자인을 이해하기 위해 노력했던 과정을 담았다.
</p></section><section id=”sub\_index”><ol><li>사용자 경험 디자인이란</li><li>경험의 흐름</li><li>지식화에 의한 경험 형성</li><li>소비자-사용자 경험</li><li>사용자 경험의 순환구조</li></ol></section><section id=”sub\_picture”>그림 영역
</section><article id=”sub\_comment”>댓글 영역
</article></section><aside id=”sidebar”>사이드바 영역
</aside><footer>푸터 영역
</footer></body></html>HR 요소
카테고리 | Flow content |
콘텐츠 속성 | 글로벌 속성 |
지원 브라우저 | |
HR 요소는 주제가 중단되는 지점(thematic break)을 표시한다. 원래 HR 요소를 사용하면 수평선(Horizontal Rule)이 나타나고, 이를 통해 시각적 변화를 표현하고자 하였다. 그런데 HTML5에서는 의미적 마크업을 강화하기 위해 HR 요소를 주제와 주제 사이의 경계선으로 표시하는 용도로 사용하고 있다. 즉, 경계선을 만드는 것이 중요한 것이 아니라 HR 요소가 사용된 지점을 기준으로 주제가 바뀌거나 내용이 달라진다는 것이 중요하다. P 요소와 비교하자면, P 요소가 주제와 주제를 구분하기 위해 영역(범위)을 지정하는 것이라면 HR 요소는 주제가 전환되는 지점을 지정하는 것이다.
<p>옛날에는...</p><hr><p>요즘은...</p>FIGURE 요소
카테고리 | Flow content, Phrasing content |
콘텐츠 속성 | 글로벌 속성 |
지원 브라우저 | |
FIGURE 요소는 사진, 일러스트 이미지(illustration), 도표(diagram), 코드 블록(code block)[64], 시 구절 등과 다양한 형식의 도해(FIGURE)를 표시한다. 여기에서 ‘도해’는 도표, 그래프(graph), 차트(chart)와 같이 그림으로 나타난 표만을 의미하는 것이 아니라 본문 내용을 알기 쉽게 이해시키기 위한 인용 내용까지 포함하고 있다. 이 내용들은 본문과 구별되며, 일정 영역 내에서 군집(group)을 이루고 있고, 어떤 모양이나 형태를 갖는다는 특징이 있는데, 이러한 특징을 효과적으로 살리기 위해 FIGURE 요소를 사용한다. FIGURE와 IMG 요소를 굳이 비교하자면, IMG 요소는 이미지가 들어갈 “위치”를 지정하는 용도라면, FIGURE 요소는 이미지가 들어갈 “범위”를 지정하는 용도로 볼 수 있다.
멀티미디어 콘텐츠가 많아지면서 이미지 사용이 크게 늘어났는데, 이미지 자체를 표시할 수 있는 규격은 있었지만 텍스트로 기술된 캡션(caption)을 표시할 수 있는 규격은 없었다. 물론 문맥적으로는 이미지 다음에 기술된 텍스트가 캡션이라는 사실을 짐작할 수 있지만, 이것만으로는 이미지와 캡션 사이의 관계를 명시적으로 표시할 수 없다. 이런 문제는 FIGURE와 FIGCAPTION 요소를 사용하면 아주 쉽게 해결할 수 있다.
IMG 요소와 달리, FIGURE 요소는 자식 요소를 포함할 수 있으므로 IMG 요소, CANVAS 요소, VIDEO 요소, CODE 요소 등 다양한 형식의 요소를 동일한 주제로 묶어서 표시할 수 있다.
<figure>도해 콘텐츠가 들어갈 영역</figure>예제 |
이미지가 들어갈 영역을 별도로 구성하였고, 이것을 FIGURE 요소로 마크업하였다.
<!DOCTYPE html><html lang=”ko”><head>중략
</head><body><header>로고와 검색창
</header><nav><ul><li>책소개</li><li>저자소개</li><li>미리보기</li><li>서평</li><li>이벤트</li><li>구입처</li></ul></nav><section id=”main”><section id=”sub\_overview”><hn>UX Design, 1st Edition
사용자가 경험하는 모든 것을 디자인하라
</hn><p>위키피디어에 따르면, UX는 사용자가 제품, 시스템 또는 서비스를 이용하면서 얻게 되는 총체적 경험이다.
</p><blockquote cite=” http://en.wikipedia.org/wiki/User\_experience”>[위키피디어 원문] User experience 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.
</blockquote><p>인터랙티브 제품은 상호작용이 이루어지는 제품을 일컫는다. 이러한 제품을 다루는 것이 이미 일상이 되었기 때문에 그 과정이 지루하거나 건조하다면 제품과 함께 하는 시간은 고통의 연속일 것이다. 한 동안 사용성(사용하기 쉽고 편리한 정도)이 중요하게 다뤄져 왔지만, 사용성은 제품을 구성하고 있는 부분적 속성일 뿐 이것만으로는 사용자 가치(사용자가 제품으로 얻을 수 있는 모든 것)를 제대로 구현하기가 어렵다.
</p><dl><dt>사용성:</dt><dd>사용하기 쉽고 편리한 정도</dd><dt>사용자 가치:</dt><dd>사용자가 제품을 통해 얻을 수 있는 모든 것</dd></dl><p>이 책은 UX 디자인이란 무엇인가, UX 디자인을 잘 하려면이라는 질문에 제대로 된 대답을 하기 위해 저자 스스로 사용자 경험 디자인을 이해하기 위해 노력했던 과정을 담았다.
</p></section><section id=”sub\_index”><ol><li>사용자 경험 디자인이란</li><li>경험의 흐름</li><li>지식화에 의한 경험 형성</li><li>소비자-사용자 경험</li><li>사용자 경험의 순환구조</li></ol></section><section id=”sub\_picture”><figure><figure>첫 번째 이미지가 들어갈 자리
</figure><figure>두 번째 이미지가 들어갈 자리
</figure><figure>세 번째 이미지가 들어갈 자리
</figure></figure></section><article id=”sub\_comment”>댓글 영역
</article></section><aside id=”sidebar”>사이드바 영역
</aside><footer>푸터 영역
</footer></body></html>FIGCAPTION 요소
카테고리 | 해당 사항 없음 |
콘텐츠 속성 | 글로벌 속성 |
지원 브라우저 | |
FIGCAPTION 요소는 FIGURE 요소에 대한 캡션(CAPTION)을 표시한다. 제목이나 설명이 없는 내용에 적절한 캡션을 붙이는 것은 아주 중요하다. 캡션이 없는 도표는 의미를 효과적으로 전달할 수 없기 때문이다. 과거에는 일반 텍스트를 사용하여 도표 주변에 캡션을 제공하였다. 그러다 보니 본문과 캡션을 구분할 수 있는 근거가 없었고 의미 있는 마크업을 구현할 수 없었는데, 이런 문제점을 HTML5에 추가된 FIGURE 요소와 FIGCAPTION 요소가 해결해 줄 수 있다.
FIGCAPTION 요소와 IMG 요소의 alt 속성은 비슷한 성격이지만, 용도는 다르다. FIGCAPTION 요소는 도표 제목이고 alt 속성은 도표 설명이다. 즉, FIGURE 요소는 도표와 함께 제공되는 상황에서 제목을 표시하기 위한 것이고, alt 속성은 도표가 없는 상황을 대비하기 위해 도표를 설명하기 위한 것이다.
FIGURE 요소는 하나의 FIGCAPTION 요소만 가질 수 있으며, 부모-자식 관계에 의해 상호관계를 명시적으로 맺을 수 있다(아래 표 참조).
HTML4.x | <img src=”book.jpg” alt=”Expectation, Proximity, Awareness, Evaluation 등 사용자경험과정을 순환적으로 표현한 그림”> <p>사용자 경험의 순환구조</p> |
HTML5 | <figure> <img src=”book.jpg” alt=”Expectation, Proximity, Awareness, Evaluation 등 사용자경험과정을 순환적으로 표현한 그림”> <figcaption>사용자 경험의 순환구조</figcaption> </figure> |
<figure><figcaption>본문 내용은 아래와 같이 구성되어 있습니다. 더보기</figcaption><figure><img src="/UX\_UPA.jpg” alt="UX 프로세스 썸네일" width="200" height="180"><figcaption>UX 프로세스 by UPA</figcaption></figure><figure><img src=”/UX\_Jess.jpg” alt=”경험의주기 썸네일” width="200" height="180"><figcaption>경험의 주기 by Jess</figcaption></figure><figure><img src=”/UX\_Peter.jpg” alt=”UX의 중요성 썸네일” width="200" height="180"><figcaption>UX의 중요성 by Peter</figcaption></figure></figure>
예제 |
전체 이미지에 대한 설명과 각 이미지에 대한 캡션을 제공하였고, 이것을 FIGCAPTION 요소로 마크업하였다.
<!DOCTYPE html><html lang=”ko”><head>중략
</head><body><header>로고와 검색창
</header><nav><ul><li>책소개</li><li>저자소개</li><li>미리보기</li><li>서평</li><li>이벤트</li><li>구입처</li></ul></nav><section id=”main”><section id=”sub\_overview”><hn>UX Design, 1st Edition
사용자가 경험하는 모든 것을 디자인하라
</hn><p>위키피디어에 따르면, UX는 사용자가 제품, 시스템 또는 서비스를 이용하면서 얻게 되는 총체적 경험이다.
</p><blockquote cite=” http://en.wikipedia.org/wiki/User\_experience”>[위키피디어 원문] User experience 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.
</blockquote><p>인터랙티브 제품은 상호작용이 이루어지는 제품을 일컫는다. 이러한 제품을 다루는 것이 이미 일상이 되었기 때문에 그 과정이 지루하거나 건조하다면 제품과 함께 하는 시간은 고통의 연속일 것이다. 한 동안 사용성(사용하기 쉽고 편리한 정도)이 중요하게 다뤄져 왔지만, 사용성은 제품을 구성하고 있는 부분적 속성일 뿐 이것만으로는 사용자 가치(사용자가 제품으로 얻을 수 있는 모든 것)를 제대로 구현하기가 어렵다.
</p><dl><dt>사용성:</dt><dd>사용하기 쉽고 편리한 정도</dd><dt>사용자 가치:</dt><dd>사용자가 제품을 통해 얻을 수 있는 모든 것</dd></dl><p>이 책은 UX 디자인이란 무엇인가, UX 디자인을 잘 하려면이라는 질문에 제대로 된 대답을 하기 위해 저자 스스로 사용자 경험 디자인을 이해하기 위해 노력했던 과정을 담았다.
</p></section><section id=”sub\_index”><ol><li>사용자 경험 디자인이란</li><li>경험의 흐름</li><li>지식화에 의한 경험 형성</li><li>소비자-사용자 경험</li><li>사용자 경험의 순환구조</li></ol></section><section id=”sub\_picture”><figure><figcaption>본문 내용은 아래와 같이 구성되어 있습니다. 더보기</figcaption><figure>첫 번째 이미지가 들어갈 자리
<figcaption>UX 프로세스 by UPA</figcaption></figure><figure>두 번째 이미지가 들어갈 자리
<figcaption>경험의 주기 by Jess</figcaption></figure><figure>세 번째 이미지가 들어갈 자리
<figcaption>UX의 중요성 by Peter</figcaption></figure></figure></section><article id=”sub\_comment”>댓글 영역
</article></section><aside id=”sidebar”>사이드바 영역
</aside><footer>푸터 영역
</footer></body></html>DIV 요소
카테고리 | Flow content, Phrasing content |
콘텐츠 속성 | 글로벌 속성 |
지원 브라우저 | |
DIV 요소는 문서 분할(document DIVision)을 표시한다. 문서는 다양한 내용들을 포함하고 있으며, 이러한 내용들을 효과적으로 구성하기 위해서는 문서를 용도에 맞게 나누어야 한다. 웹 문서는 인쇄물과 달라서 주제와 관련 없는 내용이나 주제와 관련 있더라도 적절한 의미를 부여하기 어려운 내용이 포함되는 경우도 많다. 이런 경우에는 특별한 의미를 부여하지 않고 내용을 묶을 수 있는 포괄적 컨테이너(generic container)가 필요하며, 이를 위해 DIV 요소가 만들어졌다.
P 요소가 관련 있는 내용 위주로 블록으로 만드는 것이라면, DIV 요소는 관련이 있건 없건 간에 특별한 의미를 두지 않고 어떤 기준에 따라 한 데 묶어서 블록으로 만드는 것이다. 두 요소 모두 내용을 구조화한다는 점은 같지만, P 요소는 의미적 그룹핑(semantic grouping), DIV 요소는 구조적 그룹핑(structural grouping)을 만든다는 점이 다르다. 대부분의 HTML 요소는 나름의 의미를 갖고 있지만, DIV 요소는 어떤 의미도 갖고 있지 않다. 단지 내용을 짜임새 있게 만들기 위한 틀을 만들 뿐이며, DIV 요소로 표시되더라도 시각적인 변화는 생기지 않는다.
DIV 요소는 전형적인 블록 모형(block model)이다. 즉, 블록을 나열하거나 큰 블록이 작은 블록을 감싸는 방법을 이용하여 영역을 표시하는 것이다. 문서 내에는 내비게이션 영역, 푸터 영역, 본문 영역, 검색 영역 등 다양한 영역들이 존재하는데, 이 영역들은 주로 DIV 요소로 표시하였다. DIV 요소는 내용을 담는 영역을 만들 뿐이지, 그 영역이 어떤 용도인지는 명확하게 표시할 수 없다. 이 점을 개선하기 위해 HTML은 의미적 마크업(semantic markup)을 강화할 수 있는 요소가 추가되고 있다.
아래 그림처럼 HTML4.x에서는 DIV 요소를 사용하여 영역을 나누었지만 영역 사이의 구분이 잘 이루어지지 않았다. 그래서 브라우저를 위해서는 id 속성을, 사용자를 위해서는 title 속성을 추가로 작성해야 했다. HTML5에는 HEADER 요소, NAV 요소, SECTION 요소, ARTICLE 요소, ASIDE 요소, FOOTER 요소 등 다양한 규격들을 추가되어 영역을 좀 더 의미 있게 나눌 수 있게 되었다.
그러나 실제 마크업 작업을 하다보면 새롭게 추가된 규격만으로는 영역을 나누기 어려울 때가 있고 단순히 스타일 시트나 스크립트 적용을 위해 영역을 나누어야 할 때 DIV 요소를 적절히 사용할 필요가 있다.
DIV 요소는 블록 레벨 요소이지만 인라인 요소나 텍스트도 포함할 수 있다. 이것은 문장 속에 있는 텍스트도 DIV 요소로 표시될 수 있다는 것을 의미한다. 이렇게 마크업하면 문서 내에 너무 많은 블록이 생겨서 문서 구조가 복잡해 지므로 DIV 요소는 블록 레벨에서 사용하는 것이 바람직하다. 특히, DIV 요소는 P 요소처럼 내용의 시작과 끝에 여백을 만들지 않기 때문에 여백이 필요하다면 인라인 요소나 텍스트를 DIV 요소로 묶을 때는 스타일 시트를 사용한다.
<div style=”background:#FFFAFA”><p>DIV 요소는 포괄적 컨테이너다.</p></div>class 속성
class 속성은 클라스 이름(class name)을 지정한다. ‘클라스’는 데이터 또는 코드의 분류를 의미하는데, 같은 클라스는 같은 성질 또는 같은 양식으로 구현된다. 작성된 스타일시트나 자바스크립트는 파일 이름을 붙이듯 클라스 이름을 붙여 저장해 둔 다음, class 속성을 사용하면 지정한 스타일시트나 자바스크립트를 일괄적으로 적용할 수 있다.
class 속성은 id 속성과 마찬가지로 식별을 위해 이름을 붙인 것이지만, 그 목적은 다르다. id 속성이 다른 것과의 구별을 위해 고유한 이름을 붙인 것이라면, class 속성은 같은 그룹으로 묶여진 요소를 표시하기 위한 것이다. 그래서 id 속성과 달리 class 속성 값은 중복적으로 사용할 수 있으며, 문자, 숫자, 하이픈(“-“), 언더스코어(“_”), 콜론(“:”), 마침표(“.”) 등을 사용하여 값을 작성할 수 있다.
<html><head><title>제목입니다</title><style type=”text/css”>div.blue {background:#0000FF;}
</style></head><body><div id=”lion” class=”blue”>…</div><div id=”tiger” class=”blue”>…</div></body></html>class=“blue”로 지정된 DIV 요소는 STYLE 요소에서 정의된 스타일 시트에 의해 배경색이 #0000FF로 표현된다.
예제 |
헤더 영역의 로고와 검색창이 들어갈 영역과 인용된 내용을 DIV 요소로 마크업하였다.
<!DOCTYPE html><html lang=”ko”><head>중략
</head><body><header><div id=”logo”>로고
</div><div id=”search”>검색창
</div></header><nav><ul><li>책소개</li><li>저자소개</li><li>미리보기</li><li>서평</li><li>이벤트</li><li>구입처</li></ul></nav><section id=”main”><section id=”sub\_overview”><hn>UX Design, 1st Edition
사용자가 경험하는 모든 것을 디자인하라
</hn><p>위키피디어에 따르면, UX는 사용자가 제품, 시스템 또는 서비스를 이용하면서 얻게 되는 총체적 경험이다.
</p><blockquote cite=” http://en.wikipedia.org/wiki/User\_experience”><div class=”blue”>[위키피디어 원문] User experience 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>인터랙티브 제품은 상호작용이 이루어지는 제품을 일컫는다. 이러한 제품을 다루는 것이 이미 일상이 되었기 때문에 그 과정이 지루하거나 건조하다면 제품과 함께 하는 시간은 고통의 연속일 것이다. 한 동안 사용성(사용하기 쉽고 편리한 정도)이 중요하게 다뤄져 왔지만, 사용성은 제품을 구성하고 있는 부분적 속성일 뿐 이것만으로는 사용자 가치(사용자가 제품으로 얻을 수 있는 모든 것)를 제대로 구현하기가 어렵다.
</p><dl><dt>사용성:</dt><dd>사용하기 쉽고 편리한 정도</dd><dt>사용자 가치:</dt><dd>사용자가 제품을 통해 얻을 수 있는 모든 것</dd></dl><p>이 책은 UX 디자인이란 무엇인가, UX 디자인을 잘 하려면이라는 질문에 제대로 된 대답을 하기 위해 저자 스스로 사용자 경험 디자인을 이해하기 위해 노력했던 과정을 담았다.
</p></section><section id=”sub\_index”><ol><li>사용자 경험 디자인이란</li><li>경험의 흐름</li><li>지식화에 의한 경험 형성</li><li>소비자-사용자 경험</li><li>사용자 경험의 순환구조</li></ol></section><section id=”sub\_picture”><figure><figcaption>본문 내용은 아래와 같이 구성되어 있습니다. 더보기</figcaption><figure>첫 번째 이미지가 들어갈 자리
<figcaption>UX 프로세스 by UPA</figcaption></figure><figure>두 번째 이미지가 들어갈 자리
<figcaption>경험의 주기 by Jess</figcaption></figure><figure>세 번째 이미지가 들어갈 자리
<figcaption>UX의 중요성 by Peter</figcaption></figure></figure></section><article id=”sub\_comment”>댓글 영역
</article></section><aside id=”sidebar”>사이드바 영역
</aside><footer>푸터 영역
</footer></body></html>PRE 요소
카테고리 | Flow content |
콘텐츠 속성 | 글로벌 속성 |
지원 브라우저 | |
PRE 요소는 미리 만들어진 텍스트(PREformatted text)를 표시한다. 시(poem)나 컴퓨터 코드(computer code)는 의도한 표현 또는 읽기 편한 형식을 갖추기 위해 일반적인 문장과 다른 형식으로 구성된다. 컴퓨터는 공백도 문자로 인식한다. 만약 시나 컴퓨터 코드의 행 바꿈이나 공백을 일일이 마크업하려면 적잖은 노력이 필요할 것이다. 무엇보다도 이런 문장은 있는 그대로 보여주는 것이 더 효과적이다. 그래서 브라우저는 PRE 요소로 표시된 콘텐츠를 있는 그대로 보여주며, 다음과 같이 표현된다.
- 여백이 그대로 표현될 수 있다.
- 텍스트가 고정 피치 폰트(fixed-pitch font)[65]로 렌더링될 수 있다.
- 자동 단어 랩핑[66]이 적용되지 않을 수 있다.
- 텍스트 방향은 반드시 양쪽으로 처리된다.
아래의 예제처럼 PRE 요소로 표시한 문장은 원래의 문장 형식이 그대로 적용되지만, PRE 요소로 표시하지 않은 문장은 원래의 문장 형식이 적용되지 않는다. 즉, 브라우저가 PRE 요소로 표시된 텍스트를 특별한 텍스트로 간주하여 행 바꿈이나 공백을 특별하게 렌더링하는 것이다.
PRE 요소로 표시했을 때:
<pre>function Panel(element, canClose, closeHandler) {
this.element = element;
this.canClose = canClose;
this.closeHandler = function () { if (closeHandler) closeHandler() };
}
</pre>
function Panel(element, canClose, closeHandler) {
this.element = element;
this.canClose = canClose;
this.closeHandler = function () { if (closeHandler) closeHandler() };
}
PRE 요소를 표시하지 않았을 때:
function Panel(element, canClose, closeHandler) { this.element = element; this.canClose = canClose; this.closeHandler = function () { if (closeHandler) closeHandler() }; }
[지금까지의 소스와 결과물]
지금까지 구획된 영역 내에서 내용을 묶는 작업을 했다. 아래의 결과물은 HTML 문서를 브라우저가 렌더링한 것이다. 이것을 살펴보면 알 수 있듯이, P 요소, BLOCKQUOTE 요소, DL 요소, OL 요소가 적용된 곳은 쉽게 구분될 수 있도록 여백이 생긴 것을 알 수 있으며, BLOCKQUOTE 요소, OL 요소가 적용된 곳은 들여쓰기 효과까지 생겼다. 여백, 들여쓰기 효과 등 콘텐츠 스타일에 대한 것은 브라우저마다 다르게 나타날 수 있기 때문에 원하는 모양대로 보여주고 싶다면 별도로 스타일 시트를 작성하여 적용한다.
소스
<!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><nosript>자바스크립트을 실행할 수 없으므로 다른 버전의 프로그램을 다운로드 받으세요. <p><a href=”http://www.example.com/demo\_time/>프로그램 다운로드</a></p></noscript></head><body><header><div id=”logo”>로고
</div><div id=”search”>검색창
</div></header><nav><ul><li>책소개</li><li>저자소개</li><li>미리보기</li><li>서평</li><li>이벤트</li><li>구입처</li></ul></nav><section id=”main”><section id=”sub\_overview”><hn>UX Design, 1st Edition
사용자가 경험하는 모든 것을 디자인하라
</hn><p>위키피디어에 따르면, UX는 사용자가 제품, 시스템 또는 서비스를 이용하면서 얻게 되는 총체적 경험이다.
</p><blockquote cite=” http://en.wikipedia.org/wiki/User\_experience”><div class=”blue”>[위키피디어 원문] User experience 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>인터랙티브 제품은 상호작용이 이루어지는 제품을 일컫는다. 이러한 제품을 다루는 것이 이미 일상이 되었기 때문에 그 과정이 지루하거나 건조하다면 제품과 함께 하는 시간은 고통의 연속일 것이다. 한 동안 사용성(사용하기 쉽고 편리한 정도)이 중요하게 다뤄져 왔지만, 사용성은 제품을 구성하고 있는 부분적 속성일 뿐 이것만으로는 사용자 가치(사용자가 제품으로 얻을 수 있는 모든 것)를 제대로 구현하기가 어렵다.
</p><dl><dt>사용성:</dt><dd>사용하기 쉽고 편리한 정도</dd><dt>사용자 가치:</dt><dd>사용자가 제품을 통해 얻을 수 있는 모든 것</dd></dl><p>이 책은 UX 디자인이란 무엇인가, UX 디자인을 잘 하려면이라는 질문에 제대로 된 대답을 하기 위해 저자 스스로 사용자 경험 디자인을 이해하기 위해 노력했던 과정을 담았다.
</p></section><section id=”sub\_index”><ol><li>사용자 경험 디자인이란</li><li>경험의 흐름</li><li>지식화에 의한 경험 형성</li><li>소비자-사용자 경험</li><li>사용자 경험의 순환구조</li></ol></section><section id=”sub\_picture”><figure><figcaption>본문 내용은 아래와 같이 구성되어 있습니다. 더보기</figcaption><figure>첫 번째 이미지가 들어갈 자리
<figcaption>UX 프로세스 by UPA</figcaption></figure><figure>두 번째 이미지가 들어갈 자리
<figcaption>경험의 주기 by Jess</figcaption></figure><figure>세 번째 이미지가 들어갈 자리
<figcaption>UX의 중요성 by Peter</figcaption></figure></figure></section><article id=”sub\_comment”>댓글 영역
</article></section><aside id=”sidebar”>사이드바 영역
</aside><footer>푸터 영역
</footer></body></html>결과물
※ 지금까지 작성한 HTML 문서를 실제로 웹 브라우저가 렌더링하면 위와 같은 화면이 나타난다. 문서가 만들어지는 과정을 좀 더 쉽게 이해할 수 있도록 지금부터는 아래 그림처럼 레이아웃이 적용된 형태로 설명한다.
주석
[58] 문장은 여러 개의 단어(keyword)나 어구(phrase)로 이루어진다.
[59] 이 공간은 브라우저에 따라 다르게 표현될 수 있다.
[60] 서수 값은 순서를 나타내는 수의 값을 의미한다. 예, 첫 번째=1, 두 번째=2…
[61] HTML5에 추가된 속성이다.
[62] 리스트(lists)는 아이템을 단순 나열하기 위한 목적으로 사용하기 때문에 읽기 시작점을 명확하게 표현하는 것이 매우 중요하다. 그래서 OL 요소나 UL 요소를 사용하면 사용자 도구는 읽기 시작점을 숫자나 불릿(bullet)으로 표시해 준다.
[63] HTML에는 대화(dialogue, conversation)를 표현하기 위한 전용 규격이 없다.
[64] 본문에서 소스 코드를 예시적으로 보여주는 것
[65] 글자 폭이 일정한 폰트
[66] 행 끝에 단어가 넘칠 경우, 단어를 나누지 않고 다음 행으로 넘기는 기법(한 단어가 2개의 행으로 나뉘지 않도록 단어를 보호하기 위함)