Share
Sign In
디자인 TIP
[디자인 인사이트] 훌륭한 디자인 시스템 예시 : TOP 8
tooldi
👍
Airbnb 및 Uber와 같은 많은 회사들이 이미 그들만의 고유한 디자인 시스템을 전환하여 사용하고 있습니다.
특히 글로벌 규모로 운영되고 있는 브랜드의 경우에는, 업계 내의 끊임없는 혁신으로 경쟁사와 차별화하고 사용자 환경을 개선하는 데 있어 디자인 시스템은 필수적인 요소입니다.
반복 및 재사용 가능한 구성요소를 최대한 활용하여 워크플로우에서 디자인 시스템을 만든 브랜드들은 팀 간의 속도, 영감 및 효율성을 높일 수 있습니다.
유의할 점은 패턴 라이브러리나 코드 및 UI 요소 모음만 있다고 해서 완성된 디자인 시스템으로 취급되지 않는다는 것입니다. 디자인 기본적인 측면에서 종합적인 디자인 시스템에는 더 많은 것들이 있으니까요.
즉, 일반적인 디자인 시스템에 대해 자세히 알아보고, 추가 영감을 위한 성공과 가치를 창출하기 위해서 이미 디자인 시스템을 활용하고 있는 다른 기업들의 몇 가지 훌륭한 예시들을 확인해 보도록 하겠습니다.
디자인 시스템이란 정확히 무엇인가요?
디자인 시스템은 디자인 회사가 가질 수 있는 모든 UI 리소스 모음을 제공합니다. 여기에는 필요한 코드, 문서, 페이지 스크린숏 및 이미지 예제, 디자인 지침, 관련 도구, 문서 및 기사, 스타일 가이드, 재사용 가능한 구성 요소 및 철학, 기타 전반적인 웹 디자인 워크플로우에 유용한 모든 디지털 자산들이 포함됩니다.
그런 다음 이러한 디자인 시스템은 온라인 웹 사이트로 호스팅 되며 브랜드에서 결정하는 대로 공개 및 내부 요소가 될 수 있습니다.
디자인 시스템은 적용 가능한 지침들과 예제, 스타일 가이드 및 코딩 지침, 그리고 UI 키트의 일부로서 동시에, 귀중한 문서 역할을 하는 방대한 데이터 라이브러리라고 생각할 수 있습니다.
기업들은 왜 디자인 시스템을 만들고 있나요?
개발자, 디자이너, 엔지니어, 제품 관리자 등 회사 제품 팀의 모든 구성원이 함께 모여 로고, 색상, 언어 및 코드에 이르기까지 디지털 프로덕트 자산의 기존 부분을 논의하고 매핑합니다. 그런 다음, 아 궁극적인 마스터플랜을 작성하기 위해 협업하고 사물을 정확히 어떻게 제시되어야 하는지(디자인 및 코딩) 설명합니다.
이러한 방식을 채택하면 모든 팀들은 시각적 참조, 도구, 기사, 패턴 및 데이터 라이브러리에 대한 하나의 완전한 출처 소스(*디자인 시스템이 업계에서 단일 정보 소스라고 불리는 이유가 있음.)를 갖게 됩니다. 이를 통해 작업이 일관화되고 균일하게 유지되기 때문에 모든 단일 구성 요소를 동일한 페이지에 표시할 수 있습니다. 이는 디자인 시스템의 궁극적인 목표입니다.
디자인 시스템의 사용 방법 및 구현 요소입니다.
디자인 시스템을 구현하고 개발하는 경우, 개발자는 재사용 가능한 구성요소 및/또는 라이브러리에서 복사하는 데 필요한 모든 것들이 있을 때, 반복적인 코드 조각에 시간을 낭비할 필요가 없어집니다.
마찬가지로, 디자이너는 디자인 프로세스의 속도를 높이기 위해 색상, 로고, 머리글, 바닥글 및 기타 필수 기호와 같은 표준 디자인 및 UI 요소 라이브러리가 존재하기에, 처음부터 다시 새로 랜딩 페이지를 디자인할 필요가 없습니다.
또한 마케터들은 시스템에 필요한 모든 것이 있을 때, 뉴스레터의 어조와 템플릿을 반복적으로 작업할 필요가 없어집니다.
디자인 시스템에서 무엇을 배울 수 있을까요?
대부분의 디자인 시스템은 일반적인 설정 패턴(Setup Patterns)을 따르고 있습니다.
디자인 시스템은 종종 주요 카테고리와 함께 상위의 전개 기능을 제공하는 경우가 있습니다. 디자인, 코드, 언어, 구성 요소 같은 것들입니다.
이러한 각 주요 카테고리에는 아토믹 디자인 구조(*Atomic Design Structure)를 최대한 활용하여 보다 자세히 의논할 수 있는 하위 카테고리들이 나타납니다. 예를 들어 볼까요, 타이포그래피, 색상, 양식, 배너 등이 하위 카테고리가 될 수 있겠네요.
이 직관적인 전개 구조에 따르면 디자인 측면에서 모범 사례에 대한 귀중한 정보를 얻을 수 있을 것 같습니다.
Subscribe to 'tooldi-community'
Welcome to 'tooldi-community'!
By subscribing to my site, you'll be the first to receive notifications and emails about the latest updates, including new posts.
Join SlashPage and subscribe to 'tooldi-community'!
Subscribe
👍
Other posts in '디자인 TIP'See all
Esperanza_툴디
디자인에 생기를 더하는 컬러 조합 방법(feat.색상환)
안녕하세요! 우주 최고의 디자인 플랫폼, 툴디(tooldi) 입니다! ​ ​ 지난 두 번의 포스팅 에서는 [설득의 기술 : 컬러를 통한 효과적인 메시지 전달법]에 대해 이야기했었는데요, ​ ​ ▼ 지난 포스팅 [시각적 설득의 기술 : 컬러를 통한 효과적인 메시지 전달법] 보기 ▼ ​ ▼ 지난 포스팅 [시각적 설득의 기술 : 컬러를 통한 효과적인 메시지 전달법2] 보기 ▼ ​ ​ 오늘 포스팅에서는 컬러를 더욱 효과적으로 활용할 수 있도록 몇 가지 대표적인 컬러 조합과 그 활용법에 대해 알아보려고 합니다. ​ ​
Esperanza_툴디
시각적 설득의 기술 : 컬러를 통한 효과적인 메시지 전달법2
안녕하세요! 우주 최고의 디자인 플랫폼, 툴디(tooldi) 입니다! ​ ​​​ 다시 돌아온 디자인 꿀팁 시간! 지난 시간에는 빨간색, 파란색, 노란색 등 기본적으로 많이 사용되는 컬러들의 의미와 활용법에 대해 알아보았는데요, 이번 포스팅에서는 조금 더 다양한 컬러들에 대해 이야기해 보려고 합니다. 시각적 설득의 기술 : 컬러를 통한 효과적인 메시지 전달법2 ​ ​1) 핑크색 (Pink)
Esperanza_툴디
시각적 설득의 기술 : 컬러를 통한 효과적인 메시지 전달법
안녕하세요! 우주 최고의 디자인 플랫폼, 툴디(tooldi) 입니다! ​ ​ 오늘 알려드릴 디자인 꿀팁은 바로 [시각적 설득의 기술 : 컬러를 통한 효과적인 메시지 전달법] 입니다! ​ ​ 컬러는 단순히 예쁘게 보이는 것 이상의 의미를 가지고 있어요! 우리가 어떤 제품이나 서비스를 선택할 때,
😍
1