본문 바로가기

[UX] 가벼운 이야기

3D 세상을 2D로 옮기기, 2D 세상을 3D로 옮기기


*본 내용은 UX팩토리 만나기 2010 에서 '이미지 1장으로 발표해' 시간에 발표한 내용입니다. 
 (발표자들의 모든 이미지는 여기에 있습니다.)

그림1) 세상은 3차원
이미지 출처: http://hoons.kr/Board.aspx%3FNam...Value%3D

3D 세상을 2D로 옮기기

저는 UX팩토리 만나기 2010에서 '3D세상을 2D로 표현하기' 라는 주제로 발표를 한 uxdragon 입니다. 
저는 도널드 노먼의 '디자인과 인간심리' 라는 책을 읽고 나서 고민했던 부분을 공유하려고 합니다.

그림1)과 같이 세상은 x축,y축,z축을 포함한 3D(3차원)으로 이루어져 있습니다. 3D로 이루어진 세상이지만, 정보는 2D(2차원)으로 표현되어 있거나, 종종 다른 축에 표현되어 있습니다. 그러나 이것은 사용자로 하여금 정보를 해석하는데 있어서 더 신경을 쓰이게 하는 요소로 작용하게 됩니다.

'디자인과 인간심리'라는 책은 우리 주변에서 볼 수 있는 사물들과 물건들의 '사용성'에 대한 문제점을 다루고 있습니다. 이 책에서 나온 두 가지 사례가 인상적이었습니다.


그림2) 버너의 자연스러운 대응


첫번째는 버너의 사례입니다.
그림2)의 (1번) 그림을 보면 버너와 스위치는 다른 축에 매핑되어 있습니다. 또한 불판의 위치와 스위치의 위치가 적절한 매핑이 되지 않아서 사용자는 혼란에 빠지게 됩니다. 첫번째 스위치를 켜면 어떤 버너가 켜지는지 알 수 있는 근거가 없기 때문이지요. 제대로 불을 켤 수 있는 경우의 수를 세보면 4!(4팩토리얼)의 가짓수가 생길 수 있습니다. (4 x 3 x 2 x 1 = 24개)

(2번) 그림을 보면 스위치를 버너와 같은 축에 매핑시켰습니다. 또한 양쪽 스위치들을 좌측과 우측으로 그룹핑하였습니다. 이를 통해 좌측에 있는 2개의 스위치는 좌측 버너를 작동시킬 것이고, 우측에 있는 2개의 스위치는 우측 버너를 작동시킬 것이라고 생각하게끔 하였습니다. 그래도 아직 문제가 있습니다. 어떤 스위치가 위 혹은 아래의 버너를 켤수 있는지에 대해서는 명확하지 않기 때문입니다. 제대로 불을 켤 수 있는 경우의 수를 세보면 총 4개의 가짓수가 생길 수 있습니다. (2 x 2 = 4개) 부가적으로 스위치에 '위, 아래'라는 레이블을 붙일 수 있지만, 글자를 읽는 순간 사용자는 해석을 하기때문에 효율적인 해결책이라고 보기에는 다소 무리가 있습니다.

(3번) 그림을 보면 스위치와 버너의 위치를 동일하게 매핑하였습니다. 이로써 사용자는 위치를 파악하여 버너를 켤수 있게 됩니다. 

(4번) 그림도 마찬가지로 버너의 위치와 스위치가 보이지 않는 세로 연결선을 통해 인지적으로 연결이 될 수 있게끔 설계하였습니다.


두번째는 집에서 전구를 통제하는 스위치의 사례입니다.
집에서 전구를 통제하는 스위치는 항상 벽에 붙어있습니다. 또한 스위치를 통해 거실, 혹은 방의 불을 켜거나 끌 수 있습니다. 그러나 어떤 버튼이 어느 거실, 혹은방의 불을 켜고 끌수 있는지에 대한 인지적 단서가 전혀 없기 때문에 사용자는 실수를 종종 하게됩니다. 심지어는 켜져있는지 꺼져있는지에 대해서도 헷갈리는 경우가 생기기도 합니다.

그림3) 벽 스위치의 대응문제
이미지출처: k.daum.net

본 문제의 해결방안으로는 방의 구조도를 2차원으로 표현하여 그 공간안에 스위치를 넣는 방법이 있을 수 있습니다. 다른 방법으로는 그림4)와 같이 설명과 그래픽 정보(픽토그램)을 이용하여 인지를 도울 수 있는 방법이 있겠습니다. (아까 버너의 사례에서는 레이블을 붙이는 방법이 효율적인 해결 방안이 아니라고 했는데, 물론 더 명쾌한 해결 방안이 있으리라 생각하고, 그 부분은 숙제로 남겨두겠습니다.)

그림4) 벽 스위치 대응 문제의 해결사례
이미지출처: key38.com
 

저는 이러한 3차원과 2차원의 대응의 사례를 생활속에서 찾아보았습니다. 

첫번째는 지하철의 사례입니다.
지하철의 경우 내리는 문은 좌, 우측으로 되어있으나 지하철의 정보를 표시하는 노선도는 좌, 우측 벽에 위치하여 있습니다. 벽에 위치한 노선도를 보면 내리는 문이 어느방향으로 내릴수 있는지에 대해 가늠하기가 힘듭니다. 노선도는 내리는 문의 위치 정보를 표현함에 있어 신중히 설계하여야 할 것입니다. 부가적으로 안내 디스플레이를 이용해서 내리는 문을 표시하곤 하는데, 이러한 것들이 자연스러운 대응을 돕는 인지적 단서라고 하겠습니다.

그림4) 지하철에서의 대응 사례
이미지(수정 전) 출처: http://ask.nate.com/qna/view.html?n=6065584


두번째는 영화관의 사례입니다.
영화관에서는 어두운 상황에서 자신의 자리를 찾아야 하는 어려움이 있습니다. 어두운 상황이기 때문에 이정표를 빛나게 하는것도 중요한 이슈이겠습니다. 

극장에서는 주로 열과 행으로 번호를 매기게 되는데, 열을 먼저 찾고, 행으로 들어가는 상황에서 사용자가 좌석을 잘 찾아갈 수 있도록 적절히 정보를 표현하여야 하겠습니다. 현재는 좌, 우측에 열을 표기하고, 앉을 좌석 앞쪽에 해당 번호를 표현하고 있습니다. 이러한 정보 표기는 이제는 관습적으로 굳어서 요즘에는 사용자들이 별 무리없이 좌석을 찾아 가는것 같습니다.  

그림5) 극장에서의 대응 사례
이미지 출처: http://sterlet.egloos.com/2030725


세번째는 고속버스의 내부나 여객기의 내부의 사례입니다.
고속버스의 내부나 여객기의 내부의 좌석은 우측과 좌측으로 구별되어 있습니다. 좌석 상단의 정보는 단순히 번호, 알파벳, 숫자로 되어있어서 어디가 앉을 좌석인지 구별하기 힘듭니다. 이 상황에서는 부가적으로 창측, 입구측 등의 글자정보를 통해 정보를 표현 할 수도 있습니다. 다른 방법으로는 그림6)과 같이 픽토그램을 이용해서 표현하는 방법이 있을 수 있습니다. 그림6)은 일본 Japan Airline 의 좌석표기입니다. 해석하기에 부담이 없고, 픽토그램을 이용하여 친근함을 더하였습니다. (발표시에는 해석하기 불편하다는 의견이 있었는데 이 점에 대해서 여러분은 어떻게 생각하시나요?) 

 
그림6) 여객기에서의 대응 사례


2D 세상을 3D로 옮기기

이와 반대로 2D 세상을 3D세상처럼 보이게 해야 되는 일이 생기기도 합니다. 기본적으로 디지털 디바이스의 패널은 2D로 이루어져 있기 때문에 향상된 시각적 경험을 위해서는 '3D 인것 처럼' 느끼게 해야하는 일이 생기기도 합니다. 

첫번째는 석고뎃셍의 사례입니다.
그림7)은 미대 입시를 준비하는 학생이라면, 한번쯤은 해 봤을 석고뎃셍입니다. 그림을 그리는 종이는 2D로 이루어져 있지만, 정작 표현하려고 하는 석고상은 3D로 이루어져 있습니다. 그렇다면 그림을 어떻게 그려야 3D처럼 보일 수 있을까요? 

중요한것은 덩어리감을 부여하는 것입니다. 명암을 이용하여 덩어리감과 입체감을 부여하여, 3D처럼 느껴지게 하는 착각을 일으키게 하는 것이지요.

그림7) 석고뎃셍 (아리아스)
이미지 출처: hongikartschool.com

두번째는 애플의 커버플로우 UI의 사례입니다.
요즘 모바일이나 디지털 디바이스들에서 '3D UI'가 화두가 되고 있습니다. 2D의 공간에서 3D인 것처럼 느껴지게 하기 위해서 시각적 트릭을 이용하여 표현합니다. 그림8)과 같이 애플의 '커버플로우 UI'는 정사각형의 이미지가 공간감을 가진것처럼 표현하기도 합니다. 또한 바닥에 비춰지는 효과를 이용하기도 합니다. 그리고 멀리 있는 이미지는 흐리게 보여지는 등의 시각적 장치를 통해 3D의 공간에 있는 것처럼 착각을 일으키게 합니다. 이것은 더 나은 사용자 경험을 창출하게끔 하는 요소로 사용되고 있습니다.

그림8) 애플 커버플로우 UI
이미지 출처: segregate.egloos.com


다음과 같이, 3D세상을 2D로 옮긴 사례와, 2D세상을 3D로 옮긴 사례를 몇가지 살펴 보았습니다.

3D 세상을 2D로 옮길때의 유의사항 입니다.
첫째, 공간의 대응이 제대로 이루어져야 합니다. 특히 다른 축에 정보가 표현이 될때 자연스러운 매핑을 유도해야 합니다. 

둘째, 인식을 쉽게 하게끔 해야 합니다. 인식을 돕기 위해서는 상황에따라 정보를 부가적으로 표현하는 방법이 있을 수 있습니다.

셋째, 사용자에 대한 배려가 이루어져야 합니다. 실수 방지 디자인(포카요케) 차원에서 사용자가 실수하지 않게끔 하는것이 중요합니다.

2D세상을 3D로 옮길때의 유의사항 입니다.
첫째, 시각적 트릭을 이용하여야 합니다. (석고 소묘에서는 덩어리감을 주기 위해 명암을 이용합니다. 배경, 그림자, 형태 등을 이용하여 시각적 착각을 불러 일으키게 하여야 합니다.)

둘째, 3D를 통해 사용자 경험을 향상시켜야 합니다. 2D에서 느낄 수 있는 답답한 느낌을 벗어나 현 세상과 같은 자연스러운 대응을 이끌어내어 사용자 경험을 향상시키는 요소로 사용하여야 합니다.

셋째, 2D세상을 3D세상으로 옮기는 과정 속에서 혼란을 가중시키지 말아야 합니다.