웹 스타일 가이드를 만드는 디자인 원칙을 말한다.

By | 2011년 8월 29일
스타일 가이드 어찌 잡아요? ㅠ_ㅠ를 열심히 타이핑하고 계실 분들을 위해 때깔 나는 웹 스타일 가이드 지침서!! 웹 스타일 가이드: 짜임새 있는 웹사이트를 만드는 디자인 원칙을 소개합니다.
 

웹 스타일 가이드란?

간략히 말하면 스타일 가이드란 문서를 일관성 있게 만들 한 묶음의 표준을 말하는데, 웹 스타일 가이드라 하면 웹사이트 제작과 관련하여 콘텐츠에 따라 비주얼 측면, 기술적인 측면에 대한 표준까지 아우릅니다.
웹 스타일 가이드라는 키워드로 검색하면 흔히 볼 수 있는 문서에서는 웹 스타일 가이드를 다음과 같이 설명합니다.
웹 스타일 가이드의 목적은 웹사이트의 통일되고 일관된 사용자 경험(User Experience)을 구현하고, 사이트의 추가개발 및 유지보수의 편리성을 높이는 데 있다. 체계적이고 일관된 사용자 경험(User Experience)은 결과적으로 사용자들에게 사이트의 일관되고 통일된 아이덴티티(Identity)와 브랜드(Brand) 이미지를 형성한다. 이러한 목적으로 만들어지는 웹 스타일 가이드는 체계적인 사이트 개발 작업의 결과물인 셈이다.
㈜이비즈그룹 2001. 04. 24 문서
한마디로 일관성을 갖추면서도 해당 사이트의 목적에 부합하는 룩 앤 필을 완성하는 데 웹 스타일 가이드의 필요가 있다 하겠습니다.

  

키보드 위에 허전하게 손만 올려 놓게 만드는 너란 녀석


 

사이트 하나를 기획할 때는 다음 사항들을 검토한 다음 세밀화하는 과정이 필요하다고 합니다. 그런데….

웹 프로젝트에 고려해야 할 것은 왜 이다지도 많은가요…
유니버설 유저빌러티도 고려해야 하고, 

인포메이션 아키텍처도 고려해야 하고

사용자가 사이트의 어떤 페이지로 접근하든 사이트 아이덴티티를 알릴 수 있어야 하며

문서의 마크업도 신경 써야 하고
어느 매체를 통해 보더라도 디자인에 흐트러짐이 없어야 하죠.
이외에도 타이포그래피 구성, 폼 디자인, 그래픽과 컬러, 미디어의 활용 등을 세심하게 살펴야 합니다. 

웹 스타일 가이드를 짜려면 전체 사이트의 룩 앤 필을 결정하는 비주얼 요소는 물론이고, 내비게이션 디자인, 검색 방식(더불어 검색엔진 최적화도 고려), 콘텐츠와 웹사이트 구조를 구체화하고, 콘텐츠를 어떻게 표현해야 할지도 제시해야 한다는데, 도무지 감을 잡기가 힘들 정돕니다!

대충 스타일 가이드란 이런 것이라고 알면서도 막상 작성하려니 “어디서부터 손을 대야 할지 모르겠다”라고 외치는 당신!!
그래서 소개합니다.
기업, 학교, 뉴스 사이트처럼 일관성 있고, 체계를 갖춰야 하는 웹사이트 만드는 법을 알려주는 웹 스타일 가이드의 바이블이라고 일컬어지는 이 책! 웹 스타일 가이드: 짜임새 있는 웹사이트를 만드는 디자인 원칙
추천합니다. 🙂
한명수 님께서 감수를 봐주시어 더욱 꼼꼼하고 탄탄한 책이 되었습니다. 

감수의 글
 

단순한 포토샵 이미지와 HTML 코딩으로 웹사이트 아니, 홈페이지라 불리는 것들을 만들던 때가 이미 십수 년이 훨씬 지나 지금은 스마트폰에서 웹 이상의 무언가를 만드는 지경이라니 놀랍고 새롭다. 무엇이 기준인지 아무도 모르니 저마다의 뜻과 의지로 ‘마음대로 스타일’을 부렸던 때는 흡사 바벨탑을 세우던 중 언어가 달라져 혼란스러웠던 고대 시대와 흡사하지 않았나 한다. 아무것도 모르던 시절에 주먹구구식으로 잉태된 웹사이트 제작의 노하우는 시행착오가 많았던 방법론을 거쳐 지금은 거대한 구조적 틀을 갖추며 조합과 해체, 통합과 연결, 개방과 소통의 의미까지 아울러 웹 전문가들을 거대한 지적 설계 방법론 위에 세우고 말았다. (어느새 인류는 언어를 통합해 가며 바벨탑을 만든 것이다!) 이 방법론이란 것이 얼핏 보면 복잡하고 방대한 기술의 집합체 같지만 가만 살펴보면 사용자(불특정 다수의, 공짜 정보를 탐닉하는 변덕스러운 이들)를 위해 필요한 정보들을 잘 버무려 보여주고 정보를 향한 길을 터주는 것. 그 본질적 목표는 변함 없다.
인터넷 브라우저를 살펴볼까? 불완전한 탐험가(?) IE 6, 7, 8, 9이 연달아 우리를 농락하며, 구글은 크롬(Chrome)을 내놓으며 신세계는 이것으로 종결한다 자랑하고. 섹시한 애플의 사파리(Safari), 개발자들의 사랑을 받는 불여우 파이어폭스(FireFox), 랄랄라 노래하는 오페라(Opera) 등이 활개친다. 여기에 태블릿 PC와 모바일, 인터넷도 드라마 보면서 하라는 IPTV까지…… 자고 나면 달라지는 요즘 환경은 웹사이트 하나를 만들고 제대로 보여주기까지 얼마나 우리를 피곤케 하는지 모르겠다. 사용자(User)들은 또 얼마나 영리하고 야박해졌는지, 링크가 제대로 열리지 않거나 보고 싶은 것들이 바로 보이지 않거나 조금이라도 못나 보이면 브라우저를 닫아버리고 다른 곳으로 도망가 버린다.『웹 스타일 가이드』초판이 나왔던 십 년 전과 비교하면 지금의 웹 관련 실무자들은 넘어야 할 산과 바다가 참 많이 생겼으니 무엇보다 산과 바다가 다 보이는 ‘지도’가 한 장 필요할 듯싶다. 이번에 새로 개정된 ‘웹 스타일 가이드’ 세 번째 지도(!)는 처음 웹 관련 업무에 실무로 종사할 신입 여행자는 물론 한창 숲과 강물을 건너는 베테랑 여행자(중급 실무자)에게도 유익한 큰 그림을 제공하지 않을까 싶다. 이 책을 읽고 책을 덮을 즈음엔 또 환경이 바뀔지 모를 두려움이 있지만, 얻을 수 있는 바는 가슴에 담아 둘 만하다. 사용성(Usability)의 원칙, 정보를 ‘어떻게 맛있게 구성할지’의 원칙, 모양새를 좋게 하여 어떤 환경에서든 견고하고 유연한 화면을 기획하는 법. 덧붙여 디자인과 UI 개발의 범용성과 규칙들, 모르고 지나치면 나중에 큰코다칠 법률적 제약과 체크해야 할 환경까지 크고 분명하게 보면서 자신감을 얻었으면 좋겠다. (극히 디테일한 문제들은 이 책에서 제공하는 링크와 다른 정보들을 함께 봐야 한다.) 웹사이트에서 가장 중요한 요소는 ‘내비게이션(Navigation)’이다. 이 책이 웹을 제작하고 공부하는 이들에게 큰 지도의 역할을 책임지는 ‘내비게이션’이 되었으면 좋겠다.

– 한명수(SK커뮤니케이션즈 UXD센터장/상무)

목차는 요기에
[#M_목차|접기|

감수의 글

추천사

제3판 발간에 붙여

1장 개발 과정

사이트 개발 팀 구성

웹 팀의 역할과 책임

기획에 앞서

웹사이트 형식과 문서

정적 웹 페이지와 동적 웹 페이지

웹 콘텐츠 관리

웹 툴의 진화

거대한 파급력을 지닌 웹 서비스

사이트 개발 과정

사이트 정의 및 기획

정보 설계

사이트 디자인

사이트 구축

사이트 마케팅

트래킹, 평가, 유지

PM 체크리스트 제작

최종 PM 체크리스트 작성

사이트 프로젝트 운영에 대한 일반적인 제언


2장 유니버설 유저빌러티

유니버설 유저빌러티의 기초

접근성

유저빌러티와 사용자 중심 디자인

유니버설 디자인

유니버설 유저빌러티 가이드라인

‘일반’ 사용자 넘어서기

적응성 지원하기

디자인 과정에서 유니버설 유저빌러티

사용자 조사

디자인과 평가

3장 정보 설계

기존 정보 조직하기

웹 콘텐츠 목록

정보 덩이짓기

사이트 구조

사이트 브라우즈 기능

사이트 검색

사이트 구조 테마

요약

정보 설계의 제시 방식

사이트 다이어그램

와이어프레임


4장 인터페이스 설계

내비게이션과 길 찾기

경로: 경로 안내

구역과 경계: 일관성의 역설

접점: 동네 커피숍이 좋을까, 타임스퀘어가 좋을까?

지형지물: ‘현재 위치’   
 
       
요약: 웹사이트에서 길찾기의 원칙

브라우즈 대 검색

방향성

웹 검색 사용자 지원

인터페이스 디자인

명확한 내비게이션 지원

막다른 페이지가 없어야 한다

직접 접속

단순성과 일관성

디자인의 완성도와 안정성

피드백과 다이얼로그

통신 속도와 상호작용

인터페이스 디자인 관행

정보 디자인

독립된 웹 페이지

요약: 정보 디자인 가이드라인

기업형 인터페이스

인터페이스의 구성 맥락

5장 사이트 설계

시맨틱 콘텐츠 마크업

HTML 문서 구조

다양한 형식의 브라우저에 유의하라

요약

사이트 파일 구조

숨겨진 사이트 시멘틱

이름 짓기 관습

효과성과 유지 가능성을 높이는 구조

HTML 콘텐츠 콘테이너에 이용된 시멘틱 구조

검색 엔진 최적화

웹 검색의 롱 테일 현상

검색 엔진의 기본 개념

검색을 위한 페이지 최적화

6장 페이지 구축

맥락을 벗어나지 않는 사이트 디자인

월드 와이드 웹

기업 웹 아이덴티티

페이지 구조와 사이트 디자인

페이지 헤더

스캔 칼럼

콘텐츠 영역

페이지 템플릿

내부 페이지 템플릿

2차 하위 페이지 템플릿

메인 페이지

7장 페이지 디자인

문서 디자인

적응적 디자인

문서 순서

선택적 디스플레이

대체 텍스트

매체 이해

시각 디자인

일관성

대비 효과

여백

스타일

간결함

시각 디자인의 게슈탈트(모양)

페이지 프레임워크

고정폭 페이지

유동폭 페이지

페이지 폭과 글줄의 길이

페이지 길이

헤더와 푸터

웹 페이지의 수직적 계층화

웹 페이지를 위한 디자인 그리드

8장 타이포그래피

웹 타이포그래피의 특징

매번 다른 구성

콘텐츠 구조와 시각적 논리

CSS

일관성

가독성

정렬과 여백

정렬 선택

글줄 길이

글자 모양

서체

서체의 선택

서체의 크기

강조

그래픽 요소를 동반한 제목 타이포그래피

제목 타이포그래피 만들기

9장 편집 스타일

글 구성하기

사이트 구성

페이지 구성

온라인 문체

대비와 강조

산문체

기타 문체상의 고려사항

키워드

제목과 소제목

페이지 제목

웹 문서를 위한 텍스트 포맷팅

워드 프로세서의 스타일 시트

특수 문자

링크

설명적인 링크

링크의 밑줄 처리

방문했던 링크와 방문 전의 링크

10장 폼과 애플리케이션

상호작용을 지원하는 기술

Ajax

접근성

웹 애플리케이션 만들기

절제와 단순함

디자인 패턴

표준

상호작용 방법 설명하기

오류에 대한 반응

디자인 과정

와이어프레임

프로토타입

11장 그래픽

웹 그래픽의 역할

콘텐트라는 성질을 지닌 그래픽

일러스트레이션

도형과 계량적 자료

통합적인 시각 표현

웹의 그래픽 의사소통

웹 그래픽의 특징

컬러 디스플레이

화면 해상도

감마

그래픽과 네트워크 속도

그래픽 파일 포맷

GIF 그래픽

JPEG 그래픽

PNG 그래픽

이미지 만들기 전략

인터페이스 요소

GIF로 만들 때

JPEG로 만들 때

다이어그램과 일러스트레이션은 벡터 그래픽으로

웹사이트 그래픽의 보관

요약: 그래픽 파일 포맷

화면에 보이는 이미지

스크린 컬러 아트워크와 인쇄 컬러 아트워크

복잡한 그림이나 사진

컴퓨터 화면을 위한 다이어그램

그래픽 텍스트

큰 이미지로 작업하기

그래픽 숨기기

그래픽 마크업

높이와 너비 태그

대체 텍스트

배경 컬러

배경 그래픽

12장 멀티미디어

멀티미디어 도입을 위한 고려 사항

웹 멀티미디어 전략

멀티미디어 준비하기

처리 과정

전송

디자인과 멀티미디어

사용자에게 고지하라

제어 기능을 제공하라

키보드 인터랙션을 지원하라

선택을 제공하라

축약단어

참고문헌

도판 저작권

인덱스

_M#]

.

3 thoughts on “웹 스타일 가이드를 만드는 디자인 원칙을 말한다.

  1. 에디터

    별로 보지 않았는데 벌써 페이지들이 떨어지려고 하고 있네요,,, 나름 비싼 책인데 조금 더 신경써서 만들어주셨으면 하네요. 테입으로 붙이며 보고 있는데 조금 짜증이 나네요

    Reply
    1. ks.han

      불편을 끼져드려 죄송합니다.
      제본불량인 책이니 언제든 구입하신 서점에서 교환하실 수 있습니다. 혹시 교환이 어려우신 조건이면 아래 이메일로 연락주세요.
      june 골뱅이 insightbook.co.kr
      많이 번거로우시겠지만 책 불량의 상태를 알 수 있도록 사진을 찍어 위 이메일로 보내주시면 저희가 제작사와 협의하는데 크게 도움이 되겠습니다.
      책의 앞부분이 떨어지는 현상이 벌어지는지, 아니면 페이지 전체가 떨어지는지 알 수 있을까 해서 요청드리는 겁니다.
      불편을 끼쳐드린 점 다시 한번 사과드립니다.

      Reply

댓글 남기기