쿱미디어 - 인터넷 지켜보기

by 에린

(아주 오랜만에 올라오는 포스팅이군요 ㅜ 쿱미디어 더 분발하겠습니다!)

통합검색 페이지를 디자이너가 한 것이라고? @.@

사실, 저도 인터넷 포탈사에 입사하기 전까지는 "통합검색"이라는 페이지를 디자인하는 디자이너가 있는
줄도 몰랐습니다. :P
심지어는 검색 페이지를 디자인하는 디자이너가 여러명 된다는 것을 알았을 때 깜짝 놀랐습니다.
그저 혼자서 추측해 보기를 '검색을 담당하게 되면 디자인보다는 HTML 코딩을 주로 하겠구나보다.'
정도로만 생각했었습니다. 아마 지금 제 글을 읽으시는 분들도 저처럼 그렇게 추측하셨을 것 같아요.

통합 검색결과 페이지를 디자이너가 디.자.인. 한 것 이라고?
그렇습니다, :) 디자이너가 반드시 필요한 서비스 중에 하나가 검색이더군요.
User research와 테스트는 물론, 생각 외로 고도의 디자인이 필요하고,
작은 디테일에서 큰 차이를 낼 수도 있는 서비스가 검색이기도 합니다.

검색 사용성의 주요한 특징

        • 검색은 읽을 꺼리(컨텐츠)를 찾아 브라우징하면서 순환하는 user flow가 아니라
          키워드를 검색하여 원하는 것을 찾게 되면 바로 '탈출' 하게 되는 flow입니다.
        • 유저는 키워드로 대변되는 '분명한' 목적을 가지고 검색페이지에 들어 오게 됩니다.
        • 유저들은 검색페이지를 상단부터 빠르게 스캐닝하며, 검색한 키워드와 결과의
          매칭(볼딩된 키워드)을 중심으로 시선을 이동하며 스크롤다운합니다. 
        • 원하는 것을 빨리 찾을 수록 머무는 시간도 짧습니다.

어찌보면 검색결과에 오래 머무르면 머무를 수록, 하단의 페이징 네비게이션을 클릭하면 할 수록,
원하는 것을 찾지 못했다는 결론인데요.
여기서 개인적으로 궁금한 것은 유저가 비슷한 키워드를 치면서 계속 검색에 머물러 있다면,
그 검색은 정말 좋은 검색일까요? ^^

가장 중요한 디자인 이슈 : 가독성(readability) 

검색 페이지는 내러티브가 있는 읽을 꺼리가 아니다보니 '문맥상....'의 이해에서 오는 가독성이
현저하게 떨어지게 됩니다. 또 원하는 것이 분명한 상태로 유입된 유저들은 그들이 사용하는
시간(인내력)이 부족하다는 한계상황도 가지고 있구요. 

         '텍스트의 양은 사람들이 텍스트를 읽기 전에 심리적으로 상당히 영향을 미친다.
          일반적으로 텍스트가 너무 길거나 많다고 인식되면 내용과는 무관하게 읽기를 주저하는 속성이 있다.' 
          - 정보디자인 교과서 中 p166-  

원하는 것이 있지만, 텍스트가 빼곡한 페이지에서 내가 원하는 것과 일치하는 것을 찾는 다는 것은
텍스트의 양에서, 벌써 심리적인 긴장감을 주기도 하는 것 같습니다.
따라서 유저들은 더욱 더 급해지고, 친근하지 않게 느끼지 못하므로 부가적인 기능 따위는
눈에 들어오지 않게 되는 것이죠.

        가독성을 사수하는 간단한 방법

        1  자간보다는  낱말사이를 넓게 
        2  낱말사이보다는 행간을 넓게
        3  행간보다는 모듈과 모듈 사이의 간격은 넓게
      
        자간 < 낱말사이 < 행간 < 모듈사이
        즉, 자간보다 행간이 넓을 수록 행간보다 모듈 사이가 넓을 수록 가독성이 높아집니다.

어쩌면 제가 말씀드린 3가지 방법에 대해서,
"그게 어려운건가요?" "너무 당연하지 않나요?"라고 질문하실 분들도 있으실지 모르겠습니다.
검색이 발전한데는 검색광고라는 수익모델도 큰 몫을 했는데요.
해외의 경우와 달리 한국의 포탈들의 검색광고 리스팅은 검색결과의 우측이 아닌,
검색결과 상단에 자리를 하고 있습니다. 즉, foldline(스크롤하지 않아도 보이는 영역) 위의 영역은 돈입니다.
스크롤하지 않은 상태에서 광고와 정보를 동시에 보여줘야 한다는 이유로 한국 포탈에서는 글줄사이의 간격(행간, Line spacing)나 모듈사의 간격을 디자이너의 판단만큼 확보하기는 어려운 현실이기는 합니다.


줄을 세워라 : Hierarchy(계층구조) & Priority(우선순위)

앞서 검색에서 가독성이 가장 중요한 이슈라면, 정보 디자인에서는 "하이어라키"만 고려해서 디자인해도
훌륭한 디자인을 만들 수 있습니다. 또 하이어라키를 표현하기 위해서는 전체 정보안에서의 우선순위가
선명하게 드러나야 합니다.

음.. 간혹, 적당히 버무려진 컨텐츠를 디자이너에게 넘기며 "예쁘게 해주세요~" 이런 경우가 있는데요.
본판 불변의 법칙이 비단 얼굴에만 있는 것이 아닙니다. 우선 순위가 명확하지 않은 정보는 디자인으로
절대 포장되지 않는 것 같습니다.

검색에서는 거의 비슷한 모듈(결과값)이 반복적으로 나오므로, 전체 페이지안에서의 하이어라키보다는
1개의 모듈(결과값)안에서의 하이어라키 표현이 더 중요합니다.
아래 단위모듈을 보시면 1번부터~4번까지의 순서가 중요도의 순서입니다.

        1  타이틀 : 타이틀에 검색어 매칭시 클릭값이 높음
        2  본문내용 (description)  : 어떤 내용일지
        3  URL : 어디서부터 온 정보인지 단서를 줌 
        4  부가 링크

즉, 링크가 걸려있는 타이틀이 가장 중요합니다. 유저가 입력한 검색어가 타이틀에 매칭될 경우,
클릭할 확율이 높습니다. 때로는 타이틀에 매칭되는 결과값이 적을 경우, 검색이 잘 안되다라고
느끼는 심리적인 요인도 발생할 정도입니다.
물론 유저들의 시선은 볼딩된(매칭된)키워드를 중심으로 따라 스크롤 다운합니다.

유저를 존중하라 : 키워드 Bolding

검색한 키워드만 볼딩하여 보여주는 것은 매우 중요합니다.
그것은 유저가 원하는 정보에 근접한 링크를 찾기 쉬울 뿐더러,
"당신이 검색한 키워드, OOO을 중심으로 찾은 결과입니다" 이런 존중의 메세지도 함께 주기 때문입니다.

천편일률적인 검색 디자인

솔직히, 서치를 디자인 하는 것이 피곤하면서도 하다보면 나름 재미있는 구석이 있는 것이.
"사용성"과 "디자인 디테일"을 가장 치열하게 고민하게 되면서도, 동시에 한계상황이 크다보니
모랄까. 도전의식도 생기고, 오랫동안 고민한 문제가 해결이 되면, 이게 정말 디자인이 아닌가?하는 생각도
들곤 합니다만. 그럼에도 여전히 아쉬운 것은 국내외 모든 포탈들의 검색디자인이 거의 흡사하다는 것입니다.
정말 이 방식(UI) 밖에는 없는 것인가? 
 
여기서 잠깐! 퀴즈 하나 낼까요? ^^
아래 1번, 2번, 3번은 각각 어느 포탈일까요?

정답을 말씀드리면,
1번은 네이버, 2번은 야후, 3번은 다음입니다.
디자이너들 눈에나 보일법한 미세한 차이 외에는 대부분의 (통합)검색 디자인은 상당히들 흡사합니다.
통합검색, 지식검색, 클러스터링 등등 그동안 많은 검색들이 나오고, 또 트렌드가 바뀌고
누군가 간간히 새로운 UI를 시도해보고, 친근하게 보이도록 부드러운 컬러를 쓰고, 컨텐츠를 넣기도 하는 등.
많은 노력을 해보았음에도 결국에는 가장 Basic하고 심플한 UI가 가장 좋다고 데이타가 말해주고 있습니다.
그럼에도 불구하고, 늘 이 질문을 던져 봅니다.
과연 이 UI가 최선인가?

여전히 가지고 있는 질문 몇가지들

검색 UI는 둘째로 치더라도, "키워드"로 서치하는 방식이 정말 쉬운가? 하는 궁금증이 늘 드는데요.
개인적으로도, 어떨 때는 어떤 키워드로 검색해야할지 난감할 때가 있습니다.
저 인터넷세상에는 어마어마한 정보들이 있는데 나는 지금 몇 개의 웹페이지와 블로그만 반복적으로 
만나며 겉돌고 있다는 느낌이 들거든요.

여러분은 안그렇세요?
아마 쿱미디어에 오시는 분들은 대부분 헤비유저들이실테니 안 그러실 수도 있겟네요. ^^;;;;

하지만 저는 유저들이 자신들이 찾고 싶은 정보를 "키워드"라는 방식으로 생각을 전환할 수 있는지 궁급합니다.
동양사람들의 경우 특정부분만 떨어뜨려 생각하기 보다는 전체 Context를 생각하는 방식으로 사고하는
경향이 있는데 자신들이 궁금한 것을 몇가지 키워드 압축하는 것이 정말 쉬운지? 하는 생각이 듭니다.
 
예를 들면 생각은 아래처럼 하는데.
이것을 서치를 통해서 알아내기 위해서는 "키워드"라는 방식으로 압축하여 여러번 검색해야 하니까요.

        이효리가 어제 무슨 텔레비전 프로그램에 나와서 다큐멘터리 같은 식으로 찍은 프로그램인데
        프로그램 제목은 생각나지는 않지만, 음악프로였던 것 같다. 그 프로에서 이효리가 입고 나온 
       핑크색 원피스가 어떤 브랜드 있지 알고 싶다.

흠...이런건 검색하지 않고, 패션이나 이효리 카페에 가입해서 알아내야 하는 것인가요? ㅎㅎ   

추가로 제가 검색 디자인을 몇 년간 하면서 여전히 풀지 못한 궁금증은 다음과 같습니다.

        • 검색에서 디자인 Identity를 만들 수 있는가?
        • 10년이상 학습된 성숙한 마켓에서 Usability를 바꾸는 것이 가능한가?
        • 한국방식의 통합검색이 편리한가? 구글, 야후닷컴 방식의 웹서치가 편리한가?
        • 유저에게 서치란 어떤 의미일까? 그저 컴퓨터를 사용한 것? 아니면 진짜 원하는 것을 찾는 행위인가?

마지막으로 여러분께 의지해봅니다. :P

여러분은 검색을 사용하시면서 어떤 불편함이 있으셨나요?
혹은 이런 점이 편했다 하는 것이 있으신가요?
만약, 의견이나 의문점이 있으면 남겨주시기 바랍니다.
앞으로 문제를 해결하고 도전하는데, 많은 도움이 될꺼예요. ^^

by 에린


너무 공부를 게을리 하지 않았나....라는 생각이 들어 서점엘 가도 공부가 될만한 책들이 드문 게
현실입니다. '필독서다', 'UI의 기본이 되는 책이다' 이런 해외서적들도 번역본이 많이 드물구요.
그런 점에서 최근에 읽을 만한, 아니 공부할 만한 책을 발견해서 스터디를 하고 있는데,
도움이 많이 되어 여러분께 소개해드립니다.

이 책은 분명 좋은 책입니다. 특히, 비주얼디자인에 베이스를 둔 UI 디자이너들에게는 더욱 필독서라고
생각되어 집니다. 다만, 제목처럼 "교과서" 같은 책이라 혼자 읽으면 지루할 수 있으니,
팀 동료들과 함께 스터디를 한번 해보시길 권해드립니다. 제가 지금 그렇게 해보고 있는데,
스터디로는 어렵지도 않고, 또 각자의 생각을 나눌 수도 있어서 훨씬 더 재미있게 읽을 수 있습니다.

경력이 좀 있으신 디자이너 분들은 종국에는 아래와 같은 결론과 의문에 도달한 분들이
꽤 있으실 것 같은데요.

       • 훌륭한 정보 시각화는 꾸미기(Decoration)나 스타일링이 아니다.
       • 똑똑한 기획자 있고 컨텐츠가 좋으면 굳이 비주얼 디자인이 필요한 것인가?
       • 정보를 시각화(Visualization)할때 어떤 규칙(요령)들이 있는가?
       • 사용성(Usability)와 시각화(Visualization)은 어떤 상관 관계가 있는가?

이 책을 읽고 있는 제가 결론부터 말씀드리면 결국에는 잘 짜여진 정보가
시각화(Visualization) 제대로 되지 않으면 말짱 헛것이라는 겁니다. 혹은 잘못된 시각화가
잘 설계된 사용성(Usability)까지도 망칠 수 있는 것이지요.

그럼, 책을 조금 더 구체적으로 살펴보겠습니다. 이 책에서 제가 집어낸 마음에 드는 2가지는 다음과 같습니다.

    • 한글로 된 책이라는 점
       당연히 한국 사람이 썼으니, 한글로 되어 있는 것이 당연하겠지만,
       이 바닥에서 이 정도 내용의 한글로 된 책 구하기 쉽지 않습니다.
       게다가 이런 시각으로 쓰여진 책은 번역서들도 드물구요.

   •  정보의 "시각화"에 조금 더 비중이 있다는 점
       기존에 UI나 정보 디자인 어쩌구의 책들은 대부분 Usability에 촛점이 맞추어져 있고
       그것의 근본도 모른채 그것들의 "현재 현상"만 나열된 것이 많았습니다.
       하지만 이 책에서는 누가 정보를 설계하고 디자인 하건 간에 그것을 "시각화"하는 것이
       중요하며, 그 시각화는 의미를 함축한 정보로서의 디자인이 되어야 한다는 방향에서
       서술된 책입니다.
       엎어치나 매치나, 이마나 마빡이나 싶겠지만, 아마 비주얼 디자이너들에게는
       좀더 쉽고 매력적인 접근이라고 생각되어 집니다.
       자연스럽게 Usability와 Visualization 사이의 상관관계를 고민해보는 식으로 말이죠.


                Text book of information design 
                오병근,강성중 공저 |  안그라픽스 |  2008년 04월   
                정가 23,000원 | 페이지 344 / 822g


나이팅게일도 정보 디자이너
다이어그램, 지도 등은 상상할 수도 없을 만큼 오래전부터 인간이 표현하는
최고(古)의 정보 디자인이였다고 합니다.  
백의 천사 나이팅게일조차 자신의 생각을 다이어그램으로 표현하여 간호사 역할의 중요성을
설득했다고 합니다. 이 책에 그 차트가 나와있습니다.
정보와 그것이 시각화가 되었을때는 무서운 힘을 발휘 하는것 같습니다.

정보 기록의 변혁과 시민의식
P.58  구텐베르크의 42행 성서 - 정보기록의 변혁
15세기 중엽 신성 로마 제국의 요하네스 구텐베르크는 인쇄술을 혁신적으로 발전시킴으로써
인류가 정보를 종이에 자유롭게 기록하고 표현할 수 있게 했다. ...(중략)....
정보의 전달과 커뮤니케이션이 종이 매체에 의해 대량으로 이루어짐에 따라 시민의식이
점차 높아지고 기술 문명이 급속도로 발전, 전파되는 계기가 되었다.
이부분이 저는 정말 재미있었던 것이. 현재 인터넷이 15세기의 종이와 인쇄의 역할을 또한번
하고 있는 것 같습니다. 따라서 정보 디자인은 단순히 인터넷에 국한 되었던 용어가 아니라
15세기부터 필요로 했던, 있어 왔던 분야였던 것이지요.

물론, 이 책에서 아쉬운 부분도 있습니다. ^^;;;
좋은 그림 자료들이 많았지만, 설명이 충분하지 못한 부분들도 살짝 보이구요.
서점에 가셔서 보셔도, 볼 수 없도록 비닐 포장되어 있다는 점입니다.

Visualization과 관련된 좋은 슬라이드가 있어서 함께 소개합니다. 참고되세요~