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

글/ 이유숙
Creative Design 팀장
(주)이비즈그룹

 

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 등 적용기술과 관련된 가이드를 제시하고 있다. 일종의 총체적인 개발 가이드인 셈이다. 그래픽 템플릿과 프로그래밍 소스 및 적용방식을 자세히 설명하고 있다는 점에서 웹 개발 가이드에 가깝다고 볼 수 있다.