허공에서 내려오기
사람들은 너무 당연하거나 생각해보지 않은 것에 대해서는 질문하지 않는다. UI 디자이너가 뭘 하냐는 질문이 두 경우 모두에 속한다.
UX 디자이너가 뭘 하냐는 질문에 대한 대답은 많다. UX 디자인은 정확히 뭘 하는지, 뭘 어떻게 해야 하는지에 많은 설명이 있다. 문화로 설명하기도 하고 인문학으로 설명하기 하고, 온갖 비유와 위트가 동원되기도 한다.
그러나 UI에 대한 설명은 그렇게 많지 않다. 경우에 따라서 UX와 UI를 행위와 도구, 머리와 손, 과학자와 엔지니어의 관계로 이해하는 사람도 있다. 예전에 포토샵으로 작업하다가 경력이 쌓이면 파워포인트로 기획서를 쓴다는 식으로 주니어 때는 UI 디자인을 하고, 시니어가 되면 UX 디자인을 한다고 생각하는 사람도 있을 것이다. 하지만 스케치는 UX 디자이너의 툴이기도 하다. 지금은 툴의 사용으로 직급을 구분할 수 있는 환경이 아니다.
보통은 UI 디자이너를 포토샵이나 스케치 같은 소프트웨어를 사용하는 사람 혹은 컴포넌트를 배치하거나 디바이스의 화면에 보이는 글과 그림들을 배치하는 사람으로 생각한다. 하지만 UI 디자이너에게 이런 정의는 뭔가 부족하고 석연치 않은 것들이 있다. 다른 사람들은 전반적인 디자인 분야에 이런 이야기를 한다.
돈을 버는 일의 관점에서 디자인은 비즈니스 그 자체이거나 제품을 고객에게 전달하는 수단이 된다. UI 디자이너는 고객이 제품을 선택하고 구매하고, 재구매하도록 한다. 오랫동안 디자인의 영역이 포장과 외관이라는 생각이 지배하고 있다.
디지털로 만들어져서 스크린에서 소모되는 제품이 많아지면서 고객은 사용자로 변했다. 구매와 사용의 경계가 허물어지면서, 그동안 공급자 관점에서 제작되던 모든 것이 사용자의 관점을 고려하기 시작했다. 제품의 경계가 회사를 넘어 공동체에 기여하는 방법까지 고려하기도 한다. 사용자를 소비자가 아닌 능동적이고 감성적인 참여자로 보면서 경험을 통제하기 시작했고, UX/UI라는 표현이 생겼다.
그래서 UX에 대한 많은 설명 중 일부가 UX와 UI의 차이점을 구분하지만, UX에서 UI를 제거하는 방식의 설명이기 때문에 UX를 더 추상적으로 만들기도 한다.
경험을 디자인하기 시작하면서 스토리텔링도 주목받기 시작했다. 이야기는 경험을 전달하기 위해 인류가 가장 오랫동안 사용한 방법이다. 이제는 인류가 만든 가장 발전된 디바이스와 프로세스, 채널로 이야기를 전달한다.
UX 디자인에서는 스토리텔링을 글, 메시지, 이미지, 음성, 영상으로 효과적으로 쓸 수 있다. 이야기는 제품의 맥락을 부여하기 때문에 UI 디자인에서도 필요하지만, '이야기'는 UI 디자인에서는 모호하기 때문이다.
트렌드를 주도하는 마케팅의 관점에서는 유용하지만, UI를 광고 캠페인처럼 바꾸는 것은 힘든 일이다. 이야기의 흐름이 있어야 메시지를 올바르게 전달할 수 있다.
그렇지 않다면, 각기 다른 수많은 메시지가 가득 차게 된다. UI 디자이너는 플랫폼을 디자인하는 경우가 많기 때문에 적합하지 않다.
빅데이터가 주목받으면서 데이터의 흐름에 대한 관심이 많아졌다. 그러나 데이터는 말 그대로 재료일 뿐이다. 데이터를 디자인한다는 말은 인터페이스를 만드는 것이 아니라, 데이터의 구조를 설계한다는 말에 가깝다.
UX의 태풍이 지나간 후, BX, CX라는 단어도 자주 보게 되었다. 요즘은 사람을 수동적으로 구매하고 소비하는 존재로 보지 않고, 지속적으로 관계를 맺는 존재로 보기 때문에 비즈니스보다는 브랜딩이라고 하는 경우가 많은 것 같다.
브랜딩은 디자인은 물론이고, 프로그래밍, 마케팅, 비즈니스, 온오프라인의 다양한 제품과 채널을 포괄하는 거대하고 견고한 영역이다. 디지털 제품에 브랜드가 필요하다는 것은 더 이상 소프트웨어가 프로그램 언어를 사용하거나 일부 직업군의 전유물이 아니라, 누구나 쉽게 사용하고 구매할 수 있는 제품으로 자리 잡았다는 뜻이기도 하다.
서로 다른 이야기를 하는 것 같지만, 사실 어느 정도는 UI 디자이너와 연관이 있다. 하지만 하나하나의 설명모두 창업자, UX 디자이너, 프로그래머, 마케터들의 관점이다.
비즈니스의 형태와 방식은 창업자가 정한다. '테스크(User Task)' 혹은 'Flow'는 기획자나 UX 디자이너가 정의한다. 데이터베이스의 구조와 '기능(Function)'은 프로그래머가 구현한다. 마케터는 완성된 제품이 시장에서 선택받을 수 있도록 한다.
디자이너가 없는 디지털 제품, 완성된 프로그램을 생각해보자. 1980년대의 완성된 프로그램은 명령어로 질의하고, 문자로 가득한 데이터가 화면에 흘러넘치는 식으로 출력되는 형태였다. 프로그램은 전문적인 훈련을 받아야 사용할 수 있는 어려운 것이었다.
키보드를 치는 것은 자전거를 타는 것처럼 훈련이 필요했다. 키보드로 움직이는 커서는 왼쪽, 오른쪽, 위쪽 아래쪽, 4방향으로만 움직였다. 마우스를 쓰면서 커서를 자유롭게 움직일 수 있지만, 클릭과 더블클릭도 훈련이 필요했다.
예전의 프로그램은 설치부터 사용, 유지 모두 어려웠다. 하지만 프로그램의 힘은 사회를 바꿀 정도로 엄청났다. 더 많은 사람들이 프로그램을 쓰고 싶어 했고, 프로그램은 점점 더 사용하기 쉬운 쪽으로 진화했다. GUI를 갖춘 OS가 만들어지고, 1995년 Windows 95가 출시되고 전 세계로 퍼지기 시작하면서 거의 모든 환경의 사무실에 컴퓨터와 윈도우가 설치되고 세상은 더 빠르게 변했다.
아이폰이 출시되면서 모바일 시대가 시작되고, 소프트웨어는 앱이라는 이름으로 사람들의 손 안으로 들어갔다. 명령어가 아닌 사람이 보고, 사용하기 쉬운 화면 안의 UI의 필요성이 커진 것이다. 초기에는 일상생활에서 쓰던 요소들을 화면 안에 그대로 구현해서 사람들이 알기 쉽게 만들었다. 그래서 당시의 디자이너들은 제한된 환경에서 많은 노력을 해서 버튼 이미지를 만들었다.
현실의 버튼, 다이얼, 레버로 앱을 사용할 수 있게 하는 방식이 오랫동안 반복되었다. 구글에서 머티리얼 디자인을 내놓기 전까지는 큰 변화는 없었다. 머티리얼 디자인을 처음 본 디자이너들은 흉하다고 생각했다. 그러나 머티리얼 디자인은 UI 디자인의 많은 부분에 큰 영향을 준다.
이후 다들 알고 있지만, 머티리얼 디자인 이전의 디자인은 스큐어모피즘이라고 불리면서 많은 앱에서 사라지고, 일러스트레이션이 UI에 포함되기 시작했다.
안그라픽스에서 번역하여 출간한 Humane Interface(2003, 재프 래스킨 저)에서 보면, 재미있는 부분이 있다.
오늘날의 윈도우나 마우스로 작동되는 메뉴와 같은 GUI에 국한시켜 생각한다. 예를 들어 'Mobile Office'라는 잡지의 한 기사에서는 '머지않아 인터페이스에 대해 걱정할 필요가 없게 될 것입니다. 컴퓨터에게 말만하면 될 테니까요." 라고 주장하고 있다. 사실은 그렇지 않다. 자동 응답 전화기와 마찬가지로 음성-통제 시스템에 화면이 없어진다 해도, 이들은 종종 끔찍한 인터페이스를 가지게 된다. 제품을 이용해 어떤 직업을 완수하는 방식, 다시 말해 여러분이 한 것과 이에 대한 제품의 반응이 바로 인터페이스다.
인터페이스는 버튼과 경고 등 여러가지 컴포넌트와 메세지를 포함하고 컴포넌트와 메세지는 콘텐츠와 함께 화면에 배치된다. 컴포넌트를 커스텀하기도 하지만 기본 컴포넌트를 실무에서 UI 디자이너는 스크린과 행동이 이어지는 테스크 플로우 전체를 작업한다.
그래서 인터페이스를 통해서 프로그램과 사람 사이에서 오가는 것이 뭔지도 알아야 한다.
인터페이스를 통해서 오가는 것은 너무 익숙하고, 고리타분해서 그 단어가 어떤 의미를 담고 있는지 깊이 생각해 보지 않는 기본적인 단어다.
'정보(Information)' 그리고 정보의 단위인 'Bit'다.
로그인을 예로 들면, UX 디자이너는 사용성, 맥락, 경험을 생각해서 로그인 스크린이 필요하다고 하면, 프로그래머는 로그인을 위해 처리해야 하는 데이터와 기능에 대해 생각한다. UI 디자이너는 사용자에게 보여줘야 하는 정보(레이블, 텍스트 박스와 버튼의 형태)와 프로그래머가 받아야 하는 정보(아이디와 비밀번호의 문자열 형식과 성공과 실패 시에 대한 상태와 메세지의 형태)를 생각해야 한다. 그리고 이 모든 정보를 사용하는 사람이 받아들일 수 있는 인지한계와 LTE 혹은 와이파이 대역폭의 한계 내에서 최적화해야 한다.
인지에 대한 항목에서 매직 넘버 7을 자주 접한다. 이 오래된 신화는 1596년 "The Magical Number Seven, Plus or Minus Two: Some Limits on Our Capacity for Processing Information" 조지 밀러의 논문으로 알려졌다. 논문 제목은 '마법의 수 7±2는 정보 처리 용량의 어떤 한계이다.' 이걸 비트로 바꾸면 2~3비트다. 3비트는 8개의 정보를 식별할 수 있다. 밀러의 실험은 제한된 환경에서 1차원적인 구분으로 이루어졌지만, 현대의 사람들은 여러 가지 계층의 수십 가지 변화하는 정보들 사이에서 생활하고 있다.
IT의 역사에 대해 잘 모르는 디자이너도 8-Point Grid System를 들어본 적이 있을 것이다. 다른 말로 비트 그리드(bit grid)라고도 한다. 비트 그리드는 디지털에서 해상도와 스크린 사이즈에 유연하게 대응할 수 있다. PNG 파일을 저장할 때, PNG-8과 PNG-24에서 고민했을 것이다. 256 컬러란 말도 많이 들어봤을 것이다. 컬러, 화면의 픽셀 수, 화면의 크기 모두 '비트'란 말이 자주 듣게 된다. 이미지를 만들면, 용량을 최적화시키기 위해 애쓴다.
모니터, 스마트폰 등등 디지털로 사용자와 고객에게 제공되는 제품과 서비스를 만드는 디지털 디자이너는 항상 '정보'를 만들어내고 있다. 정보는 데이터와 다르다. 데이터는 해석과 분석이 필요하다. 사용자는 데이터를 직관적으로 이해할 수 없다. 사람이 인지하고, 이해할 수 있는 지식을 정보라고 부른다. 또 정보는 전달하려고 하는 의미와 형태가 일치하지 않기 때문에 더 효과적으로 의미를 전달할 수 있다. 스토리텔링과 메세지도 정보를 전달하는 방식 중 하나다.
스큐어모피즘에서 머티리얼 혹은 플랫 디자인으로 이어진 변화는 사과가 사과라는 것을 전달하기 위해서 필요한 정보의 양을 획기적으로 줄였다. 파일 용량이 줄어들고, 알아보기 위한 어려움이 줄었다. 사람이 받아들일 수 있는 정보, 인지할 수 있는 정보의 양의 한계가 있다. 그래서 사람은 추론을 통해 적은 양의 정보로 상황을 인식하고 판단하도록 진화했다. 그리고 가장 간단한 방식으로 정보를 쪼개서 기억하고, 정보들을 연결하여 기억을 만들고, 해석한다.
직관은 사람의 정보처리 방식을 최대한 활용하는 방식이다. 문의 손잡이를 오른쪽에 설치하는 문화권이라면, 문의 오른쪽에 설치된 도구의 형태가 일반적인 손잡이 모양이 아니라도 문을 열기 위해 오른쪽의 뭔가를 조작하는 방식이다. 사람이 직관을 사용하기 때문에 사람이 사용하는 UI에도 일관성이 필요하다.
브랜딩, 마케팅, 스토리텔링과 UI 디자인의 갈등도 컨셉이나 스타일, 아젠다 같은 여러가지 용어가 담고 있는 의미의 덩어리 속에서 필요한 구성요소의 형태, 질감, 색 등의 정보를 추출해서 다양한 채널과 디바이스에서 의도한대로 전달되는지 확인해볼 수도 있을 것이다.
UI 디자이너가 사용자와 프로그램 양쪽을 오가는 정보의 양과 형태를 결정하고 디자인한다는 관점을 가지면, 디자인으로 예술한다는 갈등의 해결책이 보인다. 원래 사용자에게 전달하려는 정보에 디자이너가 전달하고 싶은 정보(개인의 스타일과 관점 그리고 그 작업을 위한 비트)를 얼마나 포함시킬 것인지 결정하면 된다.
UI 디자인에서 정말 무엇을 디자인하냐는 질문에 대해 개인이라는 한계를 가진 지식과 경험을 바탕으로 쓴 글이다. 하고 싶은 말을 모두 쓰면 너무 길어지고 분야가 넓어져서 글 전체를 줄이기 위해 노력했다. 잘못 써진 부분과 생략된 부분이 오해를 일으키지는 않을까 걱정되는 마음도 있다. 그러나 정보를 디자인하는 일은 눈과 손으로 사용되는 서비스와 입과 귀로 사용하는 서비스에서 중요하다고 생각한다.
UI와 UX는 과학자와 엔지니어 관계와 비슷하다고 생각한다. 훌룡한 UX라도 훌룡한 비주얼과 모션, 논리적인 구성으로 UI 디자인이 구체적으로 만들어지지 않으면 공허해진다. UI와 브랜드의 관계도 복잡하다. 둘다 일관성과 통일성을 필요하고 상징적으로 표현되기 때문에 모바일 앱에서 시작한 회사는 고민에 빠지게 된다. UI가 가진 가능성이 크기 때문에 그래픽 툴만 사용하는 오퍼레이터라는 한계에 갇히지 스스로 갇히지 말라는 말을 하고 싶다.
그리고 건설적인 협업을 고민하고 모두가 함께 생각하고 싶어하는 팀에게 도움이 되었으면 한다.