2019년 Spotify 경영진이 모든 기기에서 누구나 오디오 콘텐츠를 일관되게 사용할 수 있도록 하겠다는 야망을 밝혔 을 때 우리 디자인 팀은 중요한 과제에 직면했습니다. 이제 Spotify는 45개의 고유한 플랫폼과 2,000개 이상의 유형의 기기에서 사용할 수 있게 되었습니다. 200개 브랜드. 이는 누군가가 거실 TV에서 좋아하는 음악을 틀고, 차에서 파티를 계속하고, 컴퓨터에 "포커스" 재생 목록을 추가하여 일주일 내내 작업할 수 있다는 것을 의미했습니다.
우리의 디자인 접근 방식은 유비쿼터스 범위뿐만 아니라 일관성에 관한 것이었습니다. 사람들이 시청하는 곳마다 우리는 가능한 한 원활하고 응집력 있는 경험을 원했습니다. (그리고 고객도 알아차렸습니다.) 매체에 관계없이 Spotify가 본질적으로 " Spotify "라고 느껴지도록 하는 것이 우리의 핵심 초점이 되었습니다. 디자인 시스템 팀인 Encore 의 디자인 책임자로서 저는 우리 팀이 경험을 통일성 유지하는 어려운 작업을 처리하는 동안 맨 앞줄에 앉아 있었습니다. 구성 요소는 우리 전략의 핵심이었습니다. 범위 지정부터 실행에 이르기까지 구성 요소에 접근하는 방법을 다시 생각해 보았습니다.
크고 작은 두 개의 녹색 버튼과 "다른 상태 처리?"라는 손으로 쓴 스크립트가 있습니다.
이전: Encore 소비자 모바일 시스템용 버튼 구성 요소
불일치 발견: 앙코르의 탄생
2019년에 디자인 시스템인 Encore를 도입했을 때 우리는 이를 두 가지 주요 부문으로 나누었습니다. Encore Consumer Mobile은 놀라울 정도로 유연하며 모바일 중심의 Spotify 경험을 위해 설계되었습니다. 본질적으로 이는 끊임없이 성장하고 발전하는 UI 구성 요소의 방대한 카탈로그 역할을 했습니다. 한편 Encore Web은 더욱 광범위한 웹 제품을 수용했습니다. 우리는 색 구성표, 서체 스타일 등 기본적인 디자인 결정을 위해 디자인 토큰을 채택했습니다. 그러나 여정이 진행됨에 따라 우리는 하위 시스템 간에 더 많은 공통성이 필요하다는 것을 인식했습니다.
소형, 중형, 대형을 나타내는 녹색 버튼 3개(일관되지 않은 유형 및 크기를 나타내는 손으로 쓴 설명선 포함)
이전: Encore 웹 시스템의 버튼 구성 요소
"Foundation"을 핵심으로 하고 "웹"과 "모바일", "콘텐츠 웹 플랫폼", "광고 웹", "소비자 모바일" 순으로 Encore의 시스템 레이어를 보여주는 동심원입니다. 주석은 "모바일"이 새로운 계층이며 "웹"과 플랫폼 패리티가 있음을 나타냅니다.
Encore는 플랫폼과 제품 전반에 걸쳐 일관성을 구축하기 위해 디자인 결정의 기초를 공유하는 두 개의 하위 시스템(모바일 및 웹)으로 구성됩니다.
Spotify가 성장함에 따라 더 세련된 구성 요소에 대한 제품 팀의 욕구도 커졌습니다. 2022년에는 진자가 유연성을 향해 너무 많이 흔들리는 것이 분명해졌으며 재보정이 필요했습니다. 우리는 Encore Mobile을 위한 재사용 가능한 구성 요소를 만드는 유일한 목적을 위해 전문 팀을 구성했습니다. 다양한 하위 시스템이 핵심 기본 시스템에서 방사되어 각각 점점 더 전문화되고 중심에서 갈라지는 것으로 생각한다면 이 새로운 하위 시스템은 Encore Consumer Mobile 사이에 존재합니다.그리고 그 기본 시스템. 이를 통해 모든 구성 요소를 자체적으로 제공해야 하는 Encore Consumer Mobile에 대한 수요를 줄이는 동시에 시스템의 나머지 부분에 걸쳐 더 큰 플랫폼 패리티를 만드는 첫 번째 방어선을 만듭니다. Encore Web과의 협력을 통해 우리는 나중에 생각하지 않고 처음부터 크로스 플랫폼 구성 요소 개발을 시작했습니다.
크로스 플랫폼 디자인의 메커니즘
크로스 플랫폼 구성 요소를 제작하는 기술은 완전히 새로운 분야는 아니었습니다. 연구를 기반으로 디자인하고 개발하는 전통적인 프로세스가 여전히 그대로 유지되었습니다. 그러나 가장 큰 변화는 설계 단계에 있었습니다. 이 새로운 작업 방식에서 우리는 단지 하나의 플랫폼만을 위해 디자인하고 싶지 않았습니다. 우리는 응집력을 유지하기 위해 플랫폼 전반에 걸쳐 디자인을 동기화하고 싶었습니다 .
크기와 동작 측면에서 다양한 검정색 배경의 녹색 버튼 배열입니다.
이후: 더 많은 옵션을 제공하는 Encore의 웹 및 모바일 시스템용 버튼 구성 요소
동시에 각 플랫폼에는 우리가 디자인하고 싶은 고유한 특성이 있습니다. 그렇다면 모바일 제품이나 TV 경험과 동일한 품질을 잃지 않으면서 모양과 느낌이 동일한 웹 사이트를 어떻게 구축할 수 있을까요? 일반적으로 웹 디자인 전문가와 모바일 디자인 전문가가 있는데, 둘 다 전문가인 사람을 찾는 경우는 매우 드뭅니다. 각 사람은 자신의 영역에 맞는 지식 세트를 가져옵니다.
그렇다면 고유한 특성을 잃지 않으면서 모바일 제품이나 TV 경험과 모양과 느낌이 동일한 웹 사이트를 어떻게 구축할 수 있을까요?
“ 그렇다면 고유한 특성 을 잃지 않으면 서 모바일 제품 이나 TV 경험 과 모양 과 느낌 이 동일한 웹 사이트를 어떻게 구축 할 수 있을까요 ? ”
우리는 모든 사람을 같은 방에 모이는 것부터 시작하고 철저한 조사부터 시작합니다. iOS, Android, 웹 등 각 플랫폼의 팀은 각 구성 요소의 복잡성을 심층적으로 조사합니다. 각 대표자는 감사를 실시하고 표면의 고유한 특성을 도표화합니다. 데스크탑에는 더 많은 공간이 있습니다. TV는 시청 거리 때문에 다릅니다. Watch에서는 모든 정보를 요약해야 합니다.
선택한 텍스트와 선택 취소된 텍스트 사이의 가로 간격을 표시하는 점선
정렬 단계에서 작업 그룹은 용어, 사용 가능한 상태 및 속성이 함께 적용되는 방법을 정의합니다.
최종 iOS 사용자가 해당 속성과 상호 작용하지 않는다는 점을 강조하는 주석이 포함된 아이콘 개요입니다.
"탭"이라는 용어를 정의하는 용어집입니다.
여기에서 우리는 함께 모여서 명명 규칙, 플랫폼 사양, 접근성 요구 사항에 대한 컨텍스트를 공유하여 우리가 구축해야 할 항목을 조정할 수 있습니다. 우리는 발견한 내용을 종합하여 구성 요소 개요 라고 부르는 것을 작성합니다 . 이는 이러한 결정을 포착하고 보다 세부적인 설계 단계의 기반을 마련합니다. 개요에는 용어집, 구성 요소의 구조 또는 지원해야 하는 변형이 포함될 수 있습니다.
Encore 팀은 REST API와 함께 변수를 사용하여 코드 소스가 변경될 때 값을 생성하고 업데이트해 왔습니다.
예를 들어 버튼 구성요소를 살펴보겠습니다. Encore가 초기 단계였을 때 버튼은 플랫폼마다 매우 다양했습니다. 그들은 서로 다른 크기의 프레임워크, 상호 작용, 패딩을 갖고 있었고 서체 규모에서 서로 다른 증분을 사용했습니다. 그러나 엄격한 협업을 통해 우리는 1차, 2차, 3차의 통합 계층 구조를 개발했습니다. 또한 우리는 계속해서 사용했던 크기 프레임워크와 명명 구조(변수로 구현할 수 있었던 구조)를 정의했습니다. 오늘날 Encore의 통합 버튼은 다양한 크기, 사용자 정의 초점 상태(플랫폼에 따라 다름) 및 사용 지침까지 자랑합니다.
중간에 "결속력"이 있는 "전체 일관성"부터 "전체 플랫폼 독립성"까지의 스펙트럼에 표시된 다양한 녹색 버튼입니다.
이후: 간격 변수는 버튼에 적용할 때 일관성과 혼돈 사이의 최적 지점에서 통합된 버튼 제품군을 생성하는 레이아웃 테마를 구축하는 데 도움이 되었습니다.
우리의 연구에 따르면 많은 디자인 시스템이 플랫폼에 구애받지 않고 전체적으로 단일 디자인을 사용하는 것으로 나타났습니다. 다른 경우에는 시스템이 기본 플랫폼(예: 웹용 IBM Carbon )에 맞게 최적화됩니다. 다른 플랫폼이 전혀 지원된다면 그다지 중요하지 않습니다. 동등성을 위한 구축 에 관한 기사가 우리에게 영감을 준 Lyft와 같은 훌륭한 사례도 있습니다 .
왜 크로스 플랫폼인가?
디자이너이자 프런트 엔드 개발자인 Danny Banks는 2020년 디자인 시스템 컨퍼런스 Clarity에서 크로스 플랫폼 디자인 시스템 구축의 환경, 인체 공학 및 경제성 에 대해 연설했습니다 .
우리는 완벽한 일관성과 완전한 플랫폼 독립성 사이의 중간 경로가 되는 응집력 추구를 봅니다. 우리는 또한 크로스 플랫폼 관점 에서 디자인 시스템 결정을 내릴 때 얻을 수 있는 몇 가지 주요 이점을 발견했습니다 .
응집력
이 접근 방식을 고수하면 플랫폼 전반에 걸쳐 Spotify 본질을 공유할 수 있습니다. 미묘한 차이가 존재하더라도 핵심 경험은 그대로 유지됩니다.
능률
공통 기반에서 시작하면 시간이 절약됩니다. 플랫폼 팀은 바퀴를 재발명하는 대신 고유한 요구 사항에 따라 맞춤화할 수 있습니다. 또한 재사용 가능한 프레임워크를 구축하는 데 있어 큰 진전을 이루었습니다. 예를 들어, 우리의 크로스 플랫폼 명명 시스템은 이제 우리 디자인 접근 방식의 필수 요소입니다.
확장성
이러한 시스템을 구축하면 업데이트가 크로스 플랫폼 수준에서 발생한 다음 하위 시스템으로 외부로 흘러갈 수 있으므로 브랜드 진화나 새로운 파트너 통합 등 증가하는 요구 사항에 적응하는 것이 훨씬 더 쉽습니다.
Encore 버튼에는 지원되는 플랫폼 전반에 걸쳐 필요한 모든 것이 포함되어 있으므로 디자이너는 무슨 일이 있어도 예측 가능한 시스템을 갖출 수 있습니다.
새로운 과제
물론, 여행에 장애물이 없는 것은 아닙니다. 여러 팀을 동일한 페이지에 유지하면서 여러 플랫폼을 관리하는 복잡성으로 인해 몇 가지 과제가 발생합니다.
프로젝트 복잡성 증가
한 번에 하나의 플랫폼에 집중하는 것이 확실히 더 간단합니다. 여러 플랫폼을 사용하면 많은 요구 사항과 제한 사항을 추적해야 하므로 까다로울 수 있습니다. Encore의 역할은 제품 팀이나 고객에게 복잡성을 조성하는 것이 아니라 이러한 고통을 흡수하는 것입니다. 우리는 구성 요소별로 프로젝트 리더를 선택하여 이를 더 간단하게 만들고, 해당 개인은 필요에 따라 플랫폼 전문 지식을 갖춘 설계 및 엔지니어링 파트너로부터 의견을 얻습니다.
더 많은 의존성
여러 팀에서 디자인 및 구축 단계를 조정할 때 릴리스 일정, 로드맵 및 타이밍의 변화로 인해 상황이 더 어려워질 수 있습니다. 우리는 활성 프로젝트 수를 제한하고 내부 커뮤니케이션에 매우 적극적으로 참여함으로써 이를 개선했습니다.
그러나 이러한 초기 문제는 사용자에게 가져온 응집력과 명확성에 대한 대가로 지불할 작은 대가에 불과했습니다.
협업에 대한 참고 사항
Spotify만큼 광범위하고 몰입도 높은 디자인 시스템을 만드는 복잡한 조직화에서 크로스 플랫폼은 더 큰 보석의 한 측면일 뿐입니다. 교차 기능도 마찬가지로 중요합니다. 우리 시스템은 깊이(기능 전반)만큼이나 폭(플랫폼 전반)도 중요하다고 말할 수도 있습니다.
Spotify에서 이러한 교차 기능적 시너지 효과는 단순한 부산물이 아닙니다. 그것은 의도적인 것입니다. Encore 창작의 모든 단계는 집단적 노력의 힘을 보여주는 증거였습니다. 일관되고 통합된 사용자 경험을 창출하고자 하는 모든 팀에게 부서 간 협업은 바람직할 뿐만 아니라 필수적입니다.
일관되고 통합된 사용자 경험을 창출하고자 하는 모든 팀에게 부서 간 협업은 바람직할 뿐만 아니라 필수적입니다.
“ 응집력 있고 통합된 사용자 경험 을 창출하고자 하는 모든 팀 에게 부서 간 협업은 바람직할 뿐만 아니라 필수적입니다. ”
일관성을 추구하면서 우리의 모토는 분명했습니다: 디자인의 통일성, 사고의 다양성. 이는 정기적인 동기화, 브레인스토밍 세션 및 피드백 루프를 의미했습니다. 이는 또한 개별적인 사일로를 버리고 집단적 사고방식을 수용하는 것을 의미했습니다. 명명 규칙에 대한 컨텍스트 공유부터 구성 요소의 해부학적 구조에 대한 토론에 이르기까지 이러한 토론은 훌륭한 아이디어와 솔루션의 용광로가 되었습니다.
결국, TV 화면에서 모바일 장치에 이르기까지 원활한 Spotify 경험은 단순히 일관된 디자인의 산물이 아닙니다. 이는 각 분야가 서로를 존중하고 전체가 부분의 합보다 더 크다고 진정으로 믿었던 수많은 시간 동안의 다기능 팀워크의 결과입니다.
단결은 매우 중요합니다
저는 2023년 9월 20일에 열리는 DSW Day 2023 에서 연설할 예정입니다 . 등록은 무료이며 누구나 참석할 수 있습니다. 거기에서 만나자!
보다 크로스 플랫폼 관점에서 디자인한 덕분에 Encore는 플랫폼별 상호 작용과 세부 정보를 유지하면서 Spotify의 경험을 일관되고 친숙하게 느껴지도록 만들었습니다. Spotify 디자이너는 Encore에 맞춰 조정하면서 다양한 화면 크기나 입력 유형을 고려하는 등 고유한 플랫폼에 맞게 최적화할 수 있습니다.
여러 플랫폼에서 디자인 시스템을 탐색하는 팀의 경우 Unity는 매우 중요하다는 점을 강조하겠습니다. 디자인에서 타협할 수 없는 부분을 정의함으로써 일관성을 높일 수 있을 뿐만 아니라 팀 내에서 경계를 넘어 생각할 수 있는 창의성을 촉발할 수 있습니다.
