인터랙티브 컨트롤(interactive control)은 사용자가 입력한 데이터를 브라우저나 서버로 전송하기 위한 도구다. 과거에는 데이터 전송을 위해 폼(form)이나 자바스크립트를 이용해야만 했다. 폼은 입출력을 위한 전용 공간의 성격을 띠고 있어서, 간단한 데이터 전송을 위해 별도로 폼 영역을 정의해야 하는 번거로움이 있었다. 그런데 웹이 점점 애플리케이션化 되면서 웹 문서 어느 곳에서든 데이터 전송이 이루어질 필요가 있었고, 이를 위해 새롭게 DETAILS, SUMMARY, COMMAND, MENU 요소가 제안되었다.
예제의 경우, “제휴카드 보기”를 클릭하면 상세 정보인 카드 리스트가 나타나게 할 것이다. 이와 같은 동작은 자바스크립트를 이용하여 구현해 왔지만, 앞으로는 HTML만으로도 구현할 수 있게 되었다. 노출된 내용과 숨겨진 내용을 DETAILS 요소로 감싸고, 노출된 내용을 SUMMARY 요소로 표시하면 간편하게 인터랙티브 컨트롤을 만들 수 있다.
<인터랙티브 요소 만들기>를 위한 표준 기술
DETAILS 요소
카테고리 | Flow content, Interactive content |
콘텐츠 속성 | 글로벌 속성, open |
지원 브라우저 |  |
DETAILS 요소는 세부사항(DETAILS)을 동적인 방식으로 표시한다. 이 요소를 사용하면 세부사항을 선택적으로 보여줄 수 있다. 사용자가 요약(summary)를 선택하면 숨겨져 있던 세부사항이 나타나도록 구성하는 기법인데, W3C에서는 “디스클로저 위젯(disclosure widget)”이라고 부르고 있다. 세부사항이 있으면 요약도 있어야 하는데, 이 요약은 SUMMARY 요소에 의해 표시된다. 따라서 DETAILS 요소는 단독으로 사용할 수 없고, 반드시 SUMMARY 요소와 함께 사용해야 한다. SUMMARY 요소는 DETAILS 요소의 자식 요소이므로 DETAILS 요소 다음에 SUMMARY 요소가 와야 한다.
지금까지 이 기법은 주로 자바스크립트로 구현되었는데, 표준 기술로 채택되면서 별도의 자바스크립트 없이 브라우저에서 직접 구현할 수 있게 되었다.[179]
<details><summary>제휴카드 보기</summary><ul><li>BC카드</li><li>VISA카드</li><li>현대카드</li></ul></details>
초기 상태
“제휴카드 보기”를 선택하면 세부사항이 나타난다.
open 속성
open 속성은 세부사항(details)을 표시된 상태(open state)로 지정한다. 기본적으로 DETAILS 요소는 세부사항을 숨겨진 상태로 표시한다. 이것은 사용자 선택이 있어야만 세부사항을 보여주겠다는 의도이므로 사용자 선택 없이 세부사항을 보여주고자 한다면 open 속성을 사용해야 한다.
<details open=”open”><summary>제휴카드 보기</summary><ul><li>BC카드</li><li>VISA카드</li><li>현대카드</li></ul></details>
초기 상태
SUMMARY 요소
카테고리 | 해당 사항 없음 |
콘텐츠 속성 | 글로벌 속성 |
지원 브라우저 | |
SUMMARY 요소는 요약(SUMMARY)을 표시한다. 여기에서의 요약은 DETAILS 요소로 제공되는 세부사항(details)에 대한 요약 또는 제목을 의미한다. “요약–세부”라는 관계를 제대로 전달하기 위해서는 DETAILS 요소 다음에 곧바로 SUMMARY 요소가 이어져야 한다.
<details><summary>제휴카드 보기</summary><ul><li>BC카드</li><li>VISA카드</li><li>현대카드</li></ul></details>MENU 요소
카테고리 | Flow content, Interactive content |
콘텐츠 속성 | 글로벌 속성, type, label |
지원 브라우저 | 없음 |
MENU 요소는 메뉴(MENU)를 표시한다. ‘메뉴’(menu)의 사전적 의미는 요리의 종류나 순서를 적은 차림표인데, 컴퓨터에 응용되면서 사용자가 선택할 수 있는 명령어 리스트를 가리키는 용어로 사용되고 있다. 소프트웨어는 다양한 기능을 효과적으로 사용해야 하고 특정 기능을 반복적으로 조작해야 하는 상황이 빈번하게 발생한다.
웹의 기능성이 고도화되면서 웹에서도 소프트웨어처럼 여러 가지 명령들을 명령어 리스트로 구성할 필요가 생겼다. 이 명령어 리스트는 주로 메뉴 바(menu bar), 툴바(toolbar), 컨텍스트 메뉴(context menu) 등에서 사용된다.
<menu>…
</menu>type 속성
type 속성은 메뉴 타입(menu type)을 지정한다. 이 속성에 의해 MENU 요소의 표현 형태가 결정되는데, 아직까지 MENU 요소를 지원하는 브라우저가 없어서 어떻게 표현되는지 정확하게 알 수 없다(아래 예제의 표현 형태는 추측에 의해 기술되었다).
type=”list”
속성값을 ‘list’로 지정하면 리스트 메뉴(list menu)가 만들어진다. 리스트 메뉴의 “리스트”는 일반적인 항목으로 구성된 리스트가 아니라 명령어 리스트이다. ‘list’가 기본값이므로 type 속성을 지정하지 않으면 MENU 요소는 리스트 메뉴로 표현된다.
<menu type=”list”><li><a href=”about.html”>소개</li><li><a href=”product.html”>제품</li><li><a href=”help.html”>고객센터</li></menu>
type=”context”
속성값을 ‘context’로 지정하면 컨텍스트 메뉴(context menu)가 만들어진다. 마우스 우측 버튼을 눌렀을 때 나타나는 메뉴처럼 컨텍스트 메뉴는 특정 상황(context)을 지원하기 위한 명령어 리스트만으로 구성된 메뉴를 의미한다.
<menu type="context"><command onclick="undo()">실행취소</command><command onclick="redo()">다시실행</command><command onclick="cut()">잘라내기</command><command onclick="copy()">복사하기</command><command onclick="paste()">붙여넣기</command><command onclick="delete()">삭제하기</command></menu>
type=”toolbar”
속성값을 ‘toolbar’로 지정하면 툴바 메뉴(toolbar menu)가 만들어진다. 툴바는 자주 이용하는 명령어를 별도로 모아두는 곳이다.
label 속성
label 속성은 메뉴 이름(menu label)을 지정한다. 이 속성은 서브 메뉴를 포함하고 있는 메뉴에 적용된다(위 그림 참조)
<menu type="toolbar"><li><menu label="File"><button type="button" onclick="fnew()">New...</button><button type="button" onclick="fopen()">Open...</button><button type="button" onclick="fsave()">Save</button><button type="button" onclick="fsaveas()">Save as...</button></menu></li><li><menu label="Edit"><button type="button" onclick="ecopy()">Copy</button><button type="button" onclick="ecut()">Cut</button><button type="button" onclick="epaste()">Paste</button></menu></li><li><menu label="Help"><li><a href="help.html">Help</a></li><li><a href="about.html">About</a></li></menu></li></menu>
예제 출처[180]
COMMAND 요소
카테고리 | Flow content, Interactive content |
콘텐츠 속성 | 글로벌 속성, type, label, icon, disabled, checked, radiogroup |
지원 브라우저 |  |
COMMAND 요소는 명령 버튼(COMMAND button)을 표시한다. 명령 버튼은 복사, 삭제, 인쇄 등 명령을 호출하는 버튼이다. 이 요소를 사용하면 FORM 요소로 정의되지 않는 곳에서도 컨트롤 요소를 제공할 수 있다. COMMAND 요소는 반드시 MENU 요소 내에서만 사용될 수 있는데, 아직까지는 브라우저들이 COMMAND 요소를 제대로 지원하지 않고 있기 때문에 어떻게 활용될 것인지 정확하게 파악할 수 없지만, 메뉴 바(menu bar), 툴바(toolbar), 컨텍스트 메뉴(context menu) 등을 구성하기 위한 요소로 활용될 것으로 예상한다.
type 속성
type 속성은 명령 타입(command type)을 지정한다. 이 속성에 의해 COMMAND 요소의 표현 형태가 결정되는데, 아직까지 COMMAND 요소를 지원하는 브라우저가 없기 때문에 어떻게 표현될지 정확하게 알 수 없다(아래 예제의 표현 형태는 추측에 의해 기술되었다).
type=”command”
속성값을 ‘command’로 지정하면 명령 버튼(command button)이 만들어진다(기본값).
type=”checkbox”
속성값을 ‘checkbox’로 지정하면 체크박스(checkbox)가 만들어진다.
type=”radio”
속성값을 ‘radio’로 지정하면 라디오 버튼(radio button)이 만들어진다.
icon 속성
icon 속성은 명령을 표현하기 위한 아이콘(icon)을 지정한다. 속성값은 이미지 파일이 있는 주소(URL)다.
<command type=”command” label=”Publish” icon=”pub.png” onclick=”publish()”>radiogroup 속성
radiogroup 속성은 라디오 버튼(radio button)이 적용된 COMMAND 요소의 그룹 이름(group name)을 지정한다. 이 속성은 COMMAND 요소 중 type=”‘radio”인 COMMAND 요소에만 지정할 수 있으며, 같은 속성값을 가진 COMMAND 요소가 서로 연결되어 작동할 수 있도록 만든다.
<command type=”radio” radiogroup=”select” onclick=”select\_all()”>[지금까지의 소스와 결과물]
소스
<!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”><form id=”keyword\_search” method=”get” action=”http://www.example.com/search”><input type=”search” id=”keyword\_search” name=”search\_header” size=”20” title=”검색어입력”><input type=”submit” value=”검색”></form></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><form><textarea rows=”8” cols=”60” placeholder=”댓글을 입력해 주세요!”></textarea><p><input type=”submit”></p></form></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><form id=”podcast”><select name="potcast\_selection"><optgroup label=”Video”><option value="video\_01">Creative Organization Theory</option><option value="video\_02">Human Factor for Beginners</option><option value="video\_03">Multiple User Interface</option></optgroup><optgroup label=”Audio”><option value="audio\_01">The Psychology of Menu Selection</option><option value="audio\_02">Mobile Usability</option><option value="audio\_03">Palm OS User Interface Guidelines</option></optgroup></select><input type="submit" value=”확인”></form><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=”customer”><h3>할인혜택</h3>