디자인 시스템을 규모에 맞게 구축하는 방법에 대해 배웠습니다 (Lessons learned building a design system at scale)

이 글은 Arda KaraçizmeliLessons learned building a design system at scale글을 번역했습니다. 저의 모든 글은 허가를 받고 진행 하였습니다.

예약 설계 시스템을 구축한 방법을 소개합니다. (그리고 당신이 주도적으로 구축할 수 있는 방법)

디자인 시스템은 제품 개발에 있어 중요한 부분이며, 그 이점은 쉽게 알 수 있습니다. 디자이너와 개발자가 UI 세부 사항에 대해 걱정하지 않고 문제 해결에 집중하고, 디자인 및 기술 부채를 방지하며, 접근성 표준을 보호하고, 보다 효율적인 제품 개발 프로세스를 촉진할 수 있도록 도와줍니다.
지난 2년 동안 저희 디자인 시스템 팀은 현재 회사 전체에 널리 채택된 예약 설계 시스템을 구축했습니다. 이 글에서는 당신이 보다 효율적으로 만들 수 있도록 저희가 배운 5가지 교훈을 공유하겠습니다.

1. 사이즈 하나면 다 안 맞아요

디자인 시스템은 지원되는 제품 전략에 따라 다양한 모양과 크기로 제공되는 제품 개발 도구입니다. 1을 구축하기 위해 시간과 리소스를 투자하기 전에 시간을 들여 왜 구축하는지 생각해 보십시오. 이렇게 하면 나중에 골칫거리가 많이 줄어듭니다.
presentation
사이즈 하나면 다 안 맞아요. Illustrations by Cătălin Bridinel
디자인 시스템이 제품 로드맵과 어떻게 연계되어 있으며, 해결하고자 하는 최고 수준의 비즈니스 문제를 구체적으로 정의할 수 있는지 생각해 봅니다. 이를 통해 프로세스 중에 내리는 모든 디자인 결정을 용이하게 할 수 있으며 성공 정의도 알 수 있습니다. 디자인 시스템을 구축하여 특정 플랫폼을 확장하거나, 일관된 교차 플랫폼 환경을 제공하거나, 단순히 마케팅을 위해 사용할 수 있습니다. 이러한 모든 시나리오에는 다양한 접근 방식, 개발 전략, 성공 메트릭스 및 관련자가 필요합니다.
명확한 목표를 갖는 것도 선택에 도움이 될 것입니다. 디자인 시스템은 제품 팀이 보다 빠르고 효율적으로 목표를 달성할 수 있도록 도와줍니다. 따라서 디자인 시스템이 특정 비즈니스 문제를 해결하는 데 어떻게 도움이 될 것인지를 명확하게 전달하기만 하면, 보다 쉽게 원인을 규명할 수 있습니다.

2. 공통 언어로 말합니다.

조직의 모든 역할에 걸쳐 공통 언어를 확립하는 것은 좋은 디자인 시스템의 초석입니다. 시스템 디자인은 높은 수준의 사고가 필요한 복잡한 주제이기 때문에 진입 장벽을 낮출수록 초기 채택률이 높아질 것입니다.
좋은 디자인 시스템은 직관적이어야 합니다. 동료들이 이 주제에 익숙하지 않다면, 복잡한 구조나 복잡한 용어와 방법론에서 시작하지 마십시오. 이러한 용어는 나중에 나올 수 있습니다. 처음에는 단순하게 유지하세요.
디자인 시스템의 여러 부분을 동료에게 반복해서 설명하는 자신을 발견한다면, 가장 단순화할 여지가 있습니다. 최종 사용자에게 가장 가까운 위치에 있다는 사실을 활용합니다. 동료들을 잡고 피드백을 받아 다른 반복 프로세스와 마찬가지로 불필요한 복잡성을 제거할 때까지 반복합니다.
다른 유명한 방법론(Atomic Design 등)에서 많은 교훈을 얻었지만, 예약 디자인 시스템의 초기 버전에는 간단한 구조와 방법론이 포함되었습니다.
  • 기초 (Colour, Typography, Spacing, Iconography)
  • 컴포넌트 (UI building blocks)입니다.
presentation
공통 언어로 말합니다
간단하고 이해하기 쉬운 이 구조를 통해 디자이너, 연구자, 프런트 엔드 개발자, 카피라이터 및 제품 관리자는 동일한 언어를 빠르게 배우고 말할 수 있었으며, 제품 팀이 제품 및 일상 작업에 디자인 시스템을 통합하는 데 필요한 시간을 줄일 수 있었습니다. 또한 제품 팀의 요구에 따라 디자인 시스템의 미래를 유기적으로 형성할 수 있었습니다. 오늘날 우리는 좀 더 복잡한 구조를 가진 다른 방법론을 사용합니다. 그리고 우리는 모든 사람들이 이 주제에 대해 잘 교육되고 지식이 있기 때문에 그렇게 할 여유가 있습니다.

3. 문지기 말고 정원사가 되세요

디자인 시스템은 규칙 유지 도구가 되어서는 안 됩니다. 최고의 품질 및 접근성 표준이 디자이너에게 힘을 실어줄 수 있도록 보장해야 하지만 지속적인 개발에 누구나 쉽게 기여할 수 있는 환경을 조성해야 합니다. 이러한 환경은 공유 소유권을 창출하는 데 매우 중요하며 시스템의 생성 및 구현을 가속화하는 데 도움이 됩니다.
디자인 시스템 팀의 역할은 주로 관찰적 역할이 됩니다. 우리는 시스템의 한계를 관찰하고, 제품 팀이 해결하려고 하는 문제의 추상성을 탐지하고, 이러한 추상성을 더 광범위한 용도에 일반화할 수 있는 솔루션에 적용합니다.
Dan Eden on Paving the Path of Least Resistance
디자인 시스템이 제품 팀에게 방해가되는 순간, 다른 사람들에게 도움이 될 수있는 솔루션을 공동으로 개발할 수있는 기회가 생깁니다. 예약에서 우리 제품 팀은 그들이 다루는 다양한 사용자 문제 세트에 대한 광범위한 지식을 가지고 있습니다. 때로는 이러한 문제를 해결하기 위해 제품에 새로운 패턴을 디자인해야합니다. 기여에 대한 정의 된 프로세스와 가이드 라인을 확보함으로써 가능한 경우 제품 팀에서 수행 한 광범위한 작업을 시스템에 피드백합니다.
presentation
문지기 말고 정원사가 되세요
디자인 시스템 팀의 구성원들은 항상 이러한 새로운 패턴에 대해 논의하고 다른 사람에게 이익이 될 수 있는지의 여부를 논의하는 협업 세션을 촉진하기 위해 대기하고 있습니다. 시간이 지남에 따라 구축한 라이브 템플릿의 일련의 질문을 고려합니다. 예를 들면 다음과 같습니다.
  • 이것은 새로운 패턴입니까 아니면 기존 패턴의 수정입니까?
  • 현재 패턴이 사용 사례를 지원하지 않는 이유는 무엇입니까?
  • 이 패턴은 범위를 넘어 어디에서 재사용할 수 있습니까?
그런 다음 우리는 제품 팀의 디자이너와 개발자들과 협력하여 패턴이 추상화 계층을 거쳐 결국 시스템에 다시 공급되도록 합니다. 여러 번 이 과정을 거치며, 우리는 이것이 시스템에 유익할 뿐만 아니라 사람들이 우리의 디자인 시스템이 어떻게 작동하는지 알게 하는 훌륭한 교육 도구라는 것을 알게 되었습니다.

4. 스티커-시트를 넘어

문서화는 모든 규모의 디자인 시스템에 필수적입니다. 이를 통해 모든 사람이 신속하고 효율적으로 일관된 결정을 내릴 수 있습니다. 디자인 시스템의 모든 측면을 지원하는 세부 문서를 제공하는 경우 사용자는 즉시 디자인 시스템을 사용할 수 있습니다.
그러나 문서화의 모든 잠재력을 해제하려면 구성 요소 사양에 대한 설명 이상의 내용을 취해야 합니다. 다음은 문서를 최대한 활용하기 위해 문서에 추가할 수 있는 목록입니다.
  • 최선과 최악의 실행
  • 하는 것과 하지 않는 것
  • 실생활의 예
  • 대체 솔루션
  • 관련 항목
문서를 구성 요소로 한정하지 않는 것도 좋습니다. 다양한 UI 개념 또는 패턴, 설계 원리 및 기여 지침을 문서화하면 설계 시스템의 사용과 관련된 많은 질문에 답할 수 있습니다. 또한 문서화된 주제를 더 많이 사용할수록 명확한 지침이 있는 한 더 많은 사람들이 기여하게 됩니다.
저희 디자인 시스템 팀은 매일 여러 가지 결정을 내립니다. 제때에 우리는 이러한 결정을 문서화하지 않고 그것들이 우리의 마음 속에만 산다면 그것들은 시스템의 일부가 아니라는 것을 알게 되었습니다. 누군가가 디자인 시스템을 "올바른" 방식으로 사용하지 않는다면 먼저 자신을 비난하세요. 참조 자료를 충분히 제공하지 않았기 때문일 것입니다. 하지만 쉬운 해결책이 있습니다. 릴리스 프로세스에서 문서를 필수적으로 작성합니다. 더 높은 품질의 문서를 유지하기 위해 디자인 시스템에 대한 모든 병합 요청을 수행할 체크리스트가 있습니다.

5. 툴링(tooling) 잊지 마세요

디자인 시스템을 구축하는 것만으로는 충분하지 않습니다. 사용자에게 효율성을 더욱 높이려면 툴링을 통해 디자인 시스템을 워크플로우에 사전 예방적으로 통합해야 합니다.
툴링의 첫 번째 규칙은 사용자의 일상적인 작업과 워크플로우를 깊이 이해하는 것입니다. 이렇게 하면 사용자의 워크플로우에 유기적으로 필수적인 도구를 만들 수 있습니다. 디자인 시스템을 가장 많이 사용할 청중을 고려한 후 그에 따라 우선순위를 지정하고 스케치 라이브러리에서 구성요소 뷰어, 코드 편집기 플러그인에 이르는 다양한 도구를 작성할 수 있습니다. 도구를 더 많이 만들수록 더 많은 청중과 관련이 있습니다. 하지만 잡히는 데가 있습니다.
새로운 툴을 구축할 때마다 기술 및 디자인 부채의 위험이 증가할 수 있습니다. 이를 방지하는 좋은 방법은 디자인 시스템에서 툴링을 분리하고 서비스 형태로 구축하는 것입니다. 도구를 하나의 진리 소스(디자인 시스템)로부터 정보를 소비하도록 하면 장기적으로 더 나은 결과를 얻을 수 있으며, 더 많은 도구를 구축할 수 있는 토대가 마련될 수 있습니다.
우리의 디자인 시스템 앱 BIQ는 당사의 주요 설계 시스템 도구 중 하나입니다. 디자이너와 개발자가 일상 업무에 동반하는 도구로 널리 사용하고 있습니다. 어떻게 작동하는지 여기서 볼 수 있습니다. (here)
presentation
Don’t forget about tooling.
이러한 툴에 대해 이전에 설명한 모든 작업을 훌륭하게 수행할 수 있습니다. 즉, 사용자의 워크플로우에 능동적으로 통합하고, 하나의 진실된 소스를 사용하여 모든 사용자를 디자인 시스템에 최신 상태로 유지합니다. Sketch와 긴밀하게 통합된 네이티브 앱이라는 이점으로 BIQ는 설계 시스템을 출시할 때마다 새로운 버전의 Sketch 라이브러리를 제어하고 사용자의 장치에 설치할 수 있습니다. 그런 다음 디자이너는 디자인에 포함된 최신 UI 구성 요소를 스케치 기호로 사용할 수 있으며, 개발자는 이러한 설계에 맞는 최신 코드 조각들을 땀방울 없이 얻을 수 있습니다.
워크플로우에서 BIQ를 사용할 때 얻을 수 있는 또 다른 이점은 접근성입니다. 접근성은 우리가 예약할 때 매우 중요하게 생각하는 주제입니다. 제품 팀이 접근성 표준을 쉽게 준수할 수 있도록 도울 뿐만 아니라, 인간 중심적인 것이 전 세계에 도움이 될 뿐만 아니라, 사람들이 세상을 경험할 수 있도록 힘을 실어주는 회사의 사명 달성에 한 걸음 더 다가갈 수 있게 해 줍니다. 색상 대비 검사기와 접근성 문서는 BIQ의 가장 많이 사용되는 기능 중 하나이며, 디자이너와 개발자를 매일 지원합니다.
디자인 시스템을 구축하는 것은 결코 끝나지 않는 도전적인 프로세스입니다. 처음에는 부담스러울 수도 있지만 다른 제품을 만드는 것과 크게 다르지 않습니다. 왜 구축하는지 알고, 사용자의 의견을 듣고, 사용자의 요구를 이해하고, 디자인 시스템을 일상적인 상황에 원활하게 통합하기만 하면 성공을 위한 궤도에 오를 수 있습니다.
🙌 🙌 🙌

이 글은 번역 글입니다. 원본 링크입니다.


https://www.facebook.com/groups/224179755005643/
안녕하세요! Early adopter입니다.
페이스북 [DTF] 디자인 번역 공장 - Design Translation Factory 그룹도 많이 가입해주시길 바랍니다.
"보버"에서 "디자인 번역 공장" 연재를 저와 함께 해주실 분을 찾습니다. 하단 "리뷰" 또는 "페이스북"으로 편하게 메시지 주세요!
PS. 제가 사용하는 블로그 "보버"에 "함께 쓰는 블로그"라는 기능이 요번에 추가됐네요 ㅋ (미디엄에 퍼블리케이션 같은 기능..)
하단 링크 글을 보시면 "디자인 번역 공장"에 어떻게 함께 연재할 수 있는지 자세히 설명되어있습니다. 또는 쉽게 FB 메시지 주세요!
https://bit.ly/2L6WsZp