잡지를 보다 보니 혼다의 광고가 있다. 혼다가 아시모라는 로봇을 만든건 잘 알려진 바인데, 비행기까지 만든다는 사실은 그리 알려지지 않았지.

Honda Different Heart

이게 혼다의 색깔인가? 그거보단 ‘좋아하지 않으면 만들지 않는다’는 말이 참 와 닿는다. 우린 정말 그렇게 서비스를 만들고 있을까?

그런데 구석에 있는 ‘마린엔진’에 대한 설명에서 고개가 갸우뚱… 환경, 저소음까진 이해할 수 있는데, 저연비? 연비가 좋다는 말이 저연비였나? 고연비 같은데…

연비가 뭘까 찾아봄.

연비는 주로 리터당 주행거리를 이야기 한다. 근데 한자어로 표기할 땐 燃費. 그래서 저연비 즉, 연료비용이 낮다는 뜻이므로 이게 좋다는 의미인가보다.

이와 비슷한 혼동이 있나보다. 검색해보니 “베스트 드라이버로 가는 길“이란 책에 다음과 같이 나오네…

* 원래 제목과 같은 글귀가 맘에 들어서 끄적이기 시작했는데… 저연비 땜시 엉뚱한 글이 돼버렸다 -_-;;; 이런 삼천포를 봤나!

더 많은 자료를 찾나요? 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)

기억 저장.

• 워프닷컴으로 이사후 워드프레스가 싫어진다. 결국 서버관리가 귀찮았던 내 게으름 탓이지…
• 워프닷컴에서는 꼭 post slug를 써야 한다. 의미있는 URL만을 남기라는 뜻인가? 이 놈들이 아시안 랭귀지를 쓰지 않아서 그게 얼마나 불편한지 모르는 게군…
• 오픈캐스트… 할말은 많은데, 내가 하면 불륜될꺼고… 상세기획 fix되고 정작 개발은 2개월 남짓. 늘 그랬듯 이것 역시 미친 도전. 다들 12월만 기다리는 지루했던 투쟁.
• 어떤 회사는 대표가 블로깅 한다는데 그건 불가능… 그게 좋은 건가? 이건 사람 사는 동네잖아?
• 아직 1차 버전인데 사람들 기대가 크다. 아직 갈길이 먼데… 역시 우리나라 사람은 원하는게 많아…
• 그러고 보면 사람들 생각은 거기서 거기. 원하는 거 구현되면 본인의 제안을 훔쳤다는 둥 베꼈다는 둥 말하겠지…
• 태양 아래 새로운 것 없다잖아?
• 11월에 기력을 너무 소진한 다음 재충전이 안되네… 충전율 30%대
• 이럴 땐 책보며 득햏해야 하는데… 요즘엔 눈이 시리다.
• 큰딸 친구가 생일이었는데 울 애는 초대 못받았다고 서운해 함. 어린이집 엄마들끼리 잘 모르니 애도 초대 안함. 당연하긴 한데… 씁쓸…
• 와이프가 회사 관두는거에 대해 고민중… 커가는 애들을 그냥 둘 수가 없어서. 우리나라는 일하며 애키우긴 거의 불가능.
• 둘째도 슬슬 말하기 시작했는데 가족 사진 찍으러 가야겠다. 이런 예쁜 순간을 금새 까먹잖아…
• 어느새 팀원 100명. 그 사이 난 컸을까?
• 올해 마감하고 내년도 계획 세워야 해. 근데 몸이 안움직여…
• 일하자.

오늘 알게 된 내용인데, 맥의 파인더에서 컬럼 뷰의 가로길이를 자동으로 폭 맞춤 하려면 컬럼 조정 아이콘을 더블클릭하면 된다. 그럼 파일명이 잘 보이는 사이즈로 자동 폭맞춤이 이루어짐!

어제 퀵실버로 미투데이 사용하기에 대해 이곳에서 글을 적다 보니 워드프레스닷컴에서는 zip파일을 지원 안한다는 것을 알게됐다.

이 것 참…

워드프레스닷컴에서는 jpg, jpeg, png, gif, pdf, doc, ppt, odt 파일만 지원한다. 서버가 없으니 여간 불편한게 한두가지가 아니군… 지금으로선 도메인 연결이 가능하면서 기능적으로 편한 블로그는 티스토리가 최고구나… 에혀…

또 다른 불편한 점은 카테고리가 태그와 통합된 것(이건 설치형도 마찬가지 인가?) 그리고 개별 블로그 태그와 카테고리가 지원 안된다(wordpress.com/tag/… 와 연결됨). 개인 블로그로서 워프닷컴은 비추 -_-;

한동안 방치했던 블로그… 오늘 15 달러 결재하고 blo9.wordpress.com 블로그에 blo9.com 도메인 열결했다. 워프는 쓰고 싶고, 서버는 없고… 유지보수하기 귀찮아 걍 워프닷컴 쓰면서 도메인만 연결해뒀음. 도메인 살렸으니 다시 달려볼까?

방금 글을 하나 적었다. 그런데 워프.com에서 자동으로 관련글을 추천하는 내용을 내 포스트에 집어넣었다.

죽을 때까지 고민하겠지? 내일 뭐 입지? 라고… ㅎㅎ

Possibly related posts: (automatically generated)

* 코피는 뭔가요? coffe 입니다.

이게 뭐지? 하며 살펴봤는데 ‘고민’이란 단어가 들어가서 그런거 같다.

나 이 기능 싫은데… 왜 없앨 수 없는 거야! 도대체 어디에 이 기능을 박아둔거야!

서버를 없애버리니 이거 저거 골치아픈게 많다. 흑… 다시 살려야 하나?

* 없앨 수 있는 기능이 있다. Design의 Extra에서 설정할 수 있군. 스킨마다 다른가봐

외국영화를 보다 보면 ‘넌 해고야’라는 말을 듣고 짐을 싸는 장면이 나온다. 학창 시절에도, 직장을 다니는 지금까지도 어떻게 그게 가능할까 하는 생각이 든다. 외국이라 가능한 걸까?

그 장면에서 두가지가 놀라운데 우선, 회사가 사원을 그렇게 쉽게 해고할 수 있다는 것과 박스 하나만 달랑 싸들고 회사를 뜰 수 있다는 사실.

주로 미국 영화니 미국에서는 가능한 스토리인 것같다. 부당해고에 해당하는 것은 없을까? 성과주의 제도라서 가능한 걸까? 암튼 뭐 내가 인사 담당자는 아니니 거기에 대해선 자세히 모르겠다.

난 회사에 짐이 많은데, 회사가 아직 세입자이다보니 이사를 많이 다녔다. 이사때마다 ‘뭔놈의 짐이 이렇게 많아? 내가 이렇게 회사에 미련이 많았나?’ 하는 고민이 끊이질 않는다. 근데 달랑 한박스라니! 내가 무식해 보인다.

그런데 얼마전 산학연계로 숭실대 가서 강의을 했다. 이제 졸업을 앞두고 있는 친구들이라 무슨 이야길 해줄까 고민하다가 그냥 내 인생 이야길 해줬다. 사회로 나가서 첫 발을 디딜 친구들이니 도움이 되지 않을까 하는 마음에…

그러고보니 나도 하던 일을 관둘뻔할 때가 있었다. 현재의 직장에서 말이지…

그땐 입사해서 1년쯤 됐을 땐데 플래시 게임을 만들고자 했었다. 싱글게임팀의 한 파트로 5명 정도 근무. 나 포함 개발자 3명, 디자이너 2명.

어느날 실장님이 부르셔서 가보니 ‘주일아 아무리 고민해봐도 플래시 게임으로 뭘 해야 할지 모르겠다. 답이 안나와… 그래서 말인데 너가 팀장으로 팀을 한번 만들어 보고 너희들끼리 고민해봐 단 6개월 뒤에 다시 보자’. 6개월 뒤엔 어떻게 되냐고 여쭈었는데, ‘답이 없으면 해체. 다른일 해야지’.

깜깜했다. 내게 게임에 대한 재능이 있는 것도 아니고 그냥 플래시를 좋아하다 그걸 업으로 삼게 됐고, 더구나 그땐 병특이었단 말이다. 나더러 어쩌라고… 하지만 길게 고민할 순 없었다. 팀을 만들면 어떻게 해야 할까? 목표는 어떻게 잡나? 성과 평가는? 이런 조직 관리는 떠오르지도 않았다. 팀장이란거 해볼 생각도 없는 상태에서 그게 아니면 내 인생이 망가질지도 모를 상태였으니까(사실 팀원들 걱정도 그땐 못했다).

암울했던 시기는 어째 지나갔고 지금 돌이켜 보건데 늘 밥벌이 고민을 했던 것 같다. 팀원들이랑 ‘왜 맨날 우리는 하루하루 어떻게 살아야 하는 가만 고민해야해?’하며 울먹인 적도 많았다. 근데 그때 뿐 아니라 예전에도 지금도 늘 그런 고민을 하며 산다. 내가 고민이 많은 건지 아니면 인생이 그런 고민하며 살라고 있는 건지…

죽을 때까지 고민하겠지? 내일 뭐 입지? 라고… ㅎㅎ

집에 웨스턴디지털(WD)의 MyBook World Edition 이란 외장 하드가 있다. 이놈은 일반 외장하드와 틀린데, 1TB의 용량에 저렴한 가격이 붙어있길래 멋모르고 장만했었다. 헌데 LAN으로 접속하는 NAS.

요놈때문에 무지 고생했는데 당췌 공유기가 없으면 쓸 수가 없다. 고로 회사에서 사용할 수 없었음(방법이 있겠지만 골치아파서 몇번 도전하다 관둠).

오늘은 모처럼 Leopard의 타임머신 좀 써줄까 해서 여유롭게 타임머신을 켰더니… 헉 ;;; 백업 디스크로 잡히질 않는다. 에지간히 날 괴롭히는 군…

삼바로 접속해서 네트웍 드라이브로 연결했는데 백업 디스크에 보이질 않는다. 이리저리 검색해보니 타임머신의 기본 세팅이 네트웍 드라이브는 Hidden 상태란다. 그걸 보이게 해둬도 타임머신은 백업할 수 없음이란 에러를 내뱉는다. 초기 백업 sparsebundle 파일 생성에 계속 실패… 이놈을 강제 생성해줘야 하는 듯…

요약해보면 다음과 같음.

1. 터미널에서 defaults write com.apple.systempreferences TMShowUnsupportedNetworkVolumes 1
2. hdiutil create -size 290g -fs HFS+J -type SPARSEBUNDLE -volname “Backup of <YOURCOMPUTERNAME>” <YOURCOMPUTERNAME>_<EN0MACADDRESS>.sparsebundle
3. 그리고 사용자 루트(맥의 루트가 아님)에 생성된 sparsebundle 파일을 네트웍 드라이브에 복사하면 된다. 내 맥에 남은 파일을 지워도 무방함.

1, 2번은 터미널 띄워놓고 해야 한다. 2번에서 좀 고생했는데. 내 맥의 이름이 “Zooil’s Mac”이다. 중간에 작은 따옴표와 띄어쓰기가 있어서 이놈이 쉘명령에서 오류를 일으킨다. 따옴표와 스페이스를 escape 해워야 함. 즉 Zooil\’s\ Mac 이라고 해줘야 한다. 물론 큰 다옴표 안에서는 작은 따옴표만 escape하고 띄어쓰긴 그냥 쓴다. 다음과 같이

hdiutil create -size 290g -fs HFS+J -type SPARSEBUNDLE -volname “Backup of Zooil\’s Mac” Zooil\’s\ Mac_001xxxxxxxxx.sparsebundle

sparsebundle 파일 이름에서 맥어드레스 부분이 헷갈리는데. 이놈은 1번만 실행하고 백업을 시도하면 잠시 네트웍 드라이브에 나타났다 사라지는 파일명과 동일하니 그 놈을 순간 붙잡아 엔터 눌러 이름을 복사하면 쉽게 구할 수 있다. 아 그리고 연결할 때 smb:가 아니라 CIFS://MyBookWorld/ 와 같이 접속해야 되나부다(어디서 갈쳐주는 대로 했다).

지금 열라 타임머신 타고 여행중이다. 100기가 중 2기가 백업하는데 5분 걸렸다. 원래가 디게 오래걸리는 건지 아님 집이 느린건지 아님 처음이라 그런건지… 암튼 호기심에 건드렸다가 잠 못자고 이게 뭐람…

여기서 참고했다.

* 아…놔… 타임머신 백업 중에 마운트 되는 Backups.backupdb 란 드라이브가 있다. ‘이거 뭐야~’ 하고 언마운트(eject) 했더니… 타임머신 에러뜨고 백업이 중단된다. 백업중엔 절대 저놈 건드리지 말것!

이 블로그(여기 말고 예전 서버)는 더이상 업데이트 하지 않습니다. 제가 가진 서버가 노후되어 이젠 더이상 버틸 여력이 없네요. 앞으로 blo9.wordpress.com에서 만나뵐께요. 1달 이내로 blo9.com 과 도메인 연결도 시킬 예정입니다. 그때가 되면 별 차이는 없겠지만 그동안 여러분이 달아주신 링크 주소는 바뀐답니다. 혹시나 필요하신 내용이 있으시면 몽창 빽업 받아서 가져가세요~

양주일 드림