애플리케이션에서의 UX 살펴보기

지난 호에서 우리는 사용자 경험이 무엇이고, 좋은 사용자 경험을 제공하는 제품과 나쁜 사용자 경험을 제공하는 제품의 실제 사례, 그리고 왜 사용자 경험이 기업들에게 중요한 덕목이 되고 있는지에 대해 함께 알아보았다. 이제부터 프로그램이라는 스펙트럼에 UX를 비춰보자.

고석률 varchar74@paran.com｜코딩 한 줄, 한 줄에 묻어있는 프로그래머의 열정에 박수를 보내야 마땅하다고 굳게 믿고 있다. 항상 향기가 있는 사람이 되기를 노력하며 살고 있으며, 현재 ㈜투비소프트에서 선임컨설턴트로 재직 중이다.

UX in Apps & Web sites

대부분의 독자들은 <화면 1>의 캐릭터를 기억할 것이다.

마이크로소프트가 윈도우98을 내놓으면서 야심차게 준비한 도우미 ‘클리피’이다.

사용자가 윈도우를 사용하는 중에 무언가 도움이 필요하다고 ‘생각’될 때, 거기에 맞는 몇 가지 도움말을 가지고 화면 하단에서 모습을 나타내곤 했던 이 캐릭터는 나름대로 친숙함을 주기 위해 카툰 캐릭터의 모습을 띄고 있었다.

마이크로소프트는 아마도 이 캐릭터를 이용해서 사용자가 윈도우 이용 중 겪을 수도 있는 문제 상황이나 어려움을 해결해 줌으로써 더 나은 사용자 환경을 제공할 수 있을 것으로 예상했을 것이다.

하지만 이 캐릭터는 성공했을까? 이 캐릭터를 기억하고 있는 독자들은 이 시도가 결국은 씁쓸한 실패로 끝났다는 것을 잘 알고 있을 것이다.

윈도우 사용자들은 처음 이 캐릭터를 보았을 때 느꼈던 귀여움이나 즐거움이 아주 잠깐이라는 것을 이내 알아차리게 된다.

대부분 이 캐릭터가 시도 때도 없이 불쑥 나타날 때마다 짜증스럽고 주제 넘는다는 생각을 가지게 됐고, 심지어는 한창 업무에 바쁠 때 업무 방해 요인으로 느끼기도 했다.

그래서 결국 ‘클리피’가 은퇴(?)하고 나서 몇몇 웹사이트에서는 그의 ‘사망’을 축하하기 까지 했던 해프닝으로 끝났다.

사용자를 배려하지 않은 디자인이나 인터페이스는 사용자 스스로 바보스럽다는 느낌을 가지게 하거나, 뜻하지 않게 모욕감을 갖게 할 수도 있다는 점을 명심해야 한다.

<화면 2>는 독자 여러분도 너무나 많이 사용하는 기능인 Drag&Drop(드래그앤드롭)이라는 인터페이스 기능이다.
과거 드래그앤드롭 기능 이전에는 ‘복사하기/잘라내기’와 ‘붙여넣기’라는 메뉴를 통해서 이 작업을 완료했으나 이제는 마우스로 개체를 선택한 후 이동하고자 하는 위치로 그대로 드래그해서 내려놓기만 하면 작업이 끝난다.

이 기능은 첫 선을 보인 이래로 사용자들에게 큰 호평을 받았고, 지금까지도 마우스라는 입력장치를 통한 인터페이스 중 최고로 꼽힌다.

결국 드래그앤드롭이라는 인터페이스는 데스크톱 환경에서 웹 환경으로 영역을 확장했다.

이제는 웹 상에서도 이런 기능을 제공하는 사이트가 많아졌다.

메일을 보낼 때 파일을 첨부하거나 메신저로 대화  중에 상대방에게 파일을 보내야 할 때 우리는 스스럼없이 폴더를 열고 그 파일을 선택해서 드래그하고 해당 위치에 드롭하는 동작만으로 ‘파일 첨부/파일 보내기’라는 작업을 끝내 버린다(<화면 3> 참조).

조금 다른 측면으로 UX를 바라보자.

회원가입을 하기 위해서 힘들게 회원가입 양식에 맞게 입력하고 나서 확인 버튼을 눌렀더니 에러 메시지만 무책임하게 내뱉어 놓아 맥이 풀렸던 경험이 있을 것이다. 비밀번호가 너무 짧거나, 보안정책에 맞지 않는다는 등 이유도 여러 가지다.

사용자는 이런 경우 당황스러움을 넘어 짜증스럽다. 사용자 대부분이 자신이 컴맹이라며 자책하기도 한다.

즐거워야 할 사이트와의 첫 대면에서부터 사용자는 좌절을 느끼게 되는데, 이로 인한 해당 사이트의 손실도 적지 않다.

이런 경우의 적절한 해결책 중 하나가 ‘포카-요케(Poka-yoke)’이다. 원래 일본의 도요타에서 처음 고안한 방법론인데 실례로는 자동차의 기어를 ‘P’위치에 놓으면 시동이 걸리지 않아 급출발 등의 사고를 예방하는 것을 들 수 있다.

‘실수를 회피하다’라는 사전적 의미를 갖고 있는 이 기법은 실제로 앞에서 든 경우에 훌륭한 대안이 되고 있다.

<화면 4>와 같이 사용자가 비밀번호를 만들고자 키보드 입력을 시작하게 되면 입력박스 오른쪽에 현재까지 입력된 비밀번호의 유효성 여부와 비밀번호로서의 평가결과, 예를 들어 취약하다던가 강력하다는 메시지를 실시간으로 사용자에게 알려준다.

이런 인터페이스 요소나 기능은 사용자의 사용성을 향상시키는 데 큰 도움을 줄 수 있다.

좋은 사용자 경험을 제공하려면
애플리케이션이나 웹 사이트에서 좋은 사용자 경험을 제공한다는 것은 앞서 살펴본 몇 가지 사례로는 충분히 설명되지 않을 수도 있다.

애플리케이션이나 웹 사이트를 디자인할 때 사용자 경험을 향상시키기 위해서는 어떤 점을 잊지 말아야 할까?

물론 디자인 요소만을 가지고 얘기하기에는 너무나 벅찬 주제다.

이제는 모든 애플리케이션이나 웹 사이트가 디자인으로 시작되어 디자인으로 마무리 된다고 해도 지나치지 않기 때문이다.

화면의 레이아웃, 메뉴의 내비게이션 등 모두가 디자인으로 귀결되고 있다.

중요한 점은 그것을 사용하게 될 사용자를 잘 이해하는 것이 선행되어야 한다는 점이다.

Interaction Design에서는 사용자 이해의 관점으로 아래의 몇 가지 사항을 강조하고 있다.

- 사용자가 무엇을 해야 하는지 정확한 시점에 알기 쉽게 나타내라.
- 그래픽, 컬러, 밑줄 긋기, 요소의 정렬, 서로 다른 정보들의 조화로운 배치, 각 아이템간의 여백 등 요소를 적절히 사용하라.
- 너무 많은 정보를 담으려 하다가 정보가 뒤죽박죽되는 것을 경계하라. 특히 컬러, 사운드, 그래픽 사용에 주의해라. 사이트를 만드는 사람은 항상 이런 요소를 많이 사용하고 싶은 유혹에 빠지기 쉽다. 결국 사용자에게 짜증만 불러일으키게 된다.
- 아이콘이나 그래픽 요소의 적절한 사용은 사용자가 정보를 받아들이기 쉽게 한다.
- 많은 정보를 담아야 할 때에는 경계선(border)이나 요소간 공백을 사용하여 사용자로 하여금 각각의 정보들이 그룹핑되어 있다는 사실을 깨닫게 해 줘야 한다. 그렇지 않으면 필요한 정보를 찾아내고, 인식하는 데 더 많은 시간을 허비하게 된다.
- 사운드를 사용할 경우에는 잘 들려야 하고 무엇을 표현하고자 하는지 표현되어야 한다.
- 텍스트는 배경화면과 대비되어 눈에 잘 띄어야 한다. 예를 들어 검은 바탕의 노란색의 “OK”버튼처럼 말이다.

미카 힐뚜넨은 그의 저서 ‘mobile user experience’에서 유용성, 사용성, 가용성, 심미성 기타요소를 사용자 경험의 구성요소로 정의하고 있다. 각각은 어떤 의미를 지니는가?

- 유용성 : 서비스가 사용하기에 가치를 가지고 있다고 인지하는 것
- 사용성 : 시스템 사용방법을 직관적으로 받아들여 쉽게 사용하는 것
- 가용성 : 원할 때 사용할 수 있고, 만약 사용할 수 없다면 언제 사용이 가능한 지 알 수 있도록 하는 것
- 심미성 : 사용 중 즐거움과 흥미를 느끼고 감성적으로 감흥을 받을 수 있는 것

서비스나 시스템이 사용하기에 가치가 있다고 느끼기 위해서는 무엇보다도 그 시스템이 제공하는 기능이 가장 큰 이슈일 것이다.

영화예매를 예로 들어 보자. 영화를 한편 보기 위해서 영화예매 사이트에 접속하는 사용자에게는 그 사이트가 ‘영화예매’라는 고유 기능을 제대로 제공해야만 하는 것이다. 사용성 측면은 좀 더 복합적인 요소로 이루어진다.

온라인으로 영화를 예매하는 사이트는 직접 세어보지는 않았지만 국내에만 수십 개 이상은 족히 넘을 것으로 생각된다.

여기에 영화만을 전문으로 하지 않고 연극이나 뮤지컬 등 다른 공연들도 함께 예매할 수 있는 사이트까지 포함하면 그 수는 기하급수적으로 많아진다.

하지만 스스로 곰곰히 생각해 보자. 특별히 특정 영화관을 이용하지 않는 이상 개개인 별로 예매를 하기 위해 방문하는 예매 사이트는 아마도 거의 고정적일 것이다. 왜 이런 현상이 일어날까?

사용자는 사이트에 처음 방문해서 첫 인상을 받을 것이다.

이 녀석(웹 사이트)이 나에게 우호적인지 아닌지를 판별할 것이고 소기의 목적을 달성하기 위해 여기저기 기웃거리며 예매를 진행할 것이다.

이 때 영화 예매과정에서 큰 문제없이 예매과정을 마친다면 그 사용자는 아마도 그 곳 또는 그 예매경험에 만족할 것이다.

그러나 때로는 ‘예매하기’ 버튼 조차도 찾지 못해 포기하고 도망치는 사용자도 있다.

물론 이것은 아주 극단적인 예가 될 수도 있지만, 사실 이런 사례를 찾는 것도 어렵지는 않다.

<화면 6> CGV의 메인 페이지를 보면 두 가지가 눈에 띈다.

먼저 헤매지 않고 ‘빠른예매’ 버튼을 찾아 바로 예매과정을 진행할 수 있다.

어떤 영화를 볼지 아직 결정하지 않고 무작정 방문한 사용자에게는 예매율과 함께 볼만한 영화를 추천해 주고 있다.

대부분의 사용자는 아마도 이 첫 화면에서 어떤 영화를 볼지 고민하지 않고 결정할 수 있을 것이다.

이 사이트의 경우 첫 화면에서 예매라는 본연의 기능을 빠른 시간 내에 할 수 있으며, 예쁘게 포장된 영화 포스터를 통해 사용자에게 영화를 추천해 주어 사용자에게 편안함을 느끼게 하기에 부족함이 없다.

다음으로 가용성 측면을 살펴보자. <화면 7>은 계좌이체를 하기 위해 홈페이지를 방문하는 사용자에게 미리 시스템 점검에 대한 공지를 하고 있다.

아마도 이 공지 사항을 본 사용자라면 9월20일 0시부터 6시 사이에 사이트에 접속해서 시스템이 정상 작동하지 않는다고 투덜댈 사람은 없을 것이다.

물론 모든 시스템은 항상 접속 가능해야 하고, 언제든 그 기능을 사용할 수 있어야 하겠지만 위의 예처럼 불가피할 경우 그 이유와 다음 사용 가능한 시간을 정확히 알려주어야 한다.

이런 배려 속에서 시스템에 대한 사용자의 신뢰는 싹튼다.

심미성에 대해서는 많은 이견이 있을 듯하다. 무엇보다도 사이트나 애플리케이션의 미적 매력을 두드러지게 만드는 측면에서 어떤 것이 심미적인지에 대한 판단기준이 모호할 수 있기 때문이다.

하지만 심미성이 중요한 것은 부인할 수 없는 사실이다.

돈 노먼(Don Norman)은 자신의 저서 ‘감성 디자인-Emo tional Design’에서 이런 일화를 소개하고 있다. “나는 이렇게 야단법석을 떠는 이유가 무엇 때문인지를 알아보기 위해 컬러 모니터를 빌려왔다.

그리고 곧 처음 생각한 것이 옳다는 것을 확신했다. 컬러가 추가되었다고 해서 일상 작업을 하는 데 추가적인 가치가 있지는 않았다.

하지만 나는 컬러 모니터를 포기할 수 없었다. 이성은 컬러가 중요하지 않다고 말하지만, 감성은 컬러가 중요하다고 속삭이고 있었다.”

지금까지 사용자 경험을 구성하고 있는 요소를 좀 더 세부적으로 분해해서 살펴보았다. 이제는 그것을 실체화하는 과정에 대해 살펴볼 차례이다.

Rich Internet Applications
앞서 살펴본 유용성, 사용성, 가용성, 심미성 등의 요소를 우리가 프로그램으로 풀어내는 것은 쉽지 않아 보인다.
그렇다면 이런 요소들을 우리가 표현해 내기 위해 우리 식으로 옷을 입혀 보는 것은 어떨까?

결국 이 요소들은 다시 그것을 적용하는 단계에서는 기능(Function), 성능(Performance), 디자인(Design) (어느 것 하나라도 치우침이 없어야 하는)이라는 3요소로 분류해 낼 수 있을 것이다.

2000년대에 들어서면서 가장 많은 사용자 UI를 제공하는 기술은 단연 웹이다.

우리가 인식하고 있든 아니든 간에 이미 좋은 UX를 제공하기 위한 노력들이 활발히 이루어지고 있는 것이 사실이고, 이를 실질적으로 구현 가능하게 하는 기술들이 나타나기 시작한다.

이 제품들은 서로 기반 기술이나 그것을 구현하는 방식에 있어 차이점을 보이고 있기는 하나 모두 우리가 지금 다루고 있는 향상된 사용자 경험이라는 공통의 목적을 갖고 있다.

원래 전문 디자인용 제품을 공급하던 어도비의 경우 타 제품군에 비해 아무래도 더 미려한 UI 디자인이 가능한 점이 특징이고, 마이크로소프트에서 야심차게 선보인 실버라이트는 멀티미디어 쪽에 강점을 보이고 있다.

3.0 버전에서는 딥줌이라는 기술을 통해 이미지 처리에서도 상당한 발전이 있음을 보여주고 있다.

그 외 자바스크립트를 기반으로 하고 있는 제품군들은 기존 HTML만으로 제작된 시스템이 여타 RIA 제품군에 비해 컴포넌트로서 기능이 부족했던 부분을 훌륭히 보완하여 충분한 가능성을 확인시켜주고 있다.

사실 RIA라는 말은 어도비가 자사의 제품을 홍보하는 과정에서 나온 용어이지만 이제는 향상된 사용자 경험을 제공할 수 있도록 하는 제품군들을 통칭하는 용어가 되었다.

이 제품들은 우리가 앞서 얘기했던 향상된 사용자 경험을 제공하기 위한 기본적인 조건을 갖추고 있으니 현재까지는 성공적으로 보여진다.

그렇다면 이 제품들을 기업 입장에서 바라본다면, 만약 기업에서 그들의 고객을 위한 서비스, 내부 직원들을 위한 업무 환경 구축을 고려하는 상황이라면 얼마만큼 만족스러워 하고 있을까?

비즈니스 애플리케이션이라는 관점에서 RIA제품들이 더 갖추어야 할 덕목은 무엇일까? 이제 함께 숙고해 봐야 할 문제가 우리에게 던져졌다.

출처 : 아이마소