구조의 힘 – 시스템 모델 설계 가이드

디자인 시스템은 조직이 다양한 제품, 서비스 및 비즈니스 전반에 걸쳐 경험적 일관성을 유지하는 데 도움이 됩니다. 일반적으로 시각적 지침 및 구성 요소 라이브러리와 관련이 있지만 디자인 시스템은 완전히 다릅니다. 더 많은 기업이 디자인 연속성의 가치를 인식함에 따라 새로 구성된 디자인 시스템 팀은 조직의 디자인 노력의 장기적인 관련성을 보장하기 위해 모범 사례를 수립하고 있습니다.

여러 사람이 동일한 디자인을 추구할 때 공통적인 질문이 나타납니다. 이러한 질문에 대한 답변을 쉽게 구할 수 없거나 쉽게 이해할 수 없는 경우 디자인 일관성은 문제가 됩니다 . 디자인 시스템을 입력합니다.

현대 디자인 토론에서 인기가 있지만 디자인 시스템의 뿌리는 수십 년 동안 신문 및 잡지 출판 세계에서 깊숙이 이어져 있습니다. 지금도 편집 페이지의 체계화된 계층 구조가 분명하며 미리 구성된 패턴으로 텍스트와 시각 자료를 일관되게 배치할 수 있습니다.

2007년 이후 디지털의 유입으로 인해 기업은 제품과 플랫폼 전반에 걸친 디자인 응집력에 대해 더 의도적이었습니다. 시각적 지침과 구성 요소 라이브러리에 대한 강조가 뒤따랐지만 이러한 문서는 PDF 및 공유 파일 페이지에서 빠르게 석회화되었습니다. 시행착오를 거쳐 현대 디자인 시스템의 제작자들은 그들의 작업을 고정된 문서가 아닌 살아있는 제품으로 보게 되었습니다.

Zalando는 유럽 최고의 온라인 패션 시장입니다. Atlassian은 소프트웨어 개발 도구로 전 세계적으로 인정받고 있습니다. 각각에는 대규모 제품 팀과 복잡한 설계 요구 사항이 있습니다. 그들의 디자인 시스템 모델에서 무엇을 배울 수 있습니까?

Zalando: 디자인 시스템 모델로서의 협업

Zalando는 신발 및 고급 스트리트웨어의 유럽 최대 온라인 소매업체입니다. 1,900개 이상의 브랜드가 있는 대규모 디지털 매장은 수백 명의 디자이너와 개발자로 구성된 팀에서 관리합니다. 이러한 다양한 상품 컬렉션에 대해 일관된 쇼핑 경험을 보장하기 위해 회사는 고도로 구조화된 디자인 시스템에 의존합니다.

이러한 유명 브랜드의 디자인 시스템을 유지하려면 엄격한 거버넌스와 디자인 의사 결정권자의 긴밀한 순환이 필요하다고 생각할 수 있습니다. 대신 Zalando의 접근 방식은 확실히 협력적입니다. Zalando는 설계 시스템을 엔트로피의 위협을 받는 완벽한 개체로 보기보다는 기능 팀이 필요에 따라 새로운 아이디어를 제공하도록 권장합니다. 어떻게 작동합니까?

Zalando의 디자인 시스템 팀(ZDS)의 주요 목표는 기능 팀이 제품을 빛나게 만드는 데 필요한 구성 요소를 개발하도록 돕는 것입니다. 동시에 ZDS는 설계 시스템의 무결성이 손상되지 않도록 합니다. 이러한 방식으로 ZDS는 연락망이자 안전망입니다.

Zalando 기능 팀은 회사의 디자인 시스템과 상충되는 솔루션이 필요하다고 판단되면 간단한 Google 양식을 사용하여 기여를 제출합니다. 기여 티켓이 수신되면 ZDS는 변경 요청을 검토하고 Light , Medium 또는 Heavy 로 분류합니다. 각 범주에는 공동 검토, 설계 및 반복의 고유한 순서가 있습니다.

기여가 이 프로세스를 통해 이루어지고 현실이 되면 ZDS 팀은 중앙에서 공유되는 설계 시스템 포털을 업데이트하고 주간 데모에서 변경 사항을 선보이며 이해 관계자와 고객에게 업데이트를 전달합니다.

Zalando의 기여 모델의 단순성은 회사의 다양한 목소리가 시스템의 진화에 대해 발언할 수 있도록 합니다. 철학적으로 Zalando는 시스템을 단순히 제품을 시각적으로 정렬하기 위한 문서 리소스가 아닌 제품으로 봅니다. 이 전망에서 다양한 설계 시스템 모델에 적용할 수 있는 실용적인 테이크아웃:

• 거버넌스가 중요하지만 디자인 시스템을 감독하는 팀은 조직 내 다른 팀의 성공에 초점을 맞춰야 합니다 .
• 기능 기여 프로세스를 단순하고 투명하며 협업적으로 만들고 모든 커뮤니케이션을 문서화합니다.
• 디자이너와 개발자가 시스템 변경 사항에 대해 함께 작업하도록 하여 공유 시스템 언어를 육성합니다.
• 시스템에 대한 모든 업데이트가 접근성 문제를 해결하는지 확인하는 체크리스트를 만드십시오.

Atlassian: 재창조된 디자인 시스템 사고

Atlassian은 Jira 및 Trello와 같은 소프트웨어 개발 및 협업을 위한 도구를 만듭니다.

2017년에 Atlassian은 브랜드를 변경하고 디자인 가이드라인을 위한 사이트를 시작했습니다. 동시에 이 회사는 UI 구성 요소와 해당 코드 예제 전용 사이트를 별도로 호스팅했습니다.

시간이 지남에 따라 두 사이트가 서로 연결되어 내부 설계 및 개발 팀, 타사 앱 통합 공급업체, Atlassian 고객 사이에 좌절과 혼란을 야기했습니다.

Atlassian은 디자인과 개발 사이의 균열이 점점 커지고 있음을 인식하고 디자인 시스템에 대한 접근 방식을 재고하기로 결정했습니다. 더 이상 설계 및 개발 문서를 Atlassian 제품에 대한 코드 및 그래픽 출력을 생성하는 수단으로 취급할 수 없습니다. 디자인 시스템은 그 자체로 하나의 제품으로 존중받아야 했습니다.

문제를 완전히 이해하기 위해 Atlassian은 외부 감사를 받고 고객 만족도 조사를 실시했습니다. 예상대로 두 사이트는 잘못 정렬되고 오래된 것으로 간주되었습니다. 라인에서의 명성과 변화를 요구하는 디자이너, 개발자 및 이해 관계자의 대규모 에코시스템을 통해 Atlassian은 단점을 인정하고 디자인 시스템을 재구상하기 시작했습니다.

2020년 8월 초, Atlassian의 디자인 시스템 팀(ADS)은 브랜드, 비주얼, 콘텐츠, 구성 요소 및 패턴에 대한 가이드라인을 통합하는 새로운 사이트를 출시했습니다.

또한 ADS 팀:

• UI 구성 요소의 절반을 새 시스템으로 마이그레이션(나머지 진행 중)
• 전체에 걸쳐 재작성 및 간소화된 문서
• 시스템 내 검색 개선
• 클릭하여 복사 코드 링크 추가

Atlassian의 성숙한 사고 방식을 보여주는 가장 확실한 증거는 ADS 수석 디자이너 Jennie Yip입니다. 디자인 시스템은 결코 완성되지 않습니다. Atlassian에서 우리는 디자인 시스템을 보는 방식을 살아 있고 숨쉬는 존재로 바꾸기 시작했습니다.”

기억할 가치가 있는 5가지 디자인 시스템 원칙

오늘날의 최첨단 기술은 내일의 무딘 칼날이며 모든 설계 분야에 만연한 문제입니다. 디자인 시스템을 만들고 호스팅하기 위한 도구와 플랫폼은 풍부하지만 디지털 디자인의 급속한 발전으로 인해 지침 원칙의 관점에서 디자인 시스템에 대해 생각하는 것이 더 유리합니다.

1. 디자인 시스템은 디지털 제품입니다.

모든 디지털 제품과 마찬가지로 설계 시스템은 정기적인 유지 관리가 필요합니다. 오랫동안 휴면 상태에 있는 시스템은 사용하지 않고 쇠퇴할 것입니다.

2. 디자인 시스템은 협력적입니다.

디자인 시스템은 여러 비즈니스 기능을 나타내는 이해 관계자의 요구 사항을 충족해야 합니다. 협업을 위한 방법을 제공하면 시스템이 설계 및 엔지니어링 사일로 내에 존재하는 것을 방지하고 제품 아이디어가 무시되지 않도록 합니다.

3. 디자인 시스템은 단순함을 기반으로 합니다.

디자인 시스템은 화려한 비주얼, 복잡한 애니메이션 또는 재치 있는 카피로 찬사를 받는 것이 아니라 답을 찾는 곳입니다. 정보는 잘 조직되고 탐색하기 쉽고 검색 가능해야 하며 텍스트 설명은 문맥과 간결한 지침의 균형을 맞춰야 합니다.

4. 디자인 시스템에는 커뮤니케이션 및 참여 전략이 필요합니다.

디자인 시스템을 관리하는 팀은 이해 관계자에게 업데이트 및 새로운 기능을 정기적으로 전달하는 방법을 고려해야 합니다. 뉴스레터, Q&A 세션 및 기타 홍보 전략은 다음과 같은 정보를 제공하고 참여를 유도해야 합니다. “이것이 변경 사항입니다. 이것이 당신이 신경을 써야 하는 이유입니다.”

5. 디자인 시스템은 중앙 집중화되어 있습니다.

설계 시스템은 단일 클라우드 기반 위치에서 액세스할 수 있어야 합니다. 시스템을 탐색하거나 자산을 얻는 데 특정 설계 프로그램에 대한 지식이 필요하지 않아야 합니다. 그리고 디자인과 개발을 위한 별도의 가이드라인을 발표하는 것은 제품 불일치로 가는 확실한 길이라는 것을 기억하십시오.

설계에서 구조적 유연성의 힘

디자인 시스템은 크고 인상적이며 영원히 변하지 않는 단일체를 의미하지 않습니다. 또한 단순히 디자인 구성 요소 및 스타일의 저장소가 아닙니다. 그들은 살아 숨쉬는 제품, 심기와 가지 치기가 필요한 유기농 노력입니다. 따라서 지속적인 유지 관리 및 갱신에 전념하는 디자이너로 구성된 전담 팀이 필요합니다. 결국, 디자인 시스템은 결코 완성되지 않습니다.

궁극적으로 최고의 디자인 시스템은 간단하고 협업적이며 유연합니다. 그들은 시급한 디자인 질문에 명확하게 답하고, 여러 이해 관계자의 의견을 환영하며, 독단적인 공식보다 강력한 솔루션을 우선시합니다.

당신의 생각을 알려주세요! 아래에 귀하의 생각, 의견 및 피드백을 남겨주세요.

• • •

Toptal Design 블로그에 대한 추가 정보:

• 일관성이 핵심 - Figma 디자인 시스템을 구축하는 방법
• 디자인 시스템 및 패턴 이해하기
• Figma vs. Sketch vs. Axure – 작업 기반 검토
• 머티리얼 디자인을 사용하는 이유 찬반 양론
• 과거는 여전히 존재합니다 – 시대를 초월한 디자인의 개요