[UX Report]08 인터랙션 사례들

지난 회 보기 : 01 인터랙션 디자인 정의 /  02 인터랙션 디자인 접근법 / 03 인터랙션 디자인의 요소와 법칙 / 04 좋은 인터랙션 디자인의 특징 / 05 인터랙션디자인을 위한 도구들/06 인터페이스 디자인과 인터랙션 디자인/07 스마트 어플리케이션

Interaction Design                                                                                              

08 인 터랙션 사례들

과거 의 완결된 형태의 메시지를 한 방향으로 전하던 미디어의 개념을, 디지털의 네트워크 속에서 완결된 형태가 아닌 진행형의 개념으로 바꾸고 있다. 네트워크 속의 메시지들은 한 곳에 머물러 있지 않고 떠다니며 변화를 진행하고 있으며, 수신자 또한 시간과 공간을 넘나들면서 이 메시지들을 접하고 있고, 이러한 패러다임 속에서 전달자와 수신자간의 상호작용(Interaction)이 활발하게 이루어지고 있다.

 

인터 랙션은 사전적인 의미로 ‘상호작용’이라고 정의 내릴 수 있지만 인터랙션 디자인을 한 마디로 정의하는 것은 쉽지 않다.. 굳이 짧게 말한다면, '일상'이라고 말할수 있지 않을까?

 

인터 랙션의 영역은 너무도 넓다. 환경과 대상에 따라 저마다 다른 형태를 띄고 있는 이 인터랙션은, 우리가 태어나기 훨씬 전부터 우리 주위의 너무나 많은 곳에 존재하고 있고. 그 속에서 살고 있는 우리들은 벌써 수많은 경험을 했으며, 또 하고 있다. 이런 인터랙션이 인터넷 속으로.. 또 웹으로 옮겨와 중요한 화두로 떠오르면서, 사람들은 이 인터랙션이란 것을 어떤 새롭고 색다른 무언가로 기대하고 뛰어들기도 한다. 분명 인터랙션이 온라인으로 옮겨지면서 오프라인의 인터랙션의 의미와는 다른 의미들을 포함하기 시작했다. 하지만, 그 본래의 의미는 변함없고, 간단하다. 인터랙션이란 우리가 알고 있는, 태어나서부터 경험하고 있는 가장 오래된 것, 그리고 매우 일상적인 것들 중의 하나이다.

사람들과 이야기를 주고 받으면서 감정을 나누고, 나무에 물을 주고, 자연으로부터 신선한 공기를 받고…인간,자연,환 경모두와 인터랙팅을 하고 있다. 그뿐만 아니라 전자레인지에 타이머를 조정하고 오디오의 볼륨을 조절하면서 우리는 기계들과도 인터랙팅을 하고 있고, 신문과TV에서 기사를 접하고 저마다 다르게 느끼는 것과 같이 정보와도 인터랙팅을 하고 있으며, 내가 원하는 곳 여기 저기 돌아다니며, 원하는 카페에 들어가 앉아서 커피를 마실 수 있는 것처럼 공간과도 인터랙팅을 하고 있다.

 

다른 환경, 대상에 따라 제각기 다른 형태로 이루어지고 있는 이러한 인터랙션은 우리 인류와 함께한(아 니, 인류가 생겨나기 훨씬 전부터 자연들 사이에서 이루어지고 있었던), 바로 우리의 일상이며 우리의 세상은 온통 인터랙션들로 가득하다.

 

1. 친절한 서비스를 위한 인터랙션 디자인

 

웹 상에서는 어떤 형태의 인터랙션이 있을까?

웹 상의 인터랙션은 '휴먼 - 컴퓨터 인터랙션'과 직접적으로 관련이 있고, 컴퓨터 과학, 철학, 사회와 인류학, 산업디자인 등의 많은 학문과 관련을 가지고 있어, 웹 상의 인터랙션 역시 짧게 설명되기는 어려우나, 사용자의 측면에서 직접 느낄 수 있는 인터랙션을 생각해 보자

 

웹으 로 도달하는 과정 중, 유저들이 가장 먼저 접하는 인터랙션은 컴퓨터와의 인터랙션이다. 유저는 컴퓨터를 켜고, 컴퓨터는 시동한다. 유저의 마우스 클릭으로 컴퓨터는 그에 따라 반응하고, 키보드의 자판을 치면, 컴퓨터는 그 글자를 옮겨 화면으로 전해주는 등의 인터랙션을 하게 된다.

그 다음, 애플리케이션(소프트웨어)과의 인터랙션이 있다. 유저들은 많은 애플리케이션을 이용하며 그것과의 인터랙팅을 통해 문서를 만들고, 디자인 작업을 하고, 음악을 듣고 원하는 웹사이트를 찾아 즐긴다.

그렇 게 웹으로 도달한 유저들은 웹사이트와 가장 먼저 인터랙팅을 한다.

 

그럼 과연 이 웹에서 유저들과 웹 사이트 사이에 얼만큼의 인터랙팅이 이루어지고 있을까? 흔히 인터랙티브한 웹사이트라 하면, 휙- 슉-샥-- 하는 멋진 애니메이션과 무비, 사운드를 동반한 역동적이고 잘 디자인된 웹사이트를 떠올리는 경우가 많은데, 그것만이 다는 아니다.그런 웹사이트가 인터랙티브 할 수도 있고, 그렇지 못 할 수도 있다. 인터랙션의 이해 아래, 유저들이 다양한 인터랙팅을 할 수 있도록 다이나믹한 인터페이스가 제작되곤 하지만, 인터랙션은 결코 화려한 인터페이스만으로 판단되는 것이 아니다.

웹사 이트의 디테일한 부분에도 미세한 방식의 인터랙션이 존재한다. 이는 어쩌면 사용자들은 인지하지 못하고 넘어 갈 정도로 소소한 것일 수도 있다.

웹에 종사하는 우리는 웹에 대한 경험이 많아 익숙하지만 일반사용자들 중 꽤 많은 사람들은 웹에 대해 경험이 그리 많지 않다. 그래서 새로운 서비스를 접했을 때 당황하거나 어색해 하는 경우를 흔히 볼 수 있다. 이럴 때 미세한 방식의 인터랙션을 잘 활용하면 초보 사용자들을 위한 친절한 사이트를 만들 수 있다.

 

http://www.lotteshopping.com/

[그림 8-1] 롯데백화점 웹사이트 - 메인 페이지에 주요 컨텐츠를 위젯 형식으로 구현하였다. 이 방식은 웹서비스에 익숙한 사용자들에게는 편리할 수 있지만 그렇지 못한 사용자에게는 기능을 활용하기가 어려울 수 있다. 이런 문제점 해결을 위해 해당 위젯에 마우스 오버 시 ‘Click to Drag’ 라는 메시지를, 클릭 시에는 ‘move’라 는 메시지를 전달해서 사용자가 쉽게 기능을 이해하도록 도와주고 있다. 이런 간단한 인터랙션이 사용자에게는 큰 도움이 될 수 있다.

 

http://www.me2day.net/

[그림 8-2] 미투데이 마이미투 프로필 화면 중에서 – 나를 설명해주는 문구를 수정하려고 할 때, 별도의 수정 페이지로 이동하고 않고, 해당 문구에 마우스 오버를 하면(가운데 그림) 바탕이 노란색으로 변한다. 이것은 무엇인가 인터랙션이 일어나고 있음을 사용자가 인지하게 해주고 클릭을 하면 텍스트 입력창으로 변환(오른쪽 그림)이 되어 바로 수정이 가능하다. 이런 기능을 잘 활용하면 사용자가 페이지 이동 없이 원하는 바를 쉽게 행할 수 있다

 

우리가 검색할 때 이용하게 되는 자동검색어 기능도 좋은 예이다. 사실 요즘은 익숙해져 별것아닌 기능처럼 느껴지기도 하지만 사용자가 오타 입력에 의한 검색오류 행위를 사전에 방지시켜 준다는 관점에서 보면 사용자를 배려한 유용한 기능임에는 틀림 없다.

 

예전에 웹에이젼시에서 웹기획자로 일하고 있었던 2006년도 12월에 국내 유명 이동통신회사 S사의 웹컨설팅 업무를 맡게 되었다. 그 회사에서 신규 사업으로 E-commerce 사업을 진행하면서 쇼셜 쇼핑 컨셉의 오픈마켓을 준비하고있었다. 이 때 해외의 수많은 쇼핑몰들을 벤치마킹 하던 중 MS에서 베타버젼으로 내놓은 Window Live Shopping 사이트를 방문하게 되었다. (애석하게도 지금은 없어졌다.). 이사이트는 Atlas라는 이름의 MS Ajax 프레임워크를 사용해 제작한 사이트였다. Ajax를 이용한 인터랙티브한 인터페이스가 매력적이었지만 그보다 더 내관심을 끌었던 기능은 따로 있었다. 상품검색기능을 사용해 보기 위해 levis라는 검색어를 입력했는데 실수로 levs라고 치고 말았다. 그랬더니 검색 창 하단에. “혹시 levis를 찾고 있는 것 아니냐?’는 질문 대화창이 뜨는 것이었다. 사실 이 기능은 그다지 대단할 것도 없는,  자동 검색어, 추천 검색어 기능과 동일한 기능이다. 하지만 같은 기능일지라도 조금 더 세심한 인터랙션으로 사용자의 마음을 이해해주었고, 마치 사이트가 나와 대화를 하는 존재로 느껴져 오랫동안 기억에 남는 서비스였다.

 

[그림 8-3] 네이버검색창(좌) 구글 검색창(우) 자동검색어 기능은 사용자의 오류를 사전에 방지해주고 풍부한 정보를 제공해 주는 중요한 기능을 한다.

 

2. 재미있는 인터랙션 디자인

 

인터 랙션 디자인 관련 리포트를 작성하면서 많은 웹서핑을 하고 자료를 찾으면서 다양한 인터랙션 사이트들을 만날 수 있었다. 그 중에 몇 가지 재미있다고 기억되는 사이트들을 소개해 보려고 한다.

 

l   TuneGlue.net  (http://audiomap.tuneglue.net/)

TuneGlue.net 은 점과 점사이를 이어 검색 결과를 확장시켰다.

아마 존(Amazon UK)과 Last.fm의 API를 사용해 하나의 점을 누르면 그와 비슷한 장르의 뮤지션들이 마치 세포분열하듯 새롭게 생성된다. 구성은 쉽고, 깔끔하고, 재밌게 되어있다.

[그림 8-4]  TuneGlue.net 검색 화면

 

오른 쪽 상단에 뮤지션 이름을 넣고 검색을 누르면 화면 가운데 점이 하나 생성된다. 실제로 Boa(영 문만 입력가능)를 입력해봤다.  Boa점이 생성되고 이 점을 누르면 몇 가지가 더 뜨는데 그 중에서 Expond라는 점을 눌러보자.

Wondergirls 가 점으로 생성되었다. 같은 방법으로 점들을 따라가다 보면 비슷한 성향의 뮤지션들이 계속 연결되어 만나 볼 수 있다. 또 한번 Wondergirls의Expond를 눌러보니 관련된 추가 뮤지션들이 나타난다. 마치 소셜 네트워크의 정보시각화 화면처럼 연관 뮤지선들이 다양하게 연결되어 지는 것을 확인할 수 있다.

 

쇼핑 몰에서 많은 상품을 나누고 분류하고 개인화 되어가는 고객들의 원하는 니즈를 찾아내는 방법으로 연관 검색어와 관련 키워드를 이용하고 있다. 쇼핑몰의 흐름상 상품의 종류가 많아지고, 고객이 찾고자 하는 상품의 종류 또한 많아지면 한가지 검색어로 가장 비슷하게 알려줄 수 있는 이런 식의 카테고리 분류를 적용해보면 어떨까?

 

 

l   HardRock  (http://memorabilia.hardrock.com/)

 

hardrock 사이트는 유명 락 그룹 멤버들의 소장품을 전시하는 사이트로 기존의 썸네일 리스트 형식을 벗어나서 Full사이즈 이미지를 축소하여 모자이크 형식으로 모든 아이템을 한눈에 볼 수 있도록 구성하였다. 각 이미지를 클릭하거나 휠로 조정하면 원본이미지 사이즈 최대까지 확대되어 디테일한 이미지를 볼 수 있다. 페이지 전환없이 리스트부터 상세화면까지 한번에 볼 수 있는 장점이 있고 전체 아이템을 한 눈에 볼 수 있어 풍부한 정보를 제공에 용이하다.

해당 사이트는 실버라이트로 개발되었다.

 

[그림 8-4]  Hardrock 사이트 이미지 확대 과정 화면.  맨 아래 화면은 네비이션 사용 팁 안내 화면

 

 

지구 상의 모든 이벤트는 세 코디넛츠(Coordinates - X, Y, Z)의 공간과 시간으로 이루어진다. 그래픽 디자인을 포함한 프린트를 위한 디자인은 이 세 코디넛츠의 공간을 디자인했다. 이후에 등장한 무빙이미지 디자인은 시간을 디자인하기 시작했다.

디지 털의 웹 상에서 사용자들은 마우스를 이쪽, 저쪽으로 움직이며 공간과 시간을 뛰어 넘고 있고, 웹 상에서 where와 when은 철저히 사용자들에 의해 결정되고 있다. 이런 사용자들에게 제공되는 인터랙티브 디자인은 바로 공간과 시간을 동시에 디자인하는 것이다. 따라서 인터랙티브 디자이너는 어떻게 공간을 디자인하는지, 어떻게 시간을 디자인하는지, 그리고, 어떻게 이 두 가지를 함께 디자인할 지에 대한 충분한 훈련이 필요하다.

 

인간 이 물체, 공간과 인터랙팅을 하고 있을 때는 인간은 그 물체와 공간의 일부가 된다. 좋은 인터랙티브 디자인은 얼마나 인간이 쉽게 이 물체나 공간의 일부가 될 수 있는가를 디자인하고, 이는 사용자들이 웹 상에서 인터랙팅을 할 때에도 같은 개념으로 적용된다.

 

인터 랙티브 디자인은 작게는 오브젝트 Behavior에서부터, 크게는 사용자들이 인터랙팅을 할 수 있는 환경의 디자인까지 디자인의 범위 역시 그야말로 다양하다. 따라서 다양한 인터랙션의 디자인을 위해서는 인터랙션의 충분한 이해를 바탕으로 폭넓은 지식의 습득과 많은 훈련을 필요로 한다.

 

현재 웹 상에서의 인터랙션은, 수많은 디자이너들로부터 새롭고 재미있는 형태로 빠르게 발달하고 있다. 훌륭한 프로그래밍과 함께 제작된 여러 웹 사이트들은 사용자들에게 새로운 인터랙션의 경험을 가져다 주며 그들을 흥분시키고 있고, 이와 함께 웹 상에서의 인터랙션에 대한 높은 관심과 다양한 시도가 앞을 다투고 있다.

 

신문 이나 책장을 넘기는 행동과 마우스를 클릭하는 차이 외에는 오프라인에서의 인터랙팅과 큰 차이를 느낄 수 없는 정보와의 인터랙팅.하나의 웹사이트(같은 시간과 공간)에 접속해 있으면서도 서로를 느낄 수 없고, 서로 인터랙팅할 수 없는 문제점 해결을 위한 새로운 시도나 다양한 인터랙션이 웹에서 소개되고 있지만, 인터랙션에 대한 풍부한 이해로 사용자들에게 인터랙티브한 경험을 제시할 수 있는 인터랙션 디자인에 대한 깊은 고민이 필요하다

 

 

 ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------