'쉬운 인터넷’은 성숙기에 접어든 21세기 인터넷 서비스의 화두다. 디지털 뉴스를 서비스하는 뉴스 사이트들은 ‘쉬운 인터넷’을 더욱 심각하게 고려해야 한다. 뉴스는 대중을 위한 것이기 때문이다.
‘쉬운 인터넷’의 출발점은 ‘유저빌리티’(Usability)다. ‘유저빌리티’를 굳이 우리말로 옮기자면 ‘유용성’이라고 할 수 있다. 쉽게 말해서 ‘얼마나 사용하기 쉬운가’를 재는 척도다.
XML이 됐든 HTML로 만들어졌든 뉴스를 보여주는 웹페이지는 뉴스가 독자를 만나는 접점이다. 독자에게 웹페이지의 뒷면은 보이지 않는다. 뉴스 서비스의 품질은 독자가 뉴스를 얼마나 편안하고 쉽게 볼 수 있는가 하는 프리젠테이션(presentation) 수준에 달려 있다. 읽기 편하고 사용하기 쉬운 뉴스 사이트를 만들기 위해서는 유저빌리티에 대한 고민과 이해가 선행돼야 한다.
유저빌리티(Usability)
유저빌리티는 어느 도구를 쓰는 이용자가 원하는 기능을 얼마나 쉽게 찾아내서 적절히 적용할 수 있는지를 가늠하는 것이다. 이를테면 VTR을 구입한 소비자가 예약녹화 기능이 너무 복잡해 좀처럼 이용하지 않는다면 그 예약녹화 기능의 유저빌리티는 실패했다는 말이 된다.
본디 유저빌리티는 가전제품 개발과정에서 폭넓게 적용돼 왔다. 최근 컴퓨터 소프트웨어와 웹 사이트 개발에 유저빌리티가 고려되는 경우 적은 비용과 노력으로 커다란 효과를 거둘 수 있다는 사실이 밝혀졌다. 유저빌리티는 ‘사용자에게 편리한’(user-friendly) 웹 사이트 디자인을 위한 핵심개념으로 자리 잡았다.
유저빌리티에서 고려할 점들로는 △ 쉽게 배울 수 있을 것 △ 효율적으로 이용할 수 있을 것 △ 기억하기 쉬울 것 △ 에러를 미리 방지할 것 △ 사용자에게 만족감을 줄 것 등이 꼽힌다.
웹사이트 디자인에서 유저빌리티 전문가들은 다운로드 시간, 페이지 크기, 서버 접속 기록 등 측정 가능한 데이터들을 분석해서 웹사이트를 보다 쉽고 편리하게 개선하기 위해 노력한다.
유저빌리티 휴리스틱스(Usability Heuristics)
인터넷은 우리에게 더 이상 생소하지 않다. 우리는 이미 자기도 모르는 사이에 인터넷에 익숙해져 있다. 그 동안 인터넷을 이용했던 경험이 쌓였기 때문이다. 그러는 중 우리는 어떤 웹사이트는 사용하기가 쉽고 어떤 경우는 왠지 모르게 불편하다는 느낌을 갖는다. 쉽고 편한 사이트는 다시 찾아지기 마련이다. 그러나 사이트 이용이 불편하면 우리는 웬만해서는 참지 않는다. 그저 마우스만 한 차례 클릭하면 얼마든지 많은 다른 사이트로 옮겨갈 수 있기 때문이다.
경험을 바탕으로 한 인터넷 사이트의 유저빌리티를 ‘유저빌리티 휴리스틱스’(Usability Heuristics)라고 부른다. 수많은 웹사이트가 성공과 실패를 거듭하면서 이용자의 공통적인 기대에 맞는 휴리스틱스가 정리될 수 있었다. 유저빌리티 전문가 제이콥 닐슨(Jacob Nielsen)은 그의 저서 ‘Usability Engineering’에서 대표적인 유저빌리티 휴리스틱스 10가지를 제시했다. 이 10가지 휴리스틱스는 일반 웹사이트 뿐 아니라 뉴스사이트에서도 반드시 고려돼야 할 웹사이트 디자인의 기본이라고 할 수 있다.
[표 3] 제이콥 닐슨의 10대 유저빌리티 휴리스틱스
△ 쉽고 간단하게 대화하라
△ 이용자의 화법을 따르라
△ 생각할 필요가 없게 하라
△ 연속성을 유지하라
△ 제 때에 피드백을 주라
△ 빠져나갈 곳을 확보하라
△ 지름길을 제시하라
△ 에러 메시지를 쉽게 하라
△ 에러를 사전에 막아라
△ 필요할 때 도움을 주라
휴리스틱스(Heuristics)
자신의 경험을 바탕으로 보다 나은 해답을 찾아나가는 행태를 연구하는 학문을 말한다. 생쥐를 이용한 미로찾기는 휴리스틱스의 가장 대표적인 실험이다. 생쥐를 미로의 입구에 놓고 반대편 출구를 찾아 나올 때까지 시행착오를 반복하게 하면 결국 지름길을 찾아낸다. 축적된 경험을 바탕으로 시행착오를 미리 줄여줄 수 있는 방안을 연구하는 것이 바로 휴리스틱스 본연의 자세라고 할 수 있다.
쉽고 간단하게 대화하라
한눈에 알아볼 수 있는 유저 인터페이스(User Interface)를 구축하라는 뜻이다. 색깔이나 선을 써서 같은 주제로 묶을 수 있는 내용들을 구분지어 준다거나 하이퍼링크가 걸려 있는 부분을 일반 텍스트와 달리 보이게 하는 것 등이 그 예다.
무엇보다 한 페이지 안에 너무 많은 것을 나열하지 않는 것이 좋다. 특히 웹사이트의 홈페이지에서 이런 실수가 자주 발생한다. 홈페이지에는 그 사이트가 갖고 있는 모든 것을 다 보여줄 필요는 없다. 이른바 ‘80/20 법칙’을 고려할 필요가 있다. 사이트가 갖고 있는 기능이 모두 100이라면 홈페이지에는 가장 많이 쓰이는 20만 보여주면 된다. 나머지 80은 한 번 더 마우스를 클릭해서 찾아가는 별도의 페이지에 따로 담아두도록 한다.
80/20법칙
웹사이트나 컴퓨터 응용프로그램이 100의 기능을 가졌다고 하자. 그중 가장 많이 쓰이는 20%의 기능만 가지면 80%의 이용자를 만족시킬 수 있다는 법칙이다. 나머지 80%의 기능은 초기화면 뒤에 숨겨놓더라도 20%에 해당하는 고급이용자들은 이를 기어이 찾아내 사용한다.
특히 PDA처럼 화면 크기가 작은 단말기의 초기화면을 디자인할 때 중요한 법칙이다.
개발자 입장에서는 한 가지 기능이라도 더 보여주고 싶어한다. 그러나 새로운 기능 한 가지를 추가하면 이용자는 한 가지 기능을 더 배워야 하는 부담을 갖는다. ‘적을수록 좋다’(less is more)는 교훈을 되새길 필요가 있다.
한 가지 기능이라도 초보 기능과 고급 기능으로 나뉠 수 있으면 과감히 두 개의 페이지로 쪼개는 편이 낫다. 사용자의 수준에 따라 기능을 두 개 이상의 레벨로 쪼개는 것을 ‘스캐폴딩’(scaffolding)이라고 한다. 스캐폴딩은 웹사이트의 검색 기능에서 많이 볼 수 있다. 홈페이지에 검색어를 칠 수 있는 입력창을 둔 것은 초보검색 기능이다. 이와 별도로 ‘고급검색’, ‘정밀검색’ 등의 링크를 다른 페이지로 연결시켜서 검색에 필요한 논리식을 이용해 여러 개의 키워드를 조합할 수 있도록 고급 기능을 별도로 제공하는 예가 그것이다.
이용자의 화법을 따르라
웹사이트를 만들 때 가장 범하기 쉬운 실수가 사이트를 개발하는 프로그래머가 사용하는 기술적 용어를 그대로 쓰는 일이다. 웹사이트에는 그 사이트를 찾는 독자들에게 가장 친숙한 용어를 골라서 써야 한다. 예를 들어, 학교 동창회 사이트인 ‘아이 러브 스쿨’에서 ‘사용자 id’를 ‘이름표’라고 하고 ‘로그인’을 ‘등교하기’라고 표현한 것이 좋은 예다.
특히 링크이름이나 주제분류이름과 같이 한 두 단어 길이의 짧은 용어의 선택이 매우 중요하다. 이같은 웹사이트 상의 짧은 용어들을 ‘마이크로컨텐트’(microcontent)라고 부른다. 마이크로컨텐트는 직관적이어야 한다. 한마디의 마이크로컨텐트를 봐서 이용자들은 그 링크를 누르면 무슨 일이 벌어질지 즉각 알아차릴 수 있어야 한다.
한두마디 단어로 불가능한 경우에는 메타포어(metaphor)를 사용할 수 있다. 메타포어의 대표적인 예가 아이콘이다. 윈도즈 아이콘 가운데 ‘파일 삭제’를 뜻하는 휴지통 아이콘은 훌륭한 메타포어 가운데 하나다. 이처럼 한눈에 봐서 무슨 기능을 할 것인지를 금방 알 수 있는 것이 잘 만들어진 메타포어다.
생각할 필요가 없게 하라
잘 된 웹사이트는 이용자에게 부담을 주지 않는다. 웹사이트 이용자들에게 성가신 일 가운데 하나가 날짜와 시간 입력이다. 2월을 ‘2’ 또는 ‘02’로, 오후 2시를 ‘2’와 ‘AM’ 또는 ‘14’로 웹사이트에 따라서 입력하는 방식이 저마다 다르기 때문이다. 이럴 때 잘 된 웹사이트는 아예 정해진 포맷을 미리 보여주고 선택만 하게 한다. 이용자로 하여금 생각할 필요가 없게 하자는 것이다.
이용자를 골치 아프지 않게 하는 데 좋은 방법은 용례를 미리 보여주는 것이다. 주민등록번호를 치면서 가운데 ‘하이픈’(-)을 넣을 것인지 말 것인지는 입력하는 예를 구체적으로 적시해주는 것이 최선의 방법이다.
많은 웹사이트에서 널리 쓰이고 있는 일반적인 관행은 가급적 그대로 따르는 것이 좋다. 예를 들어 보자. 웹브라우저에서 하이퍼링크의 기본 색깔은 파랑색이다. 마우스 포인터가 링크 위로 올라가면 빨강색으로 변한다. 한 번 클릭하고 나면 그 링크는 보라색으로 남는다. 이용자들은 이같은 시스템 기본 설정에 익숙해 있다. 그런데 웹페이지를 만들 때 하이퍼링크의 기본 색깔을 보라색으로 지정해 놓았다고 치자. 이용자들은 링크를 클릭했었는지 아닌지를 분간하기 힘들어진다. 이처럼 이미 널리 관행으로 굳어져 있는 요소는 함부로 손대지 않는 것이 좋다.
연속성을 유지하라
이용자가 한 웹사이트를 방문해서 여기저기를 돌아다닐 때 그가 여전히 그 웹사이트 안에 머물러 있다는 느낌을 확실히 줘야 한다. 사실상의 표준으로 굳어진 사례가 웹사이트 화면 왼쪽 윗부분에 사이트의 로고 이미지를 고정시키는 방법이다. 또한 사이트 전체를 일관하는 페이지 레이아웃과 색조도 연속성(consistency)을 유지하는 중요한 요소다.
사이트의 연속성은 눈에 보이는 디자인만으로는 부족하다. 기능상의 연속성의 유지가 중요하다. 예를 들어 회원 가입 과정과 회원 정보 변경 과정을 나타내는 웹페이지의 순서와 절차에 일관성이 있어야 한다. 이용자의 태스크(task)를 처리하는 일련의 과정이 사이트 전체의 흐름에서 벗어나지 않아야 한다는 말이다.
제 때에 피드백을 주라
에러가 났을 때는 반드시 에러가 발생했다는 사실을 알려줘야 한다. 거꾸로 에러는 발생하지 않았으나 기다리는 시간이 길어질 때는 정상적으로 작동하고 있음을 알려줄 필요가 있다.
아무런 피드백 없이 시간이 길어지면 이용자는 사이트가 멈춰버렸다고 생각하게 된다. 이용자는 그 사이트를 떠나고 만다. 그리고는 그 사이트는 불완전한 곳이라고 생각하고 좀처럼 다시 돌아오지 않는다.
빠져나갈 곳을 확보하라
어느 페이지에서든지 꼭 갖춰야 할 두 가지 링크가 있다. 하나는 그 사이트의 홈페이지로 돌아가는 링크고 다른 하나는 바로 앞 페이지로 돌아가는 링크다.
이용자가 클릭을 반복하다보면 웹사이트 트리구조에서 점점 깊은 페이지로 빠져든다. 자칫 웹사이트 안에서 길을 잃을 수 있다는 얘기다. 만일 홈페이지로 돌아오거나 앞 페이지로 빠져나오는 링크가 없으면 길을 잃은 이용자의 유일한 선택은 그 사이트를 닫아버리는 것이다.
지름길을 제시하라
웹 브라우징에서 가장 잘 알려진 지름길은 ‘즐겨찾기’다. 즐겨찾기는 자주 보는 웹사이트를 한번의 클릭으로 찾아갈 수 있게 한다. 일반 컴퓨터 응용프로그램에서도 지름길은 여기저기서 눈에 띈다. ‘파일 열기’는 메뉴를 일일이 찾아 클릭할 필요없이 키보드에서 Ctrl+O, 즉 컨트롤키를 누른 상태에서 알파벳 O를 치면 된다. 이를 ‘핫 키’(hot key)라고 부른다. 또한 [그림 14]처럼 최근에 작업했던 파일이 ‘파일 열기’ 메뉴에 별도로 나타나는 것도 지름길의 하나다.
웹페이지를 디자인할 때는 사이트 이용자들이 어느 페이지 어느 기능을 자주 이용하는지를 파악해야 한다. 자주 이용하는 링크는 서버에 저장되는 로그 데이터(log data)를 분석해서 정확히 알 수 있다. 많은 이용자들이 자주 쓰는 페이지나 기능으로 연결되는 링크는 홈페이지에서 눈에 잘 띄는 곳에 독립된 링크로 만들어둬야 한다. 이용자들의 클릭을 단 한 번이라도 줄여주는 것이 웹사이트 디자인의 미덕이고 유저빌리티의 제1조이기 때문이다.
[그림 14] MS 워드 파일 메뉴에 보이는 ‘핫 키’와 최근 작업 파일들
에러 메시지를 쉽게 하라
에러 메시지는 아무리 친절해도 기분이 좋지 않은 피드백이다. 그런데도 친절하게 씌어진 에러메시지는 흔치 않다. 대부분의 에러메시지는 기술적인 용어 투성이인데다 ‘치명적인 오류’, ‘불법 사용’ 등 깜짝 깜짝 놀랄만큼 과도한 용어가 많다.
에러 메시지는 이용자의 입장을 생각해서 알기 쉽고 정확하게 써야 한다. 기술적인 용어를 피하고 과격한 표현을 삼가야 한다. 정말 잘 된 에러메시지는 에러 발생 사실과 함께 다음 단계로 어떻게 해야 할 것인가를 안내해준다. 예를 들면 ‘서버 접속 한도 초과’라고 하기보다는 ‘사용자가 많이 몰려 접속되지 않았습니다. 2~3분 후에 다시 접속해주십시오’하는 식이 돼야 한다.
에러를 사전에 막아라
아주 당연하지만 꼭 상기해야 할 중요한 점이다. 아무리 사소한 에러라고 할지라도 예상되는 에러는 사전에 모조리 막아야 한다. 사이트를 운영하는 도중에는 에러가 발생하면 즉시 경보를 울리도록 하는 장치가 필요하다. 서버에 쌓이는 로그 데이터 가운데 ‘에러 로그(error log)’를 포착하면 에러의 종류와 발생 위치를 정확히 알 수 있다. 그러나 놀랍게도 에러 로그를 면밀히 관리하는 사이트는 그리 많지 않다. 운용중에 발생하는 에러는 지체없이 바로 잡아야 한다.
필요할 때 도움을 주라
웹사이트 사용법을 쉽게 찾아볼 수 있게 해야 한다. ‘도움말(help message)’은 키워드를 이용해서 검색할 수 있게 디자인되는 것이 최고다. 또한 웹사이트 사용법 전체를 담은 사용자 매뉴얼을 잘 정리해둬야 한다.
사용자 매뉴얼은 최소한 두 단계로 준비돼야 한다. 우선 가장 많이 쓰는 기능을 중심으로 한 두 페이지로 정리된 ‘빨리 찾아보기(Quick Reference)’가 반드시 필요하다. 그리고 상세한 이용법이 체계적으로 정리된 ‘파워 유저 매뉴얼’(Power User’s Manual)이 따로 있어야 한다.
웹사이트가 됐던 일반 컴퓨터용 응용 프로그램이 됐건 이용자의 90% 이상이 매뉴얼을 읽지 않고 곧바로 사용하려 한다는 조사 결과를 주목해야 한다. 일단 시도해봤다가 잘 안되는 경우에야 비로소 매뉴얼을 찾는다. 그러나 이때 매뉴얼이 소설책처럼 장문의 깨알 같은 글씨로 쓰여 있으면 이용자들은 매뉴얼을 꼼꼼히 읽기보다는 사용을 포기하는 쪽을 택한다. 이같은 극과 극을 연결시켜주는 징검다리가 바로 ‘빨리 찾아보기’ 매뉴얼이다.
더욱 중요한 점은 도움말이나 사용자 매뉴얼이 쉬운 말로 기술돼야 한다는 사실이다. 이용자들이 평상시에 쓰는 용어와 어법으로 매뉴얼을 정리해야 한다. 웬만한 프로그래머나 웹사이트 개발자들은 평이한 말을 써서 사이트를 설명하는 데 익숙치 않다. 도움말이나 매뉴얼은 외부 전문기관에 맡길 것을 권한다.
뉴스 사이트 디자인을 위한 유저빌리티
그 동안 뉴스 사이트를 운영해 온 경험과 독자들이 뉴스 사이트를 이용해 온 경험에서 나온 교훈에는 어떤 것이 있을까? 이는 ‘뉴스 사이트를 찾아오는 독자들은 어떤 기대를 가지고 있을까?’하는 질문과 상통한다. 휴리스틱스는 이용자들의 기대에 어긋나지 않도록 하는 게 기본 목적이다. 독자들로 하여금 더 이상의 시행착오를 겪지 않도록 하는 것이 휴리스틱스를 고려하는 가장 큰 이유다.
유저빌리티는 ‘콜럼부스의 달걀’과 같다. 한번 알고나면 당연한 것이지만 미리 생각해 내기는 그리 쉽지 않기 때문이다. 유저빌리티의 또 다른 특징은 구현하는 데 비용이 별로 들지 않는다는 점이다. 웹사이트를 구축하거나 개선할 때 조금만 더 신경을 써서 필요한 코드만 약간 조정하는 것으로 대단히 큰 효과를 볼 수 있다. 무엇보다 유저빌리티가 쌓여나가면 이용자들은 저도 모르는 사이에 그 웹사이트에 대해 호감을 갖게 되고 차츰 그 사이트에 빠져든다.
빠른 웹페이지를 만들라
인터넷을 쓰는 사람이면 누구나 똑같은 불만이 있다. 웹 페이지 하나를 보려면 답답하리만큼 기다려야 한다는 점이다. 그래서 ‘WWW’는 ‘월드 와이드 웹’이 아니라 ‘월드 와이드 웨이팅’(World Wide Waiting)이라는 말까지 나온다.
인터넷 이용자들은 과연 얼마 동안 기다릴 수 있을까? 웹디자이너들의 궁극적인 목표는 1초다. 링크를 클릭했을 때 새로운 페이지가 모니터에 완전히 보이기까지 1초를 넘기지 않는다는 것이다.
컴퓨터 이용자들의 ‘참을성’을 가늠하는 기준에 세가지 단계가 있다. 컴퓨터가 다음 결과를 보여줄 때까지 걸리는 시간이 0.1초 이하면 이용자들은 컴퓨터가 즉시 반응한다고 생각한다.
1초까지는 이용자들은 다소 늦기는 하다고 느끼지만 생각의 흐름이 끊기지는 않는다. 10초를 넘어가면 집중력을 잃고 다른 곳으로 관심을 돌리기 시작한다.
그러나 불행히도 지금의 인터넷 기술 수준으로 대부분의 웹페이지가 1초 이내에 다운로드되기 어려운 일이다. 그래서 일반적으로 2초에서 10초 사이면 일단 상업적으로 이용될 수 있는 웹페이지로 평가한다. 최근에는 인터넷 기술이 발달하기보다는 네티즌들의 참을성이 길러진 덕분에 그 한계를 15초까지 늘려잡아야 한다는 의견도 있다. 하지만 네티즌들의 인내를 기대할 수는 없다. 한번 떠난 독자는 다시는 돌아오지 않는다는 게 인터넷 세계의 냉정한 현실이기 때문이다.
하나의 웹페이지를 보여주기까지 시간을 잡아먹는 단계는 여러 가지다. 처음엔 웹페이지를 담고 있는 서버의 성능 때문이다. 갑자기 이용자가 늘어나서 서버 기능이 한계에 도달하면 문제는 매우 심각해진다. 다음으로 서버가 연결돼 있는 인터넷 회선의 성능 문제다. 인터넷의 네트워크 자체 때문에 시간이 늦어지는 경우도 적잖다. 이를테면 갑자기 네트워크 상의 교통량이 많아졌다거나 서버와 이용자 사이의 거리가 멀리 떨어져 있으면 그만큼 더 많은 시간이 걸리기 때문이다.
보다 일반적인 요인은 이용자들이 갖고 있는 인터넷 접속방식이다. 전화모뎀을 비롯해 DSL, ISDN, 케이블 모뎀 등 사용회선에 따라 인터넷 통신속도가 서로 다르기 때문이다. 그러나 웹디자이너들에게 항상 기준이 되는 것은 그 시점에서 가장 많이 쓰이는 접속방식이어야 한다.
이같은 하드웨어나 인터넷 기술 때문만이 아니다. 정말 심각한 것은 웹페이지 디자인 자체가 다운로드 시간에 커다란 영향을 미친다는 점이다. 여기서 유저빌리티(usability)에 대한 고려가 필요하다.
유저빌리티는 아주 사소하고 쉬운 손질 하나가 놀라운 결과를 가져오는 경우가 많다. 예를 들어 웹페이지에 GIF로 된 그림을 넣을 때 색깔 숫자를 줄이면 그림이 다운로드되는 시간이 현격히 줄어든다. 웹 페이지 안에 다른 웹사이트의 디렉토리로 연결되는 URL을 삽입할 때 그 끝에 흔히들 생략하고 마는 ‘슬래쉬(/)’를 넣어주면 역시 속도가 크게 빨라진다.
표 안에 표가 들어가는 디자인에서 표를 하나씩 따로 독립시키는 것도 좋은 방법이다. 웹브라우저가 HTML문서를 읽을 때 기본적으로 위에서부터 아래로 순서대로 내려가면서 차례대로 웹페이지를 그려낸다. 그러나 표를 지정하는 <TABLE> 태그가 나타나면 브라우저는 우선 그 표가 끝나는 </TABLE> 태그를 찾아 표의 윤곽을 먼저 결정한다. 그리고는 다시 거꾸로 거슬러 올라가 표가 시작되는 <TABLE>태그로부터 웹페이지를 그려 내려간다. 표를 그리는 일이 다른 태그를 처리하는 데 비해 두 배 이상의 시간이 걸린다는 말이다.
더욱이 표 속에 표가 있는 형태의 페이지는 그리는 데 걸리는 시간이 기하급수적으로 길어진다. 맨 바깥 쪽의 표부터 시작해 차근 차근 안쪽의 표들을 살펴봐서 가장 안쪽에 들어 있는 표를 그려낸 다음 다시 바깥 쪽 표의 윤곽을 하나씩 결정해 나가기 때문이다. 표의 모양을 간단히 가져가는 것은 웹페이지 속도를 빠르게 하는 중요한 요인이다.
링크 앞에서 망설이지 않게 하라
인터넷의 아름다움은 하이퍼텍스트에 있다. 눈 앞의 웹페이지로부터 독자는 이 세상 어느 곳에 있던지 월드 와이드 웹에 연결돼 있는 다른 문서로 마음대로 옮겨갈 수 있기 때문이다. 이것을 가능케 하는 것이 바로 하이퍼링크다. 그래서 링크는 ‘인터넷의 본성’이라고 한다.
하이퍼링크는 인터넷을 사용하는 독자들에게 가장 큰 부담을 주는 존재이기도 하다. 링크를 한 번 클릭할 때마다 다음 페이지가 나타날 때까지 기다려야 하기 때문이다. 그래서 독자들은 웹페이지에서 링크를 발견할 때마다 클릭을 할까 말까 수없이 망설이곤 한다. 필요한 링크를 찾아내는 일은 인터넷 이용자들에게 가장 큰 스트레스 중의 하나다.
링크가 이처럼 두 얼굴을 가진만큼 링크 디자인에는 세심한 배려가 필요하다. 링크 디자인의 목표는 독자들이 그 링크를 클릭할 필요가 있는 지 없는지를 쉽고 빨리 판단할 수 있도록 해주는 것이다.
무엇보다 링크는 그 자체가 어떤 내용의 페이지로 옮겨가는지 함축된 정보를 보여줄 수 있어야 한다. 예를 들면 ‘디지털 뉴스 관련기사는 여기를 클릭하세요’라기보다는 ‘디지털 뉴스 관련기사를 볼 수 있습니다’라고 쓰는 편이 낫다는 말이다.
관련기사로 안내하는 링크를 리스트 형식으로 나열할 때도 독자들은 앞으로 어떤 내용을 보게될 것인지를 미리 알 수 있어야 한다. 물론 링크로 나타난 제목에서 충분한 시사를 얻을 수 있으면 아무 문제가 없다. 그러나 그렇지 않은 경우가 더 많다.
예를 들어보자. [그림 15]와 [그림 16]은 인터넷과 컴퓨터 기술정보를 전문으로 제공하는 ZDNet과 CNet에서 똑같은 조건으로 ‘ADSL’에 관한 정보를 검색한 결과다. ZDNet은 그저 관련된 링크의 제목만 나열하고 있다. ‘Glossary’나 ‘Interview’는 그 제목만 봐서는 어떤 내용을 담고 있는지 상상하기 힘들다. 더욱이 같은 링크가 ‘Tech News’에 바로 뒤따라 ‘More On ZDNet’에 또 나타난다. 과연 이 링크가 클릭할 필요가 있는 것인지 아닌지 독자들에게 쓸데없는 고민거리를 가져다준다.
이에 비해 CNet의 페이지는 뉴스 제목과 함께 그 페이지의 중요한 내용을 짤막하게 보여준다. 때로는 뉴스제목과 내용 요약만으로 독자들에게 충분한 정보가 될 수 있다. 더 자세한 내용이 필요한 독자들은 링크를 따라간다.
새로운 내용이 계속 추가되는 시리즈 기사의 경우 가장 최근에 업데이트된 기사에 관한 정보를 링크에 더해주는 것은 링크 디자인의 ABC다. [그림 17]의 예를 보자. 이 사이트의 저자는 독자들에게 그의 ‘최근 생각’(the latest for thoughts..)을 알아보라고 권하면서 동시에 네비게이션 메뉴에 ‘최근호’(Current Issue)라는 링크를 만들어뒀다.
독자의 입장으로 돌아가서 생각해보면 이 사이트를 종종 찾아오는 독자는 저자의 ‘최근 생각’이나 ‘최근호’가 지난 번에 이미 읽었던 것인지 아니면 그 후로 새로 바뀌거나 추가된 것인지 알 도리가 없다. 방법은 오로지 두 링크를 모두 클릭해보는 것 뿐이다. 만일 이 ‘최근’ 정보가 이미 읽었던 것이었다면 독자는 명백히 시간과 노력과 비용을 낭비한 셈이 된다.
이런 경험을 가진 독자가 이 사이트에 다시 돌아오리라고 기대하는 건 무리다. ‘최근 생각’이나 ‘최근호’의 제목 한 줄, 업데이트된 날짜 한 줄 덧붙이는 것으로 이런 결과는 미리 막을 수 있다.
훑어보기 쉽게 하라
컴퓨터 모니터에서 글을 읽는 건 피곤한 일이다. 잘 된 웹페이지는 이 피곤함을 최대한 덜어줄 수 있어야 한다. 방법은 독자들이 그 웹페이지를 낱낱이 읽을 필요가 있는 것인지 빨리 판단하도록 도와주는 것이다.
독자들이 모니터로 글을 읽을 때는 종이에 인쇄된 글을 읽을 때보다 그 속도가 25%쯤 늦어진다. 또한 웹페이지를 읽는 독자들의 약 80%는 한줄씩 차근 차근 읽어나가기보다 주욱 훑어보고 지나간다. 큰 글씨로 씌어진 제목이나 색깔이 다른 링크들만 일별하고 지나가기 일쑤다. 뉴욕타임즈나 워싱턴포스트와 같은 뉴스사이트의 한 페이지에 독자들이 머무는 시간이 평균 2초 안팎이라는 사실은 이같은 독자들의 훑어보고 마는 습관을 단적으로 보여준다.
왜 인터넷 독자들은 이처럼 성급한 것일까. 무엇보다 독자들은 인터넷에 접속하면서 찾아낸 정보를 낱낱이 읽기보다 필요한 정보를 더 찾아내야 한다는 생각을 먼저하기 때문이다. 독자들은 인터넷 속에는 눈 앞의 한 페이지보다 훨씬 많은 내용이 들어있다는 사실을 잘 알고 있기 때문에 한시라도 빨리 다음 페이지로 넘어가야 한다는 조급함에 늘 쫓기고 있다. 따라서 웹페이지를 만났을 때 독자들은 그 내용을 꼼꼼히 읽기에 앞서 이 웹페이지가 과연 읽을 가치가 있는 것인지를 빠른 시간 안에 판단하려 한다.
독자들의 빠른 판단을 도와주는 길은 그 웹페이지의 중요한 내용이 한눈에 들어오도록 해주는 ‘컨텐트 디자인’에 있다. 먼저 웹페이지의 제목은 핵심단어를 포함한 직설적인 내용이어야 한다. 인쇄된 신문이나 잡지처럼 비유나 은유, 또는 패러디를 담은 제목은 금물이다. 예를 들면 ‘빛으로 승부하는 신산업’보다는 ‘광통신산업 경쟁 치열’이 낫다는 말이다. 따라서 인쇄매체에 썼던 내용을 웹페이지에 옮길 때 많은 경우 제목을 다시 써야 한다.
뉴스의 제목을 직설적으로 써야 한다는 데는 또다른 이유가 있다. PDA와 같은 무선인터넷이 확산되면서 한정된 화면 크기와 통신속도 때문에 제목 한 줄로도 충분한 정보를 전달할 수 있어야 하기 때문이다. 그래서 “무선인터넷 시대에 기자들은 한 줄짜리 기사 쓰기에 익숙해져야 한다”는 말까지 나온다.
무엇보다 웹페이지의 본문은 철저히 결론이 앞에 나오는 ‘거꾸로 선 피라미드’ 모양으로 씌어져야 한다. 목표는 처음 한 단락에 그 페이지의 주요 내용이 모두 함축되도록 하는 것이다.
[그림 18]에서 보듯이 최근 미국 뉴스사이트 가운데 접속률 1위를 지키고 있는 MSNBC는 아예 기사 첫 단락의 리드 부분을 본문보다 더 큰 활자를 써서 독립된 페이지처럼 디자인했다. 더 자세한 내용이 필요한 독자들은 스크롤바를 움직여 아래 따라나오는 전문을 읽을 수 있다.
본문을 작은 소제목을 덧붙여 여러 부분으로 쪼개내는 방법도 효과적이다. 독자들은 소제목을 훑어보면서 어느 대목에 필요한 내용이 있는가를 일별할 수 있기 때문이다. 또한 본문 가운데 나열식 내용이 있을 때는 과감하게 ‘불렛 리스트’(bullet list)를 사용하도록 한다. 웹페이지에서는 [예 18]보다는 [예 19]가 훨씬 알아보기 쉽고 모니터 화면 전체를 짜임새 있으면서도 시원하게 보이게 해준다.
본문 내용의 길이는 아무리 길어도 한 페이지가 3개 화면을 넘어서는 안 된다. 독자들이 3개 화면이 넘도록 스크롤바를 끌어내려갈 것으로 기대하는 건 무리다. 내용이 길어질 때는 과감히 페이지를 나눠야 한다. 페이지를 쪼갤 때는 다음 페이지, 또는 앞 페이지로 옮겨가는 링크를 눈에 띄게 설치해둬야 한다. 동시에 [그림 19]에서 보듯 ‘ZDNet’의 페이지처럼 링크 바로 아래 다음 페이지 내용이 무엇에 관한 것인지 간단한 메모를 붙이는 것을 잊지 말자.
[예 18]
독자들의 빠른 판단을 도우려면 먼저 제목이 직설적이어야 한다. 본문은 거꾸로 선 피라미드 꼴을 해야 하며, 첫 단락에 주요 내용이 함축돼야 한다. 소제목을 써서 페이지를 쪼개거나 불렛 리스트를 쓰는 것도 좋은 방법이다. 페이지가 길어질 때는 과감히 여러 페이지로 쪼개서 링크로 연결해준다.
[예 19]
독자들의 빠른 판단을 돕는 방법으로는
● 직설적인 제목을 쓴다
● 본문은 거꾸로 선 피라미드 꼴을 갖도록 한다
● 첫 단락에 주요 내용을 함축한다
● 소제목을 써서 본문을 나눈다
● 불렛 리스트를 사용한다
● 긴 페이지는 과감히 여러 페이지로 쪼갠다
● 나눠진 페이지는 링크를 써서 연결한다
등을 들 수 있다.
가로 세로 4대 3에서 승부하라
가장 이상적인 웹페이지의 모델은 슬라이드 쇼다. 가로나 세로로 나타나는 스크롤바 없이 화면 단위로 넘어가는 디자인이 독자들에게 가장 편한 느낌을 주기 때문이다. 그렇다고 화면에 쓸데없이 여백을 남기는 것은 모니터라는 독자의 자산을 낭비하는 일일 뿐 아니라 클릭 횟수도 늘어나게 한다. 슬라이드쇼처럼 편안한 웹페이지를 만들기 위해서는 무엇보다 독자들이 어떤 크기의 화면을 갖고 있는가를 고려해야 한다.
컴퓨터 모니터들은 그 크기에 일정한 비율을 갖고 있다. 가로×세로 4대 3이 바로 그 ‘황금비율’이다. 14인치 모니터의 화면은 가로 640, 세로 480 픽셀로 이뤄져 있고, 17인치 모니터는 가로 800, 세로 600 픽셀, 21인치는 가로 1024, 세로 768 픽셀이 기준이다.
물론 모니터의 해상도를 조절하면 17인치 모니터로 21인치 수준의 화면을 볼 수도 있다. 아무튼 어떤 모니터가 어떤 크기 어떤 해상도를 갖고 있던 간에 가로 세로 비율은 일정하다. 웹TV처럼 심지어 TV화면으로 웹페이지를 볼 때도 TV 스크린은 가로 560, 세로 420 픽셀로 해상도가 고정돼 있어 이 역시 4대 3의 비율을 지키고 있다.
최신뉴스나 헤드라인 뉴스, 그리고 독자들이 자주 사용하는 중요한 링크들은 바로 이 비율에 해당하는 화면 안쪽에 배치해야 한다. 독자들이 스크롤바를 움직이지 않고 페이지를 열자마자 볼 수 있는 영역이기 때문이다. 이 중에서도 노트북 컴퓨터를 포함해 거의 대부분의 퍼스널 컴퓨터에서 스크롤링 없이 볼 수 있는 가로 640, 세로 480 픽셀 이내의 화면에서 승부를 걸어야 한다.
테이블을 써서 웹페이지를 디자인하거나 화면을 여러 조각으로 쪼개낼 때 모니터 사이즈를 염두에 둬서 모니터 화면에 쓸데없이 스크롤바가 나타나는 일을 미리 막아야 한다. 특히 고정된 크기의 테이블이나 이미지를 더할 때는 그 폭이 모니터의 가로폭을 넘지 않도록 세심한 배려를 해야 한다. 가로 스크롤바는 웹이용자들을 불편하게 만드는 가장 성가신 것 가운데 하나기 때문이다. 웹TV 이용자를 고려한다면 화면 비율 뿐 아니라 가로 폭이 560 픽셀이 넘지 않도록 주의해야 한다. TV스크린에는 가로 스크롤바가 아예 나타나지 않기 때문이다.
그러나 인터넷의 다이내믹한 변신은 모니터의 크기를 일정한 비율로 그냥 놔두지를 않는다. 무엇보다 팜톱 컴퓨터나 웹브라우징 기능을 가진 핸드폰 등 개인용 무선통신단말기(PDA)에 이르면 모니터 크기의 다양성은 극에 달한다.
전형적인 팜톱 컴퓨터의 화면은 320×240 크기로 가정한다. 그러나 휴렛 팩커드의 ‘HPC 프로’처럼 큰 화면을 가진 팜톱 컴퓨터는 17인치 모니터와 맞먹는 800×600 픽셀까지 볼 수 있다. 그러나 요즘 윈도즈CE 플랫폼과 어깨를 나란히 하고 있는 팜파일럿 시리즈의 경우는 가로와 세로 비율이 똑같은 160×160 픽셀의 크기를 갖고 있다. 여기서 크고 작은 핸드폰에 달린 다양한 액정화면들을 생각해보면 개인용 무선통신단말기를 위한 웹페이지 디자인은 고정된 4대 3 비율 가지고는 도저히 불가능하다는 사실을 쉽게 알 수 있다.
그래서 무선인터넷을 위한 웹페이지 디자인에는 전혀 다른 테크놀로지가 필요하다. 요즘 떠오르고 있는 XML과 스타일 시트(style sheet)는 웹페이지의 내용을 저장한 컨텐트 정보와 웹페이지를 보여주는 포맷을 담은 프리젠테이션 정보가 따로 분리돼 있다는 점에서 무선인터넷 웹페이지 개발을 위한 핵심기술로 꼽힌다.
픽셀(pixel)
그림의 구성 요소라는 뜻인 ‘picture (pix) element’의 줄임말. 컴퓨터 화면은 수많은 작은 점으로 이뤄져 있다. 소프트웨어와 하드웨어들은 이 점 하나 하나의 색깔을 바꿔서 다양한 글씨 모양이나 그림을 그려낸다. 컴퓨터 화면의 최소 단위인 이 점을 픽셀이라고 부른다.
[표 4] 모니터의 크기 (단위 : 픽셀)
모니터 종류 가로 × 세로
14인치 640 × 480
17인치 800 × 600
21인치 1024 × 768
TV스크린 560 × 420
일반 팜톱 컴퓨터 320 × 240
팜파일럿 시리즈 160 × 160
텍스트만으로도 볼 수 있게 하라
웹페이지 디자이너들의 영원한 고민은 이용자들의 화면에 웹페이지를 본래 의도했던 모양대로 보여줄 수가 없다는 점이다. 가장 큰 이유는 이용자들이 사용하는 브라우저의 종류와 버전 때문이다. 특히 그림이 나타나지 않는 텍스트 베이스로 웹페이지를 보는 이용자가 적잖다는 사실은 웹페이지 디자이너들에게 피할 수 없는 이중고를 안겨준다.
물론 순수한 텍스트 베이스 브라우저를 사용하는 이용자들은 소수다. 그래서 많은 웹페이지 개발자들은 이들을 곧잘 무시하려 든다. 그러나 문제는 최신 브라우저를 이용하면서도 브라우저의 옵션에서 그래픽을 꺼버린 상태에서 웹서핑을 하는 이용자가 많다는 점이다. 어지러운 애니메이션 광고를 보고 싶지 않을 뿐더러 다운로드 시간을 단축시키기 위해서다.
무엇보다 뉴스 매니아들 사이에 이미지를 미리 차단한 상태에서 뉴스를 읽는 경우가 많다는 점을 생각해야 한다. 그래서 강조되는 것이 그래픽 이미지를 대신할 ALT(Alternative)의 중요성이다. ALT는 HTML에서 이미지를 삽입하는 경우 IMG 태그의 속성으로 지정할 수 있다. ALT 속성값으로 그 이미지 내용을 압축해 보여주는 짧은 글을 써두면 설령 웹페이지에 이미지가 나타나지 않더라도 이용자는 그 이미지가 어떤 것인지 알 수 있게 된다.
예를 들어 강아지 그림을 담은 puppy.gif라는 이미지를 웹페이지에 삽입하는 경우 <IMG SRC=“puppy.gif” ALT=“강아지”>라고 써둔다. 이렇게 하면 이용자가 그래픽을 꺼버리더라도 그림이 나타날 자리에 그래픽 이미지 대신 ‘강아지’라는 글씨가 나타난다.
특히 이용자가 그래픽을 켜둔 상태에서도 이미지가 완전히 다운로드되기 전에 ‘강아지’라는 글씨가 미리 나타나 이용자들에게 그 자리에 어떤 그림이 보일 것이라는 사실을 미리 알 수 있게 해준다는 장점도 있다.
또한 이미지가 화면에 완전히 뿌려진 뒤 이용자가 마우스 포인터를 이미지 위로 옮겨두면 약 1, 2초 후에 ALT로 지정한 텍스트가 작은 풍선 모양의 ‘툴팁(tool tip)’으로 나타나서 그 그림에 대한 보충설명의 역할도 하게 된다.
이미지가 그저 웹페이지를 장식해주는 그림들이라면 문제는 그리 심각하지 않다. 그러나 버튼이나 메뉴, 네비게이션 바 등 웹서핑에 필수적인 요소들을 이미지로 디자인했다면 ALT는 빠뜨려서는 안된다. ALT가 없으면 그래픽을 꺼버린 이용자가 웹페이지를 봤을 때 어디가 버튼이고 어디를 클릭해야 다음 페이지로 넘어갈 것인지를 모른 채 꼼짝할 수 없게 된다.
이처럼 ALT의 중요성이 나날이 강조되면서 HTML의 표준을 정하는 ‘월드 와이드 웹 컨소시엄’(W3C)은 ALT를 선택이 아니라 필수로 지정하기에 이르렀다. 기존의 HTML 4.0표준에서는 IMG태그에서 ALT는 써도 그만 안써도 그만인 선택사항으로 지정됐었다. 하지만 새로운 HTML4.1 표준을 정한 DTD에서는 ALT를 생략할 수 없는 필수요소로 정하고 있다.
ALT를 유용하게 쓸 수 있는 또 다른 용도는 하이퍼링크를 지정하는 <A>태그에 링크의 내용을 추가해주는 것이다. 이 기능은 인터넷 익스플로러에서만 작동한다는 한계가 있지만, <A>태그 안에 링크가 어디로 연결될 것인지를 간단히 설명해주는 ALT를 더해두면 마우스 포인터를 하이퍼링크 위로 옮겼을 때 ALT 내용이 역시 툴팁으로 나타난다. 이는 링크를 표시하는 암호 같은 URL 대신에 그 링크가 어떤 페이지로 갈 것인지를 ‘인간이 알 수 있는 언어’로 보여주기 때문에 훌륭한 이용자 서비스가 된다.
프레임을 삼가라
인터넷 브라우저 기술에서 최대의 실패작은 프레임이다. 프레임은 모니터 화면을 가로, 세로 여러 개의 창으로 나눠서 창마다 서로 다른 브라우징이 가능토록 하자는 데 그 목적이 있었다. 1996년 넷스케이프가 만들어 낸 프레임 기술은 한정된 모니터 화면을 여러 개로 쪼개 쓸 수 있다는 점에서 일약 인기를 끌었다. 그러나 프레임을 채용한 웹사이트가 늘어나면서 장점보다는 문제가 더 많이 드러났다.
프레임은 북마크를 어렵게 한다. 프레임을 사용한 사이트는 브라우저의 URL표시창에 프레임 세트를 지정하고 있는 페이지의 URL을 표시하게 된다. 서로 다른 프레임이 어떤 페이지를 보여 주든지 간에 URL표시창에 나타난 URL은 변하지 않는다.
예를 들어 프레임을 써서 디자인된 신문사이트에 들어간 뒤 특정한 기사를 찾아가 보더라도 URL표시창에서는 신문사이트의 홈페이지 URL만 보인다는 말이다.
기사가 보이는 상태에서 즐겨찾기를 누르면 기사의 URL대신 신문사이트의 홈페이지 URL이 기록된다. 아무리 많은 기사를 북마크하더라도 즐겨찾기로 지정된 URL은 모두 똑같은 홈페이지 URL 뿐이다.
문제는 여기서 그치지 않는다. 독자들은 이전 페이지로 돌아가기 위해 사용하는 ‘뒤로(BACK)’ 버튼을 누를 때 적잖은 혼란을 겪게 된다. 뒤로 버튼은 바로 직전에 클릭했던 프레임, 다시 말해 활성화된 프레임에서만 작동한다. 프레임이 여러 개로 쪼개져 있는 경우 독자들은 원하는 프레임을 되돌리기 위해서는 그 프레임이 활성화된 상태인지를 먼저 확인해야 한다. 그러나 불행히도 많은 인터넷 사용자들은 직전에 어떤 프레임을 클릭했었는지를 잘 기억하지 못한다.
화면을 인쇄할 때도 마찬가지 문제가 생긴다. 브라우저의 인쇄 버튼을 누르면 역시 활성화된 창의 내용이 인쇄된다. 메뉴가 나타난 프레임에서 한 항목을 선택해서 다른 프레임에 프린트하고 싶은 페이지가 나타났다고 치자. 독자들은 곧바로 인쇄버튼을 누르기 일쑤다. 그러나 인쇄되는 것은 원하는 페이지가 아니라 메뉴 프레임이다. 제대로 인쇄를 하기 위해서는 원하는 페이지의 프레임 가운데 아무 곳이나 한번 클릭을 해줘야 한다. 그래야 비로소 그 프레임이 활성화되기 때문이다.
검색엔진도 프레임 때문에 엉뚱한 짓을 하게 되는 경우가 많다. 웹 로봇이 장착된 검색엔진은 프레임셋에는 관심이 없고 하나 하나 별도의 프레임을 들여다 본다. 검색결과를 표시할 때는 프레임 세트 대신에 별개의 프레임이 갖고 있는 URL을 보여 준다. 검색결과를 본 이용자가 그 링크를 클릭하면 한 화면을 구성하는 여러 개의 프레임 가운데 하나만 보게 된다. 예를 들면 메뉴 프레임은 빠진 채 기사 내용만 보여주는 페이지만 달랑 나타나서 이용자는 그 웹페이지의 전체 모양이 어떻게 생겼는지 알 수가 없다.
무엇보다 프레임이 이용자를 불편하게 만드는 것은 그렇지않아도 좁은 화면을 또 쪼개내는 바람에 답답함을 느끼게 된다는 점이다. 특히 노트북 컴퓨터나 14인치 크기의 모니터를 이용하는 이용자들은 화면 크기의 제약 때문에 자칫하면 프레임에 가로 스크롤바가 나타나 불편을 겪게 된다.
그러나 프레임은 비난의 대상만은 아니다. 프레임도 웹사이트의 디자인 목적에 따라 매우 유용한 도구로 이용할 수 있다. 프레임을 어떻게 제대로 쓸 것인가는 여전히 과제로 남아있다. 그러나 일반적으로 프레임을 쓰는 것은 이용자들을 불편하게 만드는 일이다. ‘사용자에게 편리한(user friendly)’디자인을 위해서는 프레임없는 사이트(frame-free site)를 선택해야 한다.
가벼운 ‘네비게이션 바’를 만들라
인터넷은 흔히들 ‘항해’한다고 말한다. 망망한 인터넷의 세계를 어디로든 원하는 대로 흘러 다닐 수 있다는 의미다. 이 인터넷 항해를 가능케 하는 것은 웹페이지와 웹페이지를 서로 묶어주는 하이퍼링크다. 웹페이지에서 하이퍼링크를 모아두는 자리가 ‘네비게이션 바’(Navigation bar)다.
‘네비게이션 바’는 일반적으로 웹페이지의 왼쪽에 좁고 길게 서있는 링크의 묶음을 말한다. 네비게이션 바가 얼마나 유용하게 디자인돼 있는가는 그래서 웹사이트의 성공 여부를 가름하는 중요한 요인이 된다.
네비게이션 바를 만드는 데 쓰는 소재에는 세 가지가 있다. 텍스트, 이미지, 자바스크립트가 그것이다. 순수히 문자만 써서 만든 네비게이션 바는 화면에 뿌려지는 속도가 빠르고 필요할 때 새로운 메뉴를 더하거나 링크 이름을 바꾸기가 쉽다는 강점이 있다. 배경색깔을 잘 선택하면 마치 이미지처럼 보이는 다채로운 디자인도 가능하다. 뉴스 사이트의 경우 화면이 뿌려지는 속도와 메뉴가 바뀌는 빈도에 비춰볼 때 텍스트 방식의 네비게이션 바가 가장 알맞다.
적잖은 경우 네비게이션 바는 그래픽 이미지를 써서 만든다. 물론 이미지를 쓰면 웹페이지를 보다 아름답게 꾸밀 수 있다. 그러나 이 때는 좀 더 신경을 써야 할 부분이 있다. 우선 이미지로 디자인된 링크 하나 하나에 ALT값을 지정해둬야 한다는 점이다. 이미지를 보지 않는 이용자의 편의를 위해서다.
이와 함께 웹페이지의 맨 아래쪽에 순수히 문자로만 된 별도의 네비게이션바를 붙이는 것도 잊지 말아야 한다. 웹브라우징 속도를 빨리하기 위해 아예 이미지를 꺼 놓은 이용자들이 있기 때문이다.
이미지로 링크를 만들 때 잊지 말아야 할 것은 이미지의 파일 크기를 가장 작게 조정해야 한다는 점이다. GIF 포맷을 쓸 때는 컬러팔렛의 색깔 수를 최소한으로 줄여야 한다. 물론 색깔 수는 본래의 이미지가 훼손되지 않는 선까지만 낮춰야 한다. 컬러팔렛의 색깔 수는 ‘포토샵’과 같은 이미지를 다루는 어플리케이션을 이용해서 조정할 수 있다.
만일 JPG 포맷을 사용한다면 파일 크기를 최대에서 최소로 한 단계씩 낮춰가면서 화질에 큰 차이가 없는 수준까지 파일크기를 줄여야 한다. 물론 최적의 상태를 찾기 위해서는 한 단계 한 단계 옵션을 일일이 조정하면서 화질을 살펴볼 필요가 있다. 시간이 걸리는 일이지만 이 작업은 네비게이션 바가 다운로드되는 속도를 눈에 띄게 단축시켜주기 때문에 그만한 가치가 있다.
요즘은 브라우저의 성능이 향상된 덕분에 자바스크립트를 사용한 다이내믹한 네비게이션 바가 많이 만들어진다. 무엇보다 자바스크립트를 쓰면 한정된 모니터 화면에 많은 링크를 담아낼 수 있다. 마우스 포인터가 링크 가운데 하나로 이동하면 하위 링크들이 팝업 방식으로 튀어나오는 형식이다. 이 경우는 링크의 분류에 먼저 세심한 주의를 기울여야 한다. 메뉴의 역할을 하는 링크의 구조를 상위 메뉴부터 하위메뉴까지 상하관계를 가진 나뭇가지 모양의 트리구조로 설계해야 한다.
이 때는 이용자들이 하위메뉴를 직관적으로 찾아갈 수 있도록 링크의 이름을 짧고 명확하게 정하고, 필요한 기능이 어느 하위메뉴 안에 숨어있을지를 쉽게 판단할 수 있도록 세심한 배려가 요구된다.
이와 함께 자바스크립트를 이용한 트리구조의 네비게이션 바를 디자인할 때 주의해야 할 점은 동일한 범주에 있는 링크들은 그 중 하나가 하위메뉴를 가지고 있으면 이웃한 링크들도 마찬가지로 같은 수준의 하위 링크를 갖도록 해야 한다는 것이다.
자바스크립트로 생성되는 하위메뉴는 마우스 포인터가 옮겨온 뒤 약간의 시차를 두고 튀어나온다. 만일 링크 중의 하나가 유독 하위메뉴를 갖고 있지 않으면 이용자들은 혹시나 하위메뉴가 있는데 늦게 나타나지 않나 싶어 상당 시간 마우스를 움직이지 않고 기다리게 된다. 하위메뉴 구조에 일관성을 유지해야 하는 이유가 여기에 있다.
리셋 단추를 버려라
웹페이지 문서입력 양식을 디자인할 때 정말 쓸 데 없는 것이 하나 있다. 바로 ‘리셋’(reset) 버튼이다. 흔히들 ‘다시 쓰기’, ‘새로 쓰기’, ‘지우기’ 또는 ‘취소’로 이름을 붙이는 단추다. 리셋 버튼은 ‘서브밋’(submit) 버튼과 짝을 이뤄 이용된다.
입력한 양식 내용을 전송하고 다음 단계로 넘어가려면 서브밋 버튼을 누르지만, 입력한 내용을 취소하려면 리셋 버튼을 누르게 된다. 리셋 버튼을 누르면 그 문서양식에 입력된 모든 데이터가 깨끗이 지워지고 만다. 유저빌리티 문제는 여기서 비롯된다.
회원등록 페이지를 생각해보자. 사용자명과 비밀번호에서 시작해서 이름과 주소, 우편번호 등 수많은 입력창을 일일이 쳐넣었다가 그 중 하나의 항목이 잘못됐다고 해서 아예 모든 항목을 깨끗이 지운 뒤 처음부터 다시 입력하려는 경우가 있을까?
설령 입력항목이 단 두 가지뿐이라고 해도 마찬가지다. 사용자 이름과 비밀번호 두 가지 항목을 입력한 뒤에 사용자 이름을 바꾸고 싶다고 해서 아예 비밀번호까지 다시 치는 이용자가 있을까 의문이다.
그러나 리셋 버튼은 한 번 클릭하면 모든 입력항목을 깨끗이 지워버린다. 입력한 내용 중 단 한 항목만을 고치고 싶어도 나머지 항목들까지 모조리 지워버리는 게 문제다. ‘리셋 버튼 무용론’은 여기서 출발한다.
리셋 버튼의 문제점은 더 있다. 대개 웹디자이너들은 리셋 버튼을 서브밋 버튼과 나란히 배치한다. 그러다보니 이용자들이 실수로 리셋버튼을 누르게 되는 경우가 적지 않다. 그러면 한 순간에 입력 내용이 모조리 날라가고 만다.
이 때문에 이용자들 사이에는 문서양식을 전송하기 전에 두 개의 버튼을 주의 깊게 들여다보는 습관이 생겨났다. 누르려는 버튼이 서브밋 버튼인지, 리셋 버튼인지를 분명히 살펴본 뒤에 클릭을 해야 한다. 어느 버튼을 눌러야 하는지 선택하기 위해 주의력과 시간이 필요하다.
아예 리셋 버튼을 제거한 경우를 생각해보자. 이용자는 필요한 데이터를 입력한 뒤 특별히 더 신경 쓸 것 없이 눈에 띄는 단 하나의 버튼만 클릭하면 된다. 이용자들에게 이처럼 편안함을 주는 것이 유저빌리티 디자인의 요체다.
물론 리셋 버튼은 이용자들에게 통제권을 돌려주자는 취지에서 만들어진 것이다. 자신이 입력한 데이터는 자신이 취소할 수 있도록 하는 일종의 ‘비상구’를 만들어주자는 뜻이다.
각종 응용프로그램에서 볼 수 있는 ‘되돌리기’(undo) 기능이나 대화상자에 쓰이는 ‘취소’(cancel)버튼, 그리고 웹 브라우저에 달려 있는‘뒤로’(back) 버튼이 모두 이용자들에게 비상구를 제공하자는 비슷한 목적으로 도입된 기능이다. 그러나 리셋 버튼은 다른 비상구 기능과는 달리 그 적용범위가 지나치게 넓다.
‘되돌리기’ 기능의 경우 한 번 실행할 때마다 그 직전에 입력한 내용이 하나씩 단계적으로 취소되는데 비해 리셋 버튼은 그 웹페이지에 나타난 입력항목 전체를 무자비하게 지워버리기 때문이다.
물론 리셋 버튼이 의미있게 쓰이는 경우도 있다. 그러나 조건이 있다. 첫째, 하나의 문서입력 양식이 같은 이용자에 의해 여러 차례 반복적으로 쓰일 것. 둘째, 다음 문서양식에서 입력하는 내용이 그 전의 내용과 전혀 다를 것. 이 두 가지 요건을 동시에 충족시키는 경우가 아니고서는 리셋 버튼은 아무런 의미가 없다는 말이다.
인터넷 동영상은 현실을 고려하라
뉴스 사이트에 동영상을 띄우는 일은 아직 이르다. 그러나 요즘 뉴스 사이트에 비디오 클립을 삽입하는 예가 늘어나고 있다. 또한 인터넷 방송이 우후죽순처럼 생겨났다.
물론 인터넷 동영상에는 강점이 있다. 바로 양방향성이다. 기존 TV는 일정한 시간에 방송국이 쏘아보내는 프로그램을 일방적으로 수상기에 비춰줄 뿐이다. 시청자들의 선택권은 오로지 채널을 바꾸는 것 뿐.
이에 비해 인터넷 방송은 프로그램을 보면서 시청자들이 방송진행자에게 메시지를 보낼 수도 있고 시청자들끼리 대화를 나눌 수도 있다. 또한 미리 저장된 프로그램을 시청자들이 내키는 시간에 아무때나 꺼내 볼 수 있다. 심지어 프로그램을 시청자가 원하는 주제와 순서로 짜맞춰 취향에 맞게 다시 구성할 수도 있다.
그러나 이같은 강점에도 불구하고 인터넷 동영상 서비스의 결정적인 제약은 영상의 품질이다. 설령 ADSL과 같은 고속회선을 사용하는 이용자라 하더라도 아직 인터넷을 통한 매끄러운 동영상은 기대하기 힘들다. 화면크기는 화면의 한 구석에 지나지 않는다. 그 화질 또한 TV화면에 익숙해진 이용자들의 입맛엔 영 미치지 못한다.
비디오 클립과 같은 동영상을 뉴스 사이트에 삽입하는 것은 일단 피하는 것이 유저빌리티에 맞다. 그러나 굳이 동영상을 써야 한다면 그 방법을 달리 생각해야 한다. 우선 지금의 처지에서 인터넷을 통한 동영상은 TV와 같은 전문적인 방송 수단보다는 문자나 그림 등 다른 포맷의 매체와 어우러지는 컨텐트 구성 요소 가운데 하나로 자리매김할 필요가 있다. 인터랙티브한 문자형태의 정보에다 목소리와 동영상을 묶은 비디오를 한 화면 위에 함께 띄우는 형태의 프리젠테이션 기법은 인터넷의 전유물이기 때문이다. 그러나 지금의 여러 가지 제약 아래서 인터넷에 쓰일 최선의 동영상을 만들기 위해서는 고려할 점들이 있다.
첫째, 비디오 화면의 뒷배경은 단조로울수록 좋다. 이와 함께 출연자의 의상도 단색 계열이면서 무늬가 없는 것이 되도록 신경을 써야 한다. 색깔과 모양이 단조로우면 비디오 파일의 압축효과가 크기 때문이다. 보다 작게 압축된 파일이 보다 빨리 전송된다는 점을 고려한 것이다.
둘째, 인터넷 동영상에서 가장 유용한 포맷은 한 사람의 얼굴을 클로즈업한 화면이다. 인터넷 동영상의 화면크기가 작기 때문이다. 롱샷의 풍경 사진이나 현란한 쇼프로그램과 같은 내용은 인터넷 동영상으로 적합치 못하다. 따라서 인터넷 동영상으로 가장 적당한 내용은 뭐니뭐니해도 인물 인터뷰다.
셋째, 카메라 워크가 정적이어야 한다. 피사체로부터 빠른 속도로 멀어지거나 피사체에 급속히 다가가는 주밍(zooming)이라든가, 카메라를 빙 돌리는 패닝(panning)과 같은 동적인 카메라 워크는 금물이다.
인터넷 동영상은 영화나 마찬가지로 하나 하나의 장면을 정지화상으로 떼어내 이 프레임들을 연속으로 보여줌으로써 동영상을 만들어내지만 프레임과 프레임 사이의 시간이 영화처럼 짧지 못해 연속동작이 매끄럽지 않다. 그래서 카메라 앵글이 빠른 속도로 변하는 경우 아예 화면이 도중에 끊어진 것처럼 보이기 일쑤다.
카메라 워크와 함께 고려해야 할 것은 출연자의 몸놀림 역시 극도로 자제해야 한다는 점이다. 고개를 휙 돌아본다든가 손뼉을 친다든가 머리를 도리질한다든가 하는 빠른 몸놀림은 예외없이 끊어져 보이기 때문이다.
넷째, 자칫 단조로워질 수 있는 화면에 변화를 주기 위해 가능한 한 동영상을 여러 컷으로 쪼개거나 화면 전체가 차츰 밝아지거나 어두워지는 페이드(fade) 기법을 이용할 필요가 있다. 단조로운 뒷배경에 별로 움직임이 없는 출연자나 카메라 워크는 동영상 자체를 무미건조하게 만들 염려가 있기 때문이다.
뉴스 사이트, 꼭 지켜야 할 다섯 가지
가상공간에서 뉴스 사이트와 독자와의 관계는 오프라인 세계의 신문과 같은 인쇄물하고는 다르다. 오프라인 세계에 익숙한 독자들이 웹 사이트라는 가상공간에서 별 불편을 느끼지 않고 뉴스를 찾아 읽을 수 있도록 하자는 것이 유저빌리티의 핵심이다. 뉴스 사이트 독자들이 가상공간에서 느낄 수 있는 보이지 않는 장벽을 낮추자는 것이다.
유저빌리티에서의 성과는 하나의 웹사이트 안에서 수백 가지에 이르는 크고 작은 문제점들을 하나씩 하나씩 찾아서 고쳐나가야 이룩할 수 있다. 유저빌리티 문제점은 아주 작고 사소한 경우가 많다. 그 동안 진정 이용자의 입장에서 바라보지 않았기 때문에 발견할 수 없었던 경우가 대부분이다. 그래서 유저빌리티는 작은 노력으로 커다란 효과를 볼 수 있다는 잇점을 갖고 있다.
관행을 지켜라
인터넷의 역사가 길어지면서 웹사이트 디자인은 어느 정도 굳어진 정형을 갖게 됐다. 웹사이트의 로고나 이름을 일정한 위치에 두거나, 왼쪽에 세로로 길게 네비게이션 바를 두는 것 등이 그 예다. 유저빌리티 전문가 제이콥 닐슨은 “이용자들이 당신의 웹사이트가 아닌 다른 웹사이트들에서 대부분의 시간을 보낸다는 점을 명심하라”며 “이용자들은 당신의 웹사이트에 찾아오기 전에 이미 웹사이트가 어떻게 움직일 것인가에 대한 일정한 기대를 갖고 있다”고 강조한다.
마이크로 컨텐트를 직설적으로 써라
웹페이지의 타이틀, 뉴스의 헤드라인이나 중간 제목, 링크의 이름, 이미지나 링크의 ALT 값, 간단한 안내문 등 웹페이지 곳곳에서 보이는 20글자 이하의 짧은 글들이 ‘마이크로 컨텐트’다. 마이크로 컨텐트는 이용자들이 한눈에 봐서 그 뒤에 따라오는 내용이나 페이지가 무엇에 관한 것인지를 직관적으로 알아 볼 수 있도록 쓰여져야 한다. 쓸데 없는 은유나 비유는 금물. 키워드를 담은 직설적인 표현이 제격이다.
한눈에 훑어 볼 수 있도록 하라
웹페이지에서 뉴스를 읽는 독자들은 한 줄 한 줄 꼼꼼히 읽지 않는다. 읽기보다는 훑어본다고 하는 편이 더 정확하다. 훑어보듯 스쳐지나가는 독자의 시선을 붙잡으려면 페이지를 여러 도막으로 나눠서 곳곳에 중간 제목을 달거나 중간 제목들을 한 군데 모아 전체 내용을 한눈에 가늠할 수 있도록 해줘야 한다. 목적은 독자들로 하여금 그 페이지가 찾는 주제에 맞는 내용인가를 일별할 수 있도록 도와주자는 것이다.
이미지는 손톱 크기부터
이미지를 다룰 때는 손톱 크기의 샘플부터 본래 크기의 이미지로 찾아갈 수 있게 하자. 손톱 크기 샘플을 만들 때는 실제 이미지를 단순히 가로 세로 사이즈만 조절하는 데 그치지 말고 크기와 함께 해상도를 떨어뜨려 독자들의 다운로드 시간을 최소화해 줘야 한다. 샘플과 함께 제 사이즈 이미지의 파일 크기와 파일 형태를 미리 알려주는 것을 잊지 말아야 한다.
핵심은 가로, 세로 4대 3 비율 안에
컴퓨터 모니터의 가로, 세로 크기는 4대 3의 비율을 유지한다. 독자들에게 보여줄 주요 뉴스나 웹사이트 브라우징에 결정적인 요소들은 이 비율을 벗어나는 곳에 위치해서는 안된다.
이 중에서도 거의 대부분의 퍼스널 컴퓨터에서 스크롤링 없이 볼 수 있는 가로 640, 세로 480 픽셀 이내의 화면은 그야말로 황금의 자리다.
http://www.lgpress.org/library/book/book13/5.asp?name=#1
