blo9

더 많은 자료를 찾나요? Garrett의 책 The Elements of User Experience(국내판 ‘경험디자인의 요소‘)는 초보자와 전문가들을 대상으로 정보 설계와 인터랙션 디자인에 대한 정보를 담고 있습니다. 아마존에서 주문할 수 있습니다.

원문의 버전 1.1b (2002년 3월 6일), 한글 번역문의 버전 1.0 (2006년 7월 7일)

Jesse James Garrett(contact), 양주일(contact)

이 문서에 대한 번역본은 다음과 같다:

• English (original document)
• Chinese (thanks to Arky Tan)
• Japanese (thanks to Atsushi Hasegawa)
• Russian (thanks to Philipp Chudinov)
• Spanish (thanks to Javier Velasco)
• Italian (thanks to Laura Caprio and Beatrice Ghiglione)
• French (thanks to Francois Lamotte)
• German (thanks to Marcus Brinckhoff)
• Portuguese (thanks to Livia Labate and Laura Cretton Lessa)

 

---

 

 

목차

1. 요약
2. 버전 히스토리
3. 미리 알아 두어야 할 것
4. 기본 개념
5. 단일 요소: 페이지, 파일 그리고 이들 스택
6. 관계설정: 연결선과 화살표
7. 동시진행: 동시발생 집합
8. 연결 분할: 지속 지점
9. 공통성: 영역과 반복 영역
10. 재사용 컴포넌트: 흐름 영역과 참조
11. 선택 요소에 대한 기본 개념
12. 선택하기: 선택 지점
13. 경로 탐색: 선택 연결선과 화살표
14. 다중 선택: 조건 분기
15. 한개 또는 여러개를 선택: 조건 선택자
16. 하나의 결정, 다양한 경로: 클러스터
17. 특별한 제한이 필요한 경우: 조건 영역
18. 결론
19. 형태 라이브러리 다운로드

 

---

 

 

웹 개발에서 팀을 이뤄 작업 할 때,인포메이션 아키텍쳐와 인터랙션 디자인에 있어서 다이어그램은 기본적인 커뮤니케이션 수단이 된다. 이 문서는 이러한 다이어그램을 제작하는데 있어서 고려할 사항과 인포메이션 아키텍쳐와 인터랙션 디자인 컨셉을 다루는 기본적인 기호들에 대한 논의와 이들 구성 요소를 사용하는 데 있어서 가이드라인을 제공하는 것을 목적으로 한다.

1.0 (2006년 7월 7일)

1차 한글 번역본 공개 – http://www.blo9.com/lab/visualvocabulary
한글 번역본 옮김 – http://blo9.com/2008/12/16/visualvocabulary
 

* 원문의 버전 히스토리

version history of Visual Vocabulary 

비주얼 용어사전은 무언가(일반적으로 시스템, 구조, 프로세스 등)를 묘사하기 위해 사용하는 기호들의 집합니다. 여기에 설명한 용어들은 웹 사이트의 사용자 경험(user experience)의 흐름 또는 보다 상위 레벨의 구조를 정의하기 위해, 인포메이션 아키텍쳐(이하 정보 설계)를 연구하는 사람들과 인터랙션 디자이너들이 사용할 수 있다.

이들 정의 또는 다이어그램은 다음과 같은 다섯가지 분야의 사람들이 사용할 수 있다:

• 프로젝트 스폰서(발주자) 또는 매니저들이 프로젝트의 범위와 형태에 대한 일반적인 개념을 얻기 위해 사용한다.
• 컨텐츠 제작자들이 컨텐츠 요구사항을 파악하기 위해 사용한다.
• 시각/인터페이스 디자이너들이 각기 다른 페이지들이 얼마나 많은지 헤아리거나, 초기 디자인에 대한 네비게이션과 인터페이스의 기본 개념을 파악하기 위해 사용한다.
• 기술자는 기능적인 요구사항을 파악하기 위해 사용한다.
• 인포메이션 아키텍트(이하 정보 설계자)와 인터랙션 디자이너들이 각 페이지에 대해 상세한 네비게이션과 인터페이스 요구사항을 개발하기 위해 사용한다.

여기에 속한 대부분의 사람들(스폰서를 제외한)은 그들의 업무를 처리하기 위해 상세한 기술을 필요로 한다. 문제는 각각의 상세 요구 사항이 상당히 다르며, 이들 대부분이 다른 사람들이 필요로 하는 것과 아무런 관련이 없다.

따라서 다이어그램을 사용한 의미있는 접근방법을 사용하면 모든 사용자가 쓸 수 있어 매우 유용하다. 다이어그램은 각각의 사용자가 필요로 하는 상세 스펙을 만족시킬 다큐먼트를 개발하는 과정에서 초적을 제공하기 때문이다.

정보 설계와 인터랙션 디자인에서의 비주얼 용어 사전에 대한 몇가지 중요한 요구사항을 살펴보면 다음과 같다:

• 화이트보드 호환성 : 용어는 충분히 손으로 스케치 할 수 있는 다이어그램으로서 간단해야 한다. 용어사전의 각 요소는 대충 그린 형태로 인해 다이어그램의 명확성을 해쳐서는 안되며, 분명히 구분할 수 있어야 한다.
• 소프트웨어 독립성 : 용어는 다이어그램을 제작하기위해 특정 소프트웨어 툴이 필요하지 않도록 디자인해야 한다. 용어는 특정 소프트웨어를 지지해서는 안되며, 대부분의 설계자가 편하게 사용할 수 있는 툴에서 작업이 가능해야 한다.
• 작은 규모와 자급자족성 : 다이어그램은 기술 개발 영역에서 사용하는 다이어그램 시스템에 대한 지식의 차이와 다양한 범위의 사용자가 쓰는 것이기 때문에 용어는 특정 지식이나 관심사를 필요로 해서는 안된다. 요소들의 전체 집합은 용어를 쉽게 배우고 적용할 수 있도록 가능한 최소로 보존해야 하며, 개념과 기호간의 1대 1 대응 관계를 유지해야 한다. 다이어그램에 의해 개념이 임의로 복잡해질 수는 있지만, 표현 방법 자체가 난해해서는 안된다.

정보 설계와 인터랙션 디자인은 동전의 양면과 같다(이들에 대한 정의는 “The Elements of User Experience”를 참고). 요즘 사이트들의 다이어그램은 이 두가지를 모두 포함할 수 밖에 없다. 그러나 각각의 다이어그램은 약간의 목표 차이가 있다.

이들 두가지 경우, 우리가 거시적 구조(macrostructure)라고 부르는 “큰 그림”을 팀 구성원에게 충분히 공유하기 위한 목적으로 다이어그램이 존재한다. 여기서 설계자(architect)의 임무는 목표에 가까운 적절한 상세 수준을 결정하는 것이다. 특정 페이지 레벨의 상세, 다시말해 미시적 구조(microstructure)는 다른 문서에서 자세히 다루어야 하며, 설계자가 이것들을 제작해야 하는 책임은 없다.

정보 설계를 묘사할 때, 다이어그램은 개념 구조와 컨텐츠의 유기적 결합관계를 강조한다. 여기서 개념 구조는 네비게이션 구조를 의미하는 것은 아니다. 정보 설계 다이어그램의 목적은 완전한 네비게이션 명세서를 제공하는 것이 아니다. 그 정도의 상세한 설명은 당황하거나 혼란스럽지 않도록 다른 문서에서 다루는 것이 옳다.

인터랙션 디자인을 묘사할 때, 다이어그램은 어떻게 유저가 기정의한 행동들을 진행하는지, 각각의 행동들을 완전히 분리 할 수 있는지를 강조한다. 다이어그램에서는 네비게이션과 함께 상세한 인터페이스는 나타나지 않는데, 만일 버튼이나 입력 필드들을 그렸다면, 불필요하게 다이어그램을 자세히 만들고 있는 것이다.

이 용어사전은 정보 설계와 인터랙션 디자인을 둘러싼 간단한 개념 모델에 근거하고 있다:

• 시스템은 유저에게 경로(path)를 제공하고
• 유저는 행동(action)을 통해 경로를 이동하고
• 행동은 결과(result)를 생성하도록 시스템에 영향을 준다.

 

---

 

 

웹에서의 유저 경험의 기본 단위는 당연히 페이지이며, 이것을 간단한 사각형으로 표현한다. 여기서 페이지는 표현(presentation)의 단위이며, 구현(implementation)의 기본 단위가 아니다. — 다이어그램의 한 페이지는 다수의 HTML 페이지가 되거나, 다양한 코드들(서버측 언어 또는 데이터 베이스의 구현에 따라)이 될 수 있다.

페이지와 함께, 네비게이션에 해당하지 않는 데이터 꾸러미인 파일이 존재한다. 파일은 웹브라우저 환경(예를 들어 오디오, 비디오 파일, PDF와 같은 독립적인 문서와 실행파일 등)을 통해 사용자에게 전달된다. 이 것에 대해 오래전부터 익숙하게 사용해온 한쪽이 접힌(dog-eared) 문서 아이콘을 쓴다.

그림 1a: [왼쪽] 페이지와 파일
그림 1b: [오른쪽] 페이지스택과 파일스택

페이지스택은 기능상 동일한 페이지들의 그룹을 나타내기 위해 사용하며, 이 페이지들은 사이트의 거시적 구조면에서 네비게이션이 불필요한 것들이다. 이와 동일하게, 파일스택은 파일들의 그룹을 표현하는 것으로 동일한 네비게이션 처리에 응답하며, 하나의 단위집합(entity)로 분류해서 다룬다(가령, 다운로드해서 설치하는 게임 파일들이나, PDF로된 사용자 매뉴얼 파일 등).

페이지나 파일상의 레이블은 이들을 구분하는 기호로 사용한다. 레이블은 HTML <TITLE> 태그나 파일명과 같이 실제 명칭과 동일할 필요는 없다. 다만, 다이어그램에서 개별 페이지와 파일들을 구분할 수 있도록 독립적이어야 한다. 다이어그램에서 개별 숫자나 문자를 사용하는 것은 손쉽게 모든 페이지와 파일들이 구분할 수 있는 유용한 방법이다.

요소들 사이의 관계는 단일선 또는 연결선 (connector)으로 그릴 수 있다. 이 개념들의 관계는 네비게이션과 많은 관련이있다. — 모든 네비게이션 관계들이 다이어그램에 나타나는 것은 아니다.

정보 설계에 있어서 이들 관계는 일반적으로 페이지들의 계층 구조를 통해 트리 형태로 제작한다. 그러나 항상 트리 형태만 사용할 것이 아니며, 경우에 따라서 그것이 가장 좋다고 말 할 수도 없다.

그림 2a: [왼쪽] 간단한 트리 구조
그림 2b: [오른쪽] 그림 2a와 동일한 구조를 다른 형태로 표현한 다이어그램

인터랙션 디자인에 대한 다이어그램을 그릴 때, 사용자가 시스템에서 특정 임무를 완수하는 상태 이동을 설명하기 위해 연결선들이 방향성을 가져야 할 필요가 발생한다. 연결선들에 화살표를 설정하는 것으로 방향성이 필요한 문제를 멋지게 해결할 수 있다. 여기서 요소들의 위치에 따른 상대적인 상태 이동을 설명하는 방법으로 하위(downstream), 상위(upstream)라는 개념을 사용한다.

그러나 이들 화살표가 일방통행을 뜻하는 것이 아니라, 오히려 구내식당에서 음식을 배식받는 진행 방향을 표시하는 것과 가깝다. 사용자가 반대방향으로의 진행에 제한을 받지는 않는다. 단지 화살표는 사용자가 이동하길 원하는 진행방향을 표시한다.

그림 3a: [왼쪽 위] 화살표는 임무 완수를 위한 하위 이동을 나타낸다.
그림 3b: [왼쪽 아래] 십자 표시는 상위 이동이 제한됐음을 나타낸다.
그림 3c: [오른쪽] 다수의 화살표를 사용하여 진행방향을 분명히 나타낼 수 있다.

만일 상위 이동을 제한해야 하는 상황이 필요하다면(예를 들어, 기록을 삭제하면 복구할 수 없는 상황에서), 화살표의 반대쪽 끝부근에 십자 표시(연결선에 표시한 짧은 수직선)를 사용한다.

경우에 따라 복잡한 구조에서의 흐름을 보다 분명히 하기 위해, 상위 페이지 부근에 화살표를 추가할 필요가 있다(유용한 팁: 대부분의 다이어그램 제작 프로그램에서 연결선 중간에 화살표를 그릴 수가 없다. 이것이 가능하도록 감춰진 연결 지점을 추가하여 접착점(gluedot) 요소로 형태 라이브러리(shape libraries)를 제공하고 있다. 이것을 사용하여 화살표 연결선을 그리는 것이 가능하다).

연결선과 화살표 역시 레이블을 설정할 수 있는데, 사용자가 어떤 행동을 취했는지를 분명하게 표시할 필요가 있는 경우에만 레이블을 사용한다. 만일 레이블의 문장이 길어지거나 다이어그램을 어지럽힐만큼 커진다면, 각주를 지정하고 보충 설명으로 해결한다.

본 문서에서 사용한 예제들은 숫자, 문자, 괄호로 구성된 각주와 참조 목록을 표시하고 있다. 숫자는 참조가 나타나는 다이어그램 페이지를 나타내며, 문자는 설명들을 구분한다. 예를 들어 다이어그램 페이지 3의 첫번째 설명은 (3a), 두번째는 (3b) 등으로 나타낸다.

그림 4a: [왼쪽] 불필요한 레이블
그림 4b: [가운데] 적절한 레이블
그림 4c: [오른쪽] 각주 또는 참조 목록

동시발생 집합(concurrent set)은 반원으로 표시하며, 사용자의 행동이 다중 또는 동시 다발적인 결과를 생성할 때 사용한다(예를 들어 페이지를 메인 윈도우에 로딩하는 것과 동시에 팝업창이 뜨는 상황이나 파일을 다운로드하면서 페이지를 표시하는 경우).

그림 5: 동시발생 집합

화살표의 경우 동시발생 집합이 방향성을 가지는 것을 나타낸다. 상위 요소와의 연결은 둥근 부분으로, 하위 요소와의 연결은 편평한 부분으로 그린다.

정보 설계자는 그들의 다이어그램 작업을 모두 반영할만큼의 충분히 큰 종이가 있었으면 좋겠다는 희망을 하곤 한다. 그러나 플로터(plotters)와 같이 충분히 큰 형태의 출력장치가 널리 쓰이고 있지만, 어떤 구조는 너무 복잡해서 다이어그램을 모두 확장해서 한번에 표시하지 못한다.

다이어그램을 이해하기 쉬운 여러 부분으로 분리하도록 페이지에 공백이 있는 지속 지점(continuation points, 꺾인 괄호)을 사용한다.

그림 6a: [왼쪽] “continue to”는 다른 다이어그램으로 연결을 시작하는 지점이다.
그림 6b: [오른쪽] “continue from”은 그림 6a에서 연결이 이어지는 지점이다.

하나의 지속 지점은 필요에 따라 다수의 요소들과 연결할 수 있다. 그리고 꺾인 괄호의 방향(수직 또는 수평)은 특별한 의미가 없다. 괄호의 방향은 설계자가 예쁘다고 판단하는 곳으로 선택한다.

영역 요소(둥근 모서리 사각형)는 하나 또는 그 이상의 공통된 특징을 공유하는 페이지들을 그룹으로 묶기 위해 사용한다(예를 들어, 팝업 윈도우로 나타내거나 특정 디자인이 필요한 부분). 연결선과 마찬가지로 이러한 특징을 구분하기 위해 레이블을 사용하며, 설명할 것이 많다면 문서 내에 참조 노트를 포함시킬 수 있다.

그림 7: 팝업 윈도우로 표현해야 할 영역을 설정한 예제

다수의 구조 설계가 반복되는 동일한 기본 구조(여러 개의 기능상 독립된 정보 요소들로 구성된)를 포함하고 있다. 가령, 당신이 개별 상품에 대해 많은 페이지로 구성된 상품 카달로그를 만들어야 한다면, 개별 상품에 대해 카달로그의 구조를 여러번 그려야 한다. 이 얼마나 시간 낭비인가? 이럴 땐 둥근 모서리의 사각형을 쌓아둔 반복 영역(iterative area)을 사용하라.

그림 8: 상품 카달로그에서 되풀이 되는 구조를 반복 영역으로 표현한 예제

연결선과 화살표를 사용할 때, 영역 자체를 가리키게 해서는 안된다. 영역 요소는 단지 페이지들을 묶기 위한 것이다. 영역은 매우 주의해서 사용해야 한다. — 사용자 경험이 불분명하거나 미시적 구조와 연결되는 곳에서 다이어그램의 목적과 충돌하는 경우, 대부분의 상세 설명이 필요한 곳에 영역 요소를 적용하려 하기 쉽다.

인터랙션 디자인에서 몇 단계의 연속된 순서(로그인 프로세스 같은)가 디자인 상에 반복해서 나타나는 경우가 있다. 때론 이런 연속적인 순서가 사용자에게 임무를 완수하도록 하나 또는 다수의 시도를 요구하는데, 이를 하나의 컴포넌트로 나타낼 수 있다(이것은 컴퓨터 프로그래밍에 있어서의 서브루틴의 개념과 유사하다).

이러한 재사용 가능한 순서를 플로우라 고 부른다. 그리고 플로우는 다이어그램 안에서 두가지 요소로 표현하는데, 플로우를 포함하는 플로우 영역과 모든 문맥에서 플로우에 대한 위치를 반복적으로 나타내는 플로우 참조가 있다. 이 두가지 요소는 모서리가 접힌 사각형(이를 변형된 8각형이라 부를 수 있다)으로 동일한 기본 형태를 가진다.

그림 9a: [왼쪽] “continue to”와 “continue from”을 가리키는 플로우 참조
그림 9b: [right] 그림 9a에서 참조하는 플로우 영역

플로우 영역은 입구(entry point)와 출구(exit point)에 해당하는 두개의 특별한 지속 지점이 필요하다. 이 두 지점은 플로우 영역의 바깥쪽에 위치하며, 지속 지점은 플로우 영역 내부에서 여러 개의 다이어그램으로 분화되는 것을 가리킨다.

플로우 참조의 역할은 지속 지점과 아주 유사하다. 플로우 참조와 지속 지점의 목적은 정보 설계자가 여러 페이지에 걸쳐 다이어그램을 나눠 그릴 수 있도록 가능하게 만드는 것이다. 차이점은 플로우 참조에는 시작 지점(continue from)과 연결 지점(continue to) 두 가지 형태를 갖고 있는 반면에, 지속 지점은 어느 한 곳으로만 연결될 수 있다는(연결을 받거나 보내는) 것이다. 만일, 동시에 연결을 받거나 보낼 필요가 없다면, 플로우를 사용하지 않아도 된다.

정보 설계와 인터랙션 디자인에서는 사용자가 사이트를 이동하는 것에 따라서 빈번하게 시스템을 동적으로 변경해야 할 때가 있다. 이러한 변경은 선택 로직(conditional logic)에 따라서 이루어지는데, 이 문서의 나머지 부분은 선택 로직의 구조에 대해 살펴볼 것이다. 선택 요소에 대한 응용방법의 기본 개념은 다음과 같다:

• 시스템은 하나 또는 여러개의 속성(attributes)을 관리한다. 이들 속성은 특별히:
• • 사용자(사용자의 형태 등)
  • 세션(로그인 상태 등)
  • 접근한 컨텐츠(제목과 같은 문제 등)
  • 또는 현재 존재하는 지 여부(시간이나 날짜 등에 따라서)
• 속성은 값(values)을 가진다(”3 p.m.”은 “시간”에 가질 수 있는 값이다).
• 속성과 특정한 값들이 연결될 수 있는 관계를 선택(또는 조건, condition)이라 부른다.
• 시스템은 속성이 참값을 가지는지 평가한다(evaluate).

정적인 구조에서는 모든 환경에서 모든 유저가 이동할 수 있는 모든 경로를 나타내는데, 각각의 경로는 항상 동일한 결과로 이동한다. 하지만 동적인 구조에서는 하나 또는 여러 단계의 선택을 유저가 어떻게 했는지 판단하여 경로(또는 결과)를 결정하게 된다.

다이어그램에서의 혼동을 최소화하기 위해서, 다이어그램과 관련있는 이런 선택들에 대해 각주 또는 부록으로 보충 설명을 한다.

한명의 사용자가 다수의 결과를 생성한다면, 시스템은 어떤 결과가 나타나는지를 결정해야 한다(가장 적절한 예시는 폼 전송에서의 에러 핸들링일 것이다). 이것을 선택 지점(decision points)이라 부르며, 고전적인 순서도에서 사용하는 것과 같이 마름모 형태를 사용한다.

그림 10: 로그인 처리에서의 선택 지점의 사용 예제

선택 지점으로부터의 화살표의 방향은 어떤 요소에 대한 선택이 이루어졌는지를 분명히 가리킬 수 있도록 사용해야 한다.

은선(dashed line)으로 표현하는 선택 연결선(conditional connector)은 하나 또는 여러개의 조건에 따라서 사용자에게 표시할 지 여부를 나타낸다.

그림 11a: [왼쪽]선택 연결선
그림 11b: [오른쪽] 선택 화살표

예를 들어, 회사 사원들만 접근해야 하는 민감한 정보를 포함한 페이지가 존재한다면, 이러한 선택 조건은 사용자의 형태(사원)가 되고, 조건이 일치하면 경로는 선택 가능하며, 그렇지 않으면 경로는 존재하지 않는 것으로 다룬다.

사용자에게 제시된 옵션들 중 시스템이 상호 배타적으로 한가지 경로만 선택해야 할 경우에, 조건 분기(conditional branch, 삼각형)를 사용한다. 상위 요소는 삼각형의 정점에 연결하고, 하위 요소는 삼각형의 다른 면에 연결한다.

그림 12: 조건 분기

그림 12의 예제는 그림 10과 유사하다. 그러나 여기서의 행동은 약간 다른데, 선택 지점의 예제에서는 단 하나의 경로만(또는 네비게이션 요소만) 사용자에게 제공되고, 사용자는 특정 조건에 따라서 이동한다.

그림 12에서, 시스템은 비슷한 결정을 하는데, 중요한 차이는 사용자의 행동이 있기 전에 발생한다는 점이다. 조건 분기는 사용자에게 어떤 경로를 제공할 것인가를 시스템이 결정하는 것을 나타낸다. A 페이지에서 B, C, D 페이지로의 경로는 상호 배타적이며, 예를 들어 B 페이지로 연결되는 경로를 표시하면, 나머지 C, D 페이지로의 경로는 나타나지 않는다.

선택 연결선과 화살표와 마찬가지로 조건 분기는 사용자에게 경로를 전혀 제공하지 않을 수도 있다(null result). 여기서의 조건 분기는 null result를 제공하지 않는 것으로 가정한다. 만일 null result를 가정하면, 3개중의 하나 또는 여러 개의 결과가 가능하기 때문이다. 분기가 null result를 제공한다면, 각주나 부록에 보충설명을 표시하라.

사다리꼴 모양으로 표현하는 조건 선택자(conditional selector) 의 역할은 조건 분기와 유사하다. 가장 큰 차이는 하위 요소로 향하는 경로들(선택자)이 상호 배타적이지 않다는 점이다. 조건을 만족시키는 어떤 경로라도 사용자에게 제공될 수 있다.

그림 13: 조건 선택자

조건 선택자에 대한 가장 일반적인 사용방법은 검색엔진이 생성하는 결과가 있다. 검색 결과 페이지는 선택자의 상위 요소에 따라 화면에 나타난다. 이때 조건은 사용자가 입력한 검색 기준에 따라 결정되고, 하위 요소로 연결되는 경로는 검색엔진에 인덱싱된 컨텐츠 페이지들에 따라서 출력된다. 조건 분기와 마찬가지로 조건 선택자는 null result를 생성할 수 있는데, 실제로 이것이 분기보다 선택자를널리 사용하는 일반적인 이유이다.

어떤 선택 구조는 시스템에서 특정 조건에 따라 하나 이상의 경로를 제공해야 하는 경우가 있다. 이런 구조에서 관련된 경로들을 모두 묶어서 클러스터(cluster)라고 부른다(원으로 나타냄). 클러스터는 조건 분기 또는 조건 선택자에서 시작되어 하위 요소로 표현된다.

그림 14: 분기에서 부터 시작된 클러스터

그림 14에 나타낸 구조는 일반적인 조건 분기와 매우 유사하다. 그러나 하나의 조건은 사용자에게 하나 이상의 경로를 제공할 수 있다. 따라서 속성이 어떤 값 x를 갖는다고 결정될 때, 사용자는 B 페이지로 이동할 수 있는 경로를 얻는다. 그러나 속성이 어떤 값 y를 갖는다고 할 때, 사용자는 C나 D 페이지로 이동할 수 있는 경로를 얻게된다.

하나 또는 여러 조건들을 페이지들의 그룹에 적용한다면, 이들 페이지들을 조건 영역으로 묶을 수 있다. — 영역요소와 비슷하게 모서리가 둥근 사각형을 사용하지만, 은선(dashed-line)으로 조건 영역을 다룬다.

그림 15: 보안 연결이 필요한 부분에 조건 영역을 사용한 예제

조건 영역은 대부분 접근 제한이 필요한 상황에서 사용한다. 예를 들어, 로그인이 유효한 상태이거나, 암호화된(SSL) 연결이 필요한 곳에 쓰인다. 다른 영역들과 달리, 조건 영역은 조건이 충족되지 않은 이벤트에 의해 생성되는 결과와 관련이 있다.

 

---

 

 

전체 시스템이 어떻게 함께 동작하는지를 살펴보려면, 정보 설계에 대한 다이어그램 예제 또는 메타필터를 참고하라(Garrett은 이 사이트의 개발에 대해서 제작한 것이 아니라, 간단히 이 사이트를 역으로 해석해서 다이어그램을 완성했다).

Eric Turner의 quick reference guide는 여기서 말한 요소들을 한페이지로 서술하여 손쉽게 배울 수 있게 만들었다. Scott Larson은 매우 다양한 선택 요소에 대한 quick reference를 handy cheatsheet로 정리했다. 그리고 이들 요소들을 응용해보기위해서는 다음에 나올 형태 라이브러리(shape library)를 참고하기 바라며, 모든 형태에 대한 PDF 파일이 있으니 참고하라.(thanks to Ross Olson for the suggestion).

이 용어사전은 단지 첫 시작에 불과하다. 웹에 대한 정보 설계와 인터랙션 디자인은 진화하고 있으며, 상황은 어쩔 수 없이 변하고, 따라서 이 용어사전이 더이상 표현할 수 없는 요소들도 생겨날 것이다. 향후 이 용어사전의 차기 버전에 대한 여러분의 피드백과 추천을 언제나 환영한다.

맥 OS X의 OmniGraffle은 비주얼 용어사전을 기본으로 내장한 첫번째 어플리케이션이다. OmniGraffle은 현재 애플 파워맥과 파워북에 기본적으로 설치되어 있다. 필요하다면 Omni 사이트에서 다운로드가 가능하다.

PocketPC의 PocketDraw 2.0 은 정보 설계를 위한 비주얼 용어사전 팔레트를 포함하고 있다. PocketDraw 사이트 또는 Mike Lee’s weblog에서 예제를 볼 수 있다.

다른 형태의 라이브러리도 아래 링크에서 사용할 수 있다:

• Stencil file for Visio 2000
• Stencil file for Visio 5
• Stencil file for Visio 4
• PowerPoint file
• Library file for Adobe InDesign 2.x (thanks Andrew Robinson)
• Library file for Adobe InDesign 1.x
• Library file for FreeHand 10 (thanks Andrew Crow)
• Library file for FreeHand 9 (thanks Andrew Crow)
• Illustrator EPS file
• Library file for iGrafx Flowcharter 2000 (thanks Andrew Robinson)
• Library file for OpenOffice (thanks Nelson Rodriguez-Peña)
• Collection of EPS files containing one element per file, suitable for import into other applications (1.1 MB)
• Two different SVG libraries: [1] (1.9 MB) [2] (52 KB; thanks to Marcus Brinkhoff)

 

---

© 2006 Zooil Yang
© 2000-2002 Jesse James Garrett
영어 원문: http://www.jjg.net/ia/visvocab/
더 많은 IA 자료: http://www.jjg.net/ia/