인터랙션 설계의 층위

인터랙션 설계의 과정은 한마디로 인터랙션을 기능적으로 구현하는 과정 이다. 이 과정을 개념적으로 간략화하여 추론하기 위해 편의적으로 실제 제품의 인터랙션 설계의 과정을 개념적으로 따라가 보고자 한다.

Beosound 3000¹⁾은 Bang&Olfsen사의 벽걸이형 오디오로서 Beosound 2500에서 이어져 2000년대 초반에 등장했던 독특한 제품이다.

Beosound 3000은 절제되고 모던한 형태로도 주목을 받았지만, 독창적인 인터랙션으로 당시의 제품 인터랙션 디자인에 상징적인 제품으로 꼽을 수 있는 제품이다. 이 오디오는 전면 유리 도어는 손을 가까이 가져갔을 때 열리는 것이나 CD를 돌리는 헤더 부분이 기계적으로 올라가거나 재생을 시작하면 백라이트가 켜지는 등 기존의 오디오가 가지지 않은 섬세한 인

터랙션을 선보였다. <그림 3>

이 제품은 CD에서 디지털 포맷으로 오디오 시장이 변화하면서 사실상 현 재 시점에는 제작 판매되고 있지 않으므로, 인터랙션의 설계 과정을 설명 하는데 시의적인 사례인지 의문을 가질 수도 있다. 그럼에도 불구하고 굳 이 이 제품을 사례로 선택한 것은 이 제품의 인터랙션은 2000년대를 관통 하는 사용성과 심미성의 확장 시기를 상징적으로 보여주는 인터랙션 디자 인의 사례라는 상징적인 의미가 상당하고, 무엇보다 이 제품의 독창적이고 도전적인 인터랙션 디자인은 그 설계와 조형의 관계를 극적으로 대비하여 보여주는 데에 효과적이라고 판단했기 때문이다. 사실상 이 오디오의 인터 랙션은 현재 시점의 다른 제품의 인터랙션과 비교하더라도 참신성이나 고 급성에서 전혀 뒤떨어지지 않는다는 판단도 작용하였다.

이 제품의 인터랙션을 설계한다고 가정해 보자. 가장 먼저 고려해야 할 것 은 이 오디오를 구성하고 있는 세부적인 요소(Elements)들일 것이다. 인 터랙션의 기능을 구현하기 위해서 휠, 버튼, 모터, 도어 등등의 ‘요소’들을 적재적소에 배치(LAYOUT)하는 과정이 필요하다. 이러한 ‘요소’의 ‘배치’

과정에서는 무엇보다 기능적 효율성이 중요하게 작용한다. ‘요소’들이 외 부와 내부에 있는지에 따라 인터랙션 설계에서 ‘배치’는 외부와 내부로 구 분할 수 있다. 외부의 요소 배치는 물리적인 거리와 그룹핑으로 사용상의 효율성을 충족하여야 하고, 내부의 요소 배치는 생산 비용 상의 효율성과 관련이 있다고 할 수 있다. 전자의 ‘배치’는 ‘Fitts의 법칙²⁾’과 같은 사용

그림 3 BeoSound 3000

성이 핵심적인 이슈가 된다. 인터랙션에 필요한 요소들이 적재적소에 배치 되어 효율적인 사용이 가능하도록 해야 한다는 것이다. 이는 하드웨어에서 의 ‘요소’와 ‘배치’를 상정한 것이지만, 소프트웨어의 UI 구성 관점에서도 이러한 관점은 동일하다. 소프트웨어 UI에서는 구성하고 있는 버튼, 탭, 윈도우, 바 등등의 ‘요소’를 어떻게 ‘배치’하는 것에 해당한다고 할 수 있 다. 이때의 외부-내부의 구분은 흔히 프론트엔드(front end)-백엔드(back end)로 구분되는 설계를 의미한다고 보면 될 것이다. <그림 4>

그러나 사실상 외부와 내부의 요소들은 서로 연결되어 있기 때문에 효율 성의 측면을 고려하더라도 ‘배치’ 작업은 내외부의 밀접한 연관성을 염두 에 두고 진행해야 한다. 다시 말해, 각 요소들 사이의 ‘관계(Relations)’를 고려해야 한다는 의미이다. 어떤 버튼이 어떤 모터를 작동하는지, 모터는 휠을 어떻게 작동하는지, 도어는 무엇으로부터 트리거를 받는지 등, ‘요소’

들 간의 ‘관계’는 설계에서 중요하게 고려해야 하는 점이다. 따라서, 서로

‘관계’를 가진 ‘요소’들은 더이상 ‘배치’하는 것에만 그쳐서는 안 된다. 그 들 간의 ‘관계’를 설정하는 과정이 필요하며, 이는 ‘요소’들 간의 ‘관계’를

‘구조화(structuring)’하는 과정이라고 할 수 있다. ‘구조(STRUCTURE)’는 제품, 건축 등과 같이 물리적 요소들 사이의 관계를 설정하는 쪽에서는 말 그대로 물리적인 구조를 가리키는 것인 반면, 웹, 앱 등의 소프트웨어 UI 에서 보자면 UI를 이루고 있는 정보의 구조를 말하는 것이라고 할 수 있 다. 이를 흔히 ‘정보 구조(information architecture)’라 부르고, 직역하

2) Fitts의 법칙(Fitts’ Law)은 인간공학이나 HCI에서 인간의 움직임을 예측하는 활용 되는 모델 이론으로서, 간략히, 목표 지점으로 이동하는 속도는 목표 지점과의 거 리와 반비례, 목표 지점의 면적과 비례 관계를 가진다는 법칙이다. - Wikipedia :

그림 4 요소(elements)와 배치(layout)

면 ‘정보 건축’을 뜻하는 이유이다. 이 때에는 물리적인 구조가 아닌 내재 적인 구조를 의미하는 것이다. <그림 5>

‘요소’의 ‘배치’와 ‘관계’의 ‘구조’가 반드시 인터랙션의 설계 즉 디지털 테 크놀로지가 포함된 인공물에만 해당되는 것은 아니라고 반론할 수 있을 것이다. 대부분의 인공물의 설계 과정은 이렇게 요소들을 배치하고 관계를 정의하여 구조화하는 과정으로 요약될 수 있기 때문이다. 인터랙션이 비로 소 인터랙션이 되는 것은 ‘요소’에 ‘행위(Actions)’가 입혀지고 ‘관계’가 순 차적으로 배치되어 ‘흐름(FLOW)’이 설계되었을 때이다. 버튼을 누르고 불 이 켜지고 CD가 돌아가고 음악이 재생되고 등의 동사가 붙는 요소들의

‘행위’가 붙여져야 하고, 이러한 ‘행위’들은 사용자의 ‘행위’들과 결합되고 순차적으로 배치되어 비로소 인터랙션의 ‘플로’로 만들어질 수 있다. 이 오디오의 핵심적인 테스크인 음악을 재생하는 테스크는 손을 가까이 가져 가서(사용자의 행동) -> 도어를 열고(제품의 행동) -> 버튼을 눌러(사용자 의 행동) -> 헤드를 올린 후(제품의 행동) -> CD를 장착하고 다시 버튼을 누르면(사용자의 행동) -> 백라이트가 들어오고 헤드가 돌아가면서 음악이 재생되는(제품의 행동) 일련의 과정으로 수행된다. 소프트웨어 UI의 ‘플로’

도 마찬가지로 이렇게 사용자의 행동과 시스템의 행동이 연속적으로 일어 나는 ‘플로’들로 구성된다. 소프트웨어 UI에서는 점점 더 다양한 기능을 내포하고 많은 메뉴를 가지게 됨에 따라, 단순한 ‘플로’가 더 효율적이고 이상적임에도 불구하고, 점점 더 복잡해지는 양상을 보이기도 한다. <그림 6>

요약하자면 인터랙션을 설계한다는 것은 인터랙션을 구성하는 요소

그림 5 관계(relations)와 구조(structure)

(Elements)와 요소들 간의 관계(Relations), 관계를 유발하는 행위 (Actions)를 계획, 조합, 구축하는 과정이라고 할 수 있다. 인터랙션의 설 계는 요소를 배치하는 작업(LAYOUT), 요소들의 관계를 구조적으로 체계 화하는 작업(STRUCTURE), 행위가 개입된 인터랙션의 흐름을 설정하는 작업(FLOW)을 포함하는 과정이라고 할 수 있다. 이를 도식화하면 <그림 7>과 같다. 이러한 개념적 도식화는 인터랙션 설계의 과정의 핵심을 간명 하게 이해할 수 있도록 단순화한 것이다. 이 ‘설계’의 과정에서 가장 중요 한 목표는 ‘효율성’에 있다고 할 수 있다. 시간과 비용을 최적화하는 생산 의 효율성이나 오류를 줄이고 편이를 늘리는 사용의 효율성이 인터랙션의 설계에 있어서 중요하게 다루어져야 하는 가치라고 할 수 있다.

그림 6 행위(actions)와 플로(flow)

그림 7 인터랙션 설계의 층위