5. 인터랙션 퍼포먼스(Interaction Performance)
5.3 키네틱스(kinetics)
5.3.1 흐름(flow)
인터랙션 키네틱스에서 “흐름”은 인터랙션의 두 주체인 사용자와 매체의 움직임이 전개하면서 만들어 내는 동적인 양태이다. 흐름은 리듬, 템포, 카덴스(cadence) 등과 같은 동적인 패턴으로 인식되도록 유도한다. 움직 임의 음악적 고저장단이 흐름의 규칙성을 만드는 것이다. 이러한 규칙성을 만드는 인터랙션 객체의 특성은 변화의 규칙이다. 위치, 속도와 같이 움직 이는 객체가 가지는 속성이 시간에 따라 어떻게 변하는지 그 규칙성에서 운율을 느끼게 되는 것이다.
흐름은 기본적으로 인터랙션의 어떤 요소가 공간에서 물리적으로 이동하 는 경로를 어떻게 다루는지에 의해 만들어진다. B&O의 Vision Harmon y30)는 전원을 켰을 때 모니터 유닛이 수직으로 상승하고 모니터 앞에 위 치한 두 개의 스피커 유닛이 각각 수직에서 수평으로 반대 방향으로 회전 하며 이동한다. 서로 다른 속도로 만들어지는 수직 이동의 경로와 회전 이 동의 경로는 함께 조화를 이루면서 리듬감을 만들고 웅장한 시작을 표현 한다. 이러한 움직임의 리듬감은 Klemens Torggler의 Evolution Doo
그림 46 흐름 사례 : B&O Vision Harmony, Evolution Door, In Piece(좌부터)
r31)에서도 찾을 수 있다. 기존의 문과는 다른 메커니즘으로 열리고 닫히 는 이 문은 4개의 조각이 기하학적인 형태를 이루어 구조화되어 있어서, 기존 문처럼 좌우 한쪽 면을 중심으로 회전하여 열리거나 닫히는 것이 아 니라 좌우 이동하면서 각 조각의 연결점들이 떨어지고 붙는 동작으로 열 리거나 닫힌다. 흐름으로 보자면, 이 문의 각 모서리가 움직이며 그리는 개별적인 경로가 흩어지고 만나는 속도의 차이가 운율을 만든다. 흐름의 경로가 만들어내는 운율감과 역동성은 GUI의 화면전환(transition)에서 자주 활용된다. 30개의 보호종 동물들을 소개하는 In Pieces 사이트32)는 동물의 형태를 다수의 삼각형 조각으로 표현하는데, 한 동물에서 다른 동물로 바뀔 때 이 삼각형 조각들이 제각기 흩어졌다가 모이는 방식으로 트랜지션을 적용한다. 개별 조각들이 이동하는 거리와 속도에 따라 경로 가 달라짐으로 인해서 자유로운 움직임이 만들어지면서 결국 하나의 완 성된 형태로 이합집산 한다. <그림 46>
반면 물리적인 이동이 없이도 흐름을 만들어 낼 수 있다. ‘빛’이 좋은 예 인데, 제자리에서 깜빡거리는 간격이나 강도의 변화만으로도 리듬과 템 포를 만들어낼 수 있다. 최근 맥북에는 사라졌지만 사용하지 않는 동안 의 맥북의 상태[하이버네이션(hibernation) 상태]를 전면의 헤어라인 LED가 천천히 밝아지고 어두워지는 동작으로 표현하였다. 이 빛의 움직 임은 명백히 동면(hibernation) 상태에 들어간 맥북이 수면 상태에서 깊 게 호흡하고 있는 형태를 표현한다. 이 빛이 밝아지고 어두워지는 간격
31) https://bit.ly/3Gvx6Rd 32) https://bit.ly/3EtThXk
그림 47 흐름 사례 : Macbook의 동면상태 표시등
과 템포에서 호흡의 리듬감을 바로 연결하여 연상할 수 있으면서, 동시 에 ‘동면의 호흡’이라는 평화롭고 편안한 감성을 동시에 전달하고 있다.
<그림 47>
또한 하나가 아닌 많은 수의 개체들 각각이 움직이고 그 총합으로의 움직 임이 흐름을 만들게 할 수 있다. Anthony Howe33)의 거대한 설치작품들 은 미시적으로 작은 개체들이 일정한 경로를 일정한 속도로 움직이는 것 이지만 그것들이 모여 미지의 생명체와 같은 웅장한 움직임의 역동성을 만들어 낸다. Studio Humans34)의 ‘A Million Times’35)는 유닛 하나하 나가 시계처럼 두 개의 바늘로 이루어져 회전 운동을 하지만, 다수의 유닛 들이 어떤 규칙에 의해 움직이면서 유체와 같은 흐름의 시각 효과를 만들 어 낸다. ‘A Million Times’가 규칙적인 움직임을 표현한다면, Random International36)의 ‘Study of Time’37)은 역시 시간을 주제로 표현하지만 그와는 다르게 매우 불규칙하고 무작위한 움직임을 보인다. 벽면에 수직으 로 꽂힌 LED 스틱들이 빛을 내면서 스틱 자신들에 의해 만들어지는 선적 인 그림자들과 어우러져 꿈틀대는 듯 한 빛의 움직임을 만들어낸다. 이 자 유로운 움직임의 빛들은 결국 그림자의 선으로 시간을 그려줌으로써 그 자유로움의 생동감을 극대화한다. <그림 48>
많은 개체들의 변화 양상으로 흐름을 만드는 일상적인 사례는 LED 간판 이나 표지판 등에서 볼 수 있는 애니메이션들이 있다. 비교를 위해 자동차 의 방향지시등을 예로 들 수 있겠다. 일반적인 방향지시등이 하나의 빛을
33) https://bit.ly/3onXDJG 34) https://bit.ly/3GgQYqO 35) https://bit.ly/300D1hu 36) https://bit.ly/3dlcezy
그림 48 흐름 사례 : Anthony Howe, A Million Times, Study of Time(좌부터)
일정한 속도로 깜빡거리게 한다면, Audi 등 일부 메이커에서 적용하고 있 는 순차 방향지시등(sequential turn signal)38)은 이 신호에 흐름을 입혀 이동 방향을 더 극적으로 표현한다. Audi는 이를 극단으로 끌고 가서 2013년 CES에 소개된 ‘Matrix O’39) 컨셉에서는 연장된 OLED 디스플레 이를 차체 전면에 적용해 이 신호를 더 다이나믹하게 표현하기도 하였다.
<그림 49>
Nikola Basic이 건축한 Zadar 해변의 ‘Sun Salutation’40)은 LED의 흐 름으로 ‘Sea Organ’이라는 독특한 건축물이 만들어내는 소리 효과를 증 폭한다. 이 작품은 해변에 부딪히는 파도가 구조물에 밀려들거나 나가면서 소리를 만들어내는 ‘Sea Organ’과 함께 ‘Sun Salutation’은 바닥에 설치 된 개별적인 조명이 파도에 따라 밝아지고 어두워지면서 환상적인 빛의 향연을 보여준다. 무엇보다 파도가 밀려들고 빠져나가는 자연 현상을 빛을
38) https://bit.ly/3xWUaF2 39) https://bit.ly/3oohGro 40) https://bit.ly/3opaI5N
그림 49 흐름 사례 : Audi의 순차 방향지시등(좌)과 Matrix O(우)
그림 50 흐름 사례 : Sun Salutation(좌), Vision Next 100(우)
통해 형상화하고 그 경험을 증폭하였다. 2020년 BMW가 소개한 ‘Vision Next 100’41) 컨셉카에서는 더 나아가 물리적으로 흐름을 표현한다. 전면 대쉬보드 상단을 파충류의 비늘과 같은 삼각형의 조각으로 채우고 자율 운전 상태에서 자동차에 다가오는 사물이나 사람을 감지하여 이 비늘 조 각들의 움직임으로 표시한다. 비늘 조각들의 순차적인 움직임은 움직임이 만들어내는 소리와 함께 상징적으로 이 컨셉카에 살아있는 것 같은 생명 성을 부여한다. <그림 50>
이러한 동적인 흐름을 확장해 보자. 앞의 인터랙션 내러티브에서 UI 설계 에서의 플로는 개별 과업(task)의 연속적인 배열을 말하고, 미학적 관점과 목적에서 과업은 이벤트(event)로 변환할 수 있다고 하였다. 인터랙션 과 정에서 발생하는 연속적인 이벤트를 플로라 지시하는 것은 인터랙션 퍼포 먼스에서 흐름(=플로) 특성에 의미적으로 근사한 궤적으로 해석하는 단서 이다. 이벤트에서 이벤트로 이어지는 연속적인 상태에서 리듬과 템포와 같 은 음악적 운율을 전달할 수 있다는 것이다. 이런 형태의 심미성은 직접적 으로 이벤트에서 이벤트로 이어지면서 동반되는 사용자의 행위와 그에 대 한 반응이 율동감으로 표현될 수 있다. 예를 들어 처음 애플 뮤직 앱이 소 개한 ‘커버 플로(cover flow)’ 인터랙션은 음반 커버를 좌우로 책장을 훑 듯 넘기는 행위에서 그 행위를 하는 손가락 아래로 원하는 앨범을 위치시 키고 실행하는 플로를 적용하였다. 이는 동적 제스처와 이어지는 이벤트가 율동감 있게 배치된 좋은 사례이다. BMW의 ‘Vision Next 100’의 운전대 가 자율 운전과 직접 운전의 두 모드 간 전환을 상징적으로 보여주는 펼 쳐지고 접히는 움직임은 이벤트 간의 흐름을 시각적으로 상징하는 심미적 흐름의 조형이라고 할 수 있다. 이렇게 이벤트의 동적 배치와 그것이 만드 는 흐름에서 영감을 얻는다면 인터랙션의 이벤트를 공간적 시간적으로 배
그림 51 흐름 사례 : 커버플로(좌), Vision Next 100의 운전대(우)
치함으로서 이벤트와 연관된 제스처들과 리액션과 트랜지션 등으로 만들 어지는 움직임들을 조화롭게 배치하여 흐름의 율동감을 만들어낼 수 있음 을 알 수 있다. <그림 51>
행위의 흐름을 만들어내는 것은 인터랙티브 인스톨레이션에서 가장 잘 활 용한다. 예를 들어 Cuppetelli와 Mendoza의 2012년 작품 ‘Notional Field’42)는 수많은 수직의 선이 마치 실처럼 휘날리듯 움직이는 시각적 프 로젝션 이미지로 구성된다. 이 앞에 선 관객의 움직임에 따라 이 선들은 바람에 휘날리듯 움직인다. 인터랙션 매체 요소와 관객의 제스처 간의 매 핑으로 인해 상호 간의 역동적인 흐름을 만들어내는 것이다. 이러한 상호 간의 흐름의 교환을 통해 관객은 더 적극적으로 인터랙션을 경험하게 되 고, 그것이 인터랙션이 주는 미감의 요체라고 할 수 있다. <그림 52>
Laban은 흐름을 구분하는 스펙트럼의 양단에 ‘자유로운’, ‘통제된’을 두었 다. 흐름의 자유도를 판단하는 것이다. 이는 또한 인터랙션의 흐름을 판단 하거나 평가하는 기준이 될 수 있다. ‘자유로운’ 흐름은 인터랙션의 요소 혹은 요소 집단의 움직임이 정해진 경로 없이 무작위적으로 움직이는 것 이고, ‘통제된’ 흐름은 정해진 경로로 일정하게 통제된 움직임을 보이는 것이다. 위의 사례들을 보면 이러한 상대적 특징을 찾을 수 있다. Vision Harmony가 수직 이동과 회전 이동 경로가 정제되어있는 반면, In
42) https://bit.ly/3EW3AUr
그림 52 흐름 사례 : Notional Field
Pieces의 트랜지션은 자유로운 경로를 활발하게 움직인다. Study of Time의 빛의 움직임이 무작위적인 것에 비해 A Million of Times의 움 직임은 상대적으로 통제된 움직임을 보인다. Audi의 테일 라이트는 이 상 대성이 좀 더 극명한데. 단순 LED로 이루어진 순차 방향지시등의 움직임 이 일정하고 직선적이라면, Matrix O의 흐름은 같은 방향성을 표시하면서 도 더 자유롭고 활발한 표현을 보여준다.