IoT를 위한 인터랙션 프로토타이핑

IoT를 위한 인터랙션 프로토타이핑

IoT를 위한 인터랙션 프로토타이핑
Category
Share Story

한층 더 공고해진 구글의 머티리얼 디자인(Material Design)은 아날로그 디자인의 영역이었던 크래프팅(Crafting)과 같은 디자인 프로세스를 디지털 디자인에 녹여내는 데 성공했습니다. 단순하게 생각하면, 애플이 그 동안 트랜지션으로 디자인 아이덴티티를 만들어낸 것처럼 구글도 자신만의 디자인 컨셉을 구축한 것으로 보입니다.

하지만 과거 애플이 스큐어모피즘으로 아날로그 텍스처를 디지털화했던 것과는 달리 구글은 어떻게 하면 인터랙션 측면에서 피지컬한 것들을 디지털로 녹일 수 있을지 고민한 느낌입니다. IoT에 주력하는 구글답습니다.
인터랙션 측면에서 온/오프라인을 바라보면 일련의 인터랙션 과정으로 묶어 생각해볼 수 있습니다.
즉, 머티리얼 디자인은 인터랙션 가이드를 제시함으로써 하드웨어와 소프트웨어의 디자인 언어를 통일된 머티리얼 컨셉(Material Concept)으로 표현해낼 토대를 마련합니다.

[ 출처. Making Material Design: Crafting Material – Google Design ]

위 영상은 실제 사물의 그림자를 어떻게 GUI로 녹여내는지 보여주고 있습니다.
보이는 것을 그대로 베껴내는 것이 아니라 사용자가 자연스럽게 느낄 수 있는 구조적 레이어를 구축합니다.
단순히 드롭쉐도우 아이콘과 같은 트렌디한 아이콘을 만드는 것과는 차원이 다릅니다.
구글의 머티리얼 디자인은 그림자를 추가한 순간 평평한 스크린 아래로 깊이감(Depth)을 만들어냅니다.

whatismaterial_3d_elevation1

사실 구글이 머티리얼 디자인을 발표하기 전에도 다양한 트랜지션과 모션 그래픽을 제공하는 앱들은 많았습니다. 하지만 모션을 인터랙션으로 고도화 시킨 것은 구글입니다.
이제 인터랙션을 담당하는 디자이너들은 UX 측면에서 보다 많은 것들을 고민하고, 실험하고, 구현해야 합니다.
하지만 현실적으로 대부분의 기업이 인터랙션 디자이너를 따로 두지 않고 UI 디자이너가 이를 겸하고 있습니다. 인터랙션까지 구현할 시간이 없습니다. 개발자 또한 인터랙션을 고려하는 것을 번거롭게 느낍니다.

IoT시대 디자이너는 스크린 속 인터랙션 뿐 아니라 피지컬 인터랙션까지 모두 고려해야 합니다.
어떻게 온-오프라인 인터랙션에 일관된 컨셉을 부여할지는 구글이 힌트를 주었지만, 한정된 시간 속에서 이를 어떻게 만들고 실험해볼 수 있을지는 아직 감이 오지 않습니다.

이에 현재의 프로토타이핑 툴들을 훑어보며, 향후 IoT의 인터랙션 프로토타이핑을 위해서는 어떤 툴이 필요할지 가늠해 보고자 합니다.

소프트웨어 인터랙션 프로토타이핑 툴

하드웨어의 프로토타이핑을 고민하기 전에, 먼저 소프트웨어의 인터랙션 프로토타이핑 툴을 살펴보고자 합니다.
프로토타이핑은 목적에 따라 쓰는 툴이 달라지므로, 현재 이 글의 주제에 맞게 전체적인 구조나 흐름(Flow)을 보는 툴은 제외하고 ‘인터랙션’에 초점을 맞춘 툴에 한해 정리합니다.

현재 나와있는 툴들은 대부분 모바일에 최적화 되어 있습니다. IoT 제품에 모바일과 화면 비율이 다른 스크린을 쓸 경우, 사용할 수 있는 툴이 없습니다. 그래서 스크린 사이즈에는 제한이 있으나 인터랙션 구현은 비교적 자유로운 툴들을 위주로 살펴보았습니다.

2015년 2월에 작성된 쿠퍼사의 인터랙션 디자이너 Emily Schwartzman가 쓴 [Prototyping Tools]를 보면 현재에도 많이 쓰이고 있는 다양한 툴들이 정리되어 있습니다.
위 글에 소개되어 있는 일부를 포함하여 머티리얼 디자인과 같은 인터랙션을 구현할 수 있는 툴들을 정리하면 아래와 같습니다.

1. Framer
Framer는 Coffee Script를 사용하기 때문에 어느 정도 코딩에 대한 이해가 필요하다. 하지만 홈페이지의 예시에서 볼 수 있듯 직접 코딩 하는 방식이기에 다양한 인터랙션을 구현해볼 수 있다. Coffee Script의 난이도는 다른 언어에 비해 높지 않고 퍼블리싱 지식이 있는 사람이라면 쉽게 접근할 수 있으므로 도전해 볼만 하다.
2. Origami
페이스북의 크리에이티브 랩(Creative Lab)에서 ‘Paper’앱을 출시하며 내놓은 프로토타이핑 툴이다. 애플의 Quartz Composer에 플러그인을 깔아 이용할 수 있다. 순수 코딩보다는 아니지만 비주얼 프로그래밍(Visual Programming)방식이기에 진입 장벽이 조금 있는 편이다. 그래도 직접 눈으로 보며 만들 수 있어 직관적이며, 디테일한 구현을 상상하는데 도움을 준다. 그러나 디테일한 만큼 구동 속도도 느리며 완성하는데 걸리는 시간도 긴 편이다.
3. Pixate
Pixate또한 코딩에 대한 이해가 필요하긴 하지만 위 두 개에 비해 훨씬 배우기 쉽다. UI에 약간의 코드를 삽입하면 보다 디테일한 인터랙션을 구현해준다.

Hi-Fi 프로토타입을 만드느라 많은 시간을 쏟게 된다면, 차라리 완성품을 만드는 게 낫습니다.
따라서 위 툴들을 이용해 실험하고자 하는 인터랙션의 아주 일부를 프로토타이핑하는 것을 추천합니다.

개발 언어를 배우는 게 낫지 않을까? 의문이 든다면 아래의 슬라이드 쉐어를 (시간이 없다면 53p부분부터!) 참고하시길 권합니다. 설득이 됐다면 개발 공부를 시작하면 되고, 디자인에 더 집중하고 싶다면 스킵하고 좋은 툴들을 배워 활용하면 됩니다. ^^

[출처. 2015년 03월07일 abcd발표, ux 디자이너 실력으로 살아남기 – LG전자 선임연구원 하상범]

하드웨어 인터랙션을 위한 툴

피지컬 인터랙션을 위해선 더 넓은 범위의 프로토타입이 필요합니다.
가령 IoT 제품을 개발할 경우 프로토타입이 필요한 부분은 버튼 하나부터 제품 전체의 사용경험까지 모두 포함할 수 있습니다.
하드웨어 프로토타이핑의 경우 3D 프린터가 주로 활용되고, 소프트웨어(여기서는 그래픽보다는 기능 구현에 초점 맞춘 소프트웨어)는 Arduino, Raspberry Pi 등이 주로 쓰입니다.

문제는 위에 언급한 이 툴들이 위에서 설명한 모바일 툴보다 훨씬 더 많은 지식과 능력을 필요로 한다는 것입니다.
이에 Leap Motion, Kinect 등의 트랙킹 디바이스와 연동시키거나 다른 센서, 빅데이터 등의 기술들을 매쉬업하기 시작하면 디자인 언어보다 개발 언어를 더 많이 쓰게 될 것입니다.

하지만 이 과정을 모바일 툴만큼 빠르고 쉽게 구현할 수 있는 툴이 생긴다면, 그리고 하드웨어 툴이 소프트웨어 툴과 결합된다면 드디어 IoT를 위한 프로토타입 툴이 나올 수 있을 것입니다.
그런 미래의 프로토타입 툴을 상상해볼 수 있는 툴킷을 소개합니다.

1. Arduino, Resberry Pi와 함께 사용할 수 있는 [Spacebrew]
2. [IF THIS THEN THAT][Little Bits]

littlebits

현재 나와있는 IoT 툴킷 중 가장 간단하고 쉬운 것은 바로 Littlebits입니다.
Littlebits는 각각의 기능을 하나의 모듈로 만들어 납땜과 별도의 프로그래밍 없이도 간단한 프로토타입을 구현해냅니다.
Littlebits와 결합된 일상의 사물들은 IFTTT 서비스와 연동되어 Internet of Things가 된 것처럼 작동합니다.
Littlebits에서 제공하는 모듈 중에서는 [아두이노 프로그래밍 언어를 사용할 수 있는 모듈]도 있어 간단한 프로그래밍도 첨부할 수 있습니다.
또한 사용자가 직접 모듈을 만들어 볼 수 있는 [Proto Module]도 제공합니다.

가능한 미래

소프트웨어와 하드웨어를 아우를 수 있는 궁극의 IoT 프로토타이핑 툴이 나온다면, 마지막에 설명한 Littlebits와 IF THIS THEN THAT 조합에 가깝지 않을까 예상합니다.

ifttt.001

가령 IF에 Littlebits와 같은 간단한 모듈이 들어가고, Then에 Pixate와 같은 툴이 들어간다면?
즉, 현재의 Input이 피지컬 인터랙션을 위한 센서 기반의 툴이 들어가고, Output으로는 기존 스크린 인터랙션 툴이 들어간다면 어떨까요? 현재는 Tap, Swipe 등 모바일 인터랙션에만 한정되어있는 Input을 센서의 범위로 넓혀보는 것입니다.

이러한 센서기반의 프로토타이핑 툴이 출시 예정입니다. 바로 StudioXID의 [ProtoPie]입니다. ProtoPie와 같은 툴이 나온다면 기존보다 더 많은 인터랙션을 만들 수 있을 것으로 예상됩니다.

마치며

IoT를 개발하기 위해서는 먼저 통합 플랫폼으로 생태계를 만드는 것이 중요합니다.
이에 맞춰 애플은 홈킷(Homekit)을 내놓았고, 구글은 얼마전 브릴로(Brillo)를 발표했습니다.
이들을 통해 본격적인 IoT시대가 시작되면 통합 프로토타이핑 툴 또한 필요하게 될 것입니다.

구글의 머티리얼 디자인 가이드가 언젠가 하드웨어 가이드까지 확장된다면,
하드웨어의 메타포와 소프트웨어의 메타포, UX 전반의 인터랙션이 일관된 컨셉으로 만들어질 수 있다면,
우리는 더 많은 디자인 언어를 실험해야 할 것입니다.

이런 미래를 상상하며 다양한 프로토타이핑 툴로 더 많은 시도를 해보는 건 어떨까요?
이를 통해 구글의 머티리얼 디자인처럼 나만의 디자인 가이드를 만들어 보는 것도 좋겠네요.

[출처. 2015 Google Design Showcase – Highlights & Award Winners]

 

– UX1 컨설팅그룹 Jer

 

* 메인 이미지 설명 – [Google I/O 2015](https://www.youtube.com/watch?v=8UicJ0SxBwA)를 맞아 [Google의 디자인 홈페이지](google.com/design/)가 새롭게 개편되었다.