Web Guide디자인 시스템컴포넌트디자인 규칙
디자인 시스템 구축 기초
페이지를 추가할 때마다 버튼을 새로 그린다면 시스템이 없는 것입니다.
규칙과 부품을 정해 두면 제작 속도가 빨라지고 일관성이 유지됩니다.
01무엇을 정하는가
디자인 시스템은 거창한 것이 아닙니다. 색, 글자 크기, 간격, 버튼 같은 기본 요소의 규칙을 정하고 재사용하는 것입니다.
규모가 작은 사이트에서는 문서 몇 장이면 충분합니다.
기본 값 — 색, 글자 크기, 간격
가장 작은 단위. 모든 것의 기준이 됩니다
부품 — 버튼, 입력칸, 카드, 배지
기본 값을 조합한 재사용 단위
패턴 — 폼, 목록, 헤더
부품을 조합한 구조
템플릿 — 페이지 유형
패턴을 조합한 화면
02작게 시작한다
처음부터 완벽한 시스템을 만들려고 하면 끝나지 않습니다. 실제로 쓰이는 것부터 정리하면 됩니다.
색과 글자 크기, 버튼 세 가지만 정해도 일관성이 크게 올라갑니다.
1
색 정하기
주색, 보조색, 텍스트 색 몇 단계. 가장 먼저 할 일입니다.
2
글자 크기 단계
5~7단계. 그 외의 크기는 쓰지 않습니다.
3
간격 단위
기준 단위와 그 배수. 여백이 정돈됩니다.
4
버튼 유형
주 버튼, 보조 버튼, 텍스트 버튼. 상태별 모습도 정합니다.
5
입력 요소
입력칸, 선택, 체크박스의 기본 모습.
03문서로 남긴다
규칙이 디자이너의 머릿속에만 있으면 그 사람이 바뀔 때 사라집니다. 문서로 남겨야 합니다.
거창한 문서가 아니어도 됩니다. 색 코드와 글자 크기, 버튼 예시가 담긴 한 장이면 시작할 수 있습니다.
색 목록이름, 코드, 용도. '주색 #2323f5 — 버튼과 링크'.
글자 크기표단계별 크기와 용도, 굵기.
간격 규칙기준 단위와 사용 예.
부품 예시버튼, 입력칸 등의 모습과 사용 규칙.
사용 금지 사항하지 말아야 할 것도 적어 두면 유용합니다.
04언제 필요한가
페이지가 열 개인 사이트에는 과할 수 있습니다. 하지만 페이지가 계속 늘어나거나 여러 사람이 관여한다면 필요합니다.
특히 제작사가 바뀔 가능성이 있다면 시스템 문서가 큰 도움이 됩니다.
필요한 경우
페이지가 계속 늘어남 · 여러 사람이 작업 · 부서별로 콘텐츠 관리 · 제작사가 바뀔 수 있음 · 장기 운영
간단히 해도 되는 경우
페이지 열 개 내외 · 한 사람이 관리 · 변경이 거의 없음 · 색과 글자 크기만 정해도 충분
CHECK POINT
□ 색과 용도가 목록으로 정리되어 있는가
□ 글자 크기 단계가 정해져 있는가
□ 간격의 기준 단위가 있는가
□ 버튼 유형과 상태가 정의되어 있는가
□ 규칙이 문서로 남아 있는가
□ 사용 금지 사항도 적혀 있는가
□ 새 페이지를 만들 때 이 문서를 참고하는가
#디자인 시스템#컴포넌트#디자인 규칙#일관성#디자인 토큰#문서화#유지보수#홈페이지 디자인#웹비스타#홈페이지 제작