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

웹 스타일 가이드란 무엇인가

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

웹접근성 전문업체

http://www.neopubl.com/

label 속성

폼 콘트롤 요소에 레이블을 추가하면 장애인 뿐만 아니라 일반인들의 사용성도 크게 개선시켜 줍니다. 레이블링 된 텍스트를 클릭하는 것만으로도 폼 콘트롤 요소를 클릭한 것과 같은 효과를 낼 수 있습니다. 즉, 클릭이 가능한 영역을 확대해 주기 때문에 일반인들의 사용성이 증가하게 되고 스크린 리더 사용자는 폼 콘트롤 요소에 커서가 머물때 이에 대응하는 레이블(텍스트)을 인식할 수 있기 때문에 접근성이 높아 집니다.

WCAG 10.2

웹 표시 장치가 레이블(label)과 폼(form) 컨트롤 사이의 명시적으로 지정된 연관을 명료한 방법으로 인식 가능하게 해 줄 때까지는 레이블을 적절한 위치에 놓아야 한다.

WCAG 12.4

컨트롤과 그 컨트롤의 레이블을 명시적으로 짝지어야 한다.

KWCAG 3.3

온라인 서식을 포함하는 콘텐츠는 서식 작성에 필요한 정보, 서식 구성 요소, 필요한 기능, 작성 후 제출 과정 등 서식과 관련한 모든 정보를 제공해야 한다.

드림위버의 환경설정 Preferences>Accessibility 에 의하면 높은 접근성을 요구하는 마크업을 시도할 때 대화상자를 띄워서 접근성 관련 속성을 입력하거나, 또는 접근성 속성이 입력되어 있지 않은 경우 이를 경고해 주도록 설정할 수 있습니다. 보통의 경우 접근성 속성이 있는 마크업을 생성하려고 할 때 대화상자가 열리면서 그것을 채우도록 유도하고 대체문자가 빠진 이미지 등을 복사할 때에는 여러개의 이미지가 한꺼번에 복사 되더라도 대체문자를 모두 채울 수 있는 대화상자를 뿌려줍니다. 이어지는 제 설명을 들으시려면 일단 환경설정에서 다음과 같이 체크되어 있어야 합니다.

준비가 되었다면 시작해 봅시다.

1. 삽입메뉴에서 textfield 용 input 요소를 클릭 하여 문서에 삽입하려고 시도하면 아래와 같은 대화상자가 나타납니다.

   

2. Label 부분에는 현재 삽입하려고 하는 textfield 를 설명하는 문장을 넣습니다.

   상기 예제와 같이 입력하는 경우 코드상으로는  ‘<label>비밀번호</label>’ 형식으로 <label> 태그와 문장이 함께 마크업 됩니다.

3. Style

   • Wrap with label tag(레이블 태그로 감싸기)

     <label> 태그로  레이블 텍스트와 <input /> 모두를 감쌉니다. 코드 상으로는 ‘<label>비밀번호<input type="text" /></label>’ 과 같은 형식이 되겠지요. 이러한 방법의 장점은 단순하게 레이블링 만을 위하여<input /> 태그에 새로운 ‘id’ 를 부여하지 않아도 된다는 점 입니다. 만약 <label> 태그가 <input /> 태그를 감싸주지 않는 상황이라면 이 둘의 관계를 짝지어주기 위하여 <input /> 태그에는 새로운 ‘id’ 속성과 값이 필요하고 <lable> 태그에는 ‘for’ 라는 속성이 추가 되어야 합니다. 하지만 이렇게 <lable> 태그로 텍스트와 콘트롤 요소를 한번에 감싸주게 되면 레이블 텍스트와 <input> 사이의 관계를 표시하기 위하여 별도의 ‘id’ 나 ‘for’ 속성이 필요없이 둘의 관계는 하나의 쌍으로 자동 정리 됩니다.

   • Attach label tag using ‘for’ attribute(레이블 태그에 ‘for’ 속성을 적용함)

     <lable> 태그에 ‘for’ 속성을 사용하게 됩니다. 따라서 <label> 은 레이블 텍스트만 감싸주고 <input /> 은 <lable> 태그 밖에서 마크업 됩니다. 코드상으로는 이렇게 됩니다. <lable for="pw">비밀번호</lable><input type="text" id="pw" />. 부모와 자식같이 종속된 관계가 아니기 때문에 ‘id’ 와 ‘for’ 속성이 레이블 텍스트와 콘트롤 요소를 연결해 주고 있는 형태 입니다. 이 방식의 장점은 레이블 텍스트와 콘트롤 요소가 서로 다른 마크업에 둘러쌓여 있을 때 유용 합니다. ‘id’ 와 ‘for’ 속성을 사용하면 레이블 텍스트와 콘트롤 요소가 아무리 멀리 떨어져 있더라도 이 둘의 관계는 바늘과 실처럼 유지 됩니다. 물론 하나의 문서안에 함께 존재할 때만 그렇습니다.

   • No label tag(레이블 태그 사용안함)

     이 옵션은 <input type="submit" />, <input type="image" /> 인 경우에 주로 사용 됩니다. <input type="submit" value="검색" /> 과 같은 형식으로 마크업 될 때에는 별도의 레이블을 추가할 필요가 없기 때문 입니다. 또한, 이미지인 경우에는 <input type="image" alt="검색" /> 과 같이 코딩하면 되기 때문에 레이블이 필요가 없는 경우가 되겠습니다. 오히려 레이블링 하면 중복된 텍스트로 인하여 혼란스럽게 됩니다.

4.  Position

   • Before form item(콘트롤 요소 앞쪽에 레이블 텍스트를 배치함)

     레이블 텍스트를 콘트롤 요소 앞쪽에 배치 합니다. <lable> 태그가 텍스트와 콘트롤 전체를 감싸는 경우와 <lable> 에서 ‘for’ 속성을 사용하면서 <input /> 요소를 밖으로 빼놓는 두 가지 경우 모두 이 명령의 영향을 받습니다.

   • After form item(콘트롤 요소 뒷쪽에 레이블 텍스트를 배치함)

     레이블 텍스트를 콘트롤 요소 뒷쪽에 배치 합니다. <lable> 태그가 텍스트와 콘트롤 전체를 감싸는 경우와 <lable> 에서 ‘for’ 속성을 사용하면서 <input /> 요소를 밖으로 빼놓는 두 가지 경우 모두 이 명령의 영향을 받습니다.

5. Access key 와 Tab Index

   • 사용하면 오히려 부작용이 있으므로 권장되지 않습니다.

     Access key 는 스크린 리더의 단축키와 충돌할 수 있는 가능성이 항상 존재합니다. 또한 Tab index 를 설정하여 Tab 키의 이동순서를 강제로 변경하는 것보다는 콘텐츠의 배열을 순차적으로 하여 Tab index 를 설정하지 않더라도 Tab 키의 이동순서가 문맥의 흐름에 맞도록 하는것이 좋습니다