스포티파이의 디자인 (새 탭에서 열림)

Spotify는 45개 플랫폼과 2,000종 이상의 기기에서 일관된 브랜드 경험을 제공하기 위해 디자인 시스템 Encore를 플랫폼별 체계에서 크로스플랫폼 체계로 확장했다. 초기에는 모바일과 웹 시스템이 분리되어 유연성을 얻었지만, 시간이 지나며 컴포넌트의 불일치와 중복이 커졌다. 이에 공통 기반과 재사용 가능한 중간 계층을 마련하고, 컴포넌트를 처음부터 여러 플랫폼이 함께 설계하는 방식으로 전환했다.

일관된 경험이 필요해진 배경

• Spotify는 TV, 자동차, 모바일, 컴퓨터 등 다양한 환경에서 오디오 콘텐츠를 제공하게 됐다.
• 2019년 기준 45개 플랫폼, 2000종 이상의 기기, 200개 브랜드에 걸쳐 서비스를 제공해야 했다.
• 목표는 모든 플랫폼을 단순히 지원하는 것이 아니라, 어떤 기기에서도 사용자가 “Spotify답다”고 느끼는 일관된 경험을 만드는 것이었다.
• 디자인 시스템의 컴포넌트가 플랫폼 간 경험을 통합하는 핵심 수단으로 강조됐다.

Encore의 초기 구조와 한계

• Encore는 2019년 두 개의 하위 시스템으로 출발했다.
  • Encore Consumer Mobile: 모바일 중심 경험을 위한 유연한 UI 컴포넌트 카탈로그
  • Encore Web: 다양한 웹 제품을 위한 시스템
• 색상과 타이포그래피 같은 기본 디자인 결정에는 디자인 토큰을 사용했다.
• 그러나 각 하위 시스템이 독립적으로 발전하면서 버튼의 크기, 타이포그래피, 상태 표현 등에서 차이가 생겼다.
• 제품팀의 요구가 커지면서 컴포넌트가 지나치게 유연해졌고, 플랫폼 간 공통성이 약해졌다.

공통 기반과 재사용 계층의 도입

• 2022년 Spotify는 유연성에 치우친 구조를 재조정할 필요가 있다고 판단했다.
• Encore Mobile을 위한 재사용 가능한 컴포넌트 제작 전담 팀을 구성했다.
• 이 새로운 계층은 공통 기반과 Consumer Mobile 사이에 위치했다.
• 이를 통해:
  • Consumer Mobile이 모든 컴포넌트를 직접 제공해야 하는 부담을 줄이고
  • Web과 Mobile 사이의 플랫폼 대응성을 높이며
  • 제품별로 중복 구현되는 컴포넌트를 줄일 수 있었다.
• Web 팀과 협력해 크로스플랫폼 컴포넌트를 나중에 맞추는 대신, 처음부터 함께 개발하기 시작했다.

크로스플랫폼 컴포넌트 설계 방식

• 기존처럼 사용자 조사, 디자인, 개발로 이어지는 과정 자체는 유지했다.
• 가장 큰 변화는 디자인 단계에서 특정 플랫폼 하나만을 대상으로 하지 않는 것이었다.
• iOS, Android, Web 팀이 함께 각 플랫폼의 요구사항과 특성을 조사하고, 공통 경험을 조율했다.
• 플랫폼별 고유성을 없애는 것이 아니라, 공통된 구조와 시각적 언어를 유지하면서 각 환경에 맞게 적용하는 것이 목표였다.
• 웹, 모바일, TV는 입력 방식과 화면 크기 등 사용 맥락이 다르므로, 동일한 컴포넌트를 그대로 복제하기보다 플랫폼의 장점을 보존해야 했다.
• 이를 위해 각 플랫폼 전문가가 협업하는 구조가 중요했다. 웹과 모바일 양쪽 모두에 정통한 디자이너는 드물기 때문에, 여러 분야의 전문성을 한 과정 안에서 결합해야 했다.

Spotify의 사례는 디자인 시스템을 플랫폼별 컴포넌트 모음으로 관리하기보다, 공통 기반·재사용 계층·플랫폼별 특화를 연결하는 구조로 설계해야 한다는 점을 보여준다. 실무에서는 플랫폼 팀을 초기 설계 단계부터 참여시키고, 공통 토큰과 컴포넌트의 범위를 명확히 정하는 방식이 효과적이다.