웹 스타일 가이드란 무엇인가? - 3

라. 레이아웃 (Layout)
	레이아웃은 화면의 구성으로서 사이트 화면을 채우는 각 요소들의 배치를 정의하는 것이다. 웹 스타일 가이드는 메인화면(Main Page), 두 번째 단계의 페이지, 세 번째 단계의 페이지 등 사이트 구조상 각 단계별로 공통적인 화면구성, 즉 레이아웃을 정의한다. 또한 단계별로 웹 페이지의 화면 레이아웃을 정의할 뿐 아니라 사이트의 섹션별 특성을 고려하여 섹션별 레이아웃을 정의하기도 한다.
	레이아웃은 앞의 그림과 같이 간략하게 표현할 수도 있으나 좀더 자세하게 그래픽 요소들과 함께 표현할 수도 있다. 레이아웃을 정의할 때는 화면의 크기, 화면 분할 기본 단위인 그리드 시스템, 여타의 그래픽 요소들 및 각 단계별 페이지의 컨텐트 배치 등을 고려하여 정의한다. 특히 레이아웃의 정의는 좀더 자세하게 페이지의 단계별로 컨텐트의 배치를 지시 한다.
	[그림 4] 이비즈그룹이 제안한 SBSi 웹사이트의 레이아웃
마. 그래픽 요소 (Graphic Elements)
	웹 스타일 가이드는 웹사이트에서 자주 사용하는 그래픽 이미지들, 즉 일러스트레이션, 블릿, 버튼 등을 통일적인 느낌을 갖도록 정의하여 개발되어야 한다. 이때 개발된 그래픽 요소들은 추가적으로 웹사이트를 개발할 때 재 사용되기도 한다. 또한 웹 스타일 가이드가 정의한 그래픽 요소의 느낌, 색상, 크기 등에 관한 정의는 새로운 그래픽 요소들을 개발할 때 지침으로 사용된다.
	웹 스타일 가이드에서 그래픽 요소들을 정의할 때 다음의 두 그림과 같이 네비게이션의 색상과 사이즈, 폰트 등 여러가지 그래픽 요소들의 조합 형태를 보여주기도 한다. 이처럼 웹 스타일 가이드는 웹사이트 디자인의 설계도와 같은 역할을 하며 디자이너의 교체에도 불구하고 일관된 작업을 수행하는 데 지침으로서 역할을 한다.
	화면 조합 방법을 정의할 때는 이비즈그룹이 테그빌닷컴을 위해 제안한 웹 스타일 가이드와 같이 섹션별 화면 구성이 다른 경우 각 섹션의 화면 구성 지침을 제시하기도 한다.
	그래픽 요소에 대한 표현 방식은 다양할 수 있는 데 다음의 그림과 같이 자주 사용되는 그래픽 요소들을 모아 사이트 그래픽 요소 스타일 테이블(Graphic Element Style Table)로 표현하기도 한다.