훌륭한 Design System 만들기 위한 6단계

"디자인 시스템은 회사에 가장 중요한 전략적 자산 중 하나입니다. 이는 팀, 계획 및 일련의 전문 도구를 필요로 하는 살아 있는 디지털 제품입니다."

— Brent Stewart, Senior Director Analyst, Gartner

Infragistics는 디자인 시스템의 가치를 굳게 믿고 있습니다. 기업이 혁신하는 방식을 바꾸고 앱 제작 속도를 높입니다. 또한 디자인 시스템은 진화하고 있으며 미래에 결실을 맺을 수 있는 투자라는 점을 덧붙이고 싶습니다. 그러나 많은 기업들이 여전히 디자인 시스템의 이점을 간과하고 있으며, 이로 인해 불행히도 행동 및 시각적 중단, 브랜드 불일치, 낮은 사용성, 잘못된 디자인 표준 전달 및 디자인 프로세스의 기타 불일치가 발생합니다. 또 어떤 때는 디자인 시스템을 구축하는 순간과 제대로 구현하는 순간 사이 어딘가에서 발생하는 실패의 순간이 있습니다. 이는 다시 위에서 언급한 것과 동일한 좌절로 이어집니다.

이러한 문제를 해결하는 데 도움이 되도록 효과적인 디자인 시스템을 설계하는 방법과 요소에 대해 자세히 알아보고, 여기에 무엇이 포함되는지, 왜 사용해야 하는지도 보여줍니다.

디자인 시스템에 이미 익숙하다면 Design System 구축을 위한 6단계로 바로 건너뛸 수 있습니다.  그렇지 않은 경우 계속 읽으십시오.

Design System 이란 무엇입니까?

디자인 시스템은 사용자 인터페이스를 구축하는 데 사용하는 디자인 자산의 모음이라는 일반적인 정의가 있습니다. 그러나 실제로는 재사용 가능한 UI 구성 요소의 라이브러리 그 이상입니다. 디자인 시스템은 다음과 같은 기능을 갖춘 수작업으로 제작된 "디자인 권한 부여"입니다.

• 제품 팀을 위한 단일 정보 소스 역할을 합니다.
• 특정 사용 상황과 앱 도메인에 맞춰 조정하세요.
• UX 디자인 패턴 및 브랜드 스타일 지침의 인벤토리로 작업합니다.
• 설계 프로세스 속도를 높이고 일관성을 크게 향상시킵니다.

Infragistics에서 일관성이란 모든 디자인 프로그램, 개발 IDE 및 그 사이에 발생하는 모든 작업에서 스타일과 동작의 일관성을 유지하는 것을 의미합니다. 일관성을 완전히 다른 수준으로 끌어 올리는 우리의 목표는 Sketch, Adobe 및 곧 Figma UI 키트와 함께 다른 디자인 프로그램을 사용하는 디자이너뿐만 아니라 Angular, Blazor 또는 다른 것과 같은 프레임 워크를 선호하는지에 관계없이 개발자에게도 일관된 도구를 제공하는 것입니다. 이러한 방식으로 제품 개발 프로세스는 결국 앱 사용자에게 일관된 경험으로 마무리됩니다.

우리가 이야기하는 간소화된 프로세스와 일관성 유형은 자동화와 예를 들어 디자인 라이브러리에 중요한 테마를 한 번에 적용할 수 있는 플러그인을 통해 달성할 수 있습니다. 또한 디자이너-개발자 핸드오프를 처리하는 데 혁신적이고 훨씬 더 효율적인 접근 방식을 가능하게 하여 아이디어를 설명하거나 일반적으로 Sketch, Adobe XD 및 Figma 파일에 없는 애니메이션 및 마이크로 인터랙션을 정당화하는 데 드는 시간과 에너지를 절약할 수 있습니다.

Design System를 사용하는 이유 – 이점과 가치?

IBM, Atlassian, Salesforce.com, NASA 등과 같은 회사들이 설계에서 개발까지의 프로세스를 관리하기 위해 설계 시스템 패러다임을 구현한 것은 놀라운 일이 아닙니다. 설계 시스템을 구축, 사용 및 유지 관리하면 구성 요소나 패턴을 다시 작성할 필요가 없기 때문에 보다 일관된 경험을 제공할 수 있습니다. 대신, 디자이너와 개발자는 다음과 같은 통합 인벤토리의 이점을 누릴 수 있습니다.

• 재사용을 촉진하고 유연한 설계 자산을 제공하여 처음부터 설계하는 데 드는 시간과 노력을 절약할 수 있습니다.
• 일관된 타이포그래피, 색상, 음성 및 어조를 통해 명확한 표준과 브랜드 규정 준수를 관리합니다.
• UI 컨트롤이 팀과 다양한 프로젝트 전반에 걸쳐 대규모로 사용되므로 생산 결함이 줄어듭니다.

​우리는 이미 종합 가이드에서 디자인 시스템 사용의 모든 이점을 살펴보았습니다. 따라서 장점, 그것이 제공하는 가치, 해부학 및 몇 가지 디자인 시스템 예제에 대해 배우고 싶다면 여기에서 모든 것을 찾을 수 있습니다.

6단계로 좋은 Design System 만드는 방법은 무엇입니까?

좋은 디자인 시스템을 구성하는 것은 간단히 말해서 디자인을 위한 블랙박스가 아니라 다양한 통합을 허용하는 것, 디자이너가 프로세스와 DesignOps에 통합할 수 있는 유연한 형태로 제공되는 동시에 최종 사용자를 염두에 두고 설계하여 이해 관계자로부터 피드백을 수집할 수 있는 다양한 방법을 가능하게 하고 실제 사용자와 함께 테스트를 쉽게 실행할 수 있도록 합니다. 물론 좋은 디자인 시스템은 유지 관리 비용이 많이 들지 않고 진화하기 쉬우며 깔끔하고 투명한 디자인 시스템 아키텍처를 가지고 있습니다.

Step 1 – Run an inventory

타사 디자인 시스템을 구축하거나 사용하기 시작하는 경우 첫 번째 단계는 제품 또는 와이어프레임의 인벤토리를 실행하는 것입니다. 이렇게 하면 제품을 탐색하는 동안 한 화면에서 다음 화면으로 반복해서 표시되므로 프로젝트에 중요한 구성 요소의 범위를 좁히는 데 도움이 됩니다. 인벤토리를 손에 넣으면 이러한 조각이 더 작은 요소에서 어떻게 생산되는지 더 쉽게 이해할 수 있습니다 – 버튼은 특정 모양, 색상 조합, 그리고 라벨의 서체를 잊지 마십시오. 더 깊이 파고들면서 또한 이해하게 될 것은 단추만으로는 궁극적으로 필요한 것에는 미치지 못하며 메뉴 탐색 또는 사용자가 채워야 하는 양식에서 특별한 역할을 한다는 것입니다.

2단계 – 아원자 조각 정의

이것은 우리를 2단계로 이끌며, 이는 아원자 조각 또는 사물이 어떻게 보일지에 대한 기본 토대를 정의하여 일관되고 눈에 즐거운 제품을 형성할 수 있도록 합니다. Indigo.Design에 대한 우리의 경험은 이 범주에 속하고 시스템을 사용하는 디자이너가 볼 수 있어야 하는 요소는 다음과 같다고 믿게 되었습니다.

• 그림 물감
• 타이포그래피
• 그림자
• 아이콘
• 일러스트레이션과 같은 시각적 그래픽

그러나 일반적으로 패딩 크기를 결정하는 레이아웃 그리드 크기와 구성 요소 반올림을 위한 테두리 반경과 같이 똑같이 중요하지만 더 미묘하게 보이는 것들이 있을 수 있습니다. 예를 들어 4px 그리드를 사용하는 경우 구성 요소 내 패딩은 4px, 8px, 16px 또는 이들의 조합이 8px+16px=24px일 수 있습니다. 결과적으로, 예를 들어 버튼의 8px 반올림과 인접한 두 버튼 사이의 24px 여백을 정의합니다.

3단계 – 실제 UI 구성 요소 범위 좁히기

세 번째 단계에는 인벤토리를 만드는 동안 식별한 실제 구성 요소가 포함됩니다. 항상 제품 UI에서 가장 자주 볼 수 있는 항목부터 시작합니다. 이들은 일반적으로 버튼, 아이콘, 입력 필드, 텍스트 단락 및 이미지이며 일반적으로 구성 요소 모양이 아니라 기본 요소로 존재합니다. 입력 필드가 텍스트 입력에 사용되는지, 숫자를 입력할지 또는 날짜를 선택할지 여부와 같은 다양한 유형의 구성 요소에 대해 생각하는 것이 중요합니다. 예를 들어 한 페이지에 10개의 버튼이 있을 수 있지만 일반적으로 다른 버튼보다 더 눈에 띄는 버튼인 CTA가 있습니다.

Step 4 – Design validation states

네 번째 단계는 이러한 구성 요소로 UI 패턴과 레이아웃을 구축하는 것이라고 생각할 수 있으며, 이를 통해 제품 화면 디자인에 한 걸음 더 다가갈 수 있습니다. 하지만 그렇지 않습니다. 그 전에 구성 요소로 다시 돌아가야 합니다.

한 가지 기억해야 할 점은 UI는 절대 정적이지 않다는 것입니다. 그것은 사용자가 만드는 상호 작용에 대한 응답으로 사용자를 위해 흐릅니다. 호버링, 포커스 또는 비활성화 상태를 정의하지 않는 구성 요소는 유리 망치만큼 좋습니다. 그럼에도 불구하고 사용자가 항상 올바른 길을 가고 있다고 기대할 수는 없습니다. 따라서 검증 상태와 오류 메시지를 설계하는 것은 설계 시스템 아키텍처의 이 중간 단계에서 중요합니다.

또한 구성 요소 레이아웃의 복잡한 콘텐츠 템플릿을 만들 때 다음 사항을 확인하는 것을 잊지 마십시오.

• Fluid
• Behaving as expected when resized
• 이동 및 제거되는 구성 요소에 적절하게 응답

우리가 Indigo.Design 위해 구축하는 세 가지 디자인 도구인 Sketch, Adobe XD 및 Figma는 모두 적절한 수준의 스마트/자동 레이아웃 이상을 제공합니다. 스마트 구성 요소에 대한 정복이 완료되면 패턴 레이아웃에 동일한 전략을 적용하여 모든 이점을 얻을 수 있습니다.

Step 5 – Build design patterns

이제 다섯 번째 단계는 이러한 패턴을 구축하는 것입니다. 이것은 다소 간단한 프로세스이기 때문에 Indigo.Design에서 만든 UI 패턴에 대한 몇 가지 예를 제공하고자 합니다. 미디어를 재생하는 제품을 빌드하는 경우 사전 구축된 미디어 플레이어와 볼륨 컨트롤 레이아웃이 있으면 유용할 수 있습니다. 대화형 UI를 구축하는 경우 채팅 및 소셜 피드 패턴이 유용할 것입니다. 보다 공식적인 맥락으로 이동하면 보험 및 규정 준수 산업의 제품에 대해 다양한 양식이 필요할 수 있습니다. 마지막으로, 거의 모든 비즈니스는 결국 제품 세부 정보 페이지, 가격 비교표, 온보딩 또는 사용자 프로필이 필요합니다.

패턴의 가장 좋은 점은 진행하면서 만들 수 있다는 것입니다. 특정 유형의 양식은 단일 컨텍스트에서만 사용되므로 처음에는 디자인에 존재할 수 있습니다. 그러나 제품에서의 사용이 증가함에 따라 자연스럽게 사용되는 다양한 컨텍스트에서 해당 레이아웃의 모든 인스턴스에 대한 단일 정보 소스가 되는 패턴이 될 것입니다.

Step 6 – Prepare design documentation

마지막 단계는 디자인 시스템을 문서화하는 것입니다. 여기서 목표는 이에 대한 노력을 가능한 한 줄이는 것입니다. 디자인 시스템 아키텍처가 충분히 안정적이고 유연하다면 문서화해야 할 사항의 수가 최소화됩니다. 따라서 우리는 농담으로 아키텍처의 목표는 디자인 시스템이 완성되면 가능한 한 적은 문서를 작성하는 것이라고 말할 수 있습니다. 그러나 그렇다고 해서 UI 키트 파일에 출시 노트가 있는 섹션이 있는 것은 제외되지 않습니다. 또는 온보딩 예제와 온라인 설명서가 포함된 섹션이 있어 구성 요소를 사용 및 구성하거나 디자인 시스템을 리브랜딩할 때 해야 할 일과 하지 말아야 할 일이 포함된 디자인 시스템 예제를 제공합니다. 좀 더 간단하게 하기 위해 이 모든 것은 설계 시스템 관리자를 활용하여 처리할 수도 있습니다.

설계 시스템 아키텍처의 또 다른 목표는 가능한 한 유지 관리를 최소화하고 기존 구성 요소와 패턴을 손상시키지 않고 새로운 구성 요소와 패턴을 추가하여 설계 시스템이 처리할 수 있는 시나리오를 확장하는 것입니다. 그리고 많은 사람들이 3을 행운의 숫자로 여기기 때문에 성공적인 디자인 시스템 아키텍처를 위한 세 번째 목표를 추가하겠습니다. 새로운 마케팅 또는 디자인 책임자가 특정 회사의 브랜드에 완전한 개편이 필요하다고 결정하는 경우입니다. 글쎄요, 디자인 시스템은 재설계를 간소화하여 몇 주가 아닌 몇 분 만에 적응할 수 있습니다.

이러한 단계를 따르고 브랜드, 사용 사례 및 제품을 구축할 때 디자인 시스템에 대해 독립적으로 생각하면 향후 제품 디자인 및 개발 문제를 줄이는 데 도움이 됩니다. 기초가 안정되면 다시 돌아와서 이러한 모든 세부 사항을 그 위에 적용할 수 있습니다.

그러나 새로운 프로세스를 구현할 때 항상 특정 문제가 있다는 것을 이해하는 것은 당연합니다. 하지만 괜찮습니다. 그렇기 때문에 우리는 Indigo.Design 만들기 위해 출발할 때 우리의 것을 공유하고자 합니다. 그 중 많은 부분이 우리가 지원하고자 했던 디자인 프로그램의 특정 패러다임 전환과 관련이 있었습니다. 그런 다음, 디자인 타임에 사용하는 구성 요소와 개발자가 코딩에 사용하는 구성 요소가 항상 동기화되어 있는지 확인해야 하는 지속적인 과제가 있었습니다. 이 모든 것이 원활하게 작동하도록 하기 위해 우리는 특정 프로세스를 수립하고 정기적인 검토를 수행하는데, 이는 품질, 작업 흐름 및 일관성을 향상시킨다는 것을 알고 시간을 할애할 가치가 있는 일이기 때문입니다.

잠재적인 위험이 너무 많기 때문에 디자인 시스템 유지 관리 사업에 종사하고 싶은지 아니면 제품에 집중하고 우리와 같은 사람에게 맡기고 싶은지 궁금해하기 시작할 수 Indigo.Design.

Why Choose Indigo.Design For Your Design System?

디자인 시스템의 견고하고 미래 지향적인 아키텍처를 구축하려면 물론 Indigo.Design 다운로드하여 안팎으로 탐색하는 것이 좋습니다. 시간과 노력을 절약하고 실제 설계에 집중할 수 있습니다.

명심해야 할 몇 가지 간단한 사항은 다음과 같습니다.

1. Indigo.Design는 복사-붙여넣기 Sketch 요소로 가득 찬 캔버스가 아니라 가까운 장래에 Figma 위한 기본 라이브러리입니다.
2. Indigo.Design 에는 상태가 있는 컴포넌트뿐만 아니라 설계 시스템의 사용자가 컴포넌트의 구성을 변경할 때 자동으로 조정되는 템플릿과 변형도 있습니다.
3. Indigo.Design는 또한 WYSIWYG App Builder와 함께 작동하여 웹에서 실제 구성 요소를 만듭니다.

4. Indigo.Design 에는 브랜드 색상과 타이포그래피를 적용하고 자신의 것으로 만들 수 있도록 테마를 위한 강력한 메커니즘이 있습니다.
5. Indigo.Design는 Material, Bootstrap 및 Fluent에 대해 이러한 프레임워크와 같은 모양과 느낌을 주는 고유한 변형을 출시할 예정입니다.

Sources:

[1] Gartner, 디자인 시스템으로 더 나은 제품을 더 빠르게 구축, Brent Stewart, Van Baker, 2021년 3월 2일