[PART1] 웹/디자인 - TERMS 05
[ TERMS 05 ] 디자인 시스템
1. 디자인 시스템의 정의
웹이나 앱과 같은 서비스 디자인에 적용되는 디자인 원칙, 규격을 의미.
[ e.g. 일괄적인 디자인을 위해 UI 가이드라인, UX 가이드라인, 컴포넌트들을 모아 놓은것]
2. 디자인 시스템은 어디서 접하게 될까?
디자인 시스템은 우리가 사용하는 대부분의 서비스에서 접할 수 있다. 네이버의 초록색, 카카오의 노란색과 같은 색상 또는 디자인이 네이버 지도, 카카오 맵과 같은 다른 서비스들에서도 일관성있게 확인 가능하다. => 각각의 서비스가 디자인 시스템을 이용하여 제작되었기 때문
3. 디자인 시스템 알아보기
> 구성 요소
디자인 시스템은 색상, 타이포그래피, 스타일, 일관된 UI,UX요소 등을 포함한다. 기업은 추구하는 목표나 이미지등을 디자인을 통ㅊ해 나타냄으로써 소비자에게 강력한 인상을 남긴다.
> 만드는 방법
디자인을 검토 → 각각의 고유한 UI 요소를 분류 → 일관적이지 않은 디자인을 발견 및 수정(UI요소 변경, 제거, 디자인 시스템에 새로운 UI요소 추가)
> 관리
회사마다 다르지만 특정팀 (디자인, 프론트엔드, 개발) 에서 관리, 디자인 시스템에는 완성이 없고 새로운 UI 및 UX 디자인이 추가됨
> 디자인 시스템을 만드는 도구
- 인비전 DSM(Invision DSM)
- 피그마(Figma)
- 액슈어(Axure)
- 스케치(Sketch)
- 어도비 XD(Adobe XD)
- 제로헤이트(ZeroHeight)
4. 디자인 시스템을 사용하는 이유
> 일관된 디자인
디자인을 처음부터 만들거나 예전 디자인을 검색할 필요 없이 일관된 디자인으로 서비스를 제작하는데 큰 도움을 준다.
> 편리한 협업
디자이너가 여러 명이어도 제품과 인터페이스가 일관성을 유지할 수 있게함
5. 좋은 디자인 시스템의 예
> 구글의 머티리얼 디자인(https://material.io/)
머티리얼은 데스크톱과 모바일, 그 외 다양한 기기들에 일관되고 세련된 디자인을 제공하고 사용자 경험에 친숙한 애니메이션을 제공
> 애플의 디자인 리소스
애플은 macOS, iOS, watchOS, tvOS 4종의 디자인 가이드가 존재. 기기마다 앱, 문서, 툴바, 사이드바 등의 디자인이 어떠헥 구성되어야 하는지 소개, 세세한 설명과 디자인의 이유, 근거까지 확인할 수 있다.
> 에어비앤비 디자인
서비스 초기 웹과 모바일 디자인에 일관성이 없어 고충을 겪던 에어비앤비는 2016년에 디자인 시스템을 도입
6. 디자인 시스템 더 알아보기
> 함께 알아 두면 좋은 용어
- UI
- UX
- HCI
- 스타일가이드