권씨의 신기한 세상 탐험기

• 좋은 UX는 레이블링만으로도 가능하다.(I.A Information Architecture UI UX 레이블링 웹 웹기획)2009-04-20 19:19:36

이 글은 라디오스타님의 2009년 4월 20일의 미투데이 내용입니다.

좋은 UX는 레이블링만으로도 가능하다.

 요즘 갑자기 UX에 대한 글을 쓰고 싶은 욕망이 타오르는 군요 +_+ 뭐 제가 UX 전문가는 아닙니다만, 그래도 이 분야는 참 재미있어서요 아래의 포스팅에도 적었습니다만 전 원래 I.A를 공부하던 녀석이었습니다. 그래서 사실 UX라는 광대한 분야에 대한 전문성은 별로 없습니다만 그냥 '사람이 편하게 사용할 수 있는 웹 사이트'는 저 역시 많이 고민하고 생각해왔다고 생각합니다. 사용하기 쉬운 사이트는 어떤 사이트 일까요? 음 한마디로 정의하기가 굉장히 어려운 것 같습니다만, 제 개인적인 철학으로는 "어떤 정보를 가장 빠른 시간 내에, 혹은 최적화된 속도로 유저들에게 전달하는 것" 이라고 생각합니다. 

 

 I.A에도 여러 가지로 나눌 수 있습니다만 사실 저는 공부하면서 이런 생각을 했습니다. I.A는 결국 사람들에게 '어떤걸, 어떻게 전달하냐' 가 관건인 분야가 아닌가 하고요. 어떤 컨텐츠를 사람들에게 어떻게 효과적으로 전달할까 라는 고민이 I.A단계에서 시작되고 그것의 고민이 끝나면 그것을 얼마나 효율적으로 배치하냐라는 고민에 있어서는 UI라는 분야로 넘어가니까요. (일반 적으로)그렇다면 그것, 혹은 어떤 것들을 어떻게 유저들에게 전달해 주느냐. 라는 것 같다라는 생각을 했습니다. (아 이건 극히 제 개인적인 주관입니다. 엄밀하게 따지면 I.A도 UI분야의 일부분을 언급하고 있으니까요) 그래서 그런 류의 공부를 많이 했는데요. 이 중에서 제가 가장 으뜸이라고 생각하는 것이 바로 레이블 링입니다. 아 그런데 쓰고 보니 굉장히 말이 어렵게 쓰이고 있는데요. 벌써 이렇게 어렵게 나올 줄이야...

 

 뭐 결국 그겁니다. A-Z까지의 정보가 있습니다. 이 정보들이 모든 사람들에게 동일하게 갈 필요는 없을 것입니다. 중간에 H, I만 필요한 사람이 있을 것이고 B, D만 필요한 사람도 있을 테지요. 그렇다면 이 어떤 종류의 컨텐츠들을 그렇다면 A-B-C-D 순차적으로 보여주느냐 A-B, C, D- E, F, G 같은 식으로 전달해 주느냐 이것들을 고민해야 한다는 것이겠죠, 참 쉽죠잉? 그에 대한 고민이 끝나면 UI로 넘어가서 사이트 내에 배치를 어떻게 하냐 라는 고민으로 넘어가는 것이고요. 그렇다면, 이 단계에서 중요한 것은 사람들에게 "제가 이래이래 설계 했으니 유저님도 이래이래 가면 원하시는 정보를 얻을 수 있을 것입니다" 라고 전달하는 것이 가장 중요합니다. 이 단계에서 결국은 결과보다 방법이 중요한 것이니까요. 

 

 그렇다면 그 단계에서 I.A 설계자가 유일하게 유저 분들과 대화할 수 있는 창구는 레이블 링입니다. 배치는 두 번째 문제입니다. 제가 예전에 나름대로 사용자 조사를 한 결과 사람들은 어지간하게 어지럽게 하지 않는 이상 자신이 다음 행동으로 '다음' 이라는 버튼을 눌러야 한다고 인식하면 '다음' 이라는 버튼은 결국 찾아내더군요. 그렇다면 이 '다음' 이라는 이름이 중요하다는 결과가 나옵니다. 사람들에게 '이 버튼을 누르면 다음 페이지로 넘어가요' 라는 행동을 유발할 수 있게 하는 버튼을 만들어야 한다는 것이지요. 이 버튼이 예를 들어 다른 이름으로 붙여졌다면 어떻게 되었을까요? 배치가 아무리 쉽게 되었어도 사람들은 분명 고민을 할 것이고 그 고민은 결과적으로 사용자들에게 "늦게" 원하는 정보를 찾게 할 것입니다. 

 

 그렇다면 결국은 레이블 링입니다. '다음' 이라고 명명되어야 할 버튼에 '이 버튼을 누르세요' 라고 명명한다면 어떻게 보면 비슷하지만 전혀 다른 의미도 될 수 있으니까요. 

 

 그런데 이 레이블 링은 생각보다 비중이 그리 크지 않습니다. 배치라던가, 컨텐츠의 종류만을 어렵게 생각하고 레이블 링을 그냥 넘어가는 경우가 많죠. 그냥 모두 카피라이터에게 넘겨버리던가 이 부분에서 좀 센스만 발휘하면 오히려 더 좋다 좋다 하는 경우가 많습니다. 그래서 이 레이블 링이 잘못 설계 된 것들은 생각보다 쉽게 찾아볼 수 있습니다.

 

 뭐 이야기가 잠시 비판조로 넘어갔는데요; 아무튼 이 레이블 링만 잘해도 사람들의 사이트를 이용함에 있어서의 사용 성을 크게 증가시킬 수 있습니다. 다음, 이전 버튼~ 저장, 취소 버튼 및 이 페이지를 누르시면 어디로 넘어갑니다. 그리고 가장 중요한 오류시의 대처에 대한 레이블, 이 페이지가 없습니다. 뒤로 가기 버튼을 눌러주세요. 링크가 잘못되었습니다. 이전 페이지로 넘어갑니다. 등 이런 레이블만 잘 만들어 주어도 사용 성이 크게 상승하고 유저 만족도가 상승했던 자료들도 많았습니다. 

 

 레이블이 홀대 받는 이유 중에 하나는 이미 대부분의 레이블이 어느 정도 보편화가 되었기 때문입니다. 하지만 가끔 자신의 서비스에 대한 레이블을 지을 때 버튼들의 배치가 어떻게 되어 있는가, 혹은 서비스 특성에 따라 좀 다르게 지어야 할 것들이 많은데 이것들도 모두 보편화 된 것들로 하다 보니 아직도 이런 레이블에 따른 오류가 계속되는 것 같습니다. 

 

 아무튼 뭐 제 개인적인 사견들이었지만 저는 개인 적으로 UX 작업을 할 때 가장 중요하게 여기는 요소의 하나로 레이블을 넣습니다. 그 만큼 유저와의 인터렉션이 활발하게 이루어지는 것도 없으니까요. ^^

 

왜 웹 표준을 쓰는 것인가?

 

 기존에, 아니 지금도 인터넷의 기본이 되는 언어는 바로 HTML

(Hypertext Markup Language) 입니다. 이 HTML은

이 HTML은 HTML 2.0, HTML 3.2, HTML 4.01, XHTML1, XHTML1.1

등으로 수 많은 발전을 해왔고, 많은 응용을 통해 개량되고

개선되어 가고 있습니다.

 

 인터넷이 생기고 나서 수 많은 사람들은 HTML을 가지고 많은

웹 페이지를 생성해 내고 있었는데, 왜 최근 들어 갑자기 웹 표준,

접근 성 같은 말들이 화두가 되었을까요?

 

단순하게 크로스 브라우징을 위해서 일까요?

아니면 그냥 W3C(World Wide Web Consorticum)가 권고하니까

그 수많은 돈을 들여 표준으로 전환하는 것일까요?

 

사실 이 문제는 아주 오래 전에 논의되었고, 제 생각에 어느 정도

답이 나왔다고 생각합니다만, 최근에 아직 이런 문제에 대해서

자유롭지 못한 몇 분을 알게 되어 그 분들을 위해 간략하게 적어보도록 하겠습니다.

 

 

 원래 HTML이 근간이 되던 시절에는 사실 상 <TABLE> 태그 등을 통해

화면 구성을 하게 되었습니다. 이 TABLE 태그는 사실 제가 보았을 때

그리 나쁜 화면 구성 방법론이 아닙니다. 어떻게 보면 지금 화두가 되고

있는 표준보다 쉽죠, 그런 면에서는 전 합격 점을 주고 싶습니다.

 

하지만 왜 그 어려운 웹 표준을 사용해야 할까요?

 

그 이유는 잠시 시대를 거슬러 올라가, WEB2.0 이란 말이

나오던 시절로 올라가겠습니다. 역사를 한번 간단하게 살펴보죠.

 

일단 WEB 2.0 이란 말은 팀 오라일리사가 브레인 스토밍 과정 중

그때 당시 유저들의 웹 활동 패턴이 조금씩 달라지고 있음을 감지했고,

아마존이나 블로그등을 통해 기존의 인터넷 환경과는 다르게 변화하고 있다.

라는 가정에 나온 말이 바로 WEB 2.0 입니다.

 

간단하게 기술적으로 풀이하자면,

기존에는 사람들이 HTML이란 언어를 통해 직접 문서를 작성하고

서버 호스팅을 받아 개인 홈페이지 식으로 퍼블리싱 했던 반면에

그때 당시부터 사람들은 블로그나, 다른 플랫폼을 통해 HTML을 몰라도

인터넷에 글을 올릴 수가 있고 직접 적으로 참여하기에 이르렀습니다.

즉 정보의 생산이 그만큼 기술 적으로 편해졌죠

 

그걸로 말미암아 기존에는 HTML이란 장벽 때문에 정보 작성자가

주는 정보를 READER가 그냥 받아드리는 식이였다면, 그때 당시부터는

READER가 직접적으로 그 글에 의견을 달거나, 직접 글을 작성하는 등

쌍방향 소통이 가능해졌다는 것이죠 그래서 이제 참여 방식이 달라졌다~

해서 WEB2.0 이라는 말이 태동하게 되었습니다.

 

자 그럼 다시 시대를 거슬러 올라가 봅시다.

 

그 전엔 바로 시멘틱 웹이라는 것이 있었습니다.

SEMANTIC WEB이라는 말은 사전적 의미로 "의미 있는 웹" 이란 뜻이며,

영국의 팀 버너스 리라는 사람이 주창했습니다.

(팀 버너스 리 라는 사람은 웹의 창시자 이기도 합니다 :) 영국의 귀족

아들이라고 하더라고요.)

  

 

자 이제 대충 웹의 역사에 대해 다뤄봤습니다. 그럼 본격적으로

왜 웹 표준인가를 이야기 해보도록 하죠

 

사실, WEB2.0 이라는 말은 시맨틱 웹이라는 말이랑도 거의 대동소이합니다.

(엄밀히 따지만 완전히 다른 단어지만, 여기선 일단 같은 의미로 차용하겠습니다)

 

 그리고 혹시 유비쿼터스라는 말을 아십니까?

유비쿼터스란, 물이나 공기처럼 시공을 초월해 '언제 어디에나 존재한다'는 뜻의

라틴어(語)로, 사용자가 컴퓨터나 네트워크를 의식하지 않고 장소에 상관없이

자유롭게 네트워크에 접속할 수 있는 환경을 말합니다. 1988년 미국의 사무용

복사기 제조회사인 제록스의 와이저(Mark Weiser)가 '유비쿼터스 컴퓨팅'이라는

용어를 사용하면서 처음으로 등장했는데요

 

이 유비쿼터스의 근간이 되는 기술이 바로 WEB2.0 입니다.
유비쿼터스는 어떤 기기끼리의 서로간의 통신을 통해 정보를 받고, 보내주는

그런 시스템으로 굴러가는데요 그 중간에 바로 WEB이 자리잡는 경우가

대부분입니다. (자리잡지 않는 경우도 있습니다)

 

자 그럼 여기서 문제가 발생합니다.

 

 자 먼저 HTML의 어머니는 누구인지 잠시 살펴 봅시다 :)

원래는 SGML(Standard Generalized Markup Language)이라는 언어가 있었습니다.

이 SGML이라는 언어는 굉장히 방대하고 복잡한 언어로서, 문서 구조를 잡기 위한

DTD(Document-Type-Definition)가 굉장히 어렵고 시간과 비용이 많이 소요됩니다.

또한, SGML은 근본적으로 웹 환경을 고려하지 않았기 때문에,

지원하는 웹 브라우져같은 소프트웨어도 빈약한 상황이죠.

 

그래서 이 단점을 보완해서 나온 것이 HTML 입니다.

HTML은 SGML의 문법을 이용해서 만든 지정된 특정한 DTD로 SGML 같이

어떤 문서의 구조를 정의하는 기능이 아닌, SGML에서 파생되어 나온 언어에 의해

정의되고 그것을 통해 고정된 문서 구조를 가진 언어입니다.

즉 문법이 굉장히 단순하고 스타일링에 강한 모습을 보이는 반면,

문서 구조의 정의는 매우 어렵죠.

 

즉 HTML 은 근본적으로 데코레이션 언어입니다. 즉, 정의를 담는 언어라기 보단,

어떤 것을 꾸미고, 나타내주는 것에 최적화 되어있었던 언어죠

HTML을 통해 보여지는 문서는 사람이 보게 되면 사람은 지능이 있기 때문에

문장을 보고 우리가 의미나 구조를 해석해서 볼 수 있는 반면,

 

기계는 절대 그렇게 못하겠죠?

 

예를 들어서 제가 kwon.html 이라는 파일을 열었을 때,

컴퓨터가 만약에 <table> 태그 안에 있는 "나이: 25세" 라는 항목을

읽었습니다. 그렇다면 컴퓨터는 단순히 "나이: 25세" 라는 단어를 읽을 뿐,

권만진의 나이가 25세구나 라는 의미를 전달받지 못하게 됩니다.

 

예를 들어

 

<h1>권만진</h1>
<dl>
<dt>나이</dt>
<dd>25세</dd>
</dl>

 

 뭐 대충 이런 식으로 짜게 되면, 컴퓨터가 아! 권만진의 나이는 25세구나

라고 의미를 직접 해석할 수 있게 됩니다.

즉 HTML로는 기계가 의미를 알아듣게 하기가 힘들지만, 표준을 이용해서

작성하게 되면 컴퓨터가 알아들을 수 있는 단어가 된다라는 것이죠.

 

이런 연유로 나온 언어가 의미를 담을 수 있는 XML(extensible markup language)

이라는 언어입니다. 바로 SGML이 가지고 있었던 DTD를 이용해서 누구나 문서의

구조를 쉽게 정의할 수 있게 나와서 HTML이 가진 한계를 극복할 수 있게 했습니다.

 

그래서 웹 표준 위원회에서는 1998년 2월에 XML을 표준으로 제정하고

지금도 계속 계량화 되어가고 있죠.

 

때문에 표준이 중요한 겁니다.

단순히 웹만을 위해 표준이라는 것이 크로스 브라우징을 위한 것이다.

라고 만 생각하면 아주 1차원적인 발상이라는 겁니다.

 

표준은 앞으로 유비쿼터스를 위해, 기계도 읽어 들일 수 있고

의미를 받아드릴 수 있는 언어입니다.

 

그렇다면 이런 의문을 던질 수도 있겠습니다.

"그러면 모든 기계(디바이스)에 브라우저를 달면 되지 않아요"

 

하지만 모든 기계에 브라우져같은 큰 프로그램을 넣게 된다면

그 가격은 기하급수 적으로 단가가 올라갈 수 있습니다.

모바일만 하더라도, 풀 브라우징(Full-Browsing)을 위해

얼마나 많은 기술이 들어갔습니까? 그쵸?

 

자 결론입니다.

 

단순하게 문서를 스타일링 하기 위한 언어로는 HTML도 쓸만합니다.

 

하지만 의미를 담기엔 너무 먼 언어이기 때문에 WEB2.0에 근간한

유비쿼터스 환경엔 전혀 맞지 않을 수가 있죠.

 

이런 것을 모르고, 단순하게 크로스 브라우징만을 위해

표준으로 바꾼다? 라는 건 그 비용이나 시간적인 측면에서 보았을 때

설득력이 떨어지지 않나 싶습니다.

 

앞으로 만약에 누군가가 왜 웹 표준을 써야 합니까? 라고 물으신다면

이렇게 대답해 주세요

 

"유비쿼터스를 위해!"

 

 

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

 

초심자를 위한 주석

 

크로스 브라우징이란, 우리가 주로 사용하는 브라우저는 인터넷 익스플로러라는

브라우저로, MS에서 개발한 인터넷 브라우저입니다. 쉽게, IE 라고도 적습니다.

하지만, 아까 말씀드렸던 팀 버너스 리는 MS 직원이 아닙니다.

즉 HTML이나 다른 언어들이 MS에만 최적화가 되어있지 않겠죠?

IE도 분명히 한계가 있고, 그래서 다른 기타 브라우저도 많습니다.

대표적으로 최근 사용률이 증가하는 모질라의 파이어폭스(Firefox)나

구글의 크롬(Crome) 등이 있지요. 이런 브라우저들 사이에서 항상 동일하게

화면을 보여주는 것을 크로스 브라우징이라고 합니다.

 

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

 

고수들을 위한 주석

 

그래서 가끔 최근에 웹 퍼블리셔 사이에 이런 소리를 듣곤 합니다.

저긴 ul 이 아니야~ ol 이지~ 라는 말들,

하지만 중요한건 아까 말씀드렸듯이 문법이 아니라, 바로 의미입니다.

의미만 바로 살릴 수 있다면 너무 기술적으로 접근을 해서

표준이라는 의미의 융통성을 잃어버리시면 안되겠습니다 :)

 

UI 개발은 이제 좀 바뀌어야 하지 않을까??

아주 오래간만에 I.A 에 대해서 글을 쓰네요 ^^;;
I.A 라기엔 좀 부족하긴 하지만
어제 사실 KRnet 2008에 다녀왔습니다.

그곳에서 본 http://sketchpan.com/ 이라는 곳을 보면서
들었기도 했고 사실 예전에 대충 썻던 글이기도 하지만

위의 사이트를 잠깐 보고 아래의 글을 읽어주세요

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

과거에 GUI의 미덕은 다루기쉬운 인터페이스와 가독력,
즉, 휴먼인터페이스 도구에 의거한 GUI의 설계에 따랐다면,

지금에 와서는 조금 바뀌어야 한다고 생각합니다.

예전의 유져에게있어 클릭이란, 컴퓨터와 유져간의 피드백이 이루어지기 위한
하나의 목적이자, 컴퓨터를 하는것에 있어서 하나의 의무였습니다.
즉 클릭이 이루어지지 않으면 컴퓨터를 할수 없었고
그것이 바로 브라우징의 수단이였지만

현대에 이르러 터치패드, 햅틱 및 음성인식이란 기술이 등장하면서
클릭이란 의미 자체가 상당 부분 기존에 비해 격감되었고
앞으로 곧, 클릭이란 하나의 옵션으로 바뀌어질꺼라 감히 예상합니다.
 
기존의 클릭에 의한 Answer에 의해 사용자가 정보를 취하였다면
지금은 마우스를 그곳에 두거나, 특정 액션에 의해 미리, 짜여진 프레임 안에서
정보를 미리보기(review)할수 있는 기능이 제공되고 있는

지금의 웹안에서 비추어 볼때.

지금까지의 웹사이트의 UI가, 사용하기 쉽고, 알아보기 편한 GUI와
레이블링에 의존하여 유져의 클릭을 유발하였다면

이제는 유져의 클릭이 아닌 유저의 반응 자체라는 것을 발견하여
그것을 설계에 반영시킨 뒤
클릭이란 요소보다, 좀더 빠르고 쉬운 방법론에 의한  
새로운 GUI의 제작에 들어가야 한다고 생각합니다.

좀 더 개을러진 유져의 니즈에 부합하기 위해서도
그들은 결코 자신들의 흥미가 없는 사이트에선 드래그만있을뿐
클릭에 대해 상당히 비관용적이되지 않을까 합니다.

최근에 빌게이츠의 발언도 있었고 때문에 이 제안은 상당 부분 유효할 것 같습니다.

이것은 바로 노인분들과 장애우들을 위한 GUI 설계 역시 하나로
통합될수 있으므로 좀더 발전적이라 할수 있지 않을까요?

하지만 이 부분은 아직도 대부분을 휴먼 인터페이스의 안에서 설명해야 하므로
이 부분에 대한 이야기는 잠시 접고

아무튼

앞으로의 GUI는 아마 마우스나 기타 도구를 이용한 클릭이 아닌
터치나, 햅틱 등 지금까지 나온 수단 외에도 다른 것들이 있을 것이라 생각됩니다.

그렇다면 터치나 햅틱만 보더라도 이미 클릭이란 요소와는 달리
(마우스라는 중간 단계가 사라졌으므로)
이미지를 이용한 수단이라던지,
기타 등으로


다른 UI 방법론을 택하여야 한다고 생각합니다.









제 짧은 지식으론 여기까지 밖에 못쓰겠어요 ;ㅁ;