설계 시스템에 대한 포괄적인 가이드

디자인 팀과 개발 팀 사이에 큰 단절이 있다는 것은 비밀이 아니며, 종종 "핸드오프"라고 하며, 이는 앱 프로토타입이 개발 팀으로 전송되는 순간입니다. 스포츠에서 핸드오프는 종종 부드럽고 자연스러운 움직임을 암시하지만(쿼터백이 러닝백의 손에 축구공을 쥐고 있는 것을 떠올림) 앱 구축의 핸드오프는 결코 매끄럽지 않습니다.

이는 설계와 개발이 소프트웨어 제품 팀 내의 핵심 기능 분야를 대표하고 각 분야가 자체적으로 빠르게 발전해 왔기 때문입니다. 또한 설계자 또는 개발자만을 대상으로 하는 성숙한 툴링 솔루션이 있지만 디자인-코드 스토리를 대상으로 하는 솔루션은 드뭅니다. 곧 논의할 것처럼 변경되고 있습니다.

Gartner는 최근 보고서 ¹"Build Better Products Faster with Design Systems"에서 오늘날 기업이 소프트웨어를 구축하는 방법에 대한 분석에서 3가지 주요 결과를 강조합니다.

• 처음부터 디자인된 디지털 제품은 종종 사용성이 떨어지고, 시각적 및 행동적 불일치가 발생하며, 디자인 주기가 길어집니다.
• 많은 제품 팀이 독창적인 맞춤형 디자인 시스템을 만들어 설계, 구축 및 유지 관리에 너무 많은 시간과 노력이 필요한 불필요한 복잡성을 초래합니다.
• 디자인 시스템은 빠르게 노후화되어 제품 사용성과 품질을 높이고 시장 출시 시간을 단축할 수 있는 능력을 약화시킵니다.

비즈니스 성공의 관점에서 기업은 애플리케이션에서 매력적인 UX를 제공해야 할 필요성을 인식하고 있습니다. 그러나 매력적인 UX를 제공하려면 디자인과 개발 간의 높은 수준의 협업이 필요합니다. 그리고 이러한 수준의 협업은 다음과 같은 이유로 수년 동안 어려웠습니다.

• 개발자는 디자이너가 만들거나 구상한 것을 정확하게 복제합니다.
• 디자이너는 디자인 의도를 전달하고 시각적 사양을 코드로 변환합니다.
• 개발자는 모형에 표시되었지만 전달 중에 전달되지 않은 기능이나 이미지에 대한 파일을 찾을 수도 있습니다.

 디자인 시스템은 디자이너와 개발자 사이의 전통적인 사일로를 연결하는 데 도움이 될 수 있습니다.

최근 몇 년 동안 디자인 시스템은 디자인과 개발 간의 협업을 개선하기 위한 솔루션으로 부상했습니다. 디자인 시스템 접근 방식은 Salesforce, IBM, Atlassian 및 기타 여러 조직에서 채택했으며 그 매력을 나타내는 지표 역할을 합니다.

Design System 이란 무엇입니까?

디자인 시스템은 간단히 말해서 UX 패턴과 브랜드 스타일 가이드의 의도적인 목록을 나타내며, 이는 소프트웨어 애플리케이션 구축을 위해 재사용하거나 컨텍스트화할 수 있는 일치하는 소프트웨어 구성 요소로 실현됩니다. 또한 디자인 시스템을 확장하여 콘텐츠, 페이지 템플릿 및 사용자 흐름을 작성하기 위한 음성 및 톤 지침을 포함할 수 있습니다. 각 조직의 특정 응용 프로그램 도메인 및 사용 컨텍스트에 맞게 직접 제작되었습니다. 무엇보다도, 애플리케이션 구축 시 제품 팀을 위한 단일 정보 소스 역할을 하며 설계와 개발 간의 협업 계약을 나타냅니다.

Design System 사용의 이점

디자인 시스템이 구축되면 디자이너와 개발자는 디자인 구현에 대한 낮은 수준의 검사 없이 자체 도구에서 독립적으로 작업할 수 있습니다. 대신 결과와 관련된 가치가 높은 상호 작용에 집중할 수 있습니다.  합의된 설계 시스템에는 다음과 같은 이점이 있습니다.

• 수락되고 승인된 사전 정의된 UI 컨트롤 및 UI 패턴을 사용하여 프로토타입을 생성/구성하는 시간을 단축했습니다.
• 상호 작용 모델 측면에서 애플리케이션과 팀 간의 일관성뿐만 아니라 WCAG, ARIA 및 Section 508 규정 준수와 같은 접근성 요구 사항도 제공합니다.
• 디자인 시스템 및 UI 컨트롤이 장기간에 걸쳐 여러 애플리케이션과 팀에서 대규모로 사용됨에 따라 결함 및 테스트가 줄어듭니다.
• 디자인 시스템의 핵심 구성 요소인 브랜드 일관성은 디지털 제품 팀/디자인 우수 센터(Design Center of Excellence)에서 수용하고 승인합니다.

고객의 관점에서 동일한 조직에서 제공하는 애플리케이션 간에 의미 있는 일관성을 통해 사용자는 과거 앱과의 상호 작용에서 배운 내용을 다시 사용할 수 있습니다.

GitHub의 Diana Mounter는 YouTube 토크에서 다음과 같이 말합니다.

• 디자인 시스템은 혼돈 속에 질서를 가져다줍니다. 모든 사람이 같은 페이지에 유지되므로 전체 제품이 전체적으로 일관되고 세련되게 유지됩니다.
• 디자인 시스템은 친숙하고 검증된 패턴을 반복적으로 사용하여 사용자 경험을 개선합니다. 처음부터 무엇이든 디자인하면 오류의 여지가 있으므로 이미 작동하는 것을 사용하십시오.
• 디자인 시스템은 워크플로우 효율성을 향상시킵니다. 제품 팀은 새로운 기능의 구성 요소가 어떻게 보여야 하고 어떻게 구현해야 하는지 정확히 알고 있습니다."

설계와 개발 사이의 공유 어휘

일관성이 큰 장점이기는 하지만, 구성 요소와 패턴에 대한 이름을 지정할 때 상호 합의하는 것과 같은 간단한 작업도 큰 도움이 될 수 있습니다. 이는 디자인 시스템의 현재 사용자와 향후 구성원을 온보딩하는 데에도 유용합니다. 명명 규칙을 명시하고 공유하면 개발자와 디자이너 모두 해당 도구 환경에서 구성 요소를 더 쉽게 찾을 수 있습니다.

시간이 지남에 따라 UX 패턴의 이름이 대화에 나타나기 시작하여 사용자 요구 사항을 대체하는 역할을 합니다. 예를 들어, 누군가 콤보 상자 구성 요소를 사용해야 한다고 언급하면 디자이너와 개발자 모두에게 어떤 유형의 동작을 지원하는지, 그리고 사용자의 작업 경험에 어떻게 도움이 될 수 있는지 명확하게 알 수 있습니다. 디자인 시스템은 구성 요소를 패턴으로 문서화하기 때문에 일반적으로 특정 구성 요소를 사용해야 하는 시기와 올바른 방법으로 사용하는 방법을 예제와 함께 설명합니다. 그런 의미에서 디자인 시스템은 접근하기 쉬운 UX 가이드에 대한 요구를 충족시켜 디자인 관행을 전파할 수 있습니다.

Accelerate Design Process and Development

납품 속도는 설계 시스템에서 구성 요소를 재사용할 수 있는 명백한 이점입니다. 디자인 관점에서 효율성은 이미 디자인 시스템 UI 키트의 일부이기 때문에 새로운 구성 요소나 패턴을 만들 필요가 없다는 데서 비롯됩니다. 새롭고 복잡한 패턴을 만들어야 하는 상황에서도 디자이너는 디자인 시스템 지침에 의존하고 이미 사용 가능한 버튼, 레이블 또는 메뉴 드롭다운을 사용하여 무언가를 만들 수 있습니다.

개발자의 관점에서 볼 때 이 구성 요소 또는 패턴에 대한 코드를 생성할 수 있으면 디자인 사양과 코드 간의 불일치를 방지하는 데 도움이 됩니다. 학습 속도는 디자인 시스템 접근 방식을 사용하는 것의 분명하지 않은 이점입니다. 이제 디자이너는 픽셀 제작에서 자유로워졌으므로 진정한 디자인 프로세스로 돌아가 사용자 여정 또는 흐름을 설계하고 사용자와 함께 평가하는 데 집중할 수 있습니다. 디자인 결과물을 만드는 데 사용되는 접근 방식은 사용성 테스트를 위한 중간 프로토타입을 제작하고 이해 관계자로부터 피드백을 받는 데에도 사용할 수 있습니다.

디자인 시스템은 단순히 UX 모범 사례와 UI 키트의 집합이 아니라는 점에 유의해야 합니다. 또한 개발 측에서 일치하는 UI 구성 요소가 필요합니다. 디자인 시스템 운동은 전통적으로 대규모 조직 내의 디자인 팀에 의해 옹호되어 왔지만, 진정한 성공을 거두기 위해서는 개발 팀도 디자인 시스템의 공동 소유자/기여자가 되어야 합니다.

이것은 디자인 시스템이 일반적으로 실패하는 곳입니다 – 그들은 디지털 제품 팀의 디자인 측면에 의해 옹호됩니다. 개발 측은 포함되지 않습니다. 잘못된 커뮤니케이션과 잘못 관리된 핸드오프로 인한 시간 손실은 이러한 경우에도 여전히 존재합니다.

왜 Design System를 사용합니까?

디자인 시스템은 디자이너가 자신의 작업을 체계화하고 구성 요소를 생각하도록 강요합니다. 프론트엔드 개발자들은 이미 이 작업을 수행하고 있습니다. 그들은 이것을 해 오고 있습니다. 디자인 팀이 디자인 시스템을 만들 때, 갑자기 그들은 개발자 팀원들처럼 생각하고 같은 언어를 사용하기 시작합니다.

디자인 시스템이 단순히 작업에 또 다른 레이어를 추가하는 것처럼 느껴질 수 있지만 디자인 시스템은 효율성을 높이는 데 도움이 될 수 있습니다. 이것이 어떻게 적용되는지 더 잘 이해하려면 다음 질문을 고려하세요.

• 규모– 100개 이상의 스크린이 있는 제품(또는 제품)을 디자인하고 있습니까? 귀사의 제품이 크게 성장할 것입니까?
• 일관성– 제품이 일관된 브랜딩, 모양과 느낌, 경험을 갖기를 원하십니까? 제품에 현재 20가지 버튼 스타일이 있습니까?
• 효율성– 비주얼 디자이너, 사용자 경험 디자이너 및 프론트엔드 개발자가 더 빠르게 작업하고 시간을 절약하기를 원하십니까?
• 팀워크– 디자이너 간에 많은 핸드오프가 있거나 여러 디자이너가 한 번에 동일한 프로젝트에서 작업하는 프로젝트가 있습니까?

위의 질문 중 하나라도 "예"라고 답했다면 디자인 시스템이 귀하에게 적합할 것입니다. 대규모로 작업하고 일관성과 효율성을 높이는 것은 디자인 시스템을 만들고 사용하는 데 있어 가장 큰 이점입니다.

Design System의 해부학

디자인 시스템은 원자, 분자 및 유기체로 가장 잘 설명할 수 있는 확장 가능한 요소를 구축하기 위한 접근 방식을 사용합니다. 일반적으로 Brad Frost가 만든 원자 설계 방법론 이라고 합니다. 이는 디자인 시스템의 구조를 설명하는 데 널리 사용되는 접근 방식이 되었습니다.

원자-분자-유기체 개념을 예시로 설명합니다.

원자, 분자 및 유기체의 비유로 돌아가서 가장 작은 구성 요소(예: 버튼, 아바타, 레이블, 제목 등)를 디자인하는 것으로 시작합니다. 이 가장 작은 구성 요소를 원자라고 합니다.

한 단계 더 깊이 들어가면 원자는 양성자와 중성자와 같은 입자로 구성됩니다. 디자인 시스템의 경우 이는 조직의 브랜드 아이덴티티를 정의하는 기본 색상 팔레트 및 타이포그래피에 매핑될 수 있습니다.

원자에서 한 단계 위로 올라가면 원자로 구성된 분자가 있습니다. 분자는 구성 요소에 매핑될 수 있으며 메뉴 항목, 목록 항목 및 드롭다운 항목과 같은 더 복잡한 구조를 나타낼 수 있습니다.

그런 다음 레이아웃과 여러 구성 요소를 결합하여 다음 계층 단위인 UX 패턴을 얻습니다. 만약 우리가 생물학적 비교를 고수한다면, 그것은 우리를 유기체로 이끌게 됩니다. 이는 "좋은" 디자인 원칙을 따라 UX 모범 사례를 캡슐화하고 제품의 특정 요구 사항에 맞게 구축되었습니다.

설계 체계를 원자, 분자 및 유기체로 설명하는 요점은 살아있는 체계와 유사점을 그리는 것입니다. 디자인 시스템은 정적이고 끊임없이 변화해서는 안 되며, 제품의 UX 요구 사항을 반영하고 사용되는 제품 및 기술과 함께 지속적으로 발전해야 합니다. 새로운 장치 레이아웃 요구 사항으로 인해 새로운 요구 사항이 등장합니다. 새로운 제품 기능과 브랜드 아이덴티티의 변화는 불가피합니다. 우리는 우리의 디자인 시스템이 유연하고 이러한 변화에 적응할 수 있도록 변화할 준비가 되어 있는지 확인해야 합니다.

Design System 구축하는 방법

시작하려면 기존 디자인 시스템을 구축의 기반으로 사용할 수 있습니다. 기존 시스템을 사용하면 특히 실제 UI 컨트롤 및 구성 요소가 지원되는 경우 많은 시간을 절약할 수 있다는 이점이 있습니다. 이 경우 디자인 시스템 정의와 개발 팀에게 디자인을 전달할 때 이를 뒷받침할 컨트롤이 있습니다. 이것은 우리가 항상 이야기하는 코드 핸드오프에 대한 디자인입니다. 기존 디자인 시스템을 기반으로 시작할 때 자신의 디자인 요구 사항을 희생하지 않고 UI 키트 및 디자인 시스템 정의의 모든 측면을 회사 요구 사항에 맞게 사용자 지정하는 동시에 이 기사에서 강조한 다른 이점을 유지할 수 있습니다.

To start with the Indigo.Design System, grab the UI Kits and Sync tool from Indigo.Design, and then follow this doc –https://ko.infragistics.com/products/indigo-design/help/sync-themes-plugin – to customize to your own needs. 

기존 디자인 시스템에서 시작하든, 처음부터 시작하든, 디자인 시스템을 구축하기 위한 몇 가지 주요 단계는 다음과 같습니다.

시각적 감사 수행

디자인 시스템을 구축하는 첫 번째 단계는 앱, 웹 사이트 또는 기타 디지털 제품의 디자인 등 현재 디자인에 대한 시각적 감사를 수행하는 것입니다. 사용 중인 CSS와 요소의 시각적 품질을 조사하면 이 프로세스가 얼마나 많은 작업을 수행할 수 있는지 측정하는 데 도움이 될 수 있습니다.

Create a Visual Design Language

시각 디자인 언어는 디자인 시스템의 핵심입니다. 디지털 제품을 구성하는 데 사용할 식별 가능한 구성 요소로 구성됩니다. 시각 디자인 언어는 네 가지 주요 범주로 구성되며, 이러한 디자인 요소가 화면의 모든 구성 요소에서 수행하는 역할을 고려해야 합니다.

• 색상– 디자인 시스템의 일반적인 색상에는 브랜드를 나타내는 1-3개의 원색이 포함됩니다. 흰색과 혼합된 색상인 다양한 색조와 검은색과 혼합된 색상인 음영을 포함하여 디자이너에게 몇 가지 옵션을 더 제공할 수 있습니다.
• 타이포그래피– 대부분의 디자인 시스템에는 제목과 본문 모두에 대한 1개의 글꼴과 코드용 고정 폭 글꼴의 2가지 글꼴만 포함됩니다. 사용자에게 과부하가 걸리거나 혼란스러워하지 않도록 단순하게 유지하십시오. 글꼴의 수를 낮게 유지하십시오. 이는 타이포그래피 디자인의 모범 사례일 뿐만 아니라 웹 글꼴의 과도한 사용으로 인한 성능 문제를 방지합니다.
• 크기 및 간격– 간격 및 크기 조정에 사용하는 시스템은 리듬과 균형이 있을 때 가장 잘 보입니다. 4 기반 척도는 iOS 및 Android 표준, ICO 크기 형식 및 표준 브라우저 글꼴 크기에서 사용되기 때문에 권장 척도로 인기를 얻고 있습니다.
• 이미지– 시각 디자인 언어로 이미지를 성공적으로 구현하기 위한 핵심은 계획을 세우고 이를 고수하는 것입니다. 일러스트레이션 및 아이콘에 대한 지침을 설정하고 상황에 가장 적합한 이미지 형식을 사용합니다.

UI/패턴 라이브러리 만들기

이미 수행한 시각적 감사(디자인 요소의 시각적 품질을 살펴봄)와 달리 프로세스의 이 단계에서는 UI의 실제 구성 요소를 살펴봅니다. 현재 제작 중인 UI의 모든 부분과 조각을 수집합니다. 이는 모든 버튼, 형태, 모달 및 이미지를 의미합니다. 필요하지 않은 항목을 병합하고 제거합니다.

각 구성 요소를 문서화하고 사용하십시오.

이 단계는 중요합니다. 각 구성 요소가 무엇이며 언제 사용해야 하는지 문서화해야 합니다. 문서화 및 표준은 패턴 라이브러리와 실제 설계 시스템을 구분하는 요소입니다.

Design System 제품처럼 취급하십시오.

다른 제품과 마찬가지로 디자인 시스템에는 제품 관리자(일반적으로 조직의 디자인 리더 또는 UX 리더)가 필요하며 백로그, 로드맵이 필요하며 유지 관리해야 합니다.  제품처럼 취급되지 않는 디자인 시스템은 결국 기업의 제품처럼 무시되는 결과를 낳게 됩니다. 그것들은 진부해지고, 구식이 될 것이며, 최신 모범 사례와 패턴을 포함하지 않을 것이고, 기업 표준을 따라가지 못할 것입니다. 디자인 시스템을 다른 제품과 마찬가지로 취급하는 것이 중요합니다 – 이는 사용자에게 미래가 있고 지원을 받을 수 있는 곳이 있다는 확신을 줄 것입니다.

Design System 예시

커머셜 디자인 시스템

• Quickbooks Design System
• GEL – BBC의 글로벌 경험 언어​
• Material from Google
• Lightning from Salesforce
• Airbnb’s Visual Language
• Joystick from EA
• Fluent from Microsoft
• Plasma from WeWork
• Polaris from Shopify
• 외로운 행성
• Meetup의 스웜​
• Hubspot의 캔버스​

정부 디자인 시스템

• S. Web Design Standards
• USPTO UI Design Library
• USA Jobs Design System
• 캘리포니아 주
• Bristol City Council
• City of Philadelphia
• Australian Government

인디고 Design System

​Indigo Design System는 Ignite UI for Angular 컨트롤 에도 매핑되는 60+ UI 컴포넌트를 통해 디자인 워크플로우를 강화합니다. 각 구성 요소는 반응형 웹 개발에 최적화되어 있으며 라이브러리에 설정된 스마트 레이아웃 및 크기 조정 규칙을 통해 다양한 템플릿 기능을 제공합니다. 또한 다이내믹 경험을 디자인할 때 선택할 수 있는 라이트/다크 모드와 다양한 인터랙션 상태를 추가했습니다. 이 모든 것이 애플리케이션 설계 및 개발을 간소화하여 Sketch의 라이브러리로 만든 모든 사용자 인터페이스를 Ignite UI Angular 빌드할 수 있도록 합니다.

Sketch 라이브러리에는 관련된 모든 구성 요소 및 기호가 포함된 구성 요소 페이지가 있습니다. 아래는 이 기사에서 언급한 디자인 시스템의 모든 핵심 영역이 포함된 "디자인 측면" 형태의 디자인 시스템의 작은 부분인 Sketch의 UI 키트입니다.  이는 여러 유형의 버튼, 버튼 그룹 및 확인란, 스위치 및 라디오 그룹과 같은 양식 요소와 같은 간단한 아티팩트를 표시할 뿐만 아니라 모든 엔터프라이즈 디자인 시스템에 반드시 있어야 하는 데이터 그리드와 같은 풍부한 UI 컨트롤을 보여줍니다.

더 많은 정보를 찾으려면:

• Material Icons– Material Icon 디자인 가이드 라인에 따라 당사에서 만든 150 + 더 많은 아이콘으로 확장 된 250 + Material Icons 모음으로, 쉽게 확장 할 수 있습니다
• 색상– 기본, 보조 및 회색 색상 변형이 있는 팔레트, 특수 색상 및 다양한 유형의 색맹에 최적화된 세트를 포함하여 데이터 시각화를 위해 특별히 설계된 몇 가지 팔레트
• Typography– 일반 및 구성 요소별 텍스트 스타일의 모음입니다
• Elevation– 엄브라, 반그림자 및 주변 그림자 색상을 기반으로 Material Design에서 익숙한 24개의 그림자 세트입니다.
• 일러스트레이션– 디자인을 더욱 재미있고 완벽하게 만들 수 있는 17개의 사용자 정의 가능하고 스타일링 가능한 일러스트레이션 세트

​Indigo.Design 방문하여 디자인 시스템뿐만 아니라 프로토타이 핑, 사용자 테스트, 앱 빌드 및 코드 생성을 App Builder와 통합하는 이 완전한 디자인-코드 시스템에 대해 자세히 알아보십시오.

¹ 개Gartner 'Build Better Products Faster with Design Systems', 2021년 3월 2일, Brent Stewart, Van Baker