[스크랩] 톱 10 웹 사이트 디자인 비교 분석

The taste of others

by liaison 2004. 11. 4. 11:48

톱 10 웹 사이트 디자인 비교 분석

저자: Andrew Starling | 날짜: 2002년 01월 18일

인터넷닷컴에서는 전세계 톱 10 웹 사이트들의 디자인 상의 공통점과 차이점을 2회에 걸쳐 비교 분석해 볼 계획이다. 이들 세계에서 가장 유명한 사이트들의 폰트, 컬러, 링크, 내비게이션, 타이틀, 자바 스크립트, CSS, 페이지 크기 등을 비교 분석함으로써 사이트 제작 및 개선에 도움을 얻을 수 있기 바란다.

웹 디자인은 시간이 흐를수록 디자이너 개인적인 직관이나 느낌보다는 ‘과학’에 크게 의존하고 있다. 즉, 웹 사이트들 각각의 개성이나 화려함보다는 정보 전달의 효율성을 더욱 중시하고 있다는 뜻. 결과적으로 많은 웹 사이트들은 이 정보 전달의 효율성에 의거해 여러 가지 비슷한 특징들과 공통점을 공유하게 됐다.

그렇다고 모든 웹 사이트 디자이너들에게 “최고의 디자인 가이드라인” 같은 것을 마련해 놓고 웹 사이트를 그대로 디자인하라고 강요하는 것은 불가능할 것이다. 웹 사이트 디자인은 어느 정도 각 기업들의, 그리고 각 디자이너들의 개성과 철학이 드러나기 마련이다. 그러므로 사이트 디자인을 특정 규칙에만 무조건 따르게 하는 것은 옳지 않은 방법이다.

하지만, 웹 사이트를 처음 제작하는 입장에선 무작정 자기 머리 속에 있는 직관과 감각에만 의존하는 것보다는 가장 일반적이고 가장 많이 공유된 웹 디자인의 특징을 살펴보는 것이 중요하다. 특히 유명 웹 사이트들의 디자인적인 특징을 습득함으로써 사용자들에게 친밀감을 주는데 이바지할 수 있기 때문이다.

지금부터 그 “일반적인” 웹 사이트 디자인의 특징을 세계 톱 10 사이트들로부터 알아보도록 하자. 먼저 톱 10 사이트들로는 어떤 사이트들이 선정됐는지 알아보자.

톱 10 웹 사이트

닐슨/넷레이팅(Nielsen/NetRatings)과 주피터 미디어 메트릭스(Jupiter Media Metrix)는 매달 가장 많은 사용자들이 방문한 인터넷 기업들 순위를 발표하고 있다.

여기서 말하는 인터넷 기업 순위란 한 기업이 소유한 여러 웹 사이트의 방문객 수를 합해 결정되는 것으로, 예를 들어, 월트 디즈니라는 ‘인터넷 기업’은 디즈니닷컴(disney.com)과 abc.com등과 같은 자사 소유의 사이트들의 한달 방문객 수를 모두 합쳐 순위가 매겨진다.

다음은 닐슨/넷레이팅이 2001년 12월 2일에 발표한, 가장 많은 사람들이 찾는 웹 기업 순위다. (이 순위는 주피터에서 발표한 순위와 거의 같다. 편의상 모든 이름은 영문으로 표기한다.)

이 기사를 통해 다룰 톱 10 웹 사이트들은 그 인터넷 기업이 소유하고 있는 대표(메인) 웹 사이트들이다. 예를 들어, 월트 디즈니는 Disney.com, AOL 타임 워너(AOL Time Warner)는 aol.com, 어바웃-프리미디어(About- Primedia)는 어바웃닷컴(about.com)이 비교 분석된다.

각 홈 페이지를 살펴보면 그 목적과 지향하는 바에 따라 디자인과 내비게이션이 다른 것을 알 수 있다. 특히 사람들이 가장 많이 찾는 곳이 홈 페이지이다 보니 디자이너들의 관심과 손이 가장 많이 가는 곳이 역시 홈 페이지이기 마련. 따라서 이 홈페이지에는 기업의 웹 디자인 ‘철학’이 담겨있는 것은 물론이며, 이 ‘철학’은 다른 하위 페이지에도 비슷한 영향을 미치고 있다.

하지만 그와 동시에 이들 톱 10 사이트들은 서로 많은 공통점을 공유하고 있었다. 앞서 언급한 과학적인 내비게이션과 디자인의 통일성을 갖추다 보니 이런 공통점이 많이 발견된 것으로 보인다. 이제 그 디자인 상의 차이점과 공통점을 하나씩 알아보도록 하자. 참고로 이번 디자인 분석은 2001년 12월 2일을 기준으로 실시된 것이다.

중심(메인) 폰트

톱 10 웹 사이트의 홈 페이지에 가장 많이 쓰이고 있는 폰트는 단연 버다나(Verdana: 굴림체와 가장 흡사함)였다. 마이크로소프트가 웹 사이트를 위해 특별 제작한 버다나 폰트는 현재 웹에서 가장 읽기 편한 폰트로 통하고 있다. 애리얼(Ariel)은 버다나 다음으로 많이 쓰이는 폰트로, 버다나와 모양이 흡사해 읽기 편하다. (물론 애리얼은 버다나 보다 훨씬 역사가 오래된 폰트임.)

그리고 (영문) 웹 사이트에는 디폴트 폰트가 타임 로만(Times Roman: 명조체와 비슷함)으로 정해져 있는데 이 디폴트 폰트를 그대로 이용하는 사이트도 두 곳이나 있었다. 타임 로만은 우리 나라의 명조체와 마찬가지로 책을 인쇄할 때 가장 많이 쓰이는 폰트다.

다음은 각 톱 10 사이트마다 쓰이고 있는 중심 폰트의 목록들이다.

페이지 배경 색

대부분이 흰색이었고, 파란색 톤이 첨가된 곳도 있었다. 배경색으로 진한 파란색을 쓴 디즈니 웹 사이트의 경우는 다른 대형 사이트에 비해 무척 예외적이었다. 하지만 플래시 등을 동원해 화려한 시각 효과를 앞세운 사이트라 파란 배경색은 전혀 어색해 보이지 않았다.

디즈니 사이트를 제외하곤 대부분의 홈 페이지가 흰색 일색이었다. 알아두어야 할 것은 웹 페이지의 ‘디폴트’ 배경색은 흰색이 아니라는 점이다. 즉, 대부분의 웹 사이트들이 의도적으로 페이지 배경색을 흰색으로 조절해 놓았다는 뜻.

색 조합

흰색 바탕에 가장 잘 어울리는 색 조합은 아마도 파란색인 듯 모양이다. 대부분의 톱 10 사이트들이 파란색을 색 조합의 주제 색으로 삼았다. 다만 아마존과 어바웃닷컴이 예외적으로 빨강 계열 색을 사용하고 있었다. 어바웃닷컴은 아예 파란색을 일절 사용하지 않아 다른 사이트들과 차별돼 보였다. 모든 사이트들은 색 조합을 위해 한 가지 이상의 색을 도입했다.

텍스트 링크 스타일

다들 알고 있을 테지만, HTML에서 링크가 걸리는 텍스트는 (디폴트로) 파란색에 밑줄 표시가 된다. 바로 이 디폴트 스타일이 가장 흔히 쓰이는 텍스트 링크 스타일이다.

대부분의 웹 사이트 유저빌러티 전문가들은 링크 텍스트에 밑줄이 빠지면 혼란을 일으킬 염려가 있다고 주장하지만, 마이크로소프트와 MSN 사이트는 텍스트 링크에 밑줄을 거의 모두 빼 놓은 채 유지되고 있다.

페이지 상단의 내비게이션 바

사이트 상단에 가로로 놓인 내비게이션 바에는 사이트의 각 섹션으로 인도하는 링크가 걸려 있다. 여기엔 6개에서 8개의 링크가 걸려 있는 것이 보통. 이런 내비게이션 바는 대부분의 톱 10 사이트에서 쓰이고 있다.

일부 사이트에선 가로 내비게이션 바를 두개 이상 겹쳐 놓기도 한다. 이는 바 하나엔 최대 7-8개의 링크만 거는 것이 효과적이라는 유저빌러티 이론에 따라 (더 많은 링크를 달기 위해) 바의 수를 늘린 것이다.

왼편 링크 칼럼

웹 페이지의 왼편에 놓인 링크 칼럼은 10개의 사이트들 중 정확히 절반이 이용하고 있었다.

오른편 링크 칼럼

왼편 링크 칼럼 마찬가지로 정확히 절반에 달하는 사이트들이 오른편 링크 칼럼을 사용하고 있었다. MSN과 아마존, 라이코스는 왼편과 오른편 모두 링크 칼럼을 이용하고 있었다. 한편, 10개 사이트 중 3개의 사이트들은 양쪽 모두 링크 칼럼을 두고 있지 않았다.

말하자면, 웹 페이지에서 링크 칼럼의 반드시 있어야 하는지, 혹은 어떤 자리에 놓아야 가장 효과적인지에 관한 일정한 기준이나 ‘상식’은 없다는 것이다.

톱 10 웹 사이트 디자인 비교 분석: 제2편

저자: Andrew Starling | 날짜: 2002년 01월 25일

홈페이지 링크

여기서 말하는 홈페이지 링크란 사이트의 각 페이지에 홈 페이지로 연결되는 링크를 다는 것을 말한다. 사실 홈 페이지 링크는 내비게이션에 필수적인 부분은 아니다. 단지 각 페이지에 통일성을 부여하기 위해 걸어 놓는 것이 홈 페이지 링크인데, 재미있게도 상당수의 톱 10 웹 사이트들이 이 홈 페이지 링크를 들여 놓았다. (10 사이트 중 6곳)

홈 페이지 링크는 디자인의 통일성 이외에는 거의 쓸모가 없는데 불구하고 이렇게 많은 수가 이용하고 있다는 사실은 시각적인 통일성의 중요함에 대해 말해주고 있다 하겠다.

홈페이지 타이틀

웹 페이지마다에는 브라우저 윈도의 상단에 나타나는 ‘제목’이 있다. 이 제목은 윈도 OS에서는 스크린 하단의 작업 표시줄에도 나타나고, 페이지를 북마크 할 때에도 동일한 이름으로 저장된다.

많은 수의 웹 사이트들이 페이지 제목을 “Welcome to”로 시작하고 있는데, 이렇게 해 놓으면 북마크 파일이나 작업 표시줄에서 다른 웹 페이지와 구분하기가 힘들다. 다들 페이지 제목을 “Welcome to”로 시작하는 데에는 방문객에 대한 격식을 차리려는 목적이 있는 듯 싶은데, 정확한 이유는 알 수 없다.

아무튼, 톱 10 웹 사이트 중에는 홈 페이지에 “Welcome to” 제목을 채택한 사이트가 모두 3곳이었다.

클라이언트 자바스크립트

거의 모든 웹 사이트들이 자바스크립트를 이용하고 있다. 그것도 대부분 엄청난 양을. 지긋지긋한 팝업 창의 영향으로 일부 사용자들은 자바스크립트에 대해 좋지 않은 감정을 갖고 있기도 하다. 그렇다고 자바스크립트의 인기가 줄어 들고 있는 것은 아니다. 이번 조사 결과 톱 10 사이트 모두가 만장일치로 클라이언트 자바스크립트를 이용하고 있는 것으로 나타났다.

CSS(Cascading Style Sheet)

CSS(Cascading Style Sheets)는 HTML 문서에 들어 있는 데이터와 서식을 분리시켜주는 역할을 한다. 일반적으로 이런 서식, 레이아웃과 관련된 규칙은 CSS 라고 불리는 별도의 파일에 저장되어 있다. CSS는 어떤 웹 사이트를 개발하거나 유지할 때 상당한 시간적인 절약을 가져 올 수 있다. 또한 여러 페이지에 걸쳐 일관된 외양을 가져갈 수 있으므로 좀 더 전문적인 사이트의 느낌을 사용자에게 줄 수가 있다. (CSS에 대한 자세한 사항을 알고 싶다면 ”CSS Level 2 개요” 기사를 참조하시기 바랍니다.)

자바스크립트와는 달리 CSS 이용에 있어선 10개의 사이트들이 만장 일치를 보이지 않았다. 3개의 사이트는 CSS를 이용하지 않았고, 다른 3개의 사이트는 메인 페이지 안에서 스타일시트 코드를 사용하고 있었으며, 다른 3개의 사이트는 외부적으로 .css 파일을 이용하고 있었다. 나머지 하나, MSN 사이트는 특이하게도 거대한 용량의 .ashx 스타일시트 파일을 이용하고 있었다. .ashx 파일은 마이크로소프트의 닷넷(.NET) 서비스와 관련이 있어보였다.

아무튼, 텍스트 정보가 많은 사이트들은 어떤 형태로든 CSS를 이용하고 있는 것으로 나타났다.

페이지 넓이

웹 사이트의 페이지 넓이를 정확히 계산하기란 쉬운 일이 아니었다. 기본적으로 많은 수의 웹 사이트들이 브라우저 창의 크기에 따라 페이지 레이아웃을 달리 하는 것이 그 이유 중 하나였다. HTML 코드에서 페이지 넓이를 명확히 지정하지 않아 그래픽이나 텍스트의 가로 길이로 판단해야 하는 경우도 있었고, 때로는 스크린에 나타난 페이지 넓이만 갖고 계산한 경우도 있었다.

대부분의 사이트들은 페이지 넓이를 (가로) 640 픽셀 크기의 브라우저 창에서 모두 볼 수 있도록 해 놓았다. 예외적으로 Lycos 사이트가 가로 800 픽셀의 공간이 있어야 전체 페이지를 제대로 볼 수 있었다. Yahoo, About, Disney 사이트는 가로 640 픽셀 공간이 조금 부족해 보였으나, 대부분 세로 스크롤 바에 의해 겹치는 경우였다.

흥미로운 것은 4개의 사이트들이 브라우저 창의 크기를 늘리거나 줄였을 때도 페이지 레이아웃이 달라지지 않는다는 점이다. 즉, 이들 사이트는 640 픽셀 창이나 800 픽셀 창 양쪽 모두에서 똑 같은 페이지 레이아웃을 보이고 있었다.

다음은 가로 800 픽셀 브라우저 창으로 보았을 때 나타난 각 페이지들의 넓이다.

페이지 파일 사이즈

다음은 각 사이트들의 메인 페이지 파일 사이즈다. 단위는 Kb.

사이트	페이지 자체 크기	관련 파일 크기	전체 크기
AOL	39	72	111 (팝업 제외)
Yahoo	35	23	58
MSN	37	87	124
Microsoft	37	92	129
eBay	54	122	176
Amazon	60	74	134
Lycos	43	49	91
About	45	28	71 (팝업 제외)
Google	4 (사실임, 4kb)	10	14
Disney	18	45	63 (플래시 제외)

여기서 주의해야 봐야 할 점들이 있다. 메인 페이지의 파일 크기를 측정하는 것은 쉬웠다. 그러나 문제는 그래픽, CSS, 자바스크립트와 같은 관련 파일들이다. 이런 파일들은 서로 ‘언급 관계’에 있기 때문에 어느 한 부분에 변화가 생겨도 수치가 크게 달라질 수 있다. 많은 경우 이 언급 관계를 발견하고 측정하는 일이 어려웠다. 이는 플래시 파일의 경우도 마찬가지였다.

파일 사이즈는 kb 아래 단위는 모두 반올림 해버렸다. 때문에 40 바이트 정도의 작은 파일들은 수치에 포함되지 않았다.

대부분의 메인 페이지의 용량은 35에서 45 kb 사이였다. 관련 파일들의 용량은 사이트마다 무척 다양했다. 대부분의 사이트는 70kb가 넘었고, 3개의 사이트만이 30kb 이하의 용량을 보였다.

주의해야 할 것은 그래픽이나 CSS와 같은 관련 파일 보다는 페이지 자체의 용량에 신경을 써야 한다는 점이다. 사이트를 방문했을 때 페이지가 먼저 눈에 들어와야 사용자는 마음을 놓는다. 관련 파일의 용량에는 그다지 큰 신경을 쓸 필요는 없다. (사실 아무도 별 신경을 쓰지 않긴 하지만.)

전체 평가

지금까지의 톱 10 사이트의 디자인 분석을 참고로 할 때 가장 평범한, 가장 일반적인 홈 페이지는 다음과 같은 디자인 구성을 갖고 있다고 볼 수 있다.

이렇게 홈 페이지를 만들면 조금 지루하고 평범해 보일지 몰라도, 분명 방문객들에게 친근감은 줄 수 있을 것이다.

'The taste of others ' 카테고리의 다른 글

[스크랩] 주홍글씨을 보고.. (6)	2004.11.10
[스크랩] Michael Going(폴라로이드 사진작가) (4)	2004.11.04
[스크랩] 새벽 하늘의 별들 (5)	2004.10.26
[스크랩] Clazziquai 의 After Love Movie (0)	2004.10.25
[스크랩] Gregorian - Losing my Religion (5)	2004.10.23