전체 목록
[디자인사이트 12월호] 훌륭한 디자인 시스템 예시 : TOP 8
2021년 9월 23일
Airbnb 및 Uber와 같은 많은 회사들이 이미 그들만의 고유한 디자인 시스템을 전환하여 사용하고 있습니다.
특히 글로벌 규모로 운영되고 있는 브랜드의 경우에는, 업계 내의 끊임없는 혁신으로 경쟁사와 차별화하고 사용자 환경을 개선하는 데 있어 디자인 시스템은 필수적인 요소입니다.
반복 및 재사용 가능한 구성요소를 최대한 활용하여 워크플로우에서 디자인 시스템을 만든 브랜드들은 팀 간의 속도, 영감 및 효율성을 높일 수 있습니다.
유의할 점은 패턴 라이브러리나 코드 및 UI 요소 모음만 있다고 해서 완성된 디자인 시스템으로 취급되지 않는다는 것입니다. 디자인 기본적인 측면에서 종합적인 디자인 시스템에는 더 많은 것들이 있으니까요.
즉, 일반적인 디자인 시스템에 대해 자세히 알아보고, 추가 영감을 위한 성공과 가치를 창출하기 위해서 이미 디자인 시스템을 활용하고 있는 다른 기업들의 몇 가지 훌륭한 예시들을 확인해 보도록 하겠습니다.
디자인 시스템이란 정확히 무엇인가요?
디자인 시스템은 디자인 회사가 가질 수 있는 모든 UI 리소스 모음을 제공합니다. 여기에는 필요한 코드, 문서, 페이지 스크린숏 및 이미지 예제, 디자인 지침, 관련 도구, 문서 및 기사, 스타일 가이드, 재사용 가능한 구성 요소 및 철학, 기타 전반적인 웹 디자인 워크플로우에 유용한 모든 디지털 자산들이 포함됩니다.
그런 다음 이러한 디자인 시스템은 온라인 웹 사이트로 호스팅 되며 브랜드에서 결정하는 대로 공개 및 내부 요소가 될 수 있습니다.
디자인 시스템은 적용 가능한 지침들과 예제, 스타일 가이드 및 코딩 지침, 그리고 UI 키트의 일부로서 동시에, 귀중한 문서 역할을 하는 방대한 데이터 라이브러리라고 생각할 수 있습니다.
기업들은 왜 디자인 시스템을 만들고 있나요?
개발자, 디자이너, 엔지니어, 제품 관리자 등 회사 제품 팀의 모든 구성원이 함께 모여 로고, 색상, 언어 및 코드에 이르기까지 디지털 프로덕트 자산의 기존 부분을 논의하고 매핑합니다. 그런 다음, 아 궁극적인 마스터플랜을 작성하기 위해 협업하고 사물을 정확히 어떻게 제시되어야 하는지(디자인 및 코딩) 설명합니다.
이러한 방식을 채택하면 모든 팀들은 시각적 참조, 도구, 기사, 패턴 및 데이터 라이브러리에 대한 하나의 완전한 출처 소스(*디자인 시스템이 업계에서 단일 정보 소스라고 불리는 이유가 있음.)를 갖게 됩니다. 이를 통해 작업이 일관화되고 균일하게 유지되기 때문에 모든 단일 구성 요소를 동일한 페이지에 표시할 수 있습니다. 이는 디자인 시스템의 궁극적인 목표입니다.
디자인 시스템의 사용 방법 및 구현 요소입니다.
디자인 시스템을 구현하고 개발하는 경우, 개발자는 재사용 가능한 구성요소 및/또는 라이브러리에서 복사하는 데 필요한 모든 것들이 있을 때, 반복적인 코드 조각에 시간을 낭비할 필요가 없어집니다.
마찬가지로, 디자이너는 디자인 프로세스의 속도를 높이기 위해 색상, 로고, 머리글, 바닥글 및 기타 필수 기호와 같은 표준 디자인 및 UI 요소 라이브러리가 존재하기에, 처음부터 다시 새로 랜딩 페이지를 디자인할 필요가 없습니다.
또한 마케터들은 시스템에 필요한 모든 것이 있을 때, 뉴스레터의 어조와 템플릿을 반복적으로 작업할 필요가 없어집니다.
디자인 시스템에서 무엇을 배울 수 있을까요?
대부분의 디자인 시스템은 일반적인 설정 패턴(Setup Patterns)을 따르고 있습니다.
디자인 시스템은 종종 주요 카테고리와 함께 상위의 전개 기능을 제공하는 경우가 있습니다. 디자인, 코드, 언어, 구성 요소 같은 것들입니다.
이러한 각 주요 카테고리에는 아토믹 디자인 구조(*Atomic Design Structure)를 최대한 활용하여 보다 자세히 의논할 수 있는 하위 카테고리들이 나타납니다. 예를 들어 볼까요, 타이포그래피, 색상, 양식, 배너 등이 하위 카테고리가 될 수 있겠네요.
이 직관적인 전개 구조에 따르면 디자인 측면에서 모범 사례에 대한 귀중한 정보를 얻을 수 있을 것 같습니다.
최신 아티클
태그로 아티클을 검색하세요!
인기있는 아티클HOT
[폰트 추천 part.1] 타이틀로 굿! 가독성 좋은 폰트 8종 추천!
[툴디 사용법] 배경제거 기능(누끼따기)
[툴디 사용법] 배경 사용 가이드
[디자인사이트 8월호] 로고vs브랜드? 차이가 뭘까?
[디자인사이트 12월호] 훌륭한 디자인 시스템 예시 : TOP 8
){kind=link}