by
Aug 09. 2019
인터랙션 툴에서 자유로워지는 법
인터랙션 구조화에 대해서
제일 좋은 인터랙션(프로토타이핑) 디자인 툴이 뭔가요?
종종 접하는 질문이고, 나도 오랫동안 고민했던 질문이다. 결론부터 말하면 나는 이 질문에 대해 더 이상 고민하지 않기로 했다. 처음엔 여러 툴을 써보면서 제일 마음에 드는, 그리고 내 주 무기로 삼을 툴을 찾으려 노력했다. 그러다 불현듯 이런 생각이 들었다. '열심히 익혀놨는데, 더 좋은 툴이 나오면 어떻게 하지?'
이때부터 나의 장점이자 단점인(슬프지만 단점일 때가 더 많은) 삐딱하게 보기가 발동됐다.
'세상에 완벽한 인터랙션 툴이란 게 있긴 한 건가?'
'어차피 다 프로그램 아닌가?'
'툴은 과정일 뿐인데, 과정이 아니라 결과에 집중해야 하는 것이 아닌가?'
이런저런 생각을 이어가는 과정에서 여러 인터랙션 툴을 다시 보게 됐고, 한 발짝 떨어져서 보니, 너무 당연하지만 간과하고 있던 개념 하나가 눈에 띄었다. 세상에 다양한 인터랙션 툴들이 있지만, 결국 그것들이 이미지를 표현하는 방식은 HTML이나 JavaScript, CSS 등으로 대표되는 Front-end 개발 언어에 기반을 둔다는 점이다. 바꿔 말해, 인터랙션 툴은 Front-end 개발 언어를 각자의 방식으로 쉽게 풀어낸 Inter-face 프로그램이다.
인터랙션 툴의 위치를 이렇게 규정하고 보니, 내 의식은 이렇게 흘렀다.
'대부분의 인터랙션 툴은 Front-end 개발언어의 Logic을 기반으로 둔 다는 거네?'
'그렇다면, 내 머릿속의 이미지를 Front-end 개발언어의 Logic으로 풀어낼 수 있다면, 대부분 인터랙션 툴(또는 앞으로 새로이 등장할 좋은 툴)에 쉽게 적용할 수 있지 않을까?'
의식의 흐름에 따라, 인터랙션 디자인의 관점에서 Front-end 개발언어의 Logic을 살펴봤다. 앞서 언급한 바와 같이 Front-end 개발언어는 HTML, JavaScript, CSS를 근간으로 하고 있다. HTML이 잡은 레이아웃에 CSS가 스타일을 더해 UI 컴포넌트를 구성하고, JavaScript로 UI 컴포넌트 간의 관계를 정의하는 구조로 되어 있었다. 그리고 JavaScript는 인터랙션에 대한 표현을 이벤트 (Event - Result)라는 개념으로 구현하고 있었다.
JavaScript의 Event는 간단히 말해 '어떤 Event(사건)가 일어났을 때, 그에 해당하는 Result를 표현한다.'라는 구조이며, Event와 Result는 각각 UI Component와 Action의 조합으로 이루어져 있다. 그리고 여기에 상태에 따라 분기를 나누는 Condition이 추가된다.
이 흐름의 끝에 나만의 가설을 세웠다. '머릿속의 인터랙션 이미지를 Front-end 개발 Logic으로 변경할 수 있다면, 인터랙션 툴에 대한 디자이너의 종속도는 매우 낮아질 것이다.' 나는 이 가설을 검증하는 중이다. 그리고 이 가설에 대한 신뢰도는 지속적으로 높아지고 있다.
Event - Condition - Result
나는 인터랙션 이미지를 위에서 설명한 'Event - Condition - Result'의 논리구조로 치환하는 것을 '인터랙션 구조화'라고 부른다.
내가 인터랙션 구조화를 진행하는 과정은 다음과 같다. 예를 들어 좌, 우로 간단한 애니메이션을 하는 toggle 버튼 인터랙션을 디자인한다고 가정하자. 그렇다면 먼저 머릿속의 이미지를 다른 사람에게 설명할 수 있는 Text Description으로 변경한다. 그리고 이 Description을 Event - Condition - Result의 논리 구조로 바꾼다.
Toggle Button의 Interaction 구조화 예시이제 준비는 끝났다. 우리는 인터페이스인 Tool에 우리가 구현하고 싶은 인터랙션 구조의 변수들을 각 Tool의 그것에 넣기만 하면 된다. Tool은 이름 그대로 도구일 뿐, 목적이 되어서는 안 되니까, 우리가 되고 싶은 건 인터랙션 디자이너이지, 인터랙션 Tool 전문가는 아니니까, 속는 셈 치고 한 번쯤 '인터랙션 구조화'를 해보시길 권한다.
One more thing...
