고양이의 이해할 수 없는 행동은 디자인 시스템이 아니다

고양이의 이해할 수 없는 행동은 시스템이 아니다.

저는 종종 인터넷에 돌아다니는 시리즈를 보면서 시간을 때우곤 합니다. 열심히 조립한 값비싼 캣폴을 내버리고 택배 박스에서 안락함을 취하는 고양이, 느닷없이 나타나서 집사 꿀밤을 때리고 유유히 사라지는 녀석, 안락한 침대를 두고 건조대 위에서 수건 마냥 뱃살을 늘어지게 드러내고 자는 고양이들을 보면 웃음이 납니다. 3년 차 집사인 저도 여전히 고양이들이 지구인과 소통하는 방식을 이해할 수가 없습니다. 우리는 어째서 고양이들의 이런 모습에 즐거워하는 걸까요? 물론 뽀송뽀송한 솜뭉치 같은 귀여운 모습이 가장 큰 이유지만 그들의 행동이 매력적인 이유는 '목적을 알 수 없는 행동' 이기 때문입니다. 우리는 주전자를 잡기 위해 팔을 뻗는다던가, 추위를 이기기 위해 몸을 웅크리는 것처럼 특별한 목적을 가지고 행동하는 경우가 대부분이지만 고양이들의 기이한 행동은 우리가 감히 알 수 없기에 우리의 호기심을 이끌어내는 것이지요.

그러나 안타깝게도, 고양이의 행동처럼 서비스를 구상한다면 사용자로부터 소외받는 결과물이 나올지도 모릅니다. 사용자가 이해할 수 없다면 제대로 된 시스템을 갖추지 못했다는 뜻이기 때문입니다. 맥북의 전원 버튼을 눌렀는데 OS 구동되지 않고 갑자기 고양이의 하품 소리가 나오면, 우리는 즉각적으로 전원 버튼이 잘못된 시스템이라고 느낄 것입니다. 그렇다면 우리는 무엇을 시스템이라고 불러야 할까요? 시스템이란, 하나 혹은 그 이상의 목적을 갖추고 서로 긴밀하게 상호작용하는 구성 요소의 집합체입니다.



직장인의 밤이 시스템이 되기까지.

해가 지고 지하철이 한산해진 을지로에는 늘어선 와인바와 가맥집 사이를 비집고 들어선 이라는 아홉 평짜리 작은 아지트가 있습니다. 그리고 이 곳에는 퇴근 후에 자기만의 시간을 가지고 있는 버들, 푸름, 예솔이 있습니다. 이들은 월급 중 일부를 내어 전세금과 관리비를 분담하며 이 공간을 공유하고 있습니다. 버들은 취미로 여행 블로그를 작성하고 있고, 푸름은 여유시간을 내어 회계사 시험을 준비하고 있습니다. 예솔을 반려묘 구월이를 위한 장난감을 만들고 있네요. 돈을 모아 한 공간을 사용하는 이 곳, 직장인의 밤을 시스템이라고 부를 수 있을까요? 정답은 '그럴듯하지만 아니다'입니다.



시스템에는 딴딴한 목적이 필요하다.

시스템 디자이너가 되는 첫걸음은 시스템이 목적을 가지고 움직이는 것을 이해하는 것입니다. 그러므로 직장인의 밤이 하나의 시스템으로서 구색을 갖추기 위해서는 전체 구성 요소를 하나로 묶을 수 있는 하나의 목적이 필요합니다. 직장인의 밤의 구성요소를 늘어놓자면 다음과 같은 것들이 있겠지요.

• 아홉 평 공간
• 직장인 버들
• 직장인 푸름
• 직장인 예솔
• 그리고 퇴근 후의 야심한 시간

이렇게 해봅시다. 이 셋은 사실 한 때 꿈 많은 예술인 지망생이었지만 평범한 직장인이 되고 말았고, 못다 한 꿈을 이루기 위해 매월 라는 타이틀로 예술에 혼은 아니고, 밤은 갈아 넣은 그들의 매월 마지막 주 주말에 작품을 전시를 하기로 했습니다. 평일 저녁엔 장난감을 만들거나 블로그를 작성하는 게 아니라 카메라, 글쓰기 노트, 캔버스에 물감, 이젤을 늘어놓고 맥주 한잔과 함께 작업을 합니다. 이렇게 틈틈이 완성한 작품을 모아 매달 전시를 하는 거죠. 버들, 푸름, 예솔은 한 공간에 동시에 존재하는 것 이상으로 하나의 아티스트 크루가 되었으며, 퇴근 후 야심한 시간은 그들이 작업할 수 있는 여유를 만들어주었고, 넓지도 좁지도 않은 아홉 평 공간은 작품이 탄생할 요람으로, 그리고 매달 전시장으로서 역할 또한 겸하게 되었습니다. 자 이제, 직장인의 밤은 퇴근한 직장인의 예술 활동이라는 목적 아래 움직이는 하나의 시스템이 되었습니다.

우리는 버들, 푸름, 예솔이 본업을 잃지 않으면서도 그들의 창조적인 활동을 계속해서 이어나갈 수 있는, 자아확장의 수단으로써의 목표를 훌륭하게 설정했습니다. 점차 이들이 하나로 묶이는 모습이 보일 겁니다. 주의할 점은, 목적이라는 것은 전체의 관점에서만 작동할 뿐 부분적으로 보면 실감이 되지 않습니다. 시계의 목적은 정확한 시간을 나타내는 것이지만 태엽, 초침과 분침을 개별적으로 관찰한다면 그 기능을 알아채기는 어렵습니다. 핵심은, 시스템의 모든 요소들이 어떤 방식으로든 연결되어 있다는 것을 아는 것입니다. 초침, 분침, 태엽은 목적을 수행하기 위해 필요한 움직임을 주고받기 때문에 우리가 그들 각각의 노고가 어떻게 연결되는지 알아채지 못하더라도 우리에게 정직하게 시간을 알려줄 수 있습니다.



시스템에는 끈끈함이 필요하다.

시스템이 목적이 필요하다는 것을 알게 되었지만, 그것만으로 훌륭한 시스템이 되기에는 부족합니다. 시스템에는 구성 요소 간의 끈끈한 연결이 필요합니다. 제 아무리 좋은 목적을 갖춘 시스템이라 할지라도 구성 요소들이 제각각 따로 움직인다면, 그리고 그러한 요소들이 많아질수록 시스템은 그저 지저분한 무언가 들의 집합에 지나지 않습니다. 끈끈하지 않은 시스템의 예시를 하나 들어볼까요. 제가 쓰는 필통에는 연필, 볼펜, 지우개, 형광펜, 포스트잇, 책갈피가 들어있습니다. 필통은 종이에 무언가를 적기 위한 목표를 수행기 위해 필기구를 한 군데 모았습니다. 그러나 그들 사이에 긴밀함은 없습니다. 필통에서 형광펜을 빼내면, 아무래도 필기하거나 채점을 할 때 불편하게 되겠죠. 그렇다고 그것이 필통의 본래 기능을 상실하게 하진 않습니다. 연필 몇 자루나 볼펜이 없어지더라도 필통은 필통이죠. 반면에 시계는 태엽이나 나사 하나만 사라지더라도 본래의 기능을 모두 상실합니다. 더 이상 정확한 시간을 알려줄 수 없으니, 시계라기보다는 다른 이름(예를 들면 고철 덩어리)으로 불리게 되겠죠.

우리 직장인의 밤도 더욱더 끈끈한 시스템으로 발전할 수 있을까요? 버들과 푸름, 예솔이 완전히 따로 예술 작품을 만든다면 새로운 멤버가 들어오거나 누군가 한 명이 다른 멤버로 교체되더라도 큰 문제가 없을 것입니다. 직장인의 밤이 끈끈함을 불어넣기 위해서는 서로의 역할을 보충 및 강화할 수 있어야 합니다. 버들은 카메라를 들고 일상에서 얻은 영감을 작업실로 가져오고, 푸름은 버들의 사진을 보며 캔버스에 그만의 화풍으로 옮겨 담습니다. 그리고 예솔은 그들의 작품이 탄생하는 과정을 지켜보며 전시 홍보물을 만들고 방문객에게 전시해설을 맡습니다. 이제 그들은 서로에게 없어서는 안 되는 존재가 되었습니다. 각자의 역량을 발휘하여 최고의 성과를 낼 수 있게 되었습니다. 노력 한 스푼만 보탠다면 '직장인 아티스트 3인조'로 인생 제2막을 열 날만 남았습니다!


Material Design, 머터리얼 디자인

거두절미하고, 같은 훌륭한 디자인 시스템은 어떤 모습으로 존재할까요? 끈끈한 디자인 시스템의 예시로 저는 머터리얼 디자인 가이드를 꼽고 싶습니다. Google이 2014년부터 오픈소스로 배포한 머터리얼 디자인은 일관성 있고 퀄리티 높은 디지털 프로덕트를 만들 수 있도록 개발과 디자인에 필요한 리소스과 가이드를 제공하고 있습니다. 단지 화면 위의 픽셀 위에 현실의 만질 수 있는 것, 종이의 질감을 구현하여 마치 사용자가 화면과 버튼을 현실 세계의 물리적 감각을 따라 만지고 조작할 수 있도록 하는 목표를 가지고 있습니다.


화면은 종이의 형태로, 이에 빛이 더 해졌을 때 생기는 그림자와 화면끼리 겹쳤을 때 마치 종이가 겹치듯 구현하고 움직임은 잉크가 떨어지고 흡수되는 모양을 닮게 했습니다. 그렇기 때문에 상위에 겹쳐 있는 레이어의 카드는 바닥 레이어와 비교해서 더 깊은 그림자를 가지게 됩니다. 갤럭시를 비롯한 안드로이드 계열의 디지털 제품을 사용해본 사람이라면 이러한 방식에 꽤 익숙해졌을 것입니다. 하루가 멀다 하고 새로운 서비스와 앱이 쏟아져 나오기 때문에 언제나 예외상황이 있지만, 그럼에도 이 시스템은 수년이 지난 현재도 큰 변화없이 전혀 어색하지 않게 유지되고 있습니다. 견고하고 잘 설계된 시스템이라는 증거입니다.


Crane, 머터리얼 컴포넌트와 테마의 가이드를 따라 만든 여행 애플리케이션머터리얼 디자인이 완벽하다고는 할 수 없지만 훌륭한 시스템으로 평가받는 이유는, UI 화면을 설계가 레이아웃, 컬러, 텍스트, 인터렉션, 모션, 심지어는 소리까지 고려해야 하는 복잡한 과정임에도 불구하고 직관적이고, 일관적이고, 물리적 감각을 느낄 수 있도록 하는 원리에 따라 모든 요소들을 끈끈하게 설계 및 구성했기 때문입니다. 버튼 하나를 배치하더라도 목적에 따라 어떤 크기를 사용하며, 색과 텍스트는 어떻게 배치하고, 버튼 명의 작성과 인터랙션 방식은 어떻게 결정할지 유기적으로 도움을 주는 가이드를 제공합니다. 또한 개발자와 디자이너가 각각 레퍼런스 할 수 있도록 따로 리소스 파일을 제공하고 있습니다. 각각의 요소들이 제 할 일을 하고 있기에 가이드를 충실히 따르는 것만으로도 품질 높은 디지털 프로덕트를 만들 수 있게 됩니다.


요컨대 중요한 것은,

고양이가 사는 방식과 달리, 지구인인 우리는 설계한 제품과 서비스가 제대로 된 시스템을 갖추지 못하고 있다면 당혹스러운 경험을 할 수 있습니다. 훌륭한 디자인 시스템은 딴딴한 목표와 구성요소 사이의 끈끈함이 있어야 하죠. 올바른 목적을 수립하고 그에 맞는 구성요소들을 찾아 배치하는 것, 그것이 우리가 앞으로 해야 할 일입니다. 덧붙이자면, 시스템에 대한 이해도를 높이는 것 또한 중요합니다. 목수들에겐 공구함의 손잡이만 잡아도 어떤 용도로 사용하고 어떻게 공구들을 갖추는 것이 좋은지 알지만, 보통 사람들에겐 그저 잡동사니 통처럼 보일 수 있습니다. 관심을 기울이고, 시스템을 분석하는 눈을 통해 시스템적 사고의 기본을 갖출 수 있습니다. 고양이들의 이해할 수 없는 행동들도... 혹시 알까요, 비밀리에 접속할 수 있는 고양망통신에는 답이 있을지도 모르잖아요.