제작 및 활용 가이드
1. 그래픽 디자인 가이드
1.1. 안전 서체를 사용합니다
오픈 UI 프로젝트는 전 세계 모든 국가의 다국어 환경을 고려하고 있으므로 다양한 환경의 호환성이 확보된 시스템 서체를 사용해야 합니다. 이미지 서체를 사용하는 경우 다국어 확장에 어려움이 있습니다. 이러한 제한은 이미지 서체를 금기하는 것이 아니라 UI의 확장 가능성과 접근성을 극대화 하는것에 목적이 있습니다. 사용이 권장되는 안전 서체의 종류는 다음과 같습니다. 안전 서체를 사용하지 않으면 다국어 서체는 깨지거나 또는 운영체제의 오작동을 유발합니다.
| Generic Family | Family Name | Example | |
|---|---|---|---|
| Windows Font Name | Mac Font Name | ||
| Sans-serif Normal fonts without serifs | Arial | Arial | Safe Fonts, 안전서체, 安全書体, 安全字体 |
| Arial Black | Arial Black | Safe Fonts, 안전서체, 安全書体, 安全字体 | |
| Lucida Sans Unicode | Lucida Grande | Safe Fonts, 안전서체, 安全書体, 安全字体 | |
| Tahoma | Geneva | Safe Fonts, 안전서체, 安全書体, 安全字体 | |
| Trebuchet MS | Helvetica | Safe Fonts, 안전서체, 安全書体, 安全字体 | |
| Verdana | Verdana | Safe Fonts, 안전서체, 安全書体, 安全字体 | |
| MS Sans Serif | Geneva | Safe Fonts, 안전서체, 安全書体, 安全字体 | |
| Serif Normal fonts with serifs | Georgia | Georgia | Safe Fonts, 안전서체, 安全書体, 安全字体 |
| Palatino Linotype | Book Antiqua | Safe Fonts, 안전서체, 安全書体, 安全字体 | |
| Times New Roman | Times | Safe Fonts, 안전서체, 安全書体, 安全字体 | |
| MS Serif | New York | Safe Fonts, 안전서체, 安全書体, 安全字体 | |
| Monospace Fixed-width fonts | Courier New | Courier New | Safe Fonts, 안전서체, 安全書体, 安全字体 |
| Lucida Console | Monaco | Safe Fonts, 안전서체, 安全書体, 安全字体 | |
| Cursive Fonts that emulate handwriting | Comic Sans MS | Comic Sans MS | Safe Fonts, 안전서체, 安全書体, 安全字体 |
| Fantasy Decorative fonts, for titles, etc. | Impact | Impact | Safe Fonts, 안전서체, 安全書体, 安全字体 |
1.2. 브라우저 고유의 인터페이스 요소를 존중합니다
브라우저 고유의 인터페이스 요소란 '사용자-서버' 사이의 상호작용을 위하여 웹 브라우저가 제공하는 서식 제어 요소를 말합니다. HTML 요소 가운데 서식 제어 요소들은 <input />, <textarea />, <select />, <option />, <button /> 이며 여러가지 형태로 출력 되는데 일부 제어 요소는 스타일 변경을 하지 않아야 합니다. 스타일 변경을 제한하는 이유는 첫째로 해당 요소들에 대한 스타일 변경을 대부분의 웹 브라우저가 지원하지 않기 때문이며, 둘째로 이를 극복하기 위하여 사용하는 트릭이 키보드 접근에 치명적이고 화면 표시 속도를 떨어뜨리기 때문입니다. 스타일 변경이 자유로운 요소들은 CSS를 이용하여 'border, background, width, height, image replace' 기법 적용이 가능하나 스타일 변경이 제한된 요소들은 'width, height' 만 지정이 가능합니다. 아래 표는 스타일 변경이 제한된 브라우저 고유의 인터페이스 요소들 이므로 이 형태를 그래픽 요소로 변경하지 않아야 합니다.
| HTML Markup | Rendering |
|---|---|
| input type="checkbox" | |
| input type="radio" | |
| input type="file" | |
| select, option |
2. HTML 가이드
2.1. XHTML 1.0 Transitional 공식 문법에 맞아야 합니다
모든 콘텐츠는 기본적으로 XHTML 1.0 호환모드Transitional DTD 형식으로 작성하며 Markup Validation 검사를 통과해야 합니다. HTML 4.01/XHTML 1.0 문서형에서 폐기Deprecated된 요소들은 <applet />, <basefont />, <center />, <dir />, <font />, <isindex />, <menu />, <s />, <strike />, <u />, <xmp /> 입니다. 이들은 표준모드Strict DTD 에서는 더 이상 사용할 수 없고 호환모드Transitional DTD 에서 허용하고 있으나 모두 CSS로 처리하는 것을 권장합니다. HTML/XHTML 문법에 대하여 더 상세한 정보를 원하시면 HTML 4.01, HTML 4 Elements, HTML 4 Attributes, XHTML 1.0, HTML 4.01/XHTML 1.0 Reference를 참고하세요.
오픈 UI 프로젝트에서 사용해야 할 XHTML 1.0 호환모드 DTD는 다음과 같습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2.2. 문자셋으로 UTF-8을 사용합니다
문자의 풍부한 표현과 다국어 환경에 적합한 UTF-8 문자셋을 사용해야 합니다.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
3. CSS 가이드
3.1. CSS의 사용은 현존하는 브라우저들의 지원 여부에 따릅니다
CSS 코드는 되도록 표준 코드의 사용을 권장하지만 CSS Validation 검사를 통과할 필요가 없습니다. 브라우저의 오작동을 유발하지 않고 호환성 유지가 확보된 이상 벤더 종속적이거나 아직 표준이 확정되지 않은 코드를 사용해도 무방합니다. CSS 2, CSS 2.1, CSS 3, Firefox CSS Extensions, Webkit(Safari/Chrome) CSS Extensions, Opera CSS Extensions, IE8 CSS Extensions, IE6~7 CSS Extensions 사용이 가능합니다.
3.2. 브라우저 호환성 유지를 위한 CSS Hack & Extentions
Hack과 Extension의 사용은 적극 권장하지 않으나 브라우저 버그를 해결하거나 호환성 유지 또는 더 나은 사용자 경험을 제공할 목적으로 다음과 같은 범위에서 사용이 가능합니다.
- * : 속성 앞에 '*' 표기된 것은 IE7 이하 브라우저에 작용합니다. (예:
#selector {*property:value;}) - _ : 속성 앞에 '_' 표기된 것은 IE6 이하 브라우저에 작용합니다. (예:
#selector {_property:value;}) - -ms- : IE8 부터 지원하는 확장 접두사 입니다. (예:
{-ms-filter:value;}) - -moz- : Firefox에서 지원하는 확장 접두사 입니다. (예:
{-moz-border-radius:value;}) - -webkit- : Webkit계열 Safari, Chrome에서 지원하는 확장 접두사 입니다. (예:
{-webkit-border-radius:value;}) - -o- : Opera에서 지원하는 접두사 입니다. (예:
{-o-text-overflow:value;})
Javascript 가이드
HTML과 CSS로 처리할 수 없는 인터렉션에 사용할 수 있지만 겸손하게 사용해야 합니다. HTML이 수행 가능한 기능을 제한하고 전적으로 자바스크립트에 의존해서도 안되며 CSS로 처리 가능한 표현에 사용해서도 안됩니다. 자바스크립트를 지원하지 않는 환경에서도 콘텐츠의 접근성이 유지되어야 합니다. 프레임웍의 사용을 권장하지 않지만 프레임웍을 사용하는 경우 jQuery 사용을 권장합니다.
브라우저 호환성 가이드
모든 콘텐츠는 Windows, Mac 기반의 Internet Explorer6~8, Firefox3, Safari4, Opera10, Chrome2 브라우저에서의 호환성을 확보해야 합니다. 타겟 브라우저는 TheCounter, OneStat, W3Counter 통계자료를 참고하여 선정합니다.
