WSG(Web Style Guide) 정의
- 웹시스템의 사용자 인터페이스(User Interface) 설계 및 개발시 기준이 되는 UI 규칙과 동작방식에 대해 기술한 문서이다.
- 웹 스타일 가이드의 목적은 홈페이지의 통일되고 일관된 이용자 경험(UserExperience)을 구현하고, 홈페이지의 추가 개발 및 유지보수의 편리성을 높이는데 있다.
체계적이고 일관된 이용자 경험은 결과적으로 이용자들에게 홈페이지의 통일된 아이덴티티(Identity)와 브랜드(Brand) 이미지를 형성한다.
이러한 목적으로 만들어지는 웹 스타일 가이드는 체계적인 홈페이지 개발 작업의 결과물이된다. - 설계자들은 본 문서에 기술되어 있는 화면 구성 규칙, 배치 기준, 화면세부요소에 대한 규칙 등에 따라서 화면 정의서를 작성한다.
- 개발자들은 본 문서에서 제공하는 공통 CSS/JS를 기준으로 개발하며 각 화면에 필요한 파일은 별도 생성하여 개발한다.
- 표준에 대한 이견이 존재하거나 준수하기에 불가한 상황이 발생할 경우에는 UI 담당자와 협의하여 적절한 대안을 찾도록 한다.
WSG 목적 및 대상
- 본 문서는 쌍용 업무 시스템 개발 시 표준을 명시하고 있으며 일관된 화면구현을 위한 방법을 제시하고, 구현되는 화면의 품질을 보증하는데 그 목적이 있다.
- 화면패턴 가이드에 따라 일관되고 패턴화 된 화면정의/설계/구현을 함으로써 UI 품질 및 화면 개발 생산성을 향상시켜 줄 수 있으며, 시스템 구축 이후 실사용자가 업무를 수행함에 있어 시스템 사용법을 쉽게 학습하고 UI패턴에 빠르게 적응할 수 있다.
- 업무 편의성과 효율성을 향상시킴으로써 결과적으로 연령층이나 사용숙련도에 관계 없이 모든 사용자가 업그레이드 된 사용자 환경을 체험할 수 있도록 하는 것이 가장 본질적이며 중요한 목적이다.
WSG 구성
- 1. Basic Rules – 웹 스타일 가이드의 기본 활용 및 적용범위 등을 규정한다.
- 2. Layout
- 3. UI Patten
- 4. UI Elements & UI Component