7. 좋은 웹 페이지에는 무엇이 필요한가?

소개

지난 글의 연장으로, 이 글에서는 쇠똥구리 웹 사이트의 컨텐츠를 살펴보고, 좋은 웹 사이트와 페이지들이 담고 있어야 할 것에 대해 감을 잡으실 수 있도록 하고자 합니다.

이면에 있는 코드들에는 아직 신경쓸 필요가 없습니다. 그 대신, 서로 다른 페이지들을 살펴보면서 거기에 무엇이 나타나야 하는지, 그리고 일관성, 사용성, 접근성 같은 이슈들에 대해 고려하게 될 것입니다. 차례는 다음과 같습니다.

  • 홈페이지
    • 이것이 우리 사이트에서 가지는 의미는?
  • 네비게이션
  • 기타 사이트에 공통적인 것들
  • 문맥이 모든것입니다
    • 연관된 컨텐츠
    • 제목
  • 사용성
  • 접근성
  • 요약
  • 연습문제

홈페이지

이 시점에서. 많은 사람들이 “많은 사람들이 보게 될 페이지 – 홈페이지에서 작업을 시작해야지. 이게 논리적이잖아?” 라고 생각하는 경향이 있습니다.

그렇게 들릴지도 모릅니다만, 다시 한 번 말하건대, 홈페이지는 작업을 시작하기에 최선의 장소는 아닙니다. 홈페이지에 초점을 맞추는 것이 일반적으로 벌어지는 실수입니다. 웹사이트의 홈페이지에서는 사이트의 모든 것을 요약하려는 시도가 벌어지며, 모든것을 모든이에게 전달하는 곳이 됩니다. 이러한 점 때문에 실수들이 불거지게 됩니다.

내가 말하고자 하는 바의 한가지 예를 들자면, 잠시 MSN 홈 페이지(그림 1) 를 보시기 바랍니다. 경이로울 정도로 링크와 컨텐츠들이 많습니다. MSN 네트워크는 무척 방대합니다. 그리고 그 모든 것들이 당신의 관심을 끌고자 팽팽히 겨루고 있습니다.

그림 1. MSN 홈페이지 - 링크가 굉장히 많군요!

마치 “없는 것 빼고는 다 늘어놓은다음, 없던 것 까지 전부 추가했어요” 라고 말하는 것 같습니다. 이러한 홈페이지는 아마도 방대한 사이트들의 집합체에는 어울릴수도 있겠지만, 우리의 밴드 홈페이지에서는 분명히 과도한 것입니다. 사람들을 끌어당긴다기보다는 오히려 등을 돌리게 할 것 같네요.

또한, 사이트에 방문하는 사람들이 처음 보게 될 페이지가 홈페이지라고 생각하는 것도 종종 벌어지는 오해입니다. 사람들이 밴드에 대해 들었거나, 유인물/스티커/배지 따위를 보고 사이트에 방문하는 것이라면, 아마도 브라우저를 열고는 주소를 입력해서 홈페이지로 오겠지요.

하지만 가능성이 더 높은 경우는, 방문자들이 검색의 결과로 사이트에 방문한다는 것입니다. 만약 사람들이 “쇠똥구리” 라는 밴드 이름으로 검색했다면, 검색결과의 맨 위에 홈 페이지가 있을 수는 있습니다(보장은 없지만요). 그렇지만 예를 들어서 “딱정벌레 종족의 공연” 이라고 검색했다면, 결과의 맨 위에 “투어 날짜” 페이지가 있을 수 있습니다. 또는 “Moose Jaw의 밴드” 라고 검색했다면 “쇠똥구리에 관해” 페이지가 나왔을 수도 있죠 – 그 페이지에는 쇠똥구리 밴드의 설립멤버가 Moose Jaw 라고 씌어 있지만, 홈페이지는 그렇지 않으니까요.

뉴욕 타임즈에서는 오래된 컨텐츠에 접근하지 않으려는 결정에 관한 기사를 통해, 자신들의 사이트에 방문하는 사람들이 바뀌었다고 언급한 바 있습니다. 바뀐 점은:

NYTimes.com 을 입력하여 사이트에 방문하는 대신, 검색 엔진이나 다른 사이트의 링크를 통해 방문하는 사용자의 수가 많이 늘어났습니다. 이런 간접적인 독자들은 비용을 지불해야 하는 기사들은 읽을 수 없고, 직접 방문하는 충성도 높은 고객에 비해 구독료를 낼 가능성도 매우 낮지만, 페이지뷰와 광고수익을 늘릴 수 있는 기회로 보입니다.

이러한 것이 우리의 사이트에는 어떤 의미가 있나요?

이러한 모든 것들은 컨텐츠를 개별적인 페이지들로 분할할 때, 사용자들이 찾고 있는 것을 어떻게 찾을 지, 또는 그들이 뭔가 더 보려고 할 경우 다음에 갈 곳은 어디가 될 지를 생각해야 한다는 것을 의미합니다.

모든 것을 홈페이지에 몰아 넣는 것이 유혹적일 수 있겠지만, 홈페이지는 사이트의 다른 내용들을 강조하고, 그리로 보내는 용도로 쓰는 것이 사실 더 좋습니다. 홈페이지를 사이트의 다른 페이지와 다를 것이 없다고 간주하고, 목적을 부여하십시오. 그러한 목적에는 뉴스를 보여주는 것, 개요를 제공하는 것, 밴드를 소개하고 사이트의 다른 곳으로 방문자들을 안내하는 것 등이 있을 수 있습니다. 페이지에는 네비게이션 역할을 할 것과, 약간의 브랜드 PR도 있어야 할 것입니다.

자 이제 조금 더 깊이 알아봅시다.

네비게이션

사이트 내에서 어떻게 이동하게 할 것인가 하는 것이 가장 중요한, 가장 중요하지는 않다고 하더라도 치명적인 요소이며 잘 구현해야 합니다. 사이트의 일반적인 목적들을 분석하고 그러한 것들을 주된 네비게이션에 포함시켜야 합니다.

당신이 아마 이미 들어보았을, 네비게이션에 관한 또다른 흔한 오해가 있습니다 – 모든 페이지는 3번 이내의 클릭으로 도달할 수 있어야 한다는 오해 말입니다. 이러한 오해가 확산되면서, 인터넷에서 가장 형편없고 가장 복잡한 네비게이션들이 만들어졌습니다. 실생활의 예제로, 인터넷에 있는 쇼핑 사이트나 가격 비교 사이트를 생각해 봅시다. 그들은 고객이 자기들의 사이트를 떠나 경쟁자의 사이트로 가지 못하게 하기 위해서는, 구매하기 위해 필요한 클릭 횟수를 최소한으로 줄여야만 한다는 강박 관념에 사로잡혀서, 가능한한 많은 링크들을 우겨 넣고 있습니다. 그렇지만, 이러한 것은 결과적으로 사용자가 효과적으로 이용하기에는 너무나 많은 정보를 제공하게 됩니다. 우리는 이러한 것을 가리켜 과유불급이라고 합니다.

하나의 링크에서 다른 것으로 이동하는 분명한 경로가 있고, 자신이 원하는 것을 분명히 찾을 수 있다는 확신이 있다면 사용자들은 대개 사이트를 떠나지 않고 계속 찾아보는 경향이 있습니다.

정보 구조로부터 찾은 근거에 의해, 쇠똥구리 사이트의 주된 네비게이션은 “상점”, “쇠똥구리에 관하여”, “연락처”, “음악”, “밴드 뉴스” 와 함께 홈페이지로 돌아가는 링크들이 될 것입니다. 링크된 페이지의 하위 페이지들, 예를 들어 “투어 날짜”, “가사집” 같은 페이지로의 링크는 필요하지 않습니다. 이러한 페이지들에 대한 링크는 그 영역에만 있어야 합니다. 특정 곡의 가사 페이지에 있다가 “투어 날짜” 로 바로 가고 싶은 사용자는 먼저 “밴드 뉴스” 로 가서, 다시 “투어 날짜” 로 이동하면 될 것입니다.

성공적인 사이트 네비게이션을 만드는 데 있어서 가장 중요한 부분은 일관성입니다. 페이지 상단의 탭들(“Home”, “Articles”, “Forums” 같은 링크들)을 살펴보세요. dev.opera 사이트를 이리저리 돌아다녀도 이 네비게이션은 바는 그자리에 계속 있을 겁니다. 네비게이션은 현재 있는 위치를 표시하고, 그 영역에서 더 들어갈 수 있는 링크들을 표시하기 위해 조금씩 바뀔 것입니다. 예를 들어, “Articles” 탭을 누르면 기사 영역으로 넘어가는데, 거기에는 가장 최근의 글 중 일부와, “접근성”, “CSS”, “모바일” 같은 서브섹션들을 가리키는 링크들이 포함되어 있습니다.(그림 2를 보세요)

그림 2. dev.opera.com 의 네비게이션은 사이트 어디에서도 일정하게 보입니다.

사이트에 있는 다른 공통 요소들

네비게이션과는 별도로, 페이지들마다 반복적으로 나타나는 부분들이 있습니다.

대부분의 사이트는 어떤 형태로든 홍보, 로고, 마스트헤드 같이 소유권을 표시하는 것이 있습니다. 예를 들어, 거의 모든 야후! 페이지의 좌 상단에는 로고가 있으며, 이 로고에는 현재 방문중인 야후! 네트워크가 표시됩니다(“여행”, “영화”, “자동차” 같은 것이죠)

하지만 헤더(페이지의 상단을 가로지르는)에는 로고 이상의 것이 포함됩니다. 헤더는 주 네비게이션을 포함하거나, 혹은 거기에 밀착해 있을 수 있습니다. 사용자들이 메뉴와 링크를 사용해서 사이트를 돌아다니지 않고 원하는 것을 찾을 수 있도록 검색 박스가 들어있는 경우도 드물지 않습니다. 사이트의 모든 페이지에 이러한 요소들을 모두, 아니면 대부분이라도 포함시켜야 합니다.

푸터(페이지의 마지막 영역)에는 저작권 정보와 부수적인 페이지들(“사이트에 관해”, “이용 조건”, “연락처” 등) 같은 추가적인 정보가 포함되어야 합니다.

색상, 레이아웃, 형태와 아이콘의 사용, 타이포그래피와 이미지 같은 것들이 전부 합쳐져서 그 페이지가 사이트에 ‘속해 있다는’ 느낌을 형성하게 됩니다. 일관성이 핵심입니다. 일관된 외형과 배치를 사용하게 되면 친숙함을 자아내게 되고, 사용자가 길을 잃고 헤매지 않도록 돕습니다. 지금 보고 있는 페이지가 그동안 지나온 페이지들과 시각적으로 연결되어 있으므로, 같은 경험의 일부분임을 알게 됩니다. 사이트를 디자인할때는 반드시 이러한 것을 염두에 두고 있어야 하며, 사이트의 모든 페이지들이 서로 다르게 보이게 만들어서는 안됩니다.

쇠똥구리 사이트에서는 페이지 헤더에 밴드 로고와 이름을 붙여서, 방문자들이 사이트를 돌아다니는 동안 이것을 계속 봄으로서 밴드의 이미지가 강화되게끔 하고, 자신이 계속해서 밴드의 정보를 보고 있다는 친숙한 느낌을 주게끔 합니다. 푸터는 사이트, 가사, 이미지, 그리고 오디오 샘플 들의 저작권 정보를 포함합니다. 또한 연락처 정보, 예약을 할 수 있는 페이지에 대한 링크도 포함하고 있습니다.

문맥이 모든것입니다

각각의 페이지는, 위에서 설명한 공통적인 요소들을 제외하면, 독특해야 합니다. 좋은 웹 페이지란 한가지 일, 또는 작은 숫자의 일 만을 하며, 그것을 잘 하는 것입니다.

관련있는 내용

컨텐츠들이 서로 관련되어 있으면서도 또한 분리되어 있도록 만드는 것이 좋은 웹 페이지를 훌륭하게 만드는 핵심 요소입니다. 컨텐츠는 반드시 단독으로 식별될 수 있어야 하고(분명히 그것이 있어야 하는 장소, 유일한 URL을 가져야 합니다), 논리적으로 배열되어 있어야 합니다(사이트의 시점에서도, 페이지 자체의 시점에서도). 이렇게 하면 원하는 것을 쉽게 찾을 수 있습니다.

밴드에서 곧 치를 공연을 예로 들어 봅시다. 이러한 것을 모든 페이지에다가 올려 놓고 싶겠지만, 그 정보는 자신이 있어야 할 자리가 있고, 그 자리에 있어야 합니다. 단순한 “다음 공연” 모듈을 만들고 그것을 투어 날짜 페이지에 배치하는 것 만으로도 충분히 효과적으로 광고를 할 수 있습니다. 그러한 것을 중복시키면 사용자와 검색엔진 모두를 혼란시킬 가능성이 있습니다.

제목

다음에 신문을 보게 되면, 제대로 한번 들여다 보십시오. 어떤 이야기들이 크고 굵은 활자로 적혀 있으며 이미지를 포함하고 무게감 있는 제목이 붙는지 살펴보는겁니다. 시간이 없거나 빅 뉴스만 보려는 경우에 읽어야 할 가장 중요한 기사가 무엇인지 볼 수 있습니다.

웹 페이지도 마찬가지입니다. 페이지에 있는 각각의 섹션들은 제목으로 소개되어야 하며, 제목은 상대적인 중요성(이 섹션이 앞의 것의 부속인가? 아니면 같은 레벨인가? 하는)을 나타내는 것이어야 합니다.

예를 들어, 지금 이 글의 바로 이 부분에는 두개의 제목, “관련있는 내용” 과 “제목” 이 있습니다. 그리고 이 두개는 “문맥이 모든것입니다” 보다 낮은 등급이므로, 문맥 섹션에 포함된 서브섹션임을 나타내는 것입니다.

사용성

사용성이란 사이트가 이성적으로, 그리고 예측 가능하게 움직이도록 만드는 만능의 어휘입니다.

뉴스 포털에서 글을 읽으려고 했더니 로그인해야만 읽을 수 있다는 응답을 받은 적이 있습니까? 온라인으로 2분 이내에 항공권이나 기차 티켓을 예약해 본 일이 있습니까?(2분 이라는 시간은 전화를 걸거나 창구에서 티켓을 사는 데 충분한 시간입니다) 주소나 신용카드 번호를 몇번씩이나 입력하였지만, “잘못 입력하셨습니다” 라는 응답 외에는 받지 못해본 일이 있습니까? 좋은 사이트가 있다는 것을 알고 있는데도 검색결과에선 유용한 링크가 전혀 나오지 않는 경험이 있습니까?

이러한 모든 것들은 형편없는 사용성의 사례들입니다. 사이트 사용자의 니즈를 전혀 고려하지 않은 결과입니다. 그런 요구들을 당신이 디자인하고 만들어내는 것의 중심에 놓는다면, 사람들을 만족하게 하는 사이트를 만들 가능성이 높아집니다.

하지만 사용하기 쉬운 사이트를 만든다는 것은 쉽지 않고, 지식들 중 상당수는 경험에서 나옵니다. 다른 사이트에서 불편하고 짜증났던 것들을 기록하는 일기장을 만들고, 당신이 만드는 사이트에서는 그런것이 없도록 해 보십시오. 또한, 사이트를 테스트하는 것은 실제 사람이 하는것만한 것이 없습니다. 일단 사이트를 만들었다면, 다음과 같은 것들에 유의하면서 사람들이 사용하는 것을 지켜보십시오:

  • 사용자들이 찾으려던 페이지를 찾을 수 있나?
  • 입력한 검색어에 합당한 검색결과를 알려주는가?
  • 이미지/오디오/비디오가 그들의 브라우저에서 잘 동작하는가?
  • 무언가에 짜증을 내고 있지는 않은가?
  • 사용자를 즐겁게 해 주는 부분이 있나?

전문적인 사용성 테스트는 전문적인 기업이 많은 예산을 투자해서 행하는 것이긴 합니다만, 친구나 가족들과 함께 하는 짧고 비정형적인 테스트 만으로도 당신이 미처 느끼지 못했던 문제들에 대한 식견을 가질 수 있게 됩니다. 당신이 사이트를 만들었고, 여러가지 것들을 알고 또 짐작할 수 있지만, 다른 이들은 그렇지 못하기 때문입니다.

접근성

불행하게도, 접근성이라는 단어는, 절대 다수의 사람들에게 “맹인이 이용할 수 있는 웹사이트를 만드는 것” 이라고 받아들여집니다. 진실은, 접근성 이슈는 많은, 훨씬 더 많은 사람들에게 영향을 미친다는 것입니다.

“보조 기술” 이라는 단어는, 어떤 사람이 그것을 사용함으로서 컴퓨터를 좀 더 잘 다룰 수 있게 되는 모든 종류의 기구, 또는 하드웨어를 설명하기 위해 사용되는 것입니다. 이러한 것은 보통 맹인을 위한 스크린 리더, 또는 키보드와 마우스를 사용할 수 없는 사람을 위한 음성 입력기 등을 떠올리게 합니다. 하지만 – 안경은 어떨까요? 시력을 교정할 필요가 있는 사람들 역시 보조 기술을 사용하고 있는 것입니다. 하지만 대부분은 자신을 장애가 있는 사람이라고는 하지 않죠.

좋은 웹 페이지를 만들려면, 사람들이 인터넷을 사용하려고 할 때 맞닥뜨릴 수 있는 문제들에 대해 인식하는 것이 중요합니다. 사용자들이 마우스를 사용할 것이라고 가정하지 마십시오. 페이지에 사용한 이미지를 볼 수 있을 것이라고 가정하지 마십시오. 모든 이들이 플래시 플레이어를 설치했다고 가정하지 말고, 그렇지 않은 경우에 대비해서 대체 컨텐츠를 제공하십시오.

보조 기술을 필요로 하는 사람들에 더해, 이러한 것을 필요로 하는 사람들이 또 있습니다. 모바일 유저들입니다. 플래시는 모바일 환경에서는 아직 매우 미성숙한 기술입니다 – 지원된다면요. 애플의 아이폰은 지원하지 않고 있고, 아마 앞으로도 하지 않을 것입니다만, 그럼에도 불구하고 마치 데스크탑 버전의 사파리를 사용하는 것 처럼 웹을 이용할 수 있습니다. 성능이 낮은 모바일 기기로도 웹을 이용할 수 있게 하는 오페라 미니 같은 기술들은 웹 페이지를 더 가볍고 더 효율적이게 리팩토링하도록 강제할 것입니다. 또한 페이지에 있는 이미지들이 매우 작게 표현될 것이므로, 미묘한 디테일에 의존하는 컨텐츠들의 의미가 퇴색할 수 있습니다.

우리의 밴드의 경우에는, 사진을 많이 전시할 생각이라면 반드시 그 이미지의 내용을 설명해야 한다는 것입니다. 사람들이 밴드의 음악을 들을 수 있도록 플래시 음악 플레이어를 사용한다면, 플래시가 설치되어 있지 않은 사람들도 자신이 선호하는 방식으로 그것을 들을 수 있도록 그 음악에 대한 직접적인 링크 역시 제공해야 하는 것입니다.

요약

이 글에서는 실제 웹 사이트를 만들려고 할 때 염두에 두어야 할 광범위한 주제들을 다루었습니다. 이러한 것을 지키면 좀 더 사용하기 쉽고, 많은 이들이 쓸 수 있고, 더 부드럽게 동작하는 사이트를 만들기가 좀 더 쉬워질 것입니다. 이러한 모든 컨셉들은 이후의 글에서 더 자세하게 다루어질 것입니다.

연습문제

이 글에 대한 연습문제는, 그저 웹을 다시 보라는 것입니다. 즐겨 방문하던 사이트를 다시 방문하되, 새로운 시각을 가지고 살펴보십시오. 다음의 질문들에 답할 수 있도록 메모해 보십시오.

  • 일관성 있는 헤더, 푸터, 네비게이션 영역을 가지고 있습니까?
  • 사이트를 돌아다니는 동안 네비게이션이 어떻게 바뀌는지 관찰해 보십시오.
  • 당신을 짜증나게, 또는 혼란스럽게 만드는 점이 있는지 살펴보십시오. 만약 그렇다면, 어떻게 하면 그것을 해결할 수 있을지 직접 해 보십시오.
  • 가능하다면 브라우저에서 이미지나 자바스크립트를 차단하거나, 또는 모바일 기기에서 사이트를 이용해 본 다음 그렇지 않은 경우와 비교해 보십시오.

저자에 대해서

Mark Norman Francis는 웹이 발명되기 전부터 인터넷에서 일을 했었다. 그가 마지막으로 일했던 Yahoo!에서 세상에서 가장 큰 웹사이트를 위한 Front End Architect로, 최상의 방법을 정의하고, 국제적인 웹개발의 표준과 품질을 만들(Coding)었다.

Yahoo! 이전에 그는 Formula One Management에서 일했다, Purple Interactive와 City University에서 웹 개발에 포함되는 각종 규칙을 만들고, CGI 프로그래밍과 시스템 설계를 했다. 그는 블로그를 운영중이다.

 

이 글을 다 읽어주셨다면, 댓글을 남겨주세요. 좋았다라는 격려도 좋고, 잘못된 부분을 지적해 주시는 것도 좋습니다. 마음에 드셨다면 아래 Like 버튼을 눌러서 페이스북과 트위터로 소개해 주시면 더욱 좋겠습니다.