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

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

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

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

지난 시간까지 우리는 바탕화면이라는 가상공간이 어째서 대두되었는지 그 필요성과 중요성에 대해 살펴보았다.   (지난 글 보러가기)

이를 위해 우리는 GUI의 가장 기본적인 개념을 간략하게 이야기했었고, 바탕화면이 지향해야 하는 기능과 위치에 대해서도 공간적 의미로 접근해 보았다. 이를 다시 한 번 정리해보면 거시적 관점에서 바탕화면은 사람과 컴퓨터가 만나는 접점이자 조작의 중심이며, 고된 학습의 필요 없이 최대한 자연스럽고 일상적인 방법으로 작동할 수 있는 공간이어야 한다.

이제 시선을 돌려 보다 국소적인 부분에서 어떤 방법으로, 또 무슨 원칙들을 기준으로 그 중요성에 걸 맞는 공간이 창조되었는지 구체적으로 살피며 바탕화면이 앞서 말한 조건들을 만족시키는 지 확인할 차례이다. 저번 글의 마지막 단락에서 우리는 아래와 같은 질문들을 언급했었다.

"폴더라는 UI 요소는 디렉토리를 어떻게 가장하고 은폐, 변형하였는가? 쓰레기통의 사용성은 어떠한가? Windows의 하단에 위치한 시작 메뉴와 MAC OS의 상단 메뉴 바는 무엇이 기원인가? 바탕화면 UI는 과연 어떻게 디자인 되었는가?"

이러한 질문들은 실상 우리가 일상에서 접하는 아날로그 상의 경험이 어떻게 디지털 환경으로까지 확장되었는가를 묻는 것과 같다. 아날로그에서 디지털로의 확장, 그 과정이 단순히 '치환'이었는가 그렇지 않다면 다른 어떤 원칙을 따른 것일까? 바꿔 말해 디지털-아날로그 경험이란 어떤 원칙을 바탕으로 어떤 과정을 거쳐 형성되는 것인가? 이번 글에서는 바탕화면이라는 완성된 공간을 역순으로 결과에서 과정, 그리고 원칙으로 분해해 봄으로써 접근할 것이다.

[MAC OS X Desktop Screen - 이 글에서는 MAC OS를 기준으로 설명하려 하나 다른 컴퓨터 OS 역시도 큰 차이는 없다.]

먼저 그 구성을 살펴보자. 가장 기본적인 상태의 바탕화면 각각의 UI 요소들을 분할하고 그 위치와 크기 등을 나누어보면 아래와 같이 크게 다섯 가지로 분할해 볼 수 있다.

먼저 화면 좌측 상단을 차지하는 '메뉴' 영역과 우측 상단에 위치한 '정보표시' 영역, 그리고 중앙 하단의 '아이콘 독 (icon dock)' 영역과 폴더나 어플리케이션들을 실행시켰을 때 볼 수 있는 창 (window)' 영역, 마지막으로 가장 큰 부분을 차지하고 있는 나머지 '배경화면' 영역이 한데 모여 바탕화면의 UI를 구성한다. 더 자세히 나눠보면 더 많은 요소들로 구분할 수 있지만 가장 기초가 되는 이 다섯 구역을 기초로 응용하거나 조합한 형태이기에 이 글에서는 기초만을 살피려 한다. 각각의 요소들을 살펴보자.

1. 메뉴 영역: 좌측 상단에 위치한 메뉴 영역은 저장이나 불러오기, 혹은 인쇄 등 다양한 기능들을 제공한다. 이 중 몇몇 기능은 자주 사용하기도 하고 또 사용자에 따라 한 번도 쓸 일이 없는 기능들도 포함되어 있다. 이 메뉴 영역은 현재 사용자가 사용중인 어플리케이션에 맞춰 기능들이 변경되기도 한다.

2. 정보표시 영역: 우측 상단의 영역은 사용자의 정보와 현재 시간, 그리고 노트북의 경우엔 잔여 배터리량과 와이파이 및 소리 등 다양한 정보들을 표시한다. 이 각각의 정보들은 단순히 보여지기만 하는 것 뿐 아니라 해당 정보와 관련된 기능들을 사용할 수 있다.

3. 아이콘 독 (icon dock): 아이콘 독은 현재 컴퓨터에 설치된 어플리케이션 중에서 사용 빈도가 높거나 사용자가 지정한 어플리케이션들이 자리잡고 있는 영역이다. 사용자는 독 상의 아이콘들을 통해 해당 어플리케이션을 실행할 수 있다.

4. 창 (window) 영역: 창 영역은 사용자가 어플리케이션을 실행하거나 폴더를 열었을 때 활성화되며 해당 어플리케이션과 관련된 도구들을 이용할 수 있는 상단 메뉴영역과 해당 어플리케이션의 기능에 따라 변경되는 하단 맥락 화면으로 구성되어 있다.

5. 배경화면 영역: 바탕화면에서 가장 큰 영역을 차지하며, 사용자는 이 공간 위에 자유롭게 폴더 및 파일들을 만들거나 각 파일들을 옮겨 원하는 공간에 배치할 수 있고 나아가 사용자가 원하는 이미지로 배경화면을 변경할 수도 있다.

앞선 글에서 말했듯이 우리가 바라보고 있는 바탕화면의 이미지는 사무실의 것들을 대부분 차용해왔다. 따라서 위의 다섯 요소들은 우리가 사무실에서 자주 접하는 공간이나 요소들을 디지털 환경에 맞게 은폐 및 변형시킨 것이라 할 수 있다. 각 요소들의 기원을 찾기 위한 길잡이로서 인터랙션 방식과 공간 상의 위치, 그리고 표현 방식에 대해 좀 더 자세히 살펴보자.

1. 메뉴 영역의 인터랙션과 위치, 표현방식

메뉴 영역의 인터랙션은 '풀다운 (full-down)' 으로 표현할 수 있다. 잡아 내린다는 표현처럼 사용자가 원하는 메뉴 위에 마우스 커서를 위치시키고 클릭하면 해당 메뉴에 속한 하위 기능들이 '아래로 내려와 확장'되는 모습이다.

실제로 사용자들은 클릭 외에 다른 조작을 가하지는 않지만 그 표현 방식으로 인해 마치 "해당 메뉴 속에 담겨있는 하위 메뉴들이 아래로 밀려 나오는 느낌"이 든다. 이 영역의 위치는 상단 좌측으로, 최소한의 공간을 차지하는 동시에 많은 기능과 도구들을 각 메뉴에 담음으로써 공간의 효율성을 높인다. 각 메뉴는 간단한 타이틀로 해당 메뉴가 어떤 기능들을 가지고 있는지 사용자에게 정보를 전달한다.

2. 정보표시 영역의 인터랙션과 위치, 표현방식

정보표시 영역은 메뉴 영역과 같은 공간인 상단을 공유하기에 동일한 인터랙션을 사용한다. 다만 메뉴 영역과는 다르게 다양한 정보들을 즉각적으로 표시 (on/off 표현이나 수치 표현) 하며 해당 정보와 관련된 간략한 기능들을 제공한다. 따라서 이 영역은 별도의 조작 없이도 현재 컴퓨터가 어떤 상태인지 살필 수 있으며, 간단한 조작으로 컴퓨터의 상태를 변경할 수 있는 방법을 제공한다.

3. 아이콘 독의 인터랙션과 위치, 표현방식

아이콘 독은 드래그&드롭과 가장 기본적인 클릭으로 대부분의 인터랙션이 이루어진다. 사용자는 실행시키고자 하는 아이콘 위에 마우스 커서를 위치한 상태로 클릭을 통해 해당 어플리케이션을 실행할 수 있으며 현재 어떤 어플리케이션들이 실행 중인지는 아이콘 하단의 인디케이터 활성화 여부를 통해 확인할 수 있다.

사용자는 간단하게 해당 어플리케이션의 아이콘을 드래그하여 독 위의 원하는 공간 위에 드롭해 원하는 아이콘을 아이콘 독에 배치할 수 있다. 이미 배치된 아이콘 사이에서도 드래그&드롭 방식을 통해 위치와 순서를 변경할 수 있으며, 만약 아이콘을 독에서 제거하고 싶을 땐 해당 아이콘을 드래그하여 독 밖으로 드롭하면 제거된다. 이러한 드래그&드롭 방식은 마치 우리가 사물을 손에 쥐고 옮기는 것처럼 마우스가 사람의 손과 같다는 느낌이 들도록 한다.

아이콘 독은 하단에 위치해 있는데, 그 표현 방식이 다른 바탕화면 UI 요소들과 상이하다. 다른 요소들은 평면적으로 표현되고 있지만 아이콘 독은 각 아이콘들이 '바(bar) 형태의 공간 위에 놓여져 있는 형태'로 투시 효과가 들어가 마치 물건이 올려져 있는 선반을 보는 느낌이다.

4. 창 영역의 인터랙션과 위치, 표현방식

이름에서도 알 수 있듯이 창 영역은 바탕화면 위에 띄어진 작은 공간으로 드래그&드롭 및 풀다운 메뉴, 스크롤링 등  바탕화면에서 사용되는 모든 인터랙션을 활용한다. 위치 역시도 화면 내에서 어느 한 공간에 고정되지 않고 사용자가 자유롭게 이곳 저곳으로 드래그&드롭을 통해 움직일 수 있다. 따라서 창 영역은 어떻게 보면 바탕화면과 별개의 공간으로 볼 수도 있기에 이 글에서는 창 영역 중에서도 폴더 창을 기준으로 설명하려 한다.

5. 배경화면 영역의 인터랙션과 위치, 표현방식

배경화면 영역의 인터랙션은 드래그&드롭이 주가 된다. 사용자는 배경화면 상의 아이콘들을 드래깅하여 원하는 위치에 드롭함으로써 아이콘들의 배열을 변경할 수 있다. 또한 드래깅으로 한 번에 여러 파일들을 선택하여 움직이거나 삭제하는 등의 조작을 할 수 있다. 가장 넓은 공간을 차지하고 있는 만큼 활용도 또한 다양하다.

배경화면 상에서의 인터랙션 아이디어는 아이콘 독에서 설명했던 것과 마찬가지로 마우스를 손처럼 활용하는 것이다. 드래그&드롭을 통해 파일을 움직이는 것뿐만 아니라 여러 파일들을 선택할 때 드래깅을 통한 영역 설정 후 다중 선택으로 표현한 것 역시 흩어져 있는 여러 물건들을 한데 쓸어 담는 느낌을 표현하기 위함이다.

위에서 설명한 다섯 가지 인터랙션들은 각각 기능 및 사용성에 따라 최적의 방법으로 분배되었지만 기본적인 아이디어는 같다.

기존의 명령어 입력 방식이 아닌 보다 자연스러운 방법, 즉 "사람이 손으로 사물을 조작하는 방법"과 같은 느낌을 최대한 전달하는 것이 바탕화면 UI 인터랙션 설계의 원칙이며 이는 앞서 말한 거시적 관점에서의 바탕화면이 지켜야 할 조건을 충족한다는 것을 확인할 수 있다. 또한 인터랙션 설계의 목적이 GUI 도입의 목적과 다르지 않다는 것도 알 수 있다. 그러므로 GUI는 GUI대로 디자인하고 인터랙션은 인터랙션 대로 서로 분리되어 만들어진 것이 아니라 어느 하나의 기본 개념, 기본 대상을 가지고 바탕화면의 시각화와 인터랙션 설계가 이루어진 것이다.

따라서 우리가 지금까지 살핀 각 요소들의 기능과 인터랙션, 공간 상의 위치와 표현 방식은 어느 하나 임의로 만들어 진 것이 아니라 이런 일관성, 각 요소들은 특정 아날로그 환경 속의 경험으로부터 가져온 것이라 보아야 한다. 그렇기에 지금까지 관찰한 사항들을 따로따로 볼 것이 아니라 한데 모아 살펴야 한다. 아래의 표에 이를 좀 더 일목요연하게 정리했다.

이제 다음 단계는 이렇게 정리된 사항들을 바탕으로 아날로그 환경 속의 경험들이 바탕화면 공간 속의 UI 요소들로 변형되었는가 그 기원을 찾고 둘 사이의 차이점과 공통점을 비교해 봄으로써 디지털-아날로그 경험 설계의 원칙에 좀 더 접근해 볼 것이다.

(계속)