1위 웹사이트라고 할 수 있는 최상위 웹사이트들이 가지는 12가지 특별함의 요소들 중에서, 네번째로 시각적인 차원에서의 웹디자인에 대한 얘길 풀어보고자 한다. 실제로 웹사이트에서 가장 먼저 발전한 분야가 바로 디자인이다.
결과론으로 따져볼 때 성공한 웹사이트는 적어도, 시각적으로 돋보이는 웹사이트는 무수히 많다. 웹사이트의 성공과 웹디자인의 성공이 서로 다른 방향으로 나간 경우가 많다는 얘기가 틀리진 않나보다. 그렇다면 과연 웹사이트의 성공에 있어서 웹디자인 요소는 별개의 사안이란 말인가?
전세계적으로도 웹사이트에서의 시각적인 디자인 수준으로만 따지면 우리나라를 따라올 수 없을 것이다. 웹사이트에서만큼 알맹이는 둘째치더라도 포장만큼은 세계적 수준인 셈이다.
웹사이트 제작에 있어서 디자인은 가장 표면적으로 드러나는 중요 요소이다. 여기서 디자인은 설계의 의미에 앞서 시각적인 의미로 사용하고자 한다. 웹사이트 제작과 운영에 있어서 디자인 요소가 가장 중요하다고 인식하는 사람이 많다.
겉으로 가장 많이 드러나기에 내용이나 기획에 상관없이 디자인 퀄러티 만으로도 웹사이트에 대한 판단을 내릴 수 있을 만큼 영향력이 큰 것이 디자인이다. 하지만 시각적 디자인 요소는 웹사이트의 정체성에 절대적 영향력을 받고 있으며, 웹사이트의 콘텐츠에도 종속을 받고 있다고 해도 과언이 아니다.
시각적인 디자인 요소는 웹사이트에 있어서 절대 주연이 아니며, 조연이라는 사실을 인식해야 한다. 물론 디자인 요소가 웹사이트의 전반적 퀄러티를 높이고, 사용자의 사용성과 만족도를 높이는데도 결정적인 역할을 한다. 하지만 아무리 디자인 요소가 중요하고 결정적인 역할을 수행한다고 해도 변하지 않는 진리는, 시각적인 디자인은 웹사이트에 있어서 조연이라는 점이다. 물론 주연에 버금갈 정도로 돋보이는 조연으로서 말이다.
여기서는 최상위 웹사이트들에서 쉽게 볼 수 있는 보편적인 시각적 웹디자인 요소 수십가지 중 10가지를 소개하고자 한다.
(1) 웹사이트의 로고나 이름, 회사명 등을 모든 페이지에 명기
네티즌은 동시에 여러개의 웹사이트를 브라우징한다. 그리고 짧은 시간 동안에도 여러 사이트를 옮겨다니면서 정보를 찾는 경향이 있다. 따라서 현재 자신이 보고 있는 웹사이트나 웹페이지가 어떤 회사의 어떤 사이트임을 직관적으로 주지시켜줄 필요성이 있다.
자신이 이용하는 웹사이트를 주기적으로 노출하고 인지시킬 경우, 네티즌이 동종분야의 콘텐츠나 정보를 찾고자 할때 해당 웹사이트에 대한 접근할 가능성이 높다. 웹사이트의 로고나 이름, 회사명 등을 모든 페이지에 명기하여 사용자로 하여금 현재 위치하고 있는 웹사이트가 어디인지를 상시적으로 주지시켜주는 것이 필요하다.
(2) 홈페이지는 다른 페이지와 구별되도록 디자인
메인페이지라고도 하는 홈페이지와 다른 페이지는 구별될 수 있도록 다른 구성과 디자인이 필요하다. 물론 전체적인 사이트의 조화에 어긋날 정도의 다름은 곤란하다. 홈페이지가 다른 페이지와의 구별이 되어야하는 이유는 사용자가 하위 페이지를 보다가 홈페이지로 왔을때 자신이 보고 있는 현위치가 홈페이지임을 쉽게 알 수 있도록 하기 위함이다. 시각적 차이를 통해 구별될 수 있도록 해주는 것이 필요하다는 것이다.
(3) 직관적인 디자인
디자인에서의 직관성은 상당히 중요하다. 웹디자인에서는 뭔가의 설명이 필요없이 단지 보는대로 바로 느끼고 이해할 수 있는 것이 좋다. 이동전화 관련 웹사이트에서는 이동전화의 이미지가, 그리고 자동차의 웹사이트에서는 자동차 이미지가 가장 직관화된 이미지라 할 수 있다. 해당 웹사이트에 접속한 사용자의 머릿속엔 이미 해당 이미지가 그려지고 있기 때문이다.
따라서 사용자가 머릿속에 그리는 이미지가 실제로 웹사이트에서 보여지게 된다면 사용자가 느끼는 친밀도와 함께 해당 웹디자인과 콘텐츠 전반에 대한 이해도도 높아지게 된다. 직관적인 디자인은 웹페이지의 메인 이미지뿐아니라 각종 아이콘에서도 사용된다. 아이콘이나 버튼 등이 문자보다 더 직관화되기 위해서는 보편타당하고 표준화된 이미지 기호를 사용해야 하고, 사용자들이 쉽게 이해할 수 있도록 시각화해야 한다.
(4) 웹디자인의 일관성을 유지
동일한 웹사이트 내에서 지나치게 다양한 시도나 디자인 요소가 난무하게 된다면 사용자들에게 혼란을 가중시킬 것이다. 웹디자인의 일관성은 컬러나 전체적 이미지 톤, 그리고 레이아웃, 콘텐츠 구조 등에서 모두 나타나야 한다. 일관성을 유지하는 것은 사용자가 사이트 내에서 이동하게 될 때 일체감과 안정감을 가지게 하는데 긍정적이다. 아울러 웹디자인 일관성은 최종 목적지의 정보위치로 이동하는 네비게이션에도 긍정적인 기여를 한다.
(5) 객관화된 근거를 가진 컬러 선택과 사용
웹사이트에 사용된 컬러에는 나름의 이유가 다 있어야 한다. “왜 이런 컬러를 사용했나요?“라는 질문에 막힘없이 답변하기 위해서는 객관적인 근거와 타당성이 있어야 한다. 컬러는 웹사이트 컨셉이나 콘텐츠 등의 이미지와 유관도가 높아야 한다.
웹사이트에 들어오게될 사용자의 성향, 콘텐츠의 성향과 이미지, 시대적 상황과 트랜드 등에 대한 고려를 통해 컬러가 사용되어야 하며, 이에 대해서는 각각의 이유와 근거를 가지고 있어야 한다. 단지, ‘내가 좋아하는 컬러라서’ 혹은 ‘이런 컬러가 어울릴 것 같아서’ 류의 대답은 웹디자이너의 자질을 의심스럽게 만든다. 예를 들면, 정치 관련 사이트에서는 검은색을 피한다.
대개 사람들이 뭔가의 항의나 반발의 의미로 검은 리본을 다는데, 정치 관련 웹사이트에서 사용되는 검은색은 검은 리본을 연상시켜 네가티브한 이미지를 형성한다는 이유에서이다. 이처럼 컬러의 선택은 해당 사이트의 정체성을 드러내거나, 사이트에 대한 사용자들의 인식과 이미지를 결정짓는데 영향을 미칠 수 있기 때문에 중요하게 다뤄져야할 디자인 요소이다.
컬러 선택에 대한 객관성 근거를 위해서는 컬러와 관련한 책들을 읽어서 숙지해두는 것이 필수이다.
(6) 웹브라우저의 디폴트 폰트를 최대 활용
타이포그라피에서 사용되는 폰트는 가급적 윈도우 브라우저에 디폴트로 설정되어 있는 폰트를 사용하는 것이 좋다. 한글은 굴림, 돋움, 바탕 등이고, 영어는 Arial, Verdana, Helvetica 등이다. 다양한 폰트를 사용해서 텍스트 효과를 부각시키는 것은 좋으나, 사용자가 해당되는 폰트를 브라우저에 설정해두고 있지 않은 경우를 대비할 필요가 있다.
대개의 웹사이트가 디폴트 폰트로 텍스트를 구성하는 것은 바로 이런 이유이다. 실제로 1위 웹사이트라고 할 수 있는 각 분야별 상위 사이트에서는 한글은 굴림, 영어는 Arial을 디폴트 폰트로 주로 사용하고 있었다.
(7) 텍스트를 읽을 때 그래픽의 방해를 최소화
웹페이지를 아름답게 보이려고 하는 욕심 때문에 바탕에 너무 진한 이미지를 배치한다거나 필요 이상의 그래픽 이미지를 사용하여 시선을 분산시키는 일은 피해야 한다. 정보 중심의 웹사이트에서는 콘텐츠(텍스트 중심)를 전달하는 것이 본래의 목적이고, 이런 목적에 충실하기 위해서는 그래픽이 방해요소가 되지 않도록 주의해야 한다.
그래픽 요소가 화려하고 볼거리가 많다고 해서, 결코 좋은 사이트라고 할 수는 없다. 사용자들이 원하는 것은 시선을 자극하는 볼거리보다는, 제대로된 충실한 읽을거리라는 것을 잊어서는 안된다. 1위 웹사이트라고 할 수 있는 각 분야별 상위 사이트에서는 읽을거리를 볼거리에 우선하고 있음을 확인할 수 있다.
물론 그렇다고 해서 텍스트로만 구성하라는 의미가 아니다. 텍스트를 돋보이기 위한 그래픽이 필요한 것이지, 그래픽을 위한 소도구로서의 텍스트여서는 안된다.
(8) 텍스트와 배경색은 선명한 대비를 이루도록 설정
텍스트가 배경색과 선명한 대비를 이뤄야 글자에 대한 가독성이 높아진다. 가장 좋은 배경색은 흰색이고, 가장 좋은 글자색은 검은색이다. 흰 바탕에 검은 글씨 만큼 무난하고도 효과적인 것은 없다. 콘텐츠를 가장 돋보이게 하면서 사용자들로 하여금 거부감이나 부담없이 친숙한 배경색이 바로 흰색이다.
거의 대다수의 출판물은 흰색 종이위에 찍어낸다. 흰색 배경과 흰색 여백이 이미 우리에겐 익숙한 것이다. 따라서 웹사이트에서도 흰색을 배경과 여백으로 사용하는 것은 긍정적이라 할 수 있다.
(9) 애니메이션 효과의 적절한 사용
플래시 애니메이션은 상당히 효과적인 디자인 도구이다. 웹디자인에서의 인터렉션과 다양한 표현을 가능하도록 한 점은 상당히 긍정적이다. 그러나 이것을 남용하는 것은 문제가 심각하다. 애니메이션의 과도한 사용은 페이지의 무게를 무겁게하고, 사용자의 접근성을 낮출 수 있는 위험성을 가진다.
플래시 애니메이션으로 인트로 페이지를 만들 경우에는 반드시 Skip 버튼을 제공하여 사용자가 선택할 수 있도록 해야 한다. 일방적으로 제시되는 플래시 애니메이션은 사용자에게 부정적인 이미지를 가지게 할 수도 있음을 알아야 한다. 대개 사용자들이 플래시 애니메이션으로 된 인트로 페이지에 들어가면서 가장 먼저 찾는 것이 Skip 버튼이라는 사실을 잊어서는 안된다.
다양한 요소에 대해 관심을 끌어야 하는데, 애니메이션은 특정 콘텐츠에 대해서는 집중을 시키지만, 전체적으로는 분산시킬 가능성이 높다. 애니메이션은 시각적인 디자인 요소로 사용하는 것이 아니라, 콘텐츠를 효과적으로 전달하기 위한 도구로 사용되어야 한다. 단지 눈요기로서 애니메이션을 사용하는 것은 정보 접근성에서 치명적인 결함을 가져올 수 있다는 것을 인식해야 한다.
(10) 여백도 웹디자인 요소로 활용
웹페이지의 여백도 웹디자인에 있어서 중요한 요소임을 명심해야 한다. 자칫 여백은 웹디자인을 하고 남은 부분이라 생각하기 쉬운데, 여백 자체도 디자인되어야 한다. 실제로 여백이 없이 빽빽하게 콘텐츠를 나열한 경우에는 인지과부하로 인해 콘텐츠에 대한 접근성이 낮아질 가능성이 높다.
여백은 콘텐츠를 돋보이게 하는 효과를 가지고 있으므로, 여백 자체도 웹디자인 요소로 계획성있게 구성하고 배치해야 한다. 동양화가 가지는 미적 가치에 있어서 ‘여백의 미’라는 것이 있다. 이런걸 보면 웹디자인이 어쩌면 동양화적인 시각 기반에서 출발했는지도 모른다. 여백을 통해 비어있는 공간을 만드는 이유는, 채워진 공간을 더욱 돋보이게 하기 위해서이다.
사람은 동시에 한가지를 읽을 때 가장 효과적이고, 한가지를 강조해서 제시하는 것이 가장 효과적인 접근을 보장한다는 사실을 잊어서는 안된다.
보기좋은 떡이 먹기도 좋다는 말이 있다. 맞는 말이다. 하지만 이 말이 성립되기 위한 전제조건은 기본적으로 떡 자체가 먹을만 해야한다는 것이다. 아무리 이쁘게 꾸몄어도 먹을만하지 못한 떡이라면 그게 무슨 의미가 있을까? 아울러 떡에 어울리는 시각적 꾸밈이 있어야 한다. 떡을 빵이나 밥처럼 꾸미는 것은 시각적인 꾸밈 자체로는 효과적일 수 있으나, 떡 자체를 전달하는데는 부정적일 수 있다. 그럼에도 불구하고 수많은 웹사이트는 보기에만 좋은 떡, 그림의 떡인 경우가 많아 아쉽다.
웹사이트에서 시각적인 디자인은 절대 주인공이 아니다. 웹사이트에서의 떡이라고 할 수 있는 컨텐츠나 마케팅, 비즈니스전략 등을 포장하는 수단으로서 존재하는 조연일 뿐이다. 절대 시각적인 디자인 요소가 주인공인양 혼자서 앞서나가선 안된다. 웹디자인이 돋보이는 조연으로서 웹사이트의 성공을 이끄는 요소가 되기 위해서는 디자인에서의 객관화를 구현해야 한다. 웹디자이너라면 컨텐츠의 성격에 입각한 객관화, 마케팅 방법에 입각한 객관화, 트렌드에 입각한 객관화를 웹디자인 과정에서 필히 고민해보길 기대한다.
필자가 쓴 <전략적인 웹디자인(2002)>이라는 책에서도 강조했듯이, 디자인 요소는 절대 예술적이거나 감각적인 시각 작업 중심으로 이뤄지기보다, 전략적이고 기획적인 설계와 시각화 작업 중심으로 이뤄져야 한다는 얘기를 당부삼아 드리고 싶다. 이미 누구나 알고있는 얘기겠지만, 혹여 아직도 이 얘기를 공감하고 있지 못하다면 좀더 심각하게 웹디자인에 대한 고민을 해보길 권유한다.
[이 게시물은 신용성님에 의해 2005-05-27 07:36:59 인터넷창업(으)로 부터 이동됨]
i-boss.co.kr(1)
새댓글
전체보기