디자인 시스템: 그것들은 무엇이며 당신이 필요로 하는 것은 무엇입니까?

2019년 11월 21일 최종 업데이트

웹상의 획일성은 부정적인 의미를 내포합니다. 지루하거나 독창적이거나 복사된 것과 동의어인 경우가 많습니다. 그러나 사이트의 균일성은 매우 다른 이야기를 말해줍니다. 신뢰성, 사전 생각, 보살핌 및 조직 중 하나. 디자인은 매년 점점 더 중요한 역할을 합니다. 따라서 제품의 다양한 요소 디자인을 서로 조화롭게 유지하는 것은 어려운 작업이 될 수 있습니다. 이를 돕기 위해 디자인 시스템의 개념이 등장했습니다. 그러나 디자인 시스템이란 무엇입니까? 우리 회사에도 필요합니까? 스타일 가이드와 어떻게 다른가요? 이 모든 질문(및 그 이상)은 이 기사에서 답변될 것입니다.

디자인 시스템이란 무엇입니까?

디자인 시스템은 단순히 제품을 통해 다양한 요소에 걸쳐 디자인을 구현하는 확장 가능한 방법입니다. 제품 전체에서 사용할 요소의 목적, 모양, 느낌 및 사용법을 정의하는 명확한 문서, 원칙 및 규칙이 있어야 합니다.

디자인 시스템의 목적은 최종 제품을 만드는 데 도움이 되는 것입니다. 이를 염두에 두고 재사용 가능하고 모듈화된 미리 정의된 요소를 사용하여 귀하 또는 귀하의 팀이 그렇게 하기가 더 쉬워야 합니다. 이렇게 하면 여러 가지 방법으로 요소를 결합하여 목적이 다른 경우에도 일관된 느낌의 제품을 만들 수 있습니다. .

이것은 서두르고 싶은 것이 아닙니다. 디자인 시스템은 비즈니스를 위한 현재 및 미래 프로젝트를 구축하기 위한 가이드가 되어야 하므로 이를 만드는 데 시간을 할애해야 합니다.

그렇다고 해서 디자인 시스템이 일단 만들어지면 고정된다는 의미는 아닙니다. 그것은 당신이 작업하고 있는 진행 중인 프로젝트로 보아야 하며, 무엇이 효과가 있고 무엇이 그렇지 않은지 확인하고 개선해야 합니다. 즉, 며칠 안에 완료되지 않습니다. 이를 위해서는 회사로서의 목표와 고객에게 제품을 제공하기 위해 취해야 할 단계에 대한 심층 분석이 필요합니다.

디자인 시스템 VS 스타일 가이드

지금까지 디자인 시스템은 스타일 가이드의 새로운 이름일 뿐입니다. 스타일 가이드는 색상, 스타일 및 타이포그래피와 같은 많은 동일한 요소를 다룹니다. 차이점은 무엇입니까? 스타일 가이드는 서로 반대되는 것으로 간주하기보다는 디자인 시스템의 일부가 될 수 있습니다. 디자인에 들어가는 많은 요소를 간략하게 설명하지만 이를 만든 프로세스, 이를 만든 도구 및 이러한 모든 요소가 함께 작동하는 방식이 부족합니다.

디자인 시스템은 스타일 가이드가 제공하지 않는 방식으로 디자인에 컨텍스트를 제공합니다. 디자인 시스템을 사용하여 설명된 규칙, 프로세스 및 도구에 따라 제품의 빌딩 블록을 만들 수 있습니다. 이는 요소가 따르는 기본 속성 집합과 다릅니다. 스타일 가이드는 더 큰 그림의 작은 부분을 다루는 디자인 시스템의 부산물이라고 생각할 수 있습니다. 다음 예를 살펴보겠습니다.

오늘날 만들어진 레고 브릭은 1958년에 만들어진 레고 브릭과 여전히 호환됩니다. 이것은 다양한 놀라운 것을 만드는 데 사용할 수 있는 교체 가능한 부품의 가장 좋은 예 중 하나입니다. 레고 컴퍼니는 여러분이 원하는 거의 모든 것을 만들 수 있도록 1년 동안 다양한 세트를 만들었습니다. 스타일 가이드는 모든 패키지에 들어 있는 브릭 리스트에 비유할 수 있습니다. 포함된 벽돌 수, 색상, 크기 및 부품 번호를 알려줍니다. 디자인 시스템은 세트가 무엇이든 구성하기 위한 지침서와 같습니다. 그것은 당신의 창조물을 만들기 위해 어떤 조각이 어디로 가고 어떻게 함께 조각되어야 하는지를 설명합니다. 단, 한 가지를 만드는 방법을 알려주는 대신 정확히 동일한 벽돌 세트를 사용하여 여러 다른 구조물을 만드는 방법을 보여줍니다. 그것들이 어떻게 어울리고 왜 그렇게 하는지 알면 같은 조각으로 완전히 새로운 것을 만드는 데 도움이 될 수 있습니다.

관련이 있지만 스타일 가이드와 디자인 시스템은 디자인과 관련하여 매우 다른 역할을 하는 두 가지 다른 것입니다.

디자인 시스템이 필요한 이유는 무엇입니까?

이제 디자인 시스템이 무엇인지, 그리고 스타일 가이드와 차이점이 무엇인지 알았으니 정말 필요한지 궁금할 것입니다. 결국 웹 사이트를 한두 개만 구축하거나 핵심 제품을 하나만 가질 수 있습니다. 디자인 시스템을 구축하는 것은 확실히 많은 시간이 소요됩니다. 보낸 시간을 진정으로 정당화할 수 있습니까? 다음 중 하나라도 개선하고 싶다면 그것은 당신을 위한 것일 수 있습니다.

일관성

제품이나 사이트 전체에서 일관된 모양과 느낌을 유지하려면 디자인 시스템의 이점을 활용할 수 있습니다. 여러 프레임워크를 사용하여 구축하는 사이트를 상상해 보십시오. 버튼 스타일, 제목 글꼴 및 일관성이 없는 기타 여러 요소가 있을 수 있습니다. 그것은 매우 패치워크처럼 느껴지며 사이트를 고객에게 매우 낮은 품질로 느낄 수 있습니다. 디자인 시스템을 사용하면 팀에서 요소의 모양, 느낌 및 동작 방식에 대해 더 많은 지침을 얻을 수 있습니다.

능률

디자이너와 개발자로 구성된 대규모 팀이 있든 아니면 자신만 있든 상관없이 디자인 시스템을 사용하면 더 효율적으로 작업할 수 있습니다. 함께 조립할 수 있는 미리 만들어진 요소가 있으면 시간을 절약하고 작업 속도를 높이는 데 도움이 됩니다. 새 프로젝트를 구축할 계획이라면 더욱 그렇습니다. 프레임워크, 색상, 타이포그래피를 살펴보는 데 더 이상 시간을 낭비하지 마세요. 디자인 시스템에 모든 것이 있습니다.

팀의 화합

팀과 함께 작업하는 경우 모든 사람이 직접 만드는 대신 디자인 시스템이 디자인 지침 역할을 할 수 있습니다. 이를 사용하면 디자인을 구현하는 방법에 대한 질문이 줄어듭니다. 모든 사람은 제품과 관련하여 내리는 결정을 안내하는 참조할 수 있는 중앙 리소스를 가지고 있습니다. 이는 신입 사원, 원격 근무자 및 프리랜서와 같이 속도를 빠르게 따라야 하는 사람들에게 특히 유용합니다.

이러한 영역 중 하나를 늘리고 싶다면 회사를 위한 디자인 시스템을 만드는 것이 시간을 잘 보낸 것으로 간주될 수 있습니다.

누가 디자인 시스템을 사용하고 있습니까?

디자인 시스템과 그 중요성에 대한 모든 이야기와 함께 누가 그것을 사용하고 있습니까? 많은 유명 대기업은 디자인 시스템을 사용하고 대중이 볼 수 있도록 하기까지 합니다. 다음은 몇 가지입니다.

• 마이크로소프트의 Fluent
• 구글의 머티리얼 디자인
• 쇼피파이의 폴라리스
• 파이어폭스의 광자

미국 정부에도 자체 설계 시스템이 있습니다. 이것은 구성 요소 라이브러리 그 이상일 뿐만 아니라 디자인 시스템 자체를 형성한 원칙과 목표도 포함합니다.

큰 회사가 될 필요는 없습니다. 당신이 작더라도 그것을 제자리에 두는 것은 당신이 성장함에 따라 그것을 구현하고 유지하는 데 도움이 될 것입니다. 조직이 일관성, 체계화 및 효율성을 유지하기 위한 일상적인 도구입니다. 따라서 모든 프로젝트에서 바퀴를 재발명하는 데 시간을 낭비하지 말고 디자인 시스템 구축에 대해 진지하게 고려하십시오.

저자: Taj R.