웹 스타일 가이드란 무엇인가_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), 이미지에 사용되는 폰트 등 폰트의 용도에 따라 폰트의 종류, 크기, 색상 등을 정의한다. 폰트는 폰트의 종류에 따라 나름대로의 독특한 느낌과 가시성의 차이가 있으며, 폰트 색상과 크기에 따라서도 느낌이 달라지며 강약을 갖고 있다 사이트에서 사용되는 폰트를 정의할 때는 영문 폰트와 국문 폰트 모두를 정의해야 한다.