패턴 라이브러리라고도 하는 스타일 가이드는 웹 사이트가 성장하거나 새 팀 구성원이 웹 프로젝트에서 작업할 때 디자인이 의도한 대로 계속 진행되도록 하는 좋은 방법입니다. 각 스타일 또는 패턴은 웹사이트의 디자인 요소에 대한 마크업 및 스타일의 그룹입니다.

최신 스타일 가이드는 일반적으로 웹사이트 또는 애플리케이션 디자인의 다양한 요소를 보여주는 실제 웹페이지로 표시됩니다. 여러 사람 또는 여러 팀이 웹 프로젝트에서 작업할 때 스타일 가이드는 시각적 요소가 어떻게 보일지 추측 작업을 수행합니다. 프로젝트 일관성을 위해 모든 사람이 같은 페이지에 있도록 하는 좋은 방법입니다.

팀을 정상 상태로 유지하고 코드를 DRY 상태로 유지

시각적 디자인 외에도 스타일 가이드는 CSS 파일이 통제를 벗어나지 않도록 도와줍니다. 우리는 모두 반복적인 코드를 경험했으므로 절대적으로 필요한 것 없이 코드를 유지 관리 가능하게 유지하기 위해 노력합시다. 팀의 모든 사람이 한 곳에서 모든 스타일을 볼 수 있는 경우 현재 존재하는 스타일을 쉽게 확인할 수 있으므로 스타일시트에 중복되지 않습니다.

스타일 가이드는 모듈 및 기타 디자인 요소의 디자인을 포함하는 모음 역할을 하기 때문에 새로운 디자인 요소가 기존 표준에 맞는지 쉽게 확인할 수 있습니다.

웹 스타일 가이드에는 무엇이 들어가야 할까요?

우리가 알다시피, 웹 디자인은 약간 거칠게 실행되는 경향이 있습니다. 좋은 소식은 특히 스타일 가이드를 사용할 때 효과적인 웹 디자인을 제어할 수 있다는 것입니다. 스타일 가이드는 매우 단순한 것부터 매우 복잡한 것까지 다양합니다. 시작하는 데 도움이 되는 몇 가지 아이디어를 여기에 포함시켰습니다.

색상 팔레트

16진수 색상이 표시된 견본을 포함하는 것이 좋습니다. 시간에 쫓기는 미래의 자신이 고마워할 것입니다! "그 16진수 색상은 또 무엇입니까?"라는 질문을 몇 번이나 받았는지 기억이 나지 않습니다. 빠른 참조를 갖는 것은 모든 사람에게 확실히 도움이 될 것입니다.

타이포그래피 및 계층 구조

설명 제목 자리 표시자는 팀에서 레이아웃의 요소를 사용해야 하는 컨텍스트의 종류를 이해하는 데 큰 도움이 될 수 있습니다.

스타일 가이드에는 제안된 헤더 계층 구조도 포함되어야 합니다. h1, h2, h3 등은 무엇입니까? 기본 헤더, 하위 제목 및 사이드바 위젯 제목과 같은 설명 단어도 미래의 추측을 많이 필요로 합니다.

예를 들어 블록 따옴표와 같이 덜 일반적인 타이포그래피 요소를 포함하는 것을 잊지 마십시오. 거의 사용되지 않는 경우라도 모든 텍스트 예제를 지정해야 합니다. 인용구 또는 평가에 대한 특정 헤더 및 본문 스타일이 있는 경우 더 일반적으로 사용되는 요소에 대해 수행하는 것과 동일한 세부사항으로 지정하십시오.

이미지

프로젝트에 대한 이미지의 일반적인 처리를 포함합니다. 이미지에 테두리 또는 고유한 불투명도 효과가 필요합니까? 호버 상호 작용이 있습니까? 그렇다면 스타일 가이드에서 확인하십시오. 여러 치료법이 있는 경우 각각을 포함하고 특정 치료법이 사용되는 시기를 정의합니다.

링크, 탐색 및 양식 스타일

UX 관점에서 링크, 탐색 및 양식 요소는 연속적으로 가져야 할 세 가지 매우 중요한 덕입니다. 텍스트 링크, 버튼 및 탐색 스타일이 스타일 가이드에 포함되어야 한다는 것을 알고 계실 것입니다. 그러나 각각에 대해 normal, hover,visited 및 active 스타일의 인스턴스를 포함하는 것을 잊기 쉽습니다. 사이트의 모든 세부 사항에서 일관성을 보장하기 위해 문서화하십시오.

훌륭한 스타일이 양식과 병합될 때 스타일 가이드보다 모든 웹 양식 요소를 과시하는 더 좋은 방법은 없습니다. 모든 양식 요소, 작동하는 항목, 작동하지 않는 항목 및 누락된 항목을 매핑하고 목록을 작성하는 좋은 방법입니다.

특히 다음은 양식 스타일에 포함할 몇 가지 주요 구성 요소입니다.

• 일반 입력 필드 상태
• 집중 입력 필드 상태
• 레이블 스타일
• 양식 자리 표시자 텍스트
• 사용자 활성 텍스트
• 사용자가 입력한 텍스트
• 제출 버튼
• 에러 메시지
• 체크박스 스타일

스타일 가이드에 포함할 더 많은 아이디어

발생할 수 있는 모든 요소를 ​​나열하기는 어렵지만 다음은 도움이 될 수 있는 몇 가지 추가 요소입니다.

• 콜아웃 상자
• 수평 링크
• 주석 요소
• 카테고리 태그
• 팝업 모델

나만의 웹 스타일 가이드를 만드는 방법

스타일 가이드를 처음부터 만드는 영웅적인 위업을 처리할 수 있는 운이 좋은 사람을 위해 몇 가지 유용한 고려 사항이 있습니다.

저는 개인적으로 빈 HTML 파일로 시작하여 거기에서 시작하는 것을 좋아합니다. 이 스타일 가이드를 실제 웹사이트 또는 애플리케이션의 CSS에 연결합니다. 이렇게 하면 변경 사항이 두 위치에 모두 반영되고 두 개의 CSS 파일을 유지 관리하는 것에 대해 걱정할 필요가 없습니다.

사이트의 모든 요소에 대한 목록을 작성하는 것으로 시작한 다음 각 요소에 필요한 정확한 마크업을 스타일 가이드에 추가하십시오. 위협적인 소리?

먼저 페이지 그리드를 평가한 다음 타이포그래피 및 색상 팔레트와 같은 중요한 요소로 스타일 가이드를 채우고 작업하면서 더 많은 패턴을 추가합니다. 더 많은 디자인 패턴에는 이미지, 인용구, 사이드바 스타일, 버튼, 양식 스타일 등이 포함될 수 있습니다.

날 믿어. 이것은 잘 보낸 시간입니다. 영구적인 것은 없으며 모든 것이 쉽게 조정되고 확장될 수 있음을 상기하는 것도 좋습니다.

속도를 높이고 모든 스타일을 수동으로 입력하는 것이 적합하지 않은 경우 재사용 가능한 패턴을 쉽게 만들고 사용할 수 있는 몇 가지 훌륭한 도구가 있습니다.

예를 들어, Jeremy Keith의 Pattern Primer는 폴더의 모든 패턴 목록을 생성합니다. 이것은 코드 조각을 패턴 라이브러리로 바꾸는 간단한 PHP 도구입니다. HTML로 렌더링된 패턴을 볼 수 있습니다.

또 다른 훌륭한 옵션은 스타일 가이드 문서화를 위한 훌륭한 도구이기도 한 Kyle Neath의 KSS입니다. 이렇게 생성된 자동 스타일은 CSS 문서에 연결된 HTML 스타일 가이드를 생성하는 데 도움이 되는 일련의 지침입니다. KSS는 CSS 전처리기와 잘 작동하도록 설계되었으며 많은 CSS 프레임워크를 수용합니다.

우리 모두 알고 있듯이 웹 사이트는 결코 완성되지 않습니다. 새로운 요소가 필요한 경우 추가하기만 하면 생활 스타일 가이드를 쉽게 확장할 수 있습니다.

초기 스타일 가이드는 최종적으로 구축하는 페이지와 동일하지 않을 수 있지만 새로운 스타일을 테스트할 수 있는 좋은 기회이며 특히 여러 브라우저용으로 디자인하는 데 유용합니다.

스타일 가이드의 예

훌륭한 스타일 가이드의 실제 사례를 원하십니까? 맞아요:

미국 코드
메일침프
영업

디자인의 일관성을 제공함으로써 스타일 가이드는 웹사이트 확장과 향후 웹 개선을 쉽게 만듭니다. 스타일이 추가 및 수정됨에 따라 이 문서는 팀에 정보를 제공하고 스타일리시한 프로젝트를 보여줄 수 있는 좋은 방법입니다.