[UX] 가벼운 이야기2009.12.02 20:56

*본 내용은 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세상으로 옮기는 과정 속에서 혼란을 가중시키지 말아야 합니다.




Posted by 위승용 (uxdragon)

댓글을 달아 주세요

  1. 댓글을 남겨주세요. ^^

    2010.05.21 09:54 신고 [ ADDR : EDIT/ DEL : REPLY ]

[UX] 세미나2009.06.28 13:28




UXEYE 2009 사용자 경험 컨퍼런스
일시: 2009년 6월 27일 09:00 ~ 17:00
장소: 서울특별시 강남구 대치동 포스코센터 서관 5층 마이크로소프트



아쉽게도 UXEYE 2009를 현장에서 보지 못하였습니다.
아쉬운 마음에 UXFactory에 접속해 보니 아프리카에서 생중계를 한다는 공지를 발견 한 뒤 생중계로 보는 경험을 하였습니다.
기획 자체는 혁신적이었지만 서비스의 경험은 불만족스러웠습니다.


1. 화면이 잘 보이지 않았습니다.
화면이 잘 보여야 세미나에 집중을 할 수가 있는데 화면이 거의 보이지 않더군요.

2. 음질 상태가 좋지 않았습니다.
지지직거리는 마이크의 소리가 들렸는데 발표 소리를 듣기 힘들정도 였습니다.  

3. 방송을 보는 인원이 별로 없었습니다. 
홍보가 부족해서 아프리카에서 보는 인원이 별로 없었던 것 같습니다.
저 또한 당일 전까지는 모르고 있었으니까요.
인원이 많았다면 아프리카의 사용자 경험(실시간으로 동영상을 보며 채팅하는 경험)을 느낄 수 있었을텐데 아쉽습니다.


그럼에도 불구하고 참석하지 못한 사람들을 위해 배려를 하였음이 느껴졌습니다.
실제로 현장의 생동감을 집에서 편하게 간접적으로나마 느낄 수 있는 경험을 하였습니다.



느낀 점은 다음과 같습니다.


1. 사용자 방법론은 보조적인 역할을 수행해야 한다는 것입니다.
사용자를 알기 위해서는 사용자 리서치와 여러 방법론을 쓰곤 하지만,
결국 리서치와 방법론이 얼마나 정확한지에 대해서는 의문이 들었습니다.


사용자 리서치와 방법론들이 기반이 된 후에 UX디자이너의 creative가 주축이 된다면
멋진 결과물이 나오지 않을까라는 생각이 들었습니다.

실무에서는 사용자 방법론과 리서치 결과물을 토대로 클라이언트를 설득할 수 있는 근거가 되곤 하는데
그 근거가 결과물에 근간한 근거인지 단순한 클라이언트 만족을 위한것인지 생각해보아야 할 것입니다.


2. UX 디자이너의 역할이 중요해졌습니다.
UX 디자이너는 커뮤니케이션 허브로의 역할을 수행해야 합니다
UX 디자이너는 사용자에게 인터뷰를 해서 회사 사람들과 사용자의 간격을 줄여줄 줄 알아야 합니다.
UX 디자이너는 회사 내에서는 브레인스토밍 논의가 효율적이고 창의적으로 진행될 수있도록 리딩할 줄 알아야 합니다.

UX 디자이너가 어떻게보면 기획자, 디자이너, 개발자 사이에서 그들의 영역을 침범하고 간섭하게 되는데
그들과 상호 보완적인 역할을 수행할 수 있도록 조율 할 줄 알아야 합니다.




새로운 기술로 신기한 경험 sesson의 발표하신 분들 업체의 웹사이트를 공유합니다.
디스트릭트는 올해들어서 웹사이트를 파격적으로 바꾸었는데, 역시 디스트릭트라는 생각이 드네요.

디스트릭트 웹사이트
휴즈플로우 웹사이트
인프라웨어 웹사이트




발표 내용 정리를 공유합니다.
필기가 두서없고 정리가 덜 되었습니다. 양해바랍니다.


기업에서 원하는 UX 전문가1: 다음 UX랩 리서치 파트장 이정화
UX 분야는 다양한 배경을 가지고 있다.

- 동일한 주제에 다양한 관점
- 유연하고 융통성 있는 사고 방식 필요
리서치

- 리서치를 빠르게 진행, 반복적으로 진행
- 리서치는 1주일~2주일에 완료
- 리서치 컨셉 제안은 시각화하여 전개

사례
- 다음 까페 꾸미기
- 모바일지도

- 컨셉
- 시나리오
- 디자인 충고
- 개발 충고

UX designer의 역할
- 커뮤니케이션 허브로의 역할
- 사용자에게 인터뷰를 해서 회사 사람들과 사용자의 간격을 줄여줌
- 브레인스토밍 논의가 효율적이고 창의적으로 진행될 수있도록 리딩

청취자와 관찰자
트랜드에 눈과 귀가 열려있어야 한다
설득력있는 스토리텔러
- 리서치 결과 보고
- 컨셉의 주장

내가 전달하고 싶어하는 것을 스케치로 표현
UX에서 이야기 되고 있는 방법론들을 전파할 수 있어야 함


기업에서 원하는 UX 전문가2: 넥슨 UX 정태락

물어보고
쳐다보고
실험해보고
...


기업에서 원하는 UX 전문가3: SK HCI 김경진, 서종원
혁신이라는 것에 초점
신규 사업 중에서도 성장 사업을 발굴함에 있어서 인간에 접근하자
기업은 techno / business에 접근을 해 왔다.
무엇을 만들것인가가 아닌 어떻게 만들것인가에 접근을 해 왔다.
무엇을 만들것인가는 고객에게 있다.

1. co project를 하면서 기존사업, 신규사업의 개선
2. 23명이 혁신을 할 수는 있지만 끌어갈 수는 없다. 교육에 중점을 둠

HCI팀의 Value
1. 도전
2. ACT
3. 혼자서는 못한다. 협업
4. 즐겁게


HCI 연세대학교 김진우 교수님

UX 컨설턴트
길게 보라
social experience가 늘어날 것
transformation

세권의 책 추천
- experience economy: 경영학
- technology experience: 2003
- product experience: 2008

추천 컨퍼런스
- DCS 유럽: 사람중심
- DCS 미국중심: 기계 중심
- create 컨퍼런스

HCI는 요즘 너무 지나치게 과대 포장되어 있음.
다이어트를 해야 함.


IA 서울대학교 이중식 교수님
정보 설계
정보 접근하는 구조를 만들어 가는 것: 정리

IA의 4가지 특성
1. 정보를 잘 모으고
2. 패턴에 맞게 분류
3. data를 구조에 맞게
4. 구조에 navigation 기능


ID SADI 이종호 교수님
사용자 조사, 방법론 보다는 creative 가 중요함. 생각이 있는 방법론


새로운 기술로 신기한 경험1:
디스트릭트 오일석
1. 삼성 Z promotion: 토탈 경험
2. 유니버셜 프레임: surface
사진(무선) -> 프레임 -> 출력(무선 프린터) -> 벽 디스플레이(내 사진이 작품이 되는 컨셉) -> 서명을 한 후 멀티터치로 이메일 전송
제스쳐 센싱 + 홀로그램 이펙트


새로운 기술로 신기한 경험2: 휴즈플로우 이근화
웹 서비스 기획업체

페르마의 정리 -> 포스트잇 이 있었더라면?
마라톤 전투 -> 핸드폰 문자서비스가 있었더라면?
등등의 재미있는 사례중심의 발표였음


새로운 기술로 신기한 경험3: 인프라웨어 이재명
모바일 브라우저 업체

메가TV
- VOD를 보러 들어감
- 브라우저를 통해 들어가는 자막의 정보
- 화면에 나오는 자막의 영상과 어떤 정보를 매칭시켜줘야 할지 정한 뒤에 화면에 표시
- 자막과 인터랙션을 해서 다른 정보를 뿌려줄 수 있음
- 자막을 보고 메모장을 띄워서 어떤 단어를 쓰고있는지 검색
- 배우가 어떤 목걸이를 가지고 있는지 알아봄

TV위젯 실제 사용자와 신 기술이 어떻게 접목 될 수있는지 연구
- TV에서 위젯을 어떻게 사용할 수 있을까에 관한 연구
- 브라우저로 들어올 경우에는 어떻게 들어올 것인가?
- 가상의 스크린을 만들어서 넘길 수있게 만들었음


새로운 기술로 신기한 경험4: 미디어 아티스트 최승준


Posted by 위승용 (uxdragon)

댓글을 달아 주세요

  1. 굉장히 불편하고 끔찍한 경험이었을 텐데 그럼에도 불구하고 생중계를 열심히 들어주셔서 감사합니다.

    현장 생중계의 충분한 경험을 제공하기 위해서는 생각보다도 훨씬 많은 부대 비용이 필요하더군요.
    이번 생중계는 사전에 기획되지도 않았고 예산도 없이 진행된 것이라 어느정도 리스크를 가지고 강행했습니다.
    유료로 참석하는 등록자 분들에게 혜택이 돌아가야 하기 때문에 생중계의 수준을 어느 정도로 해야 하는지도 중요한 문제였습니다.

    결국은 생중계 경험이 끔찍한 것이 되어서 안타깝지만, 이번 시도를 통해서 얻은 경험이 헛되지 않도록 다음에는 좀 더 나은 경험을 제공할 수 있도록 노력하겠습니다.

    감사합니다.

    2009.06.29 10:50 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 황리건 과장님 안녕하세요.

      생중계의 경험은 들어보지 않은 사람은 아마도 모를 것입니다.
      저는 마지막까지 생중계를 들은 두명중 한명이었습니다.

      비록 좋지 않은 경험이긴 했지만, 역시 생중계를 공짜로 듣는 입장에서 이래라 저래라 하기에는 억지스러운 느낌이 다소 들었습니다. 말씀해 주신대로 유료로 참석한 등록자 분들과 차이점이 없었을 테니까요. 그래서 어조를 최대한 객관적으로 하려고 노력했습니다.

      다만 앞으로 더 좋은 사용자 경험을 위해서 고쳐야 될 부분이고, 그 점을 지적해야할 필요성을 느꼈기에 포스팅을 했습니다. 친히 이렇게 해명을 해주셔서 감사합니다.

      좋은하루 되세요.

      2009.06.29 11:50 신고 [ ADDR : EDIT/ DEL ]
  2. 소리만 듣고 엄청난 걸 해냈구나....ㅠㅠ

    2009.06.29 17:20 신고 [ ADDR : EDIT/ DEL : REPLY ]
  3. 정말 떨어지는 화질과 소리를 듣고 이렇게 정리하시다니 놀라워요'ㅅ';;

    2009.07.08 17:40 신고 [ ADDR : EDIT/ DEL : REPLY ]
  4. 가고 싶었는데 가지 못했습니다.
    보고 싶었는데 보지도 못했습니다.
    정리해놓으신 글 보고 갑니다. 감사합니다.

    2009.08.07 13:57 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 공유할만한 멋들어진 내용은 아니었음에도 불구하고 이렇게 댓글 남겨주셔서 감사합니다. 이미 보셨는지는 모르겠지만, uxfactory에 갖가지 링크가 걸려있어서 다른 분들이 정리하신 내용도 보시면 좋으실것 같습니다. http://uxfactory.com/692

      2009.08.13 01:12 신고 [ ADDR : EDIT/ DEL ]
  5. 댓글을 남겨주세요. ^^

    2010.05.21 09:57 신고 [ ADDR : EDIT/ DEL : REPLY ]