태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.

웹에서 RIA로, 그리고 포카 요케(ポカヨケ)

MSP 2009/09/14 01:39 Posted by 희희덕

웹은 무엇일까요? 10년 전이라면 이 질문에 대한 답변을 단답형으로 쉽게 내릴 수 있었겠지만, 지금의 웹은  한가지로 형용할 수 없을 정도로 정말 많은 의미를 담고 있고, 하루가 달리 급변하고 있는 중입니다.

웹의 출발은 사실 물리학(Phyiscs)과 큰 연관이 있는데, 얼마 전 블랙홀 실험으로 큰 유명세를 떨쳤던 CERN의 거대 하드론 충돌기(LHC)를 연구하고 개발하는 과정에서 처음으로 고안 되었습니다.

1989년 물리학 연구소인 CERN에서, 거대 하드론 충돌기(LHC) 시험 가동에 앞서 실험 문서와 논문들을 작성하고 팀원들간에 공유하게 되었는데, 이 연구과정에서 아래와 같은 문제점에 봉착하게 됩니다.

  • 모듈이 어디서 사용되었지?
  • 누가 이 코드를 작성한 거야? 그 사람 어디서 일하지?
  • 그 개념에 대한 문서는 어떤 게 있지?
  • 그 프로젝트에 포함된 연구실은 어떤 게 있지?
  • 이 장치는 어떤 시스템이 있어야 작동되지?
  • 이것과 관련된 문서는 어떤 거지?

당시 CERN에서는 다양한 국가에서 파견된 과학자나 기술자가 수천 여명에 이르렀고, 상당히 유동적으로 상주 하였습니다. 아울러, 동시에 수백 가지의 연구가 진행되는 곳 이었는데, 모두가 공동의 목표를 향해 연구하고 있는 연구소 이기도 했습니다.

특히, LHC와 같은 거대실험은 작은 실수 하나로 막대한 연구손실을 초래할 수 있어서, 연구 결과의 보존을 비롯해 상호 검증도 필요하게 되었는데, 당시 CERN에서는 거대한 조직에 비해 그러한 커뮤니케이션 구조가 존재하지 않았습니다.

이러한 문제점을 보완하고자, 당시 연구원이었던 팀 버너스리가 처음으로 웹에 대해 제안하게 되는데, 그는 WWW에 대해 아래와 같이 제안하였습니다.

하이퍼텍스트’로 알려진 비선형[불연속적인] 문서 시스템에 대한 나의 짧은 경험을 요약하고, 이런 시스템을 도입하기 위해 CERN이 해야 할 일과 기업이 제공해야 할 것을 설명한다. 마지막으로 우리가 개인적, 집단적으로 어떤 것을 창조해 놓았는지를 알아보기 위해, 지금 우리 자신이 하이퍼텍스트에 몰입하는 단계를 제안한다.

이 처럼 웹은 개인적, 혹은 집단적으로 작성 된 문서가 비 선형적인 단계로 연결하여 확장 할 수 있는 시스템으로, 하이퍼링크를 이용해 사용자들이 인터렉션을 할 수 있는 공간을 의미합니다.

팀 버너스 리가 웹에 대해 처음으로 제안한지 1년 후, 본격적인 개발이 진행되었고, 4년 뒤 웹 표준을 개발하고 장려하는 컨소시움인 W3C가 설립되었습니다.
이후, 초 고속 인터넷망의 확산과, 개인 컴퓨터 보급으로 웹은 빠르게 전파되기 시작하였습니다.

 

2009년 현재, 웹은 전 세계의 많은 사람들이 다양한 장비를 통해 접근하고 있으며, 하루에 수억 건의 정보가 쏟아지고, 다양한 교류가 일어 나는 전 세계적인 유일한 공간으로 자리매김 하였습니다.


RIA, 새로운 경험을 제안하다

웹은 과학연구를 공유하기 위해 처음으로 고안되었지만, 현 세대에 이르러서 전 세계의 모든 사람들이 균등하게 참여할 수 있는 공간으로 변모하기 시작하였습니다.

하지만, 최근에 웹은 또 다른 한계에 봉착하게 됩니다. 웹을 이용하는 사용자들이 점점 늘어나고, 그들은 웹이라는 공간에서 다양한 인터렉션을 경험하길 원하는데, 웹은 근본적으로 비 선형적인 문서를 묶는 하나의 집합체에 불과 하였습니다.

즉, 웹은 하이퍼링크에 강하게 의존하는 집합이고, 사용자가 컨텐츠를 확장해 나가는데에도 하이퍼링크 클릭과 같은 인터렉션만 존재 하고 있습니다. 

 

이러한 웹의 단점을 극복하고자 2003년에 이르러서는, 웹 애플리케이션을 하나의 플랫폼으로 발전한 형태인 Web 2.0이라는 용어가 처음으로 도입되었고, Ajax, SOAP등 그와 파생되는 여러 가지 기술들이 제안 되었습니다.

최근엔 web 2.0은 집단 지성과 같이 사회적인 영향도 가미되어, 누구나 참여할 수 있는 네트워크 플랫폼으로 변화하고 있습니다.

Web 2.0과는 별도로, 2002년 매크로미디어에서 처음으로 RIA(Rich Internet Application)를 제안하였는데, 초기 RIA는 기존 웹의 한계를 극복하여, 다양한 인터랙션이 가능하고, 동적으로 데이터를 공유하며, 인터랙티브 한 효과를 구현 하는 것을 목표로 하고 있었습니다.

  

이후, MS, 어도비, 썬마이크로시스템즈등의 개발사에서 RIA 플랫폼을 속속 발표하였으며, 많은 서드파티사에서 RIA플랫폼을 도입하기 시작하였는데, RIA는 그간 웹의 한계를 넘어 새로운 사용자 인터페이스와, 인터렉션을 제공하며 사용자의 경험을 더 확장 할 수 있는 장점으로, 사용자에게 큰 호응을 얻고 있습니다.

특히 미디어 분야와 같이, 그간 웹에선 제공 할 수 없었던 기능은, RIA 플랫폼에 필연적으로 의존하게 되었고, 이들 회사는 RIA 플랫폼을 도입 한 후, ROI 성장을 달성 할 수 있었습니다.

현재, RIA는 새로운 사용자 경험을 제안하는 전 세계적인 개발 트랜드로 자리 매김하고 있지만, RIA와 웹 표준이라는 관점을 두고는 최근에 까지 꾸준히 논란이 일어나고 있습니다. 그러한 의견 중 대부분은 본질적 웹의 관점과는 어긋나기 때문에 지향하지 않는 것이 좋다는 의견일 것입니다.

하지만, 웹은 전자 메일처럼 인터넷 상에서 제공 되는 서비스 일 뿐이고, RIA도 기존의 웹의 한계를 극복하기 위해 인터넷 상에서 제공되는 서비스 중 하나입니다.

 

특히, RIA 플랫폼은 최근에는 웹을 떠나 모바일로도 확장하여, 어느 기기에서나 같은 사용자 경험을 제공하는 유비쿼터스 플랫폼으로 발전하고 있습니다. 그래서 요즘엔, RIA 개발자를 웹 개발자로 부르기 보단, 프론트앤드 개발자나, UI 개발자로 부르기도 합니다.

이처럼, RIA는 웹이라는 공간에서 일어나는 기술의 변화라기 보단, 사용자 경험을 다양한 환경으로 확장하는 생태계의 변화로 이해하여야 하는데, 이러한 논쟁은 RIA와 웹, 두 플랫폼의 발전 방향을  달리 본 다면 오해의 소지가 줄어들 것 이라고 생각합니다.


사용자 경험과 포카 요케

앞서 살펴본 것 처럼, RIA는 그간 웹의 획일적인 인터랙션에서, 보다 확장하여 새로운 사용자 경험을 제안하는 도구로써 널리 활용되고 있습니다.

사용자 경험이라는 용어가 다소 생소해 보일 수도 있겠지만, 기술적인 용어는 아니고, 사용자의 관점에서 어떠한 제품이나 서비스를 체험하며 생각하게 되는 모든 경험을 통틀어 이르는 용어입니다.

 
열받은 비디오게이머 Nerd – 게임과 사용자 경험

사용자 경험은, 컴퓨터와 사용자의 인터랙션을 위해 처음으로 고안되었지만, 요즘에는 그 규모가 커져서 인지심리학, 경영학 등 여러 분야에서 함께 연구되고 있습니다.

RIA가 웹의 한계를 넘어 다양한 사용자 경험을 제공 할 수 있는 것도, 여러 RIA 플랫폼 내에서 그간 웹과 달리 터치스크린, 키보드, 파일 입력 등 다양한 인터렉션 도구를 제공하고 있는데, 이러한 인터랙션 도구를 이용하여 사용자에게 보다 직관적인 인터렉션을 유도하게 끔 할 수 있기 때문입니다.

이처럼, 사용자가 제품 혹은 서비스를 사용하는데, 지각할 수 있는 모든 인터렉션을 설계하고 개발하는 방법론을 사용자 경험 디자인(UX Design) 이라고 합니다.

 

사용자 경험 디자인 방법론은 한 가지 답이있는게 아니라 상황별 혹은 인터렉션 도구 별로 상당히 많은 방법들이 존재하는데, 이번 글에서는 포카 요케 디자인 방법론에 대해 소개하고자 합니다.

포카 요케(ポカ ヨケ)라는 발음에서 느끼셨겠지만, 이 말은 실수를(ヨケ) 피한다(ポカ)라는 뜻의 일본어 입니다. 조금 더 풀어 쓴다면 사용자가 직면한 상황에서 실수를 피하도록 유도하여, 도달하고자 하는 목표에 실패하지 않도록 하는 디자인 방법론 입니다.

포카 요케는 토요타 자동차의 신게오 신고가, 자동차 공정 과정 중 발생할 수 있는 오류와 결함을 최대한 방지하고, 또 즉각적으로 수정 할 수 있도록 처음으로 고안하였는데, 그 원칙은 아래와 같습니다.

  • 색으로 분류된 부품들을 사용할 것
  • 조립 부품위에 형판을 둘 것
  • 다양한 조작을 작업자에게 계수로 알릴 것
  • 하나의 가지는 여러 다른 가지보다 크게 할 것

“실수를 방지하는 디자인 방법론?”라고 의문을 가질 분들이 있을 것 같습니다. 사실 사용자가 범할 수 있는 실수의 범위가 상당히 방대하기 때문에, 그러한 실수를 일일이 고려하기에는 상당히 많은 노력이 필요하게 됩니다.

일반적으로 어떠한 제품을 사용하여 사용하고자 하는 목표에 달성하기 위해서는 여러 방법들이 존재하게 되는데, 웹의 하이퍼링크와 같이 획일적인 단계로 구성되어 있을 경우 사용자가 실수할 가능성이 낮지만, 목표에 도달하기 위한 연결고리가 상당히 많을 경우 사용자가 실수할 가능성도 높아지게 됩니다.

포카 요케 디자인 방법론은 사용자가 하게 될 실수에 대해서도, 발생할 수 있는 인터렉션의 범위에 모두 두고 설계할 것을 권장하고 있습니다.

 

즉, 디자이너는 사용자가 제품을 사용하면서 발생 할 수 있는 실수 상황에 대해 우선 정립한 후, 이를 사전에 피하게 하여 사용자가 제품을 사용하는 중 실수로 인해 좌절한다거나, 목표에 미달하는 것을 방지하는 역할을 하게 됩니다.   

이처럼, 포카요케는 공정 과정 중 실수를 방지하기 위해 공업 분야에서 제일 처음 도입되었지만, 최근에는 더 나은 사용자 경험을 설계하기 위한 UX 디자인 방법론으로도 부각 받고 있습니다.


포카 요케를 찾아보다

포카 요케라는 디자인 방법론이 다소 생경해 보일 수 있겠지만, 사실 최근에는 공업 분야를 넘어 여러 분야에서 흔히 적용중인 디자인 방법론 중 하나이기도 합니다.

포카 요케는 일본의 토요타에서 처음 고안한 방법론으로, 자동차 회사에서 처음 고안한 만큼, 우리가 흔히 이용하는 교통 수단인 자동차에서도 이러한 방법론을 활용한 사례를 흔히 찾아 볼 수 있는데요.

예를 들어, 운전자가 자동차 기어를 “P”로 놓게 되면, 시동이 걸리지 않도록 만들어 급작스러운 출발이나 엔진과열과 같은 사고를 미연에 방지 할 수 있습니다.

그리고, 트렁크나 자동차 문이 정상적으로 닫혀 있지 않을 경우, 운전자에게 대시보드나 소리를 통해 안내하여, 고속 주행 시 발생 할 수 있는 사고를 미연에 예방 할 수 있도록 설계되어 있습니다.

지금은 잘 사용되진 않지만 플로피 디스켓에서도 포카 요케를 찾아 볼 수 있습니다.

3.5인치 플로피디스켓의 우측 모서리에는 작은 홈이 하나 있었는데, 이 홈에 걸려있는 작은 플라스틱의 위치로 해당 디스켓의 읽기/쓰기 상태를 제한 할 수 있습니다.

사용자는 플로피 디스켓의 홈을 통해 컴퓨터에 삽입하지 않더라고 물리적으로 디스켓의 제어 상태를 쉽게 알 수 있고, 디스켓에 중요한 데이터가 있을 경우 레이블을 통해 알려 줄 수 있지만 원천적으로 쓰기 권한을 제한하여, 사용자가 중요한 데이터를 삭제하는 실수를 방지 하게 할 수도 있습니다.

2009년 현재, 플로피 디스켓은 USB에 밀려 거의 사용되지 않습니다. 다만, USB와 같이 새롭게 부각받는 저장 매체에도, USB를 뒤집어 꼽지 못하도록 만들거나, 저장소의 잔여 공간을 시각적으로 안내해 주는 등의 포카 요케 디자인 방법론이 활용되고 있습니다.

네이버, 다음등의 포털 사이트에서 자주 접하게 되는 검색어 자동 완성기도 포카 요케 방법론을 도입한 사례입니다.

검색어 자동 완성기는, 사용자가 검색어의 일부를 입력하면 해당 키워드와 유사한 키워드를 제안해 주는 기능으로, 구글에서 처음 도입 하였습니다. 이 기능은 Visual Studio와 같은 개발 도구에서 유용하게 사용하는 인텔리센스 팝업에서 힌트를 얻었다고 합니다.

인텔리센스 팝업은 코드 힌트 팝업으로도 알려져 있는데, 개발자가 개발 인터페이스에서 작업하는 과정 중 입력한 키워드 일부가 미리 선언된 클래스나 변수, 메서드와 일치한다면 팝업을 통해 나타내는 기능으로, 이 기능을 적절히 활용하여 개발자들은 개발 시간 단축과 실수 방지의 효과를 누릴 수 있어, 많은 개발자들이 상당히 유용하게 활용하고 있는 개발 도구 중 하나입니다.

재미있게도, 검색어 자동 완성기는 한국에서는 실수방지 측면에서도 사용되고 있는데, 사용자가 한국어로 구성된 문장을 영어로 입력할 경우 검색어 자동 완성기에서는 그 문장을 한글로 바꾼 형태로 제안 해 주기도 합니다.

하지만 인텔리센스 팝업과 달리 자동 완성기능에는 문제점이 있는데, 자동 완성기에서 제안하는 키워드는 사용자가 입력한 키워드 중 선호도를 분석하여 제공하는 데이터로, 인텔리센스 팝업과는 달리 제공되는 데이터가 상당히 유동적이고, 집단 지성에 강하게 의존하는 기능이어서 컨텐츠에 따라 제공되는 제안어의 정확도 차이도 있을 수 있습니다.

이외에도 종이 분쇄기에는 손이 들어가지 않도록 설계해 둔 것과, 에스컬레이터에 발 걸림 방지 솔을 달아 두어 사용자에게 경고를 나타내는 것도 포카요케 방법론 사례라고 볼 수 있습니다.


RIA와 포카 요케

앞서 포카 요케 방법론이 적용된 사례들에 대해 알아보았는데, 최근에는 컴퓨터와 사용자간의 인터렉션을 설계하는데에도 흔히 사용되는 디자인 방법론이기도 합니다.

특히, 하이퍼링크와 같이 직관적이고 획일적으로 구성된 웹과 달리, 다양한 인터랙션 도구를 제공하고 있는 RIA 플랫폼에서 사용자의 실수가 빈번하게 발생 할 수 있습니다.

따라서, RIA 플랫폼에서 UX 디자인을 설계할 때에는, 사용자들의 인터렉션을 면밀히 분석해서, 발생할 수 있는 실수를 미리 예방하는 것이 가장 좋습니다.

그럼, RIA 플랫폼에서 포카 요케 디자인 방법론의 적용 사례를 살펴 볼까요?

 

현재 대부분의 RIA 플랫폼은 위와 같이 객체에 대한 클릭, 멀티 터치, 키보드 입력, 데이터 입력등의 인터렉션을 지원하고 있고, 위의 네 가지 인터렉션이 가장 빈번하게 발생하고 있습니다.

RIA 플랫폼에서 제공하는 이들 인터렉션은, 웹과 달리 상당히 높은 자유도를 가지고 있으며, 이들 인터렉션을 적절히 고려하여 사용자 경험에 마침 맞는 애플리케이션을 저작 할 수 있습니다.

다만, 하이퍼링크를 이용해 정보의 확장이 발생하는 웹과 달리, RIA 플랫폼은 여러 인터렉션들을 활용해 사용자가 목표로 도달하는 과정을 다원화 할 수 있는데, 이 과정에서 여러 실수가 발생 할 수 있습니다.

 

위의 도표는, RIA 플랫폼에서 제공하는 주요 인터렉션에 대해 일반적으로 발생 할 수 있는 실수들을 나열해 본 것입니다.

도표에서 나타낸 상황 이외에도 여러 실수가 발생 할 수 있는데, 위의 상황들의 공통점은 애플리케이션의 시나리오에 마침맞지 않은 상황에 도달 한 것이라고 볼 수 있겠네요.

 

그리고, 위의 도표는 위의 실수에 대해, 포카 요케 디자인 방법론을 이용해 해결 방법을 제안한 것 입니다.

앞서 살펴본, 포카 요케 디자인 방법론에 따르면, 사용자가 겪게 될 실수를 최대한 피해가고(사전방지), 사용자의 실수를 즉시 알려주는(오류탐지)등의 대응을 하여, 사용자들이 당황하지 않도록 하는 것이 중요한데요.

위 도표의 대안방법들도, 잘못된 객체 클릭과 같은 사용자의 실수 인터렉션이 발생한 후 즉각적으로 사용자에게 알리는 것과, 키보드 입력 제한과 같이 사용자가 실수하지 않도록 미리 막아두는등의 방법으로 나뉘어져 있습니다.

이러한 실수 방지를 위해, 별도의 코딩이 필요하지만, 대부분의 RIA 플랫폼에서는 사용자의 실수를 앞서 방지하고, 즉시 알려 줄 수 있는 여러 유용한 도구들이 있습니다.

예를 들어, 실버라이트로 이미지 에디터를 개발 할 경우에 대해 생각해 봅시다. 이 애플리케이션은 이미지 에디터 인터페이스에서 사용자가 편집할 이미지를 업로드 다이얼로그를 통해 불러오는 과정을 거칠 것입니다.

 

하지만, 사용자들은 텍스트 파일 처럼, 이미지 에디터에서 사용되지 않는 파일을 로드 할 수 있는데, 이 경우 사용자가 실수를 한 것임으로, 사용자 인터페이스에 오류를 통해 다시 파일을 불러올 것을 안내할 수 있습니다.


위와 같이 사용자에게 오류를 즉시 안내해주는것도 좋은 포카요케 설계이지만, 실버라이트를 비롯한 닷넷 프레임워크에서는 이러한 실수를 미리 예방할 수 있는 도구를 지원하고 있는데, 업로드 다이얼로그에서 사용자가 이미지 파일 이외의 파일을 선택하지 않도록 제한해 둘 수 있습니다.

 

이처럼, 실버라이트를 비롯한 여러 RIA 플랫폼에는 사용자의 실수를 미리 예방 할 수 있는 여러 도구들이 존재합니다. 아울러, 이벤트 리스너를 이용해 사용자의 인터렉션을 추적하여, 개발하는 애플리케이션과 마침 맞는 오류 탐색기 및 실수방지기를 개발 할 수 있습니다.

크리에이티브 커먼즈 라이선스
Creative Commons License