디자인 시스템

Design system

설계 시스템은 일관성 있게 구성된 상호 연결된 패턴과 공유된 관행의 집합이다.[1]디자인 시스템은 응용 프로그램이나 웹사이트와 같은 제품의 디지털 제품 설계와 개발에 도움을 준다.여기에는 패턴 라이브러리, 설계 언어, 스타일 가이드, 코드화된 구성요소, 브랜드 언어 및 문서가 포함될 수 있지만 이에 국한되지는 않는다.

관련된 여러 팀(디자이너, 개발자, 카피라이터, 프로젝트 매니저 등)이 디지털 제품을 설계하고 제작할 수 있도록 도와주는 참고 자료 역할을 한다.[2]

설계 시스템의 장점 중 일부는 다음과 같다.

  • 재사용 가능한 구성 요소 및 공유 근거를 통해 보다 신속하게 구축
  • 보다 통합적인 사용자 경험과 일관된 설계 언어를 통해 더 나은 제품.
  • 설계 및 기술 부채의 감소를 통해 유지보수 및 확장성 향상
  • 공통적인 문제 해결을 통해 제품 팀이 사용자 요구를 해결하는 [3]데 집중할 수 있도록 지원

주목할 만한 디자인 시스템으로는 라이트닝 디자인 시스템([4]Salesforce 기준), 재료 디자인(Google 기준),[5] 카본 디자인 시스템(IBM 기준),[6] 유창한 디자인 시스템(Microsoft 기준) 등이 있다.[7]

오리진스

디지털 제품 디자인에 패턴을 사용하는 것은 1960년대에 시작되었으며, 그 첫 번째 서면 기록은 1968년 NATO 소프트웨어 엔지니어링 회의의 진행이다.여기에서 크리스토퍼 알렉산더의 작업에 대한 확실한 관심이 언급되는데, 이는 당시 소프트웨어라고 불리던 더 나은 디지털 시스템의 이익을 위한 것이다.알렉산더는 약 10년 후에 "패턴 언어"라는 제목의 그의 작품을 출판했는데, 여기서 그의 공동저자들과 함께 그들은 패턴이라고 불리는 디자인 요소들의 상호연결된 시스템인 "패턴 언어"의 개념을 도입했다.

디지털 분야에 대한 관심은 1980년대 후반에 다시 급증했는데, 이 도구가 소프트웨어 개발에서[8] 사용되어 소프트웨어 디자인 패턴의 개념이 되었다.공동 편집 환경에서는 패턴이 가장 잘 유지되기 때문에, 최초의 위키의 발명으로 이어졌고, 후에 위키백과 자체의 발명으로 이어졌다.정기적인 컨퍼런스가 열렸으며, 그 이전에도 사용자 인터페이스 구축에 패턴이 사용되었다.[9]이러한 급증세는 90년대까지 계속되었으며, 제니퍼 티드웰의 연구는 10년을 마감했다.[10]과학적인 관심은 2000년대까지 계속되었다.[11]

Yahoo!의 오픈으로 UI 디자인 패턴 언어에 대한 관심이 다시 급증했다.야후 동시 도입으로 2006년[12] 디자인 패턴 라이브러리사용자 인터페이스 라이브러리(약칭 YUI 라이브러리)동시 도입은 UI 라이브러리가 제공해온 단순한 구성요소보다 더 체계적인 설계가 가능하도록 하기 위한 것이었다.

2014년 구글의 '머티리얼 디자인(Material Design)'은 이 회사에서 가장 먼저 '디자인 언어'로 불렸다(이전 버전은 '홀로 테마'로 불렸다).곧 다른 사람들이 뒤를 따랐다.

대규모 웹 프로젝트의 기술적 난제는 2010년대에 체계적인 접근법의 발명으로 이어졌는데, 가장 두드러진 것은 BEM과[13] 원자 설계였다.'아토믹 디자인[14]'에 관한 책은 2016년부터 '디자인 시스템'이라는 용어를 대중화하는데 도움을 주었다.

패턴 언어와 디자인 시스템 및 UI 키트의 차이점

패턴 언어는 버튼이 녹색이든 보라색이든 사용자 이름, 비밀번호 및 손실된 비밀번호를 로그인, 등록 및 검색하기 위한 입력 필드가 패턴인 로그인 양식 등 다양한 형태와 형태로 패턴이 존재하도록 허용한다.패턴은 정확한 성질이 다를 수 있기 때문에 정확히 패턴이라고 부르지만, 유사성은 그것들 사이의 관계(구성이라고 함)를 그대로 유지하도록 해준다.그러나 디자인 언어는 항상 특정한 색상과 타이포그래피를 포함하는 일련의 시각적 지침을 가지고 있다.대부분의 설계 시스템은 필요에 따라 (패턴을 통해) 설계 언어의 요소를 구성할 수 있도록 한다.

UI 키트는 단순히 UI 구성 요소 집합이며, 사용법에 대해 명시적인 규칙이 제공되지 않는다.

참조

  1. ^ Kholmatova, Alla (2017). Design systems: a practical guide to creating design languages for digital products. Smashing Media AG. p. 18. ISBN 978-3-945749-58-6.
  2. ^ "Everything you need to know about Design Systems". 2019-10-03.
  3. ^ Perez-Cruz, Yesenia (2019). Expressive Design Systems. Jeffrey Zeldman. p. 4. ISBN 978-1-937557-85-0.
  4. ^ "Lightning Design System".
  5. ^ "Material Design". Material Design. Retrieved 2021-04-09.
  6. ^ "Homepage – Carbon Design System".
  7. ^ "Homepage – Fluent Design System".
  8. ^ "Using Pattern Languages for Object-Oriented Programs". c2.com. Retrieved 2021-10-07.
  9. ^ wiki.c2.com http://wiki.c2.com/?HistoryOfPatterns. Retrieved 2021-10-07. {{cite web}}:누락 또는 비어 있음 title=(도움말)
  10. ^ "Common Ground". www.mit.edu. Retrieved 2021-10-07.
  11. ^ "Elisabeth G Todd - Publications". dl.acm.org. Retrieved 2021-10-07.
  12. ^ "Yahoo! Design Pattern Library". Creative Commons. 2006-02-14. Retrieved 2021-10-07.
  13. ^ "'Why BEM?' in a nutshell / DECAF Blog". 'Why BEM?' in a nutshell / DECAF Blog. Retrieved 2021-10-07.
  14. ^ Frost, Brad (2016). Atomic design. Massachusetts. ISBN 978-0-9982966-0-9. OCLC 971562254.

외부 링크