디자인 시스템의 영향

Lyft에서 승인(buy-in)을 얻는 (그리고 승인을 얻기 위해 계속해서 밀어붙이는) 방법

서핏
6 min readJun 27, 2019

이 글은 저자의 동의를 얻어 번역한 글입니다.
모든 저작권과 권리는
Linzi Berry에게 있습니다.
도움이 되셨다면 👏🏻 한 번씩 부탁드려요 :)

배움과 창조, 교육에 대한 열정이 결국 저를 이 역할에 빠져 들게 만든 것 같습니다. 학교에서는 디자인 시스템에 대해 정확하게 배우지 못합니다. 그렇기 때문에 이 분야에서 성장하기 위해서는 지속적으로 배움의 자세를 갖춰야 하죠. 실수는 금물! 완벽한 정답도 없고, 회사마다 정답이 다 다르다는 것. 우리 모두는 시행착오를 통해 많은 것들을 배우고 있습니다. 그리고 현재 Lyft 디자인 시스템팀이 겪고 있는 시행착오는 정점에 다다랐습니다.

Lyft의 문제점

사실 모든 회사가 디자인 시스템을 필요로 하지는 않습니다. 자, Lyft는 급성장한 회사입니다. 처음 디자인 팀은 22명이었는데, 2년도 안되는 기간동안 무려 100명 이상으로 규모가 커졌죠. 이전에는 모든 직원들이 리뷰에 참석하고 솔루션에 동의할 수 있었지만, 이제는 디자인팀만 해도 건물 한 채를 모두 쓰고 있고, 별도로 분리되어 있습니다.

규칙이요..? 그냥.. 이렇게 하면 되지 않아요..?

수많은 디자이너들이 같은 문제를 풀고 있습니다. 서로가 누군지도 모르는 상태로 말이죠. 보통 다른 사람이 풀어 놓은 해결책들을 참고해서 필요에 맞게 조정하고 적용합니다. 이러한 방식으로 결국 사용자에게 일관성 없는 경험을 제공하게 되는 것이죠. 예를 들어, 똑같이 생긴 버튼인데 서로 다른 기능을 가지고 있거나, 다르게 생긴 버튼이 똑같이 작동하고 있는 것처럼. 그래서 우리는 Lyft의 제품에 일관성과 예측성을 높이고자 합니다.

굿 윌 헌팅

코드를 복사, 붙여넣기하는 것도 새로운 것을 만들어내는 것과 같습니다. 기존의 버튼 스타일을 업데이트 하고 싶거든 원래의 것을 찾아내야만 조정이 가능하죠. 우리는 여기서 발생하는 디자인, 개발 시간과 부채를 줄이고자 합니다.

러그(Rug) 아래 청소하기

과거에는 모든 상황에서의 접근성, 로컬화, 문제 해결에 크게 집중하지 않았습니다. 하지만 지금부터는 사용자들의 경험을 개선하고자 합니다.

변형의 어려움

촉박한 일정으로 인해 디자이너들은 보통 iOS 디자인만 합니다. 안드로이드 개발자는 그 디자인들을 보고 어떻게 안드로이드에 적용할지 고민합니다. HIG(Human Interface Guide)나 Material Design과 같은 시스템이 있지만, 우리에게 완벽하게 적용되지만은 않습니다. 그래서 우리는 디자인 시스템을 개발해 모든 플랫폼에 최적화된 Lyft를 만들고자 합니다.

Lyft의 제품

디자인 시스템은 다른 팀원들의 퍼포먼스가 향상되도록 힘쓰는 팀으로부터 구축되고 관리됩니다. 그 팀은 개발자들과 웹, 앱 시스템 디자이너들로 구성되어 있고, 다음과 같은 세 가지에 집중하고 있습니다.

기본 요소들

구축 (& 유지보수)

대부분의 사람들은 디자인 시스템이 요소를 구축, 유지 보수하는 데에 사용된다고 생각합니다. 우리는 Lyft의 품질 기준에 맞춰 유연하고 보편적으로 쓰일 기본 요소들을 구축, 관리합니다. 이 때 우리는 어떤 요소들이 가장 큰 영향을 미칠지 우선순위를 정하기 위해 여러 팀들과 일하는데, 매번 발생하는 요구 사항과 작업의 근본 원인을 해결하는 데에 고도의 협업 과정을 거치게 됩니다.

현재 디자인 시스템의 요소들은 많은 곳에 사용되고 있습니다. 하나가 잘못된 요소라면 다른 곳에서도 잘못되어 있겠지만, 우리는 규정된 문서(QSLA;Quality Service Level Agreement)로 100% 이 부분을 커버할 수 있습니다.

설정 마이그레이션

기여 (Contribute)

우리는 디자인과 코드에 시스템을 도입했습니다. 이 시스템은 사용자가 주요 기능을 사용할 때 일관성있는 경험을 할 수 있도록 도웁니다.

  • 새로운 기능이 생기면 디자인 시스템에 적용할 것을 권장합니다. 디자인 시스템의 요소들만 사용해서 얼마나 많은 팀들이 새로운 기능을 만들어낼 수 있는지를 살펴보고, 지속적으로 그 규칙을 지킴으로써 유연하고 실용적인 엘리먼트를 구축하고자 합니다.
  • 아직 작업되지 않은 기능과 플로우도 디자인 시스템에 옮겨 나갈 것입니다. 최종적으로는 앱을 100% 디자인 시스템을 활용해서 개발하는 것으로 목표를 두고 있습니다.
디자인 시스템 가이드 웹사이트

지원 (Support)

우리는 여러 다른 팀들도 작업할 수 있도록 어떻게 핵심 요소를 사용하고, LPL 원칙을 적용하는지 교육하고 있습니다. 교육에는 상용화된 엘리먼트들이 100% 담긴 문서를 가장 많이 활용하고 있고, 여러 방면으로 강의 진행, Facebook Workplace와 Slack을 통해 질문에 대한 답변도 제공하고 있습니다.

다른 팀들이 디자인 시스템 요소를 올바르게 사용한다면 그것이야 말로 우리의 목표를 이룬 것이지만, 우리는 더 많은 것을 추구합니다. 우리는 다른 팀의 디자이너와 개발자들이 이 시스템에 집중할 것을 권장하기도 하죠.

Lyft의 최종 목표

우리의 디자인 시스템이 Lyft의 모든 부분에서 UI를 설계하고 구축하는데 기준이 됩니다.

  • 우리 제품은 시각적으로나 인터랙션 일관성으로나 완벽합니다. 제품팀은 새로운 기능을 정의하고, 디자인하고, 수행할 때 약간의 시간만 필요로 합니다.
  • 제품 라이브러리는 컴포넌트와 레이아웃들을 포함하고 있습니다. 그것들은 접근성, 국제화, 관측 가능성, 촉각, 소리, 애니메이션과 같은 종합적인 역할을 합니다.
  • 디자이너와 개발자가 열람할 수 있는 종합 문서가 있습니다. 이 문서를 통해 이미 작업된 컴포넌트를 쉽게 찾을 수 있고, 확장하거나 각자의 시스템에 맞게 수정해서 사용할 수 있습니다.
  • 디자인 시스템은 회사 전체의 기여를 통해 지속적으로 진화하고 확장해나가고 있습니다.

마지막 의견

우리는 각자의 프로세스를 끊임없이 재평가하고 구성합니다. 당신의 문제는 무엇인가요? 당신의 팀원들은 누가 있나요? 당신의 제품은 무엇이고 최종 목표는 무엇인가요? 이 질문들에 대한 당신의 대답이 궁금하네요.

읽어주셔서 감사합니다! 도움이 되셨나요?

더 많은 아티클을 보고 싶으시면 surfit.io를 사용해보세요 :)
디자이너를 위한 국내외 아티클을 새 탭에서 간편하게 받아 볼 수 있습니다.

--

--

서핏

매일 성장하는 사람들의 커리어 플랫폼