Prototyping for IxD - 03 IoT

Material Design1.png

Google I/O 2015를 맞아 [Google의 디자인 홈페이지](google.com/design/)가 새롭게 개편되었다.


한 층 더 공고해진 Google의 Material Design은 아날로그 디자인의 영역이었던 Crafting과 같은 디자인 프로세스를 디지털 디자인에 녹여내는데 성공했다. 단순하게 생각하면 Apple이 그 동안 트랜지션으로 디자인 아이덴티티를 만들어낸 것처럼 Google도 자신만의 디자인 컨셉을 구축한 것으로 보인다. 하지만 과거 Apple이 스큐어모피즘으로 아날로그 텍스처를 디지털화했던 것과는 달리 Google은 어떻게 하면 인터랙션 측면에서 피지컬한 것들을 디지털로 녹일 수 있을지 고민한 느낌이다. IoT에 주력하는 Google답다. 인터랙션 측면에서 온/오프라인을 바라보면 일련의 인터랙션 과정으로 묶어 생각해볼 수 있다. 즉, Material Design은 인터랙션 가이드를 제시함으로써 하드웨어와 소프트웨어의 디자인 언어를 통일된 Material Concept으로 표현해낼 토대를 마련한 것이다.

Making Material Design: Crafting Material - Google Design

위 영상에서는 실제 사물의 그림자를 어떻게 GUI로 녹여내는지 보여주고 있다. 단순히 보이는 것을 그대로 트레이싱하는 것이 아니라 사용자가 자연스럽게 느낄 수 있는 구조적 레이어를 구축한다. 단순히 드롭쉐도우 아이콘과 같은 트렌디한 아이콘을 만드는 것과는 차원이 다르다. Google의 Material Design은 그림자를 추가한 순간 평평한 스크린 아래로 뎁스를 만들어낸다.

whatismaterial_3d_elevation1.png

사실 Google이 Material Design을 발표하기 전에도 다양한 트랜지션과 모션 그래픽을 제공하는 앱들이 많았다. 하지만 모션을 인터랙션으로 고도화 시킨 것은 Google이 해냈다고 할 수 있다. 이제 인터랙션을 담당하는 디자이너들은 UX측면에서 보다 많은 것들을 고민하고, 실험하고, 구현해야 한다.

그러나 현실적으로 대부분의 기업이 인터랙션 디자이너를 따로 두지 않고 UI 디자이너가 이를 겸하고 있어 인터랙션까지 구현 할 시간이 없다. 개발자 또한 인터랙션을 고려하는 것이 번거롭게 느껴질 수 있다. 만약 IoT시대가 도래한다면 디자이너는 스크린 속 인터랙션 뿐 아니라 피지컬 인터랙션까지 모두 고려해야 할 것이다.
어떻게 온-오프라인 인터랙션에 일관된 컨셉을 부여할지는 Google이 힌트를 주었지만, 한정된 시간 속에서 이를 어떻게 만들고 실험해볼 수 있을 지는 아직 감이 오지 않는다. 이에 현재의 프로토타이핑 툴들을 훑어보며 앞으로 IoT의 인터랙션 프로토타이핑을 위해서 어떤 툴이 나와야 할 지 가늠해보고자 한다.


현재의 프로토타이핑 툴들

하드웨어의 프로토타이핑을 고민하기 전에, 먼저 소프트웨어의 인터랙션 프로토타이핑 툴을 살펴보자. 프로토타이핑은 목적에 따라 쓰는 툴이 달라지므로, 현재 이 글의 주제에 맞게 전체적인 구조나 Flow를 보는 툴은 제외하고 ‘인터랙션'에 초점 맞춘 툴에 한해서 얘기해보겠다. 현재 나와있는 툴들은 대부분 모바일에 최적화 되어있다. 따라서 IoT 제품에 모바일과 화면 비율이 다른 스크린을 쓸 경우 사용할 수 있는 툴은 없다. 그래서 스크린 사이즈에는 제한이 있으나 인터랙션 구현은 비교적 자유로운 툴들을 주로 살펴보았다.

2015년 2월에 작성된 쿠퍼사의 인터랙션 디자이너 Emily Schwartzman가 쓴 Prototyping Tools를 보면 현재에도 많이 쓰이고 있는 다양한 툴들을 볼 수 있다. 이곳에 없는 툴을 포함하여 Material Design과 같은 인터랙션을 구현할 수 있는 툴들을 대표적으로 다음과 같다.

  1. Framer - http://framerjs.com/examples/

Framer는 Coffee Script를 사용하기 때문에 어느 정도 코딩에 대한 이해가 필요하다. 하지만 홈페이지의 Examples에서 볼 수 있듯 직접 코딩 하는 방식이기에 다양한 인터랙션을 구현해볼 수 있다. Coffee Script의 난이도는 다른 언어에 비해 높지 않고 퍼블리싱 지식이 있는 사람이라면 쉽게 접근할 수 있으므로 도전해 볼만 하다.

  1. Origami - https://facebook.github.io/origami/

Facebook의 Creative Lab에서 'Paper'앱을 출시하며 내놓은 프로토타이핑 툴이다. Apple의 Quartz Composer에 플러그인을 깔아 이용할 수 있다. 순수 코딩보단 아니지만 Visual Programming방식이기에 진입 장벽이 조금 있는 편이다. 그래도 직접 눈으로 보며 만들 수 있어 직관적이며, 디테일한 구현을 상상하는데 도움을 준다. 그러나 디테일한 만큼 구동 속도도 느리며 완성하는데 걸리는 시간도 긴 편이다.

  1. Pixate - http://www.pixate.com/

Pixate또한 코딩에 대한 이해가 필요하긴 하지만 위 두 개에 비해 훨씬 배우기 쉽다. UI에 약간의 코드를 삽입하면 보다 디테일한 인터랙션을 구현해준다.

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


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

피지컬 인터랙션을 위해선 더 넓은 범위의 프로토타입이 필요하다. 가령 IoT 제품을 개발할 경우 프로토타입이 필요한 부분은 버튼 하나부터 제품 전체의 사용경험까지 모두 포함할 수 있다. 하드웨어 프로토타이핑의 경우 3D Printer가 주로 활용되고 있으며, 소프트웨어(여기서는 그래픽보다는 기능 구현에 초점 맞춘 소프트웨어)는 Arduino, Raspberry Pi 등이 주로 쓰인다. 문제는 이 툴들은 위에서 설명한 모바일 툴보다 훨씬 더 많은 지식과 능력을 필요로 한다는 것이다. 이에 Leap Motion, Kinect 등의 트랙킹 디바이스와 연동시키거나 다른 센서, 빅데이터 등의 기술들을 매쉬업하기 시작하면 디자인 언어보다 개발 언어를 더 많이 쓰게 될 것이다. 하지만 이 과정을 모바일 툴만큼 빠르고 쉽게 구현할 수 있는 툴이 생긴다면, 그리고 하드웨어 툴이 소프트웨어 툴과 결합된다면 드디어 IoT를 위한 프로토타입 툴이 나올 수 있을 것이다. 그런 미래의 프로토타입 툴을 상상해볼 수 있는 툴킷을 소개한다.

  1. Arduino, Resberry Pi와 함께 사용할 수 있는 Spacebrew
  1. IF THIS THEN THATLittle Bits

littlebits.png

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


가능한 미래

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

ifttt.001.png

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

이러한 센서기반의 프로토타이핑 툴이 현재는 존재하지 않지만, 앞으로 출시 예정인 툴은 있다. 바로 StudioXID의 ProtoPie다. ProtoPie는 아직 출시가 되지 않았지만 이러한 툴이 나온다면 기존보다 더 많은 인터랙션을 만들 수 있을 것이다.


마치며

IoT를 개발하기 위해서는 먼저 통합 플랫폼으로 생태계를 만드는 것이 중요하다. 이에 맞춰 Apple은 Homekit을 내놓았고, Google은 얼마전 Brillo를 발표하였다. 이들을 통해 본격적인 IoT시대가 시작되면 통합 프로토타이핑 툴 또한 필요하게 될 것이다. Google의 Material Design Guide가 언젠가 하드웨어 가이드까지 나아가게 된다면, 하드웨어의 메타포와 소프트웨어의 메타포, UX전반의 인터랙션이 일관된 컨셉으로 만들어질 수 있다면, 우리는 더 많은 디자인 언어를 실험해야 할 것이다. 이런 미래를 상상하며 다양한 프로토타이핑 툴로 더 많은 시도를 해보자. 그리고 이를 통해 Material Design처럼 나만의 디자인 가이드를 만들어보자.

2015 Google Design Showcase - Highlights & Award Winners

 
1
Kudos
 
1
Kudos

Now read this

_____ Designer @ _____

Designer 앞에 붙는 단어와 그 디자이너가 일하고 있는 곳의 매칭이 재미있다. 같은 회사(아래는 Google)에서 디자이너의 역할이 변하거나 디자인의 의미가 변하는 것도 흥미롭다. 그래서 한번 모아봤다. 이 리스트는 계속해서 갱신하려고 한다. Interaction Designer@Google, 2015 Making Material Design: Crafting Material Product... Continue →