핵심 정리
디자인 시스템은 큰 디자인을 관리하기 위한 큰 기준이고 (e.g 구글의 머티리얼 디자인, IBM의 카본 디자인 시스템처럼) 스타일 가이드는 디자인 시스템의 하나의 요소이다. (e.g 콘텐츠 또는 비주얼 디자인 스타일 가이드와 같은)
내용 정리
디자인시스템 | 스타일가이드 | |
정의 | 재사용가능한 컴포넌트와 패턴을 사용하여 규모에 맞게 디자인을 관리하기 위한 기준의 집합체(set) | 구체적인 가이드라인, 비주얼 레퍼런스, 그리고 디자인 원칙을 담은 문서 |
범위 | 광범위하고 / 전체적인
UI패턴과 코드 구현을 위한 비주얼스타일에 필요한 개발과 디자인의 모든 면을 다룸. | 좁고 / 집중된
각각의 스타일가이드는 일관된 스타일을 보장하기 위해서 구체적인 디자인(e.g 비주얼디자인, 컨텐츠, 브랜딩)에 대해 집중함. |
디자인시스템
디자인시스템은 디자인패턴과 컴포넌트, 스타일가이드까지도 포함할 수 있다.
•
디자인시스템의 목표 :
1.
일관된 디자인을 유지하고 / 디자인요소와 패턴의 중복사용을 줄이는 것
IF, 디자인시스템 없다면? →
큰 조직은 자주 같은 디자인과 코드를 만들게 되고, → 시간낭비와 복잡한 코드 등 내부적인 불협화음을 만들게 됨
2.
디자인과 개발팀 등 다양한 유관 부서에 일관된 디자인 언어를 공유하는 것
e.g, 디자인팀→
하나의 회사에서 두 개의 디자인팀이 서로 다른 부서로 일하는 경우에, 각 팀이 사전에 만들어진 요소와 컴포넌트를 사용해서 일을 할 수 있고, 그들이 직접적으로 함께 일하지 않아도, 공통된 디자인 패천을 사용하기 때문에 일관성있는 아웃풋을 보장할 수 있음
e.g, 개발팀→
개발팀또한 매우 효율적으로 일할 수 있게 됨
개발자는 처음부터 각 요소에 대한 코드를 작성하는 데 시간을 소비할 필요가 없음.
사전에 작업된 디자인시스템에서 코드를 복사 붙여넣기 하면 되기 때문에.
리포지토리: Housing a Design System
구글 머테리얼 디자인 리포지토리이자 웹사이트는 모든 디자인시스템 요소를 포함하고 있다.
•
디자인시스템 리포지토리에 주로 포함하는 것
1.
스타일가이드: 구체적인 스타일 니즈, 브랜딩, 콘텐츠, 비주얼디자인에 관련된 스타일 가이드 문서
2.
컴포넌트 라이브러리: 버튼과 같은 재사용가능한 각각의 UI요소들. 그리고 해당 요소들에 대한 디자인 디테일 - 정의할 수 있는 속성(e.g 크기 등) / 다양한 상태(활성화, 마우스 오버, 포커스, 비활성화) / 개발 코등 등등
3.
패턴 라이브러리: 구체적인 재사용되는 패턴 - 타이틀, 브레드크럼, 검색, primary-secondary 버튼이 어떻게 만들어지는지
4.
추가 리소스: 디자인 파일 - 로고, 타입페이스, 폰트, 아이콘이 담긴 파일
↑ 머테리얼디자인의 사용가능한 스타일과 컴포넌트를 포함한 다운로드 가능한 피그마 파일. 디자이너는 디자인시스템의 진짜 요소를 활용하여 목업과 Flow를 만들 수 있다.
디자인시스템 유지관리하기
•
디자인시스템은 끊임없는 유지와 관리가 필요함.
: 주로 큰 규모의 회사는 별도의 팀이 존재하고 / 작은 규모에서는 팀리더가 관리함.
스타일가이드
: 특정한 실행 가이드라인, 비주얼레퍼런스, 그리고 다른 디자인과 인터페이스를 만들기 위한 디자인 원칙이 담긴 문서
스타일가이드는 특정한 디자인 가이드를 제공함. 각각의 가이드는 하나의 엄격한 스타일 니즈에 초점을 맞추고 있음 : 컨텐츠, 브랜드, 또는 프론트엔드/비주얼 디자인
특정한 보이스 톤으로 콘텐츠 유지를 보장하기 위한 콘텐츠 스타일가이드
1.
콘텐츠 스타일 가이드
해당 가이드는 콘텐츠 기준을 포함함. 구체적인 라이팅 스타일과 회사의 편집과 출판 프로세스에 대한 정보를 포함.
•
포함되는 내용 →
◦
보이스 톤: 어떻게 콘텐츠가 표현되어야 하는지
◦
문법과 스펠링: 약어, 대문자 사용, 약어, 숫자, 날짜, 구두점 등 문법 및 철자 변형에 대한 지침
◦
서식 스타일: 볼드체, 부제목, 글머리 기호와 같은 서식 지정 기술을 언제 사용해야 하는지에 대한 규칙
2.
브랜드 스타일 가이드
브랜드와 관련된 규칙과 디자인을 정의하는데 필요한 기본적인 요소들이 담김.
•
포함되는 내용 →
◦
컬러 파레트: Primary / secondary palettes → 사용할 수 있는 컬러 조합
◦
타이포그래피: 폰트 패밀리 또는 구체적인 서체→ 추천하는 HTML요소(?)
◦
로고: 승인되는 로고 베리에이션 → 특정한 로고,워드마크 또는 심볼을 사용할 때 → 추가적인 로고 사이즈, 여백, 컬러에 대한 가이드
◦
이미지: 사진, 일러스트, 비디오 스타일 가이드
3.
프론트엔드(또는 비주얼)스타일 가이드
비주얼, 인터랙션 디자인 기준과 같은 스타일가이드에는 각 요소의 사용방법에 대한 지침, 개발자가 복사-붙여넣을 수 있는 코드 조각이 담겨 있음.
ㄴ 패턴/컴포넌트 라이브러리랑 다른 점 →
: UX실무자와 개발자가 특정 구현 세부사항보단, 광범위한 디자인 아이디어를 정의하는 데 사용됨.
프런트 엔드 스타일 가이드는 일반적으로 브랜드 스타일 가이드와 일부 중복됨
•
포함되는 내용 →
◦
레이아웃, 그리드 시스템
◦
제품 컬러 파레트
◦
타입 스타일
◦
일반 UI 컴포넌트
스타일가이드 유지관리하기
디자인 시스템과 마찬가지로 스타일 가이드에도 스타일 가이드를 생성, 감독, 유지 관리할 팀이 필요함.
•
브랜드 스타일 가이드:
•
콘텐츠 스타일 가이드:
•
프론트엔드 스타일 가이드: 일반적으로 개발 또는 엔지니어링 팀의 도움을 받아 UX 팀에서 만들고 유지 관리
결론
디자인시스템은,컴포넌트, 패턴, 스타일, 가이드라인 등 다양한 부분으로 구성됨
•
활용시 이점 →
◦
일관되고 빠른 작업 가능
◦
중복 작업 줄이기 가능
스타일가이드는, 훨씬 더 집중적이고 사용 가이드를 제공하며 디자인 시스템을 구성하는 하나의 부분임
•
활용시 이점 →
◦
콘텐츠 경험 상승
◦
일관된 비주얼 디자인
나의 생각/관점
머릿속으로는 알았지만, 누군가에게 설명할 만큼에 이해도는 없었던 디자인 시스템과 스타일 가이드에 대해 정리할 수 있는 기회가 된 아티클이었다.
중요했던 점은 둘의 구분보단, “디자인 시스템과 가이드가 필요한 이유와 유지관리하는 다음 액션”이라고 생각한다.
•
필요한 이유는 → 일관성과 효율적인 팀리소스사용 및 중복된 작업을 줄이기 위해서
•
유지관리를 해야 하는 이유는 → 팀이 지속적으로 이를 사용하고 / 노후화되지 않게 하기 위해서
이전에는 이를 앞장서서 중요성을 갖고 설득해 준 다른 팀원들 덕분에 비용적 이점이 당장 없더라도, 팀 내에서 디자인 시스템과 디자인 가이드 작업을 진행할 수 있었는데 / 다음에 또 다른 공동체에서 만들어야 하는 경우, 앞서 공부한 내용으로 구성원들을 설득하고 일이 진행될 수 있도록 앞장서(?) 봐야겠다.
용어•
리포지토리 : repository
버전 관리 시스템에서 저장소 또는 리포지터리는 파일이나 디렉터리 구조의 집합을 위해 메타데이터를 저장하는 자료 구조
(출처 : 위키백과)
단어단어 | 뜻 | 예문 |
holistic | 총체적인 | |
from scratch | 처음부터 | Anything you put out into the world without user research is simply guesswork |
Housing | 수용하기 | There’s been a false belief that all user research has to be a fully-fledged. |
specific | 특정한 |