brunch

매거진 반짝이는 UX

라이킷 11 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by Jay D Sep 04. 2019

인터랙션 디자인과 변수(Variable)

인터랙션 디자이너에게 숫자가 갖는 의미

너무나도 이과 갬성인 그 단어, 변수

변수(Variable), 인터랙션과 모션 디자인 세미나를 진행할 때, 팀원들이 가장 어려워하는 개념이 바로 변수였다. 아마도 단어 자체가 품고 있는, 수학적이고 복잡할 것 같다는 인상 때문 인 것 같았다. 사실 인터랙션 디자인에서 사용하는 변수는 수학보다는 프로그래밍에서 사용하는 변수의 개념에 가깝지만, 이것도 수학적 개념에서 시작된 것이니까, 어색하긴 매한가지 일 것이다.

그럼에도 나는 변수의 개념을 알고, 이를 활용하는 것이 인터랙션 디자인을 할 때 매우 중요하다고 생각한다. 변수를 통해 인터랙션 디자인과 숫자의 관계를 이해할 수 있고, 이를 통해 보다 정교하고 정확하게 머릿속 이미지를 시각화할 수 있게 된다고 본다. 실제로 많은 Hi-Fi 프로토타이핑 툴들도 변수와 관련된 기능을 제공하고 있으니, 아직 접해 보지 못한 분들은, 이번 기회에 변수에 대해 알아보는 것을 추천드린다.

인터랙션 디자인은 결국 숫자놀음이다.

변수 變數
명사
1. 어떤 상황의 가변적 요인
2. (수학) 어떤 관계나 범위 안에서 여러 가지 값으로 변할 수 있는 수

표준 국어대사전에는 변수가 위와 같이 정의되어 있다. 인터랙션에서 사용하는 변수는 두 번째 정의인 "어떤 관계나 범위 안에서 여러 가지 값으로 변할 수 있는 수"에서 출발한 개념이다. 인터랙션과 숫자의 관계를 이해하기 위해 먼저 인터랙션이 컴퓨터 운영체제(OS) 입장에서 어떻게 인식되고 처리되는가를 알아볼 필요가 있다.

OS 입장에서 UI 컴포넌트는 좌표, 크기, 색상 등의 속성에 대한 값의 집합으로 인식된다. 이 관점에서 보면 우리가 다양한 디자인 툴을 통해 컴포넌트를 디자인하는 과정은 속성의 값을 디자이너가 눈으로 보면서 설정하는 과정이라고 볼 수 있다. 약간 과장해 말하자면 OS에서 UI는 숫자 몇 개의 조합이다. CSS에서 대표적 UI 컴포넌트인 버튼을 어떻게 정의하는지 확인해보면 어떤 느낌인지 알 수 있다.

여기까지는 변수의 개념이 크게 중요하지 않다. UI 컴포넌트를 구성하는 숫자는 설정되어 변화하지 않는 상수(Constant Number)이기 때문이다. 여기에 인터랙션과 모션이 추가될 때 변수의 쓰임새가 생긴다. UI 컴포넌트를 숫자의 조합으로 보는 관점에서, 사용자와의 인터랙션에 의해 발생하는 모션은 숫자의 변화로 볼 수 있다. 예를 들어 햄버거 버튼을 눌러서 좌측에서 우측으로 패널이 등장하는 인터랙션은 '패널 X좌표의 좌에서 우로 이동'으로 치환할 수 있다. 실제로 대부분 프로토타이핑 툴의 모션과 인터랙션 제어가 컴포넌트 속성 값의 시간에 대한 변화량을 통해 제어된다.

변수는 이처럼 시간에 따라 변화하는 UI 컴포넌트의 속성 값을 시간대별로 상속받는다. 예를 들어 위의 패널 인터랙션(1초 동안 패널의 X좌표가 0에서 100으로 linear 하게 이동)을 'X'라는 변수에 할당했다고 가정하면, 인터랙션이 동작하는 시점 기준으로 X의 값은 아래와 같이 전개된다.

인터랙션 시작 전 X = 0
인터랙션 시작 0.5초 후 = 50
인터랙션 시작 1초 후 = 100

이런 구조를 만들어 두면, 보다 다이내믹한 인터랙션을 시각화할 수 있다. 예컨대 햄버거 메뉴 패널이 80% 정도 열린 시점부터 알림 아이콘을 표시하거나, 패널이 열리는 정도와 비례하여 후면 dim 처리를 하는 등의 인터랙션을 쉽게 구현할 수 있다. (이 예시는 브런치 앱의 햄버거 메뉴 패널에 적용된 인터랙션이다. 앱을 열어서 실제로 확인해 보시길 권한다.

알고 보면 별것 없는 변수, 이제 마음껏 사용하자

이 글을 적은 이유는 인터랙션에서 변수를 배우는 것이, learning curve에 비해 많은 가능성을 추가로 제공한다고 믿기 때문이다. 아래 링크 대표적인 Hi-Fi 인터랙션 디자인 툴들의 변수 기능 소개와 자바스크립트에서 사용하는 변수의 개념이다. 겁먹지 말고 일단 한번 둘러보시길 권한다. 어쩌면 신세계가 열릴지 모르니까.

https://www.protopie.io/ko/learn/formula/

ProtoPie - Formula

Learn ProtoPie, the easiest tool used to turn your UI/UX design ideas into highly interactive prototypes, with our tutorials and documentation.

www.protopie.io

https://docs.axure.com/axure-rp/interactions/variables/

Variables · Axure Docs

Variables are containers in which you can store text and numbers — referred to as the variable's "value" — for later use. You can display a variable's value on a widget as text, use it in a [conditional logic statement][conditional logic], or manipulate it

docs.axure.com