주요 웹 스타일 가이드 비교

주요 웹 스타일 가이드 비교

 

인터넷 웹사이트는 폭발적인 수적 증가와 함께 짧은 기간에 손쉽게 수정, 변경할 수 있다는 장점 때문에 갈수록 짧은 개편 주기를 보이며 빠르게 거대화하고 있다. 이미 대다수의 기업들은 웹사이트를 제작하고 있으며 곧 규모의 경쟁으로 이어져 초대형 웹사이트들도 많이 생기고 있다. 

그러나 이러한 대규모 웹사이트 개발은 단기간 내에 다양한 분야의 전문 인력이 참여되는 프로젝트의 결과로서 이루어지는 것이며 따라서 많은 시행착오와 비효율성 증대, 이로 인한 기회 비용의 낭비가 있을 수 있다.

웹사이트는 짧은 개발기간 저렴한 비용으로 비교적 손쉽게 수정할 수 있다는 장점 때문에 웹사이트가 개발된 이후에는 물론이고 개발 도중에도 얼마든지 내용 변경이 일어나게 된다. 특히 개발직후부터 발생하게 되는 많은 변수(운영 주체가 바뀐다든지, 개발 담당자의 전직 등)로 인해 웹사이트 운영 중에 웹사이트가 추구하는 아이덴티티(Identity)를 일관되게 유지하지 못하게 되고 결국 웹사이트의 성격 자체가 최초의 컨셉과는 달리 엉뚱한 방향으로 변형되어 버리는 일이 종종 생기게 된다.

따라서 첫째, 웹사이트 개발시 비용을 줄이고 둘째, 웹사이트의 아이덴티티를 유지하고 셋째, 사용자 경험과 습관을 보존하기 위해 최소한 변하지 않아야 할 규칙을 지키면서 기존 내용을 수정, 유지, 관리할 수 있는 방법이 절실히 필요하게 된다. 
이를 위한 방법론으로서 웹 스타일 가이드(Web Style Guide)가 활용되고 있다. 

웹 개발팀은 웹 스타일 가이드의 작성과 이의 준수를 통해 웹사이트의 규격화, 통일화를 확보, 개발비의 불필요한 지출을 막고, 기업의 일관된 이미지를 유지함과 동시에 사용자들에게 사용의 일관성을 성취하게 할 수 있게 되는 것이다. 
기 개발된 웹사이트의 여러 요소를 모듈화, 규격화하여 경제적으로 웹사이트를 개발하기 위한 생산성에 대한 새로운 요구 역시 웹 프로젝트에서의 웹 스타일 가이드의 필요성을 강조하고 있다고 할 수 있다.

아래에서는 대표적인 웹스타일가이드를 조사하여 이들의 공통점을 찾고, 이를 통해 효율적인 웹스타일가이드의 요소를 도출해 보고자 한다. 
국내의 웹 스타일 가이드로는 한국통신과 삼성, 해외의 예로는 Sun과 GE의 웹 스타일 가이드 항목을 대분류와 세부항목으로 나누어 2차 깊이까지 조사하였다. 3차 이상의 깊이를 가지는 경우 세부항목에 2차 깊이의 항목까지만을 표시하고 이를 비교하였다. 
단, 마케팅 영역 전반에 걸치는 광범위한 웹 스타일 가이드를 보유하고 있는 Sun의 경우, 웹 스타일 가이드의 영역은 Web의 부분에만 한정하여 조사하였다.

 

 

각 웹 스타일 가이드의 세부항목 비교


한국통신 웹 스타일 가이드의 구성
한국통신 웹 스타일 가이드는 크게 브랜딩 오브젝트(Branding Object), 사용자 인터페이스(User Interface) 두 개의 부분으로 나뉘어진다.

대분류	세부항목
About Style Guide
Web CI	Symbol Mark
	Logotype
	Signature
	Character
	BI(Brand Identity)
웹사이트 유형	웹사이트 일반
	홍보 유형
	서비스 유형
	Frame 유형
Graphic Guide	Color
	Typography
	Images
	Banner
UI Guide	Layout
	Navigation
Technical Guide	이미지 제작 Guide
	HTML Guide
	Technical Tip
	Q & A
	FAQs
	신기술동향
Library	KT CI 모음
	이미지 소스

삼성전자 웹 스타일 가이드. 
구성디자인과 기술적인 가이드 이렇게 크게 2부분으로 나뉘어 있다. 
삼성전자 웹 스타일 가이드 2.0의 구조 

대분류	세부항목
일반	개요
	일반규칙
디자인	디자인 소프트웨어
	그리드 시스템 (레이아웃)
	타이포그래피, 스타일시트
	칼라 적용
	네비게이션 시스템
	라벨링 규칙
	이미지 (사진, 일러스트, 표)
	버튼, 베너
	하위 윈도우 옵션
	이미지 자료 (아이콘, 로고, 사진 등)
	디자인 체크 리스트
	FAQ
기술관련	HTML코딩 & 템플릿 코드
	검색 정보
	메타테그
	자바스크립트, 자바애플릿
	플래시, 쇽웨이브 등
	기술적 체크 리스트
	FAQ
다운로드	템플릿 자료실

Sun의 ‘Guide in Web style’의 구성
SMRC 'Sun Marketing Resource Center' http://www.sun.com/smrc/

대분류	세부항목
Publishing Policies & Procedures	Web Publishing Manual
	Feature Story Process
	Violator Process
	Editorial Schedule
	Webcast Process
	Discussion Forums
Writing	Guidelines & Practices
	FAQs
	Checklist
Banners	Product & Promotions Banners
	Editorial Banners
	Banner Request Form
Quality Assurance	4 Point Inspection
	New Section Review
Web Vendors	Preferred Vendor Application
	Busse Design USA
	Group X/Dogtown
	Hot Studio, Inc.
	M3i | works
	OIC
HTML & Graphic Specifications	General Elements
	Graphic Usage
	Sun's Web Colors
	HTML Components
	Meta Tag Guidelines
	HTML Tables
	Using Style Sheets
	Client Side Scripting
	Iconography & Buttons
	Flash
Navigation Templates	Standard Template
	Application Template
	Secure Template
	Pop Up Template
	Side Navigation Specifications
	Template & CSS History
Content Templates	Product Templates
	Events
	Event Index
	Feature Story
	Gateway Pages
Request Forms
Tools	gif-o-matic
Localization Kit	Homepage Kits
	Migration Road Map
Usability Studies and Metrics	Web Ad Campaign Measurement
Training
How Do I

GE의 ‘Web Style Guide’의 구성
http://www.ge.com/standards
GE의 웹 스타일 가이드 버전 1.0 구성 

대분류	세부항목
Overview	Beginning Steps
	GE Objectives
	Site Integration
	Style Guide FAQs
Creative	Design Software and Fonts
	Template Downloads
	Color Palettes
	Photography
	Logo Library
	Buttons ?new!
	Banners
	Daughter Window Design
	Daughter Window Alt
	Optimization
	Design No, No's...
Technology	Template Code
	Search Utilities ?new!
	Information Architecture
	HTML Coding
	Meta Tags
	Advanced Programming
	JavaScript Tips and Tricks
	Daughter Window Tech
	Stock Ticker
	Flash
	Java
	Accessibility
	Technology No, No's...
Quick Reference	Design Checklist
	HTML Checklist
	Site Integration Checklist
Legal	Specifications
	Trade/Service Marks
Global Pages	Country Pull-down
etc.	Review & Posting Process (Privacy Policy, Contact List, Web Site Terms of Use)

GE의 웹 스타일 가이드 버전 2.0 구성

대분류	세부항목
Creative Templates	Top Nav Specs & Code
	Footer Specs & Code
	Guide Image
	Non-U.S. Usage
	Learn, Shop and Buy Code
Brand Guidelines	Graphic Signatures
	Monogram
	Dynamic Monogram
	Color
	Font & Typography
Domain Registration	Policy and Procedures
	Domain Name Registration Form
Download Center
Required elements
Submit for GE Review
GE Contacts
Privacy Policy
Terms and Conditions

 

각 웹 스타일 가이드의 특징 

비교 대상인 4개의 웹 스타일 가이드 대부분 유사한 항목들이 많았다. 각 요소들을 구조적으로 그룹화하는 방식이 달랐는데 특징을 요약하면 다음과 같다.

먼저 한국통신의 경우에는 디자인적인 요소를 그래픽 가이드와 UI 가이드로 구분하고 있는 것이 특징적이다. 
그래픽 가이드에서는 색상, 타이포그래피, 이미지, 배너 등의 그래픽 요소를, UI가이드에서는 레이아웃과 네비게이션을 하위 항목으로 하고 있으며 웹사이트 유형이라는 분류에서는 템플릿의 종류와 용도를 설명하고 있다. 이외에 기술적 가이드와 자료실의 역할을 하는 라이브러리가 있다. 
한국통신 웹 스타일 가이드는 타사의 웹 스타일 가이드에 비해 웹에서의 기업 아이덴티티, 즉 웹 CI에 관한 항목에 보다 많은 부분이 설명되어 있다. 이는 삼성에서 별도로 운영하고 있는 기업 아이덴티티 활용 가이드와 동일한 기능을 하고 있다고 할 수 있다. 

삼성의 경우 비교한 타 가이드 라인에 비해 디자인, 기술, 자료 받기로 상대적으로 간결한 대분류 항목을 가진다.
가이드 라인 중 디자인부분 상세항목은 그리드, 타이포그라피, 칼라, 네비게이션, 라벨링, 이미지, 버튼 및 베너, 디자인 체크 리스트 등으로 구성되어있다. 한국통신의 디자인부분의 항목과 거의 유사함을 알 수 있다.

해외 사례로서 예시된 Sun과 GE의 경우는 국내의 사례와 비교하여 구축시점도 훨씬 이르고 많은 투자와 함께 선진적 운영 노하우가 있음을 느낄 수 있다. 

특히 Sun의 SMRC 웹사이트의 경우, 세계적으로 주목받는 가이드답게 방대한 내용과 함께 많은 영역을 웹이라는 매체의 특성을 충분히 활용하여 커버하고 있음을 알 수 있었다. 내용이 방대한만큼 가장 복잡한 구조를 가지고 있는데, 디자인과 기술적인 가이드가 통합되어 있는 것이 특징이다. 디자인 요소와 관계 있는 항목으로는 배너, 아이콘, 버튼, 색상, 플래시 사용 가이드 등의 항목이 있으며 템플릿이라는 대분류를 따로 둠으로서 그리드와 레이아웃에 대한 규정을 설명하고 있다.

GE의 가이드에서는 크게 크리에이티브(디자인) 부분과 기술적인 부분으로 나누어진다.디자인의 하위분류로서 타 웹사이트들의 경우와 유사하게 템플릿, 폰트, 타이포그라피, 색상, 로고, 버튼, 배너 등의 항목으로 구성되어 있다.

위에서 살펴본 바와 같이 세부항목의 그룹핑에 있어서는 다소 다른 체계를 택하고 있다고 하더라도 예시한 모든 웹사이트에서는 유사한 항목에 관한 가이드 라인을 가지고 있었다. 
design 또는 Creative, Graphic, UI이라는 가이드라인의 대분류에서 폰트, 색상, 아이콘, 배너, 레이아웃 또는 템플릿 등의 디자인 요소에 대한 항목이 공통적으로 사용되었다. 또한 모든 가이드에서 공통적으로 웹에서의 글쓰기, 하이퍼링크에 대한 규정을 가지고 있었다. 
이러한 것들은 체크리스트 또는 Web Writing Guidelines라는 이름으로 제안되고 있었는데 이는 구체적이고 수치에 근거한 가이드라기보다는 원론적이며 추상적인 권고안의 수준이었다.


이상의 조사 결과 조사대상인 웹 스타일가이드의 요소들은  크게 아래와 같은 3가지 범위로 구분되어 있음을 알 수 있다.

1. 웹사이트 아이덴티티 구축을 위한 브랜딩 가이드 (Branding Guide) 
통합 아이덴티티 구축을 위한 가이드. 이미지, 문장작성기준 등을 포괄.
크게 KIDP와 designdb의 Web과 인쇄물을 통한 기업이미지 통합을 위한 CI 메뉴얼.

2. 디자인 가이드 (Design Guide) 
웹사이트의 시각적 일관성을 유지하기 위한 규칙.
레이아웃, 그리드, 메뉴 라벨링, 색상, 타이포그래피, CSS, 이미지 및 배너의 적용에 있어 기준을 제시.

3. 기술 가이드 (Technical Guide) 
웹 상에서 구현되는 코딩에 대한 규칙.코딩에 앞선 공지사항, 폴더, 파일 네이밍 규칙, 기능버튼 사용 규칙 등 기술적인 기준을 제시. 
 

 

전문보기 :  http://idc.designdb.com/research/thesis/DP_XXQX_thesisDetail.asp?userid=magic70&seqnum=409&gubun=1

출처 : 이주희, 사용성 향상을 위한 웹 디자인 스타일 가이드(Web Design Style Guide) 연구, 동덕여자대학교 디자인대학원, 2001.