사물에 대한 이야기, 본문 : 01-1. 바탕화면 사용자 인터페이스는 어떻게 디자인 되었는가? (4)

사물에 대한 이야기, Chapter 01. Digilog Exprerience

컴퓨터의 데스크탑(바탕화면)

1. 바탕화면 사용자 인터페이스는 어떻게 디자인 되었는가? (4)

지난 글에서 우리는 컴퓨터 바탕화면을 구성하는 UI 요소들을 분류하고 각각의 특징들을 정리해 보았다. 이 글에서는 계속해서 각 UI 요소들이 어떤 아날로그 환경과 도구들로부터 기원했는지, 그 이면에는 어떤 원칙이 자리잡고 있는지에 대해 살피며 "바탕화면 UI는 어떻게 디자인 되었는가?"를 마무리 지을 것이다. 먼저 컴퓨터가 자리잡고 있는 공간, 그리고 사용되는 환경을 살펴보자.

지금 시대야 컴퓨터가 다양한 형태와 목적으로 여러 환경 속에서 사용되고 있다지만 처음 컴퓨터가 보급되었을 때만 하더라도 컴퓨터는 사무실이란 한정된 공간 속에서, 그것도 책상 위에서 사용되는 사무 도구였다. 컴퓨터의 주된 용도는 사용자에 따라 문서 작성이나 간단한 그래픽 작업등 다양했지만 모두 디지털 도구를 통해 아날로그 상에서 이뤄지던 작업들을 보다 편리하고 효율적으로 처리하기 위함이라는 공통의 목적을 가지고 있었다. 또한 이 모든 작업은 사무 공간 안에서도 '책상'이라는 특정 공간에서 이뤄진다는 특징 역시 포함하고 있었다.

이러한 용도와 작업의 성격으로 미루어 볼 때 바탕화면은 '컴퓨터와 사람 간의 접점' 역할을 하는 동시에 디지털 공간 속의 작업대, 즉 '디지털 책상'의 역할 역시 수행했다고 볼 수 있다. 따라서 컴퓨터를 통해 바탕화면 상에서 이루어지는 작업들은 책상 위에서 이루어지는 행위들과 비슷해야 했고, 그 과정에서 사용되는 도구들도 사무용 책상을 중심으로 한 사용자 개인의 주변 요소들로 구성되어야 했다. 그렇다면 이러한 주변 요소들이 직접적으로 바탕화면 UI로 변환되었는가? 아래의 그림을 살펴보자.

개인마다 편차는 있지만 기본적으로 개인용 사무공간에는 공통적으로 사용되는 도구들이 존재한다.

먼저 사무용 책상이 있고 이 책상을 주변으로 하여 서류철을 보관할 수 있는 간단한 책장 및 보관함, 그리고 그 보다 더 많은 양을 보관할 수 있는 다층 구조의 문서함과 간단한 도구들을 보관할 수 있는 서랍들, 그 외에 쓰레기 통이나 업무 관련 정보를 게시하는 보드 형태의 구조 등을 공통 사무도구로 볼 수 있다. 아직까진 가시적으로 보이는 쓰레기 통이나 폴더 등을 제외하면 바탕화면을 구성하는 각 UI 요소들이 어느 것으로부터 기원했는지 한 눈에 알아보긴 힘들다.

좀 더 명확히 하기 위해 간단한 비교를 진행해보자. 두 가지 다른 환경 속에서 어떤 작업을 수행한다 할 때 그 과정 속에서 일련의 공통점이나 차이점이 존재하지 않을까? 이를 통해 바탕화면 UI의 기원을 찾을 수 있지 않을까?

  

일반적으로 컴퓨터를 통해 어떤 작업을 수행할 때 사용자는 우선 해당 작업을 수행할 수 있는 어플리케이션을 선택한다. 컴퓨터는 배경화면 공간 상에 해당 어플리케이션의 작업 윈도우를 띄우고, 사용자는 본격적으로 어플리케이션이 제공하는 도구들을 이용해 작업을 수행할 수 있다. 작업물은 파일의 형태로 컴퓨터 내 특정 디렉토리 안에 저장되며 이 디렉토리들은 폴더로 표현된다.

그렇다면 아날로그 사무 공간에서는 어떠한가? 먼저 사용자는 해당 작업에 필요한 도구들을 찾는다. 그 후 책상 위에서 해당 작업을 수행할 공간을 확보하고 도구들을 활용해 작업을 진행한다. 작업의 종류에 따라 달라지지만 대부분의 작업물들은 문서로서 폴더나 파일철 안에 보관 되어진다.

비록 디지털과 아날로그라는 환경적 차이가 존재하지만 작업 수행 과정 상에서 이 둘을 구성하는 기본 요소들의 기능과 이를 활용하는 행위, 그리고 전반적인 태스크 수행 구조는 동일하며 몇몇 차이점에도 불구하고 둘 사이의 유사성은 매우 높다. 따라서 우리는 바탕화면 상에서 어플리케이션을 실행하고 작업을 하는 행위의 기원이 사무용 책상 위에서 도구들을 가지고 작업을 하는 행위라고 생각할 수 있다. 다른 바탕화면 요소들 역시 살펴보자.

  

일반적인 사무 환경에서 문서함은 폴더 및 다양한 도구들을 보관할 수 있는 공간을 제공한다. 2개에서 많게는 5개까지의 수납 공간으로 구성되며 각 수납 공간을 잡아 당겨 열고 닫음으로써 사용자는 보관 공간에 접근할 수 있다. 닫혀있는 상태에서 문서함은 각 수납 공간 안에 무엇이 보관되어 있는지 알아보기 어려우므로 공간 별로 외부에 내용물의 정보가 담긴 '표제어'를 표시할 수 있는 장치가 존재한다. 이를 통해 사용자는 원하는 대상을 찾아 이 서랍 저 서랍 모두 열어보는 오류 과정을 최소화할 수 있다.

바탕화면 상에서도 이와 같은 기능을 담당하는 UI요소가 존재하는데, 상단의 메뉴 영역은 다양한 기능과 도구들을 하나의 표제어 아래에 묶어 사용자에게 제공한다. 이를테면 문서 작업 도중 새로운 문서를 작성하려 한다면 사용자는 상단의 메뉴 영역에서 '파일' 이라 명명된 메뉴를 누르고, 풀 다운 되는 메뉴 중에서 '새 문서' 기능을 선택해야 한다. 이 과정은 마치 사무 공간에서 사용자가 새 문서를 작성할 때 사무함 중에서 ‘파일’이라는 표제어가 쓰여진 서랍을 열고 새 문서를 꺼내어 작업을 수행하는 것과 같다. 이는 곧 메뉴 영역의 기원이 문서함이라는 것을 의미한다. 한 가지만 더 살펴보도록 하자.

  

사용자들은 보통 자신이 자주 쓰는 도구 및 문서, 폴더 등은 문서함에 보관하지 않고 책상 위의 특정 공간에 보관하곤 한다. 종류에 따라 밑 면에 작은 미닫이 수납공간을 제공하는 책상이 있어 이곳에 보관한다 던지, 책상 위에 작은 수납장을 두어 그 곳에 보관하기도 한다. 따라서 사용자는 자주 쓰는 물건들을 찾아 문서함을 뒤적일 필요 없이 그저 손을 뻗어 해당 물건들을 가져다 쓰기만 하면 된다.

바탕화면 하단의 아이콘 독 역시 비슷한 기능을 제공한다. 사용자는 어플리케이션을 실행하기 위해 복잡하게 메뉴 구조를 들여다 볼 필요 없이 자주 쓰는 어플리케이션들을 아이콘 독에 배치시켜 바로 사용할 수 있다. 두 과정 모두 같은 기능을 제공할 뿐만 아니라 사용자와 가장 가까운 곳에 위치해 있고 항상 노출되어 있음 역시 공통점이다. 이로부터 우리는 아이콘 독이 책상 위 수납장으로부터 기원했다 할 수 있다.

지금까지 살펴 본 바와 같이 단순히 보이는 모습으로만 분류하여 비교하는 것 보다 어떤 공통의 행위를 두고 과정을 살피며 비교하는 것이 둘 사이의 연관성을 찾고 기원을 추적하는 데 훨씬 효과적이라는 것을 알 수 있다.

여기에 중요한 핵심이 있다. UI의 기원을 찾는데 어째서 그 과정 전체를 살펴야 하는가? 이는 비단 바탕화면 UI의 기원을 찾는 데에만 국한되는 질문이 아니다. 기원이 된 이유를 설명할 수 있다면 반대로 기원으로부터 어떻게 결과를 설계해 냈는가 그 원칙 또한 설명할 수 있기 때문이다. 이제부터 그 원칙을 찾기 위해 과정과 요소 사이의 미묘한 상관관계를 살펴보자.

저번 글에서 정리한 바탕화면 UI 비교정리 표를 기억하는가? 이 표에서 우리는 각각의 UI 요소들을 기능이나 표현방식, 인터랙션과 공간 상 위치로 분류하여 정리했었다. 만약 이들을 섞는다면 어떻게 될까? 가령 메뉴 영역의 공간 상 위치가 상단 좌측이 아닌 배경화면 영역이라면, 또는 아이콘 독이 화면 우측 상단에 위치해서 풀 다운 형식의 인터랙션을 제공한다면 어떨까? 불편하고 이상할 뿐 더러 우리는 해당 UI들을 어떻게 사용해야 할 지 한참을 고민해야 할 것이다.

그 뿐만이 아니다. 우리는 바탕화면이 사무 공간 상에서의 경험의 확장이라 생각지 않고 낯설고 흔치 않은 새로운 무언가라고 여길 것이다. 어떻게 하면 사용자들이 보다 익숙한 방법으로, 현실에서의 행위를 가상에서도 가능하도록 하여 그들이 느끼는 괴리감과 불편함을 최소화시킬 것이냐는 기본 개념마저도 불분명해질 것이다.

이를 통해 볼 때 UI를 구성하는 각각의 요소들은 특정 목적을 가지고 조합되어야만 그 의미를 갖고 일련의 경험을 연상시킨다고 할 수 있다. 이는 아날로그 경험 또한 마찬가지이다. 비록 우리가 논의하고 있는 것은 아니지만 아래의 사진은 이를 잘 보여주는 예시이다.

전자 기기의 경우는 수 없이 많은 요소들로 구성되어 있다. 이 부품들을 그냥 나열해두면 어떠한 의미도 가지지 않는다. 또한 이 부품들을 조합할 때 어떤 목적을 갖느냐에 따라 다양한 전자 기기가 완성되기도, 아니면 아예 쓸모 없는 물건이 만들어 질 수도 있다.

이를 우리가 논의하고 있는 바탕화면 UI, 아날로그 경험의 디지털 환경으로 확장에 대입해보자. 아날로그 상의 경험은 도구 하나, 기능 하나 만으로 형성되지 않으며 일련의 과정을 통해 형성된다는 것은 지금까지 살펴보았다. 아날로그 경험을 디지털 경험으로 옳기는 것은 단순히 아이콘의 모양을 따온다거나 인터랙션의 유사성 만으로는 해결되지 않는다. 사용자가 하는 행위와 과정, 그리고 그 목적을 가지고 아날로그 경험을 구성하는 모든 요소들이 디지털 환경에 맞게 설계될 때 비로소 경험의 확장이 이루어지는 것이다. 바탕화면의 상단 메뉴 영역과 사무 공간 속의 문서함을 이러한 관점에서 살펴보자.

둘 다 새로운 공간을 ‘끌어당겨 연다’라는 공통의 인터랙션을 가지고 있지만 문서함은 수납 공간이 필요한 반면에 물리적인 공간이 필요 없는 디지털의 특성상 메뉴 영역은 부피를 줄임으로써 형태적 차이를 형성하고 있다. 이는 곧 두 경험을 형성하는 부분적인 요인들은 다를 수 있음을 의미한다. 하지만 사용자가 문서함과 메뉴 영역을 이용하는 목적은 동일하며 행위 과정 역시 비슷하다는 것을 알 수 있다.

중요한 것은 아날로그 경험을 디지털 환경으로 확장시키는 과정에서 만약 경험을 형성하는 요소가 디지털 환경에 적합하지 않다면 그에 맞게 최적화가 이루어져야 한다는 것이며, 이러한 과정은 환경에 따른 사물의 진화라고도 표현할 수 있다. 또한 디지털 환경의 기원이 된 아날로그 환경과 그 구성 요인이 디지털 환경에 맞게 진화되었다 하더라도 사용자가 해당 물건을 사용하는 목적과 과정, 그리고 행위 상의 전반적인 일관성이 유지되지 않는다면 자연스러운 경험의 확장은 불가능하다.

단순히 아날로그 요소와 경험들을 디지털로 그대로 가져오는 치환의 과정이 아니라, 아날로그 상에서의 '행위(Activity)'와 '형태 및 구조의 핵심(Core Structure)'들을 가장 작은 단위까지 쪼개고, 아날로그 상의 장식적 요소들이나 환경적 제약들을 배제한 뒤 디지털 공간에 맞게 '최적화'를 통해 구현해 내는 것. 이것이 바로 지금까지 우리가 찾고자 했던 아날로그 경험이 디지털 환경으로 확장되는 과정의 이면에 자리잡고 있는 기본 원칙인 동시에 디자인의 3기능인 가장, 은폐, 변형이 이 과정에서 작용하는 방식이다.

 

따라서 표현 방식에 현혹되지 말 것이며 그것이 아날로그적 메타포를 사용한 스큐어모피즘이든 메트로 스타일의 디지털 형태이든 결국 중요한 것은 표면에 드러난 GUI로부터 시작해 그 이면에 자리잡고 있는 경험 형성과 관련된 근본까지 모두를 읽어내는 것이다.

어떤 의미를 가지고 디자인 되었는가? 이는 우리가 끊임없이 던져야 할 질문이다.

이 글에서 살피지 않은 다른 바탕화면 UI에 대한 부분은 이 글을 읽는 이들의 몫으로 남겨두려 한다. 지금까지의 내용을 근간으로 각 요소들의 기원을 찾고 그 기원으로부터 무엇이 디지털 환경에 맞게 변화되었으며 본질적인 일관성은 어떻게 유지되었는지 스스로 확인할 수 있으리라 기대한다.