구글에서는 디자이너를 “럭셔리 리소스”라고 부른다.
구글에는 진행 중인 프로젝트가 셀 수 없이 많지만, 모든 프로젝트에 디자이너가 함께하는 것은 아니어서 그런 별명이 붙었다. 이들 중 많은 프로젝트는 기술적 난제를 다루고, 다른 경우에는 개발자들이 내부 디자인 가이드라인과 디자인 라이브러리에만 의존한다. 그 결과 디자이너들은 여러 프로젝트를 동시에 진행하는 것으로 알려져 있으며, 한때 구글의 디자이너 채용 공고에는 직무 설명에 “저글링할 수 있는 능력”이라고 적혀 있었다.
나 역시 구글에 있던 동안 두 개가 넘는 프로젝트를 동시에 맡아 일한 적이 있다. 잠시였지만 다섯 개의 프로젝트를 동시에 저글링한 적도 있다. 프로토타입이 프로젝트 매니저나 엔지니어에게 디자인 아이디어를 설명하는 데 매우 효과적이라는 것은 말할 필요도 없다. 남이 작성한 코드를 수정하거나 직접 코드를 작성해 프로토타입을 만들 수 있는 코딩 능력은 있었지만, 항상 시간이 부족해 코딩에 시간을 따로 내기 어려웠다. POP(종이 위 프로토타이핑)은 한때 호평을 받았지만, 손으로 그린 스케치를 찍어 클릭해 볼 수 있게 만든 프로토타입이었기 때문에 흐름을 확인하는 것 이상으로는 현실적으로 활용할 수 없었다. 당시에는 디자이너가 쉽게 사용할 수 있으면서도 여러 효과를 갖춘 시각적으로 풍부한 프로토타입을 만들 수 있는 도구가 없었다. 가까운 엔지니어와 이야기한 뒤 나는 그런 도구를 만들어야겠다고 영감을 받았다. 몇 달 뒤, 나는 모바일 기기를 대상으로 한 프로토타이핑 도구인 App.eal을 만들었고, 이는 지난 1년 반 동안 ProtoPie가 탄생하는 데 큰 역할을 했다. App.eal을 사용하면 디자이너가 Google Drive의 그래픽 도구로 만든 이미지를 가져와 고충실도 프로토타입을 만들 수 있었다. 이 도구는 고정 헤더와 고정 푸터에 들어간 가져온 이미지의 높이를 설정하면 자동 스크롤을 구현한, 그 유형으로는 최초의* 도구였다. 하지만 무엇보다도, 나와 같은 어려움을 겪는 디자이너가 전 세계에 많다는 사실을 확인할 수 있었다.
ProtoPie의 전신인 App.eal, 소개
프로토타이핑 도구가 막 시장에 나오기 시작하던 시기에, 나는 구글을 떠나 프로토타이핑 도구를 만들었다. 당시 Framer의 CoffeeScript는 무엇이든 만들 수 있는 다재다능한 프로토타이핑 도구로 알려져 있었고, Origami는 코딩이 필요 없다는 점이 매력적이었다. 그러나 나는 두 도구가 코드 기반이거나 시각적 프로그래밍 도구였기 때문에, 대부분의 디자이너가 그것들을 효과적으로 사용하려면 완전히 다른 관점에서 접근해야 한다고 생각했다. 나는 디자이너가 쉽게 이해할 수 있고 자연스러운 모델을 고민하기 시작했다.
쉽게 접근할 수 있는 인터랙션과 움직임을 찾는 일은 새로운 흐름이 아니다.
Jesse James Garrett는 2005년에 Ajax for Rich Interaction Application을 정의했고, Bill Scott가 이를 널리 퍼뜨렸다. 그때 나는 2차원 와이어프레임에서 사용자의 입력과 그 입력이 화면 요소를 트리거하는 과정을 시간에 따라 시각화하는 방법을 연구했다. (효과적인 리치 인터랙션 디자인을 위한 디자인 프로세스 개선, IASDR 2007) 와이어프레임에서 시각화하는 데 특별한 도구는 필요하지 않지만 상당한 훈련이 필요하고, 공통 요소를 모든 경우에 활용할 수 없기 때문에 더 체계적이고 정교한 방법이 필요하다고 생각한다.
어린이를 위한 피아노 악보
답은 의외로 가까운 곳에 있었다. 어느 주말 저녁, 여섯 살 난 아들이 피아노를 연습하면서 악보에 표시를 하는 모습을 보게 되었다. 나는 어떤 건반을 눌러야 하는지, 어떤 음높이로 연주해야 하는지, 얼마나 오래 음을 유지해야 하는지를 나타내는 기호를 악보에서 바꿀 수 있다면, 체계적인 틀 안에서 인터랙션을 표현할 수 있겠다고 깨달았다. 나는 로봇이 만들어 내는 움직임을 표현하는 로보틱스 논문과, 애니메이션 도구에서 키프레임이 어떻게 정의되어 타임라인에 배치되어 요소의 움직임을 나타내는지를 살펴보았다. 그러다 결국 피에르 보샹이 로보틱스가 비슷한 개념을 구현하기 훨씬 전인 1680년대에 종이에 춤 동작을 기록하는 방법을 연구했다는 사실을 알게 되었다.
음악 표기법과 보샹의 춤 표기법은 움직임을 시간에 따라 선형적으로 보여 주는 것을 목표로 한다. 따라서 순서를 되돌릴 수 없다. 디바이스에서의 인터랙션은 사용자의 입력과 그 입력의 시점, 조건에 따라 서로 다른 반대 방향으로 진행될 수 있어, 단방향 타임라인으로는 인터랙션을 표현하기 어렵다. 나는 Adobe After Effects나 Flash 같은 소프트웨어 패키지에서 보이는 단방향 타임라인으로는, 여러 방향으로 움직여야 하는 이러한 인터랙션을 만들 수 없다고 결론 내렸다.
EWMN 센터의 현대화된 춤 표기법이나 모션 스코어에서 볼 수 있는 키프레임은 사용하기 전에 움직임을 범주화해야 한다. 춤 표기법이 인간의 몸을 여러 부분으로 나누고 각 부분의 움직임을 시간에 따라 표현하듯이, 나는 Dan Saffer의 마이크로인터랙션 개념 모델을 적용해 인터랙션을 세밀하게 분해했다. 가장 복잡한 인터랙션에서도 트리거를 찾을 수 있다면, 마이크로인터랙션은 트리거의 위치에 따라 여러 나노 인터랙션으로 나눌 수 있다. 이어서 나는 트리거가 아닌 요소들을 모았다. 나는 사용자 피드백과 구분할 수 있도록 이 요소들을 “Responses”라고 이름 붙였다. Responses로 구성된 움직임을 분석하자 여러 측면이 반복해서 나타났다.
유레카! 인터랙션에도 요소가 있다는 사실이 밝혀졌다!
세상에는 겉보기엔 무한한 수의 물질이 있지만, 사실 약 70개의 자연 발생 원소로 이루어져 있다. 어떤 물질을 구성하는 원소들의 결합 방식만 알면(적어도 이론적으로는) 그 물질을 재현할 수 있다. 예를 들어 다이아몬드와 석탄은 모두 탄소로 이루어져 있지만, 원자 구조가 달라 완전히 다르다.
같은 비유를 움직임에도 적용할 수 있다. 어떤 것이 일정한 거리만큼 움직이더라도, 움직이는 속도(또는 움직임이 일어나는 시간)와 가속도는 그 움직임에 영향을 미친다. 다시 말해 속도와 가속도를 제거하면 남는 것은 움직임의 기본 요소다. 움직임은 Move, Scale, Rotate라는 가장 흔한 요소로 표현된다.
Response를 구성하는 요소들
나는 인터랙션 요소 모델을 검증하기 위한 일환으로, Dribbble.com에 공유된 모바일 앱 디자인들에 등장하는 각 인터랙션을 분석했다. 움직임과 관련된 부분인 Response는 Morphs를 제외하면 인터랙션 요소로 분해할 수 있다. 그러나 모바일 앱의 Trigger는 구체적인 조건을 갖는다. 웹 서핑 중의 클릭과 달리, Trigger는 탭, 더블 탭, 롱 프레스와 같은 더 다양한 사용자 입력을 받아들일 수 있고, 경과 시간과 시스템 조건도 고려하기 때문이다. 따라서 Trigger를 더 세분화해 분석할 필요가 있었다. 원소 주기율표는 훌륭한 비유가 되었다. 가장 왼쪽 열인 1A족의 원소들은 수소를 제외하면 주로 알칼리성을 띠고, 17번째 열인 7A족의 원소들은 대부분 산성이다. 이런 점에서 Response는 7A족 원소에, Trigger는 1A족 원소에 비유할 수 있다. 나는 모든 Trigger 요소를 왼쪽에, 모든 Response 요소를 오른쪽에 배치하고, 복잡도에 따라 요소를 표로 정리했다. 그 결과 주기율표와 매우 흡사한 표가 완성되었다. 나는 인터랙션 요소가 단순한 요소를 넘어 재조합을 위한 재료이기 때문에 이들을 “interaction piece”라고 이름 붙였다.
인터랙션 피스 표 v.2.1
나와 동료들은 CHI 2015의 Work-in-Progress에서 “SNAP”이라는 이름으로 우리의 생각을 시연했고, 참석자들은 어색할 정도로 들떴다. 그리하여 2015년 봄에 ProtoPie의 개념 모델이 완성되었다. 따라서 나는 우리 팀이 ProtoPie를 발명하거나 창조했다고 생각하지 않는다. 1600년대에 갈릴레오가 지동설을 발명한 것이 아니라 발견했듯이, ProtoPie 역시 우리 팀의 노력으로 자연 속에서 발견된 것이다. 1년 뒤, 우리는 ProtoPie의 오픈 베타를 공개했다. 첫째 아들이 태어났을 때처럼 기쁨과 걱정이 번갈아 밀려오는 기분이었다.
“ProtoPie”라는 이름은 “prototype”과 “a piece of pie”를 합친 말이다.
ProtoPie는 프로토타이핑이 파이처럼 맛있고 만들기 쉬워야 한다는 우리의 믿음을 담고 있다. ProtoPie는 지금 보여 줄 수 있는 것보다 훨씬 더 많은 것을 보여 줄 잠재력이 아직 남아 있다. 물론 해결해야 할 버그도 많다. 그러나 완성되지 않은 제품을 자신 있게 공개하는 이유는, 디자이너의 마음에서 출발해 만들어진 디자인 도구에 대해 실제 디자이너들의 피드백을 얻고 싶기 때문이다. 내가 정말 좋아하는 중국 속담 중 하나는 “细节决定成败.”이다. 이 속담은 세부가 성공과 실패를 결정한다는 뜻이다. 우리는 ProtoPie의 세부를 완성하기 위해 오늘날에도 계속 프로토타이핑을 하고 있으며, 당신만의 세부를 제대로 만들어 낼 수 있는 도구를 다듬고 있다.
*App.eal의 특허가 출원되었음에도 비슷한 기능을 가진 많은 도구가 등장했고, 특허를 이용해 모방 시도를 막는 대신 디자인 커뮤니티에 돌려주겠다는 우리의 뜻을 담아 특허 출원을 철회했다.
