웹 스타일 가이드란 무엇인가_2

3. 웹 스타일 가이드의 내용

웹 스타일 가이드는 어떤 내용들을 포함하는가? 물론 웹 스타일 가이드는 위에서 언급했듯이 여러 가지 종류가 있다. 여기서는 기술적 측면보다는 디자인 측면을 강조한 웹 스타일 가이드가 포함해야 하는 내용들에 대해서 살펴보도록 하겠다.

웹 스타일 가이드는 체계적이고 일관된 사이트에서의 사용자 경험(User Experience)을 개발하여 사용자에게 전달하는 것을 목표로 한다. 따라서 웹 스타일 가이드는 사용자 경험을 이루는 대부분의 요소들을 포함해야 한다.

웹사이트에서 사용자의 경험을 이루는 요소들은 웹사이트의 구조(Structure), 네비게이션과 정보구조(Navigation & Information Architecture), 웹페이지의 시각적 디자인 요소, 상호작용(Interaction) 디자인, 기능(Function), 컨텐트(Content) 등과 관련된 내용들을 담아야 한다. 다음은 웹사이트에서 사용자의 경험을 이루는 요소를 설명하고 있다.

 

 

[그림 1] 웹사이트에서 사용자 경험을 이루는 요소

• 시각적 디자인 측면 : 색상(Color), 폰트(Font), 레이아웃(Layout), 자주 사용되는 그래픽 요소들(Graphic Elements)
• 정보 구조적 측면 : 메뉴 구성, 네비게이션, 검색 방식
  
• 상호작용 디자인 : 사용자와 시스템간의 쌍방향 상호작용(Interation)과 관련된 디자인, 각종 폼(Form), 애플리케이션 디자인
  
• 기능적 측면 : 웹 애플리케이션의 플로우(flow), 구현 기능 등
  
• 컨텐트 측면 : 컨텐트의 분량, 내용적 범위, 표현 방식, 컨텐트의 배치 등

총체적인 웹사이트의 컨셉과 함께 웹 스타일 가이드는 위 요소들의 개발 및 적용에 대한 매뉴얼을 제공할 뿐 아니라 실제 개발 시 이용될 수 있는 그래픽 파일과 소스 및 템플릿 등을 포함한다.

또한 웹 스타일 가이드가 포함해야 하는 내용은 웹 스타일 가이드의 성격이나 주안점에 따라 기능적 측면과 컨텐트 측면의 내용들을 제외하기도 하고 포함하기도 한다.


(1) 시각적 디자인 측면

웹 스타일 가이드에서 가장 중요한 내용을 이루고 있는 부분이 시각적 디자인에 관한 내용들이다. 시각적 디자인에 관련한 사항들은 시각적 컨셉(Visual Concept), 색상(Color), 폰트(Font), 레이아웃(Layout), 자주 사용되는 그래픽 요소들(Graphic Elements) 등이다.

가. 시각적 컨셉 (Visual Concept)
	사이트를 통해 궁극적으로 이루고자 하는 사업의 목적과 고객사의 비전, 고객사의 아이던티티, 고객사의 주 타겟의 성향을 대표하는 간략한 문구로 사이트 전체의 시각적 느낌과 분위기에 대한 개념적 표현
나. 색상 (Color)     [그림 2] 이비즈그룹이 제안한 보스턴 컨설팅 그룹 웹사이트의 색상표 웹사이트의 시각적 컨셉을 구체화할 때 가장 우선적으로 고려 대상이 되는 것은 사이트에서의 색채 선택이다. 웹 스타일 가이드는 사이트 컨셉이 일단 정해지면 사이트에서 사용될 색상(Color)을 1차 색상(Primary Color)과 2차 색상(Secondary Color)으로 나누어 정의한다. 색상의 선택은 사이트 컨셉 뿐 아니라 색상 간의 조화나 색상이 주는 느낌, 회사의 브랜드를 함축적으로 표현한 로고(Logo)색상 및 회사의 비전, 그리고 타겟 사용자의 성향 등을 고려하여야 한다. 사이트에서 사용할 색상의 표현은 위의 그림과 같이 RGB 코드로 표현된다. 또한 색상은 선택은 사용자의 컴퓨터 환경의 고저를 막론하고 안전하게 사이트를 볼 수 있도록 웹 표준 색상으로서 256 칼라 이하의 범위에서 선택하는 것이 바람직하다. 그리고 가능한 최소한의 색상을 사용하는 것이 좋다.     다. 폰트 (Font)   사이트에서 문자에 사용되는 폰트는 가장 일반적이면서 자주 사용되는 시각적 요소이다. 그러나, 종종 사이트에서 사용되는 폰트의 선택과 선택된 각 폰트의 체계적이고 일관된 사용의 중요성이 간과되곤 한다.     [그림 3] 이비즈그룹이 제안한 테크빌 닷컴 웹사이트의 폰트 웹사이트에서 사용되는 폰트의 정의는 본문에 사용될 폰트(Body Font), 헤드라인(Headline), 타이틀(Title), 메뉴의 라벨(Label Font), 이미지에 사용되는 폰트 등 폰트의 용도에 따라 폰트의 종류, 크기, 색상 등을 정의한다. 폰트는 폰트의 종류에 따라 나름대로의 독특한 느낌과 가시성의 차이가 있으며, 폰트 색상과 크기에 따라서도 느낌이 달라지며 강약을 갖고 있다 사이트에서 사용되는 폰트를 정의할 때는 영문 폰트와 국문 폰트 모두를 정의해야 한다.

웹 스타일 가이드란 무엇인가

1. 웹 스타일 가이드의 목적

웹 스타일 가이드는 미국 예일 대학의 웹 스타일 가이드로부터 시작된 것으로 파악된다. 예일 대학의 웹 스타일 가이드는 단지 예일 대학을 위한 것일 뿐 아니라 일반적인 웹사이트 개발의 지침이 될 만하다.

예일 대학이 웹 스타일 가이드를 만든 이후 카네기멜론 대학 등 수 많은 대학과 기업들이 쫓아서 웹 스타일 가이드를 만들기 시작했다.

대학의 웹 스타일 가이드 대학의 경우 단과대학과 학과, 교수진, 운영부서 단위로 다양한 필요와 목적에 따라 수많은 운영주체에 의해 웹 페이지가 개발되고 운영된다. 이런 경우 종종 한 대학에 서로 다른 모양과 느낌의 사이트들이 생겨나기 쉽다. 따라서 대학들은 일관된 대학 사이트의 아이덴티티와 브랜드 이미지를 유지하고 사이트 유지관리의 편리성을 위하여 웹 스타일 가이드를 필요로 하게 된다. 국내 대학의 웹사이트들 대부분은 아직 이러한 웹 스타일 가이드를 마련하지 못한 경우가 대부분이며, 따라서 대학과 관련된 웹사이트들의 통일된 이미지를 형성하는 데 실패하고 있다고 볼 수 있다. 기업의 웹 스타일 가이드 삼성이나 한국통신과 같은 대기업과 GE, IBM, Compaq, Citi Bank와 같은 글로벌 기업들 역시 웹 스타일 가이드를 만들고 있다. 이들 기업들은 조직 내 다양한 부서에서 각자의 필요성과 목적에 따라 만들어지는 웹사이트들의 통일성 있는 개발과 웹을 통한 일관된 브랜드 이미지의 구축, 일관된 사용자 경험의 구현, 사이트 유지관리 보수의 편리성을 위해 속속 웹 스타일 가이드를 개발하고 있다. 비록 거대기업이 아닌 단일 기업일 경우에도 인터넷 관련 인력(디자이너, 프로그래머, 기획자)의 잦은 이직과 교체를 고려할 때 이러한 웹 스타일 가이드의 작성은 여전히 필요하다고 할 수 있다. 웹에이전시의 웹 스타일 가이드 웹에이전시들은 고객사를 위해 웹 스타일 가이드를 개발할 수 있어야 한다. Proxicom과 같은 미국의 유수 에이전시는 프로젝트를 마무리하기 전에 필수적으로 고객사에게 웹 스타일 가이드를 작성하여 전달하고 있다. 웹 스타일 가이드는 최소한 프로젝트 개발의 결과물을 체계적으로 정리하여 제출하는 의미가 있을 뿐 아니라, 웹 스타일 가이드를 개발한다는 것 자체가 사실상 효율적이고 체계적으로 웹사이트 개발 작업을 해 왔다는 것을 증명하는 것이기도 하다. 만약 당신이 사이트 개발을 웹에이전시에게 의뢰한 고객사라면 프로젝트의 마무리에 디자인 작업의 결과물로서 그래픽 파일들과 HTML 템플릿과 함께 잘 정리되고 상세한 설명이 덧붙여진 '웹 스타일 가이드'를 받는다면 얼마나 좋겠는가? 웹 스타일 가이드없이 떠나가는 웹에이전시와 좀 더 철저하게 '웹 스타일 가이드'를 작성하여 제출하고 마무리 짓는 웹에이전시 어떤 쪽에 더 신뢰가 가고 후속 프로젝트를 맡기겠는가? 웹 스타일 가이드의 작성 목적을 요약하면 웹사이트의 통일되고 일관된 사용자 경험(User Experience)을 구현하고, 사이트의 추가개발 및 유지보수의 편리성을 높이는 데 있다. 체계적이고 일관된 사용자 경험(User Experience)은 결과적으로 사용자들에게 사이트의 일관되고 통일된 아이덴티티(Identity)와 브랜드(Brand) 이미지를 형성한다. 이러한 목적으로 만들어지는 웹 스타일 가이드는 체계적인 사이트 개발 작업의 결과물인 셈이다.

2. 웹 스타일 가이드의 종류

웹사이트 디자인 방법을 설명하는 수많은 가이드가 쏟아져 나오고 있다. 이들 웹 디자인 가이드는 두 가지 유형으로 구분할 수 있다. 하나는 HTML 기법에 대한 내용을 다루고 있는 웹 개발 가이드들이고, 또 다른 한 종류는 디자인 측면을 강조하고 있는 웹 디자인 가이드이다. 여기서 다루고자 하는 것은 후자이다.

후자에 가까운 '웹 스타일 가이드' 역시 일반적인 웹 디자인 방법을 소개하는 경우와 특정기업이나 조직(특히 학교나 종교기관), 단체의 웹사이트를 위한 고유한 웹 스타일 가이드가 있다.

특정 조직을 위한 웹 스타일 가이드의 경우 웹사이트 디자인의 일관성을 유지하므로 단일한 웹사이트에서의 브랜드 이미지를 전달하기 위해 이용된다. 또 하나의 목적은 웹 페이지의 추가 개발과 사이트 유지의 편리성을 위해 웹 스타일 가이드가 사용된다.

Agency.com에서 Compaq의 웹사이트를 위해 개발한 '웹 브랜딩 가이드'는 통일적인 웹 브랜드 이미지를 전달하는 데 초점을 둔 디자인 중심의 웹 스타일 가이드로 분류할 수 있다. 홍익 인터넷이 개발한 '한국통신 웹 스타일 가이드' 역시 웹 디자인의 일관성 및 온라인 오프라인의 브랜드 통일성을 위해 만들어진 스타일 가이드이다. 한국통신의 웹 스타일 가이드는 상세한 사용례와 템플릿이 돋보인다.

동일하게 디자인적인 측면(색상, 로고, 폰트, 레이아웃) 등을 강조한 웹 스타일 가이드이지만 GE의 웹 스타일 가이드는 그래픽 요소들과 함께 HTML 템플릿 소스까지 제공하고 있다는 점에서 그 어떤 웹 스타일 가이드보다 철저하다고 볼 수 있다.

반면 IBM이나 Sun이 자사의 웹사이트를 위해 만든 웹 스타일 가이드들은 단순히 디자인적 측면만을 강조한 것이 아니라 HTML, Java, CGI 등 적용기술과 관련된 가이드를 제시하고 있다. 일종의 총체적인 개발 가이드인 셈이다. 그래픽 템플릿과 프로그래밍 소스 및 적용방식을 자세히 설명하고 있다는 점에서 웹 개발 가이드에 가깝다고 볼 수 있다.