디자인 시스템은 제품이나 서비스를 함께 만들 때 반복해서 쓰는 요소, 사용 규칙, 구현과 관리 방식을 묶은 체계다. 버튼 그림을 모은 파일뿐 아니라 언제 그 버튼을 쓰는지, 상태가 바뀌면 어떻게 동작하는지도 포함한다.
- 스타일: 색, 글자 크기, 간격 같은 공통 선택이다. 타이포그래피와 그리드의 규칙이 여러 화면에서 유지되도록 한다.
- 컴포넌트: 버튼, 입력란, 알림처럼 다시 사용할 수 있는 단위다. ‘기본’, ‘오류’, ‘사용 불가’처럼 상태에 따라 모양과 동작이 달라질 수 있다.
- 패턴: 여러 요소를 묶어 사용자의 일을 처리하는 방법이다. 주소 입력이나 오류 안내는 입력란 하나보다 넓은 흐름을 다룬다. GOV.UK 디자인 시스템도 스타일, 컴포넌트, 패턴을 구분해 제공한다. (GOV.UK 디자인 시스템)
- 스타일 가이드와의 차이: 스타일 가이드는 표현 규칙을 설명하고, 컴포넌트 라이브러리는 재사용할 부품을 제공한다. 디자인 시스템은 둘을 연결하고 수정, 검토, 배포의 방식도 다룬다. 어느 하나의 파일이 시스템 전체를 대신하지는 않는다.
- 작은 작업에서의 범위: 예컨대 전시 웹사이트라면 제목, 작품 정보, 날짜, 예약 버튼처럼 반복되는 것부터 정할 수 있다. 아직 없는 화면을 위해 부품 수백 개를 만드는 일은 별도의 일이 된다.
- 실제 화면과 맞추기: 피그마의 컴포넌트를 고쳐도 운영 중인 웹사이트가 저절로 바뀌는 것은 아니다. 구현 코드, 접근성, 실제 문장 길이와 좁은 화면을 함께 확인한다. 디자인 시스템의 변경 기록에는 무엇을 바꾸었는지와 적용할 곳을 남긴다.