회사 설립과 동시에 홈페이지를 오픈하면 좋은 일이다. 제대로된 프로페셔널 웹 에이전시에게 일을 맡기면 좋겠지만, 여유자금이 없는 회사 초기에는 홈페이지 제작을 아르바이트생에게 맡기는 것을 많이 보았다. 이경우에 웹 페이지의 디자인에 대한 스타일 가이드라인을 제시한다면, 산출물의 품질을 어느정도 담보할 수 있을 것이다.
아래의 내용은 필자와 같이 일한 직원이 필자의 가이드라인에 따라 작성한 "웹 페이지 디자인 스타일 가이드라인"내용을 키워드 중심으로 발췌하여 기재한다. 당시에 웹 프로그래밍 작업은 이러한 문서없이 바로 개발업에 착수하여, 개발자가 중간에 퇴사할 경우는 유지보수는 불가능 하였고 의사소통에 많은 어려움을 느꼈었다. 이러한 컨셉레벨의 문서를 작성하면, 대단위 웹페이지 개발시에도 통합작업이 용이해질 수 있다. 물론 보다 철저한 유지보수를 위하여는 로직레벨의 문서와 코딩레벨의 문서화 작업도 병행되어야 하겠다. 운영정책의 경우는 조직의 미션, 비젼, 가치에 따라 웹페이지 전체를 통제하는 원칙이니, 더욱 많은 시간을 할애하여 논의할 필요가 있다.
0. 웹 페이지 운영 정책<D사를 가정하여 작성함>
- 최대한 한글화 할 수 있는 단어는 한글로 바꾸도록 한다. 한글단어가 이해가 되지 않을 경우(괄호)안에 외래어를 병기한다.
- 메뉴의 레벨은 3단계이내로 디자인 한다.
- 모든 정보는 웹페이지의 홈으로 들어와서 3~4번의 클릭으로 목적물에 접근 가능해야 한다.
- 다운로드하는 모든 문서는 pdf로 변환되어 있어야 한다.
- 사진, 동영상, 소리는 시장에서 가장 많이 사용하는 재생가능한 파일 타입이어야 한다.
- 노출된 URL 링크는 표시되어서는 안되고, 오브젝트에 연결시키거나 축약된 링크로 연결한다.
- 콘텐츠를 다운로드할 경우는 항상 사용자의 이메일을 취득하는 로직을 사용한다.
- 사용자 이메일 정보는 제안 콘텐츠의 특성에 따라 구분되어 저장되어야 한다.
- 웹 페이지는 기본적으로 로그인 기능은 사용하지 않는다. 단, 프로젝트의 성격에 따라 승인에 의하여 로그인 절차를 사용할 수 있다.
- 지원 브라우저는 다음의 3가지는 반드시 지원해야 한다. (크롬, explorer, safari)
- 지원 단말에 최적화된 해상도를 고려하고, 모바일 디바이스에 최적화되도록 노력한다.
- 지원 언어는 한국어, 영어이고, 기타 언어는 재단 소개를 위한 기본적인 정보만 제공한다.
- 페이지 포스팅이전에 반드시 철자 확인을 하여야 한다.
- 사용자의 유입 채널을 확인할 방안을 고려해야 한다.
- 지원하는 소셜미디어는 twitter, facebook, instagram, youtube 와 연동가능해야 한다.
1. 웹 페이지 스타일 가이드라인이란?
- 웹페이지의 일관된 시각적 아이덴터티를 확보하기 위하여, 준수하여야 하는 스타일링 원칙이다.
2. 웹 페이지 스타일 가이드라인의 3가지 목적
- 사용자들이 직관적이고 쉽게 사용할 수 있는 통일된 표준 UI 제공
- 웹 사이트 및 어플리케이션의 유지 보수 관리 용이
- 향후 개발 사이트의 가이드라인 적용기준을 제시
3. 스타일 가이드라인의 내용
3-1. 디자인 컨셉:
1) 디자인 원칙
2) 기본환경 정의
3) 이미지 Naming Rule
3-2. Look & Feel UI: 컬러, 이미지, 폰트 등의 거시적 표준
3-3. Web Design 표준
1) Structure: 사이트맵의 트리구조 설명
2) Layout: 템플레이트 디자인 (사이즈를 수치로 표시함이 좋다)
- 메인, Global Navigation Bar, Footer, 화면구성 등의 표준 제시
3) Navigation: 1st -> 2nd -> 3rd 레벨 네비게이션 모델
4) Module Guide: 데이터 테이블, Pop-up 윈도우 표준, 그래프, 버튼 등의 표준
5) Color: Text, Table, Point 컬러 표준, 그래프 색상 표준
6) Font: HTML 폰트, 이미지 폰트
7) 참조 Image Source: 웹 디자인시에 활용할 참조 이미지 오브젝트