넷플릭스 디자이너는 야근하지 않는다
미디어 시크릿 : 넷플릭스와 유튜브 뒤에 숨겨진 비밀들
스타벅스와 넷플릭스의 공통점
넷플릭스가 다양한 디바이스에서 동일한 사용자 경험을 제공하는 것은 마치 세계적인 커피 프랜차이즈 스타벅스가 나라마다 현지 커피의 특색을 반영하면서도, 모든 매장에서 동일한 브랜드 감각을 유지하는 것과 같다. TV, 모바일, PC 등 여러 디바이스에서 일관된 경험을 제공할 수 있는 비결은 바로 반응형 디자인과 적응형 인터페이스 덕분이다.
반응형 디자인은 화면 크기나 해상도에 따라 콘텐츠의 레이아웃이 자동으로 조정되는 방식이다. 이를테면 TV에서는 큰 화면에 맞춰 콘텐츠가 큼직하게 보이며, 스마트폰에서는 작은 화면에 맞게 가독성을 높인 UI(User Interface: 사용자 인터페이스)가 제공된다. TV에서는 리모컨으로 조작하는 것에 초점을 맞춰 큰 섬네일과 단순한 인터페이스를 제공하고, 스마트폰에서는 손쉽게 스와이프(좌우이동 터치)하고 탭할 수 있는 직관적인 인터페이스를 제공한다. 이처럼 화면이 다르더라도 넷플릭스의 사용자 경험의 일관성을 유지하며 서비스를 즐길 수 있다.
각 디바이스에 맞춰 최적화된 UI 덕분에 넷플릭스 사용자는 어떤 기기를 사용하든 자연스럽게 콘텐츠를 탐색하고 즐길 수 있다. TV로 보던 영화를 출근길에 모바일로 이어보는 사용자들은 다른 기기로 같은 서비스를 사용하는데도 이질감을 전혀 느끼지 않는다. 이런 끊김 없는 경험을 제공하는 것이 넷플릭스의 강점이다.
넷플릭스 시스템 디자이너는 야근하지 않는다
넷플릭스가 이렇게 일관된 사용자 경험을 제공하는 비결은 디자인 시스템에 있다. 디자인 시스템이란 쉽게 말해, 하나의 요리법을 여러 요리에 적용할 수 있는 레시피와 같은 것이다. 이 시스템은 색상, 글꼴, 버튼 크기 같은 디자인 요소들을 디자인 토큰으로 정의해 모든 디바이스에서 일
관되게 적용되도록 한다.
여기서 설명한 ‘디자인 토큰’을 쉽게 이해하려면 토큰을 건축 재료라고 생각하면 된다. 집을 짓기 위해서 벽돌, 시멘트, 창문 등의 재료가 필요하듯이, 디지털 디자인에서도 색상, 글꼴 크기, 간격 같은 재료들이 필요하다. 이때 디자인 토큰은 이런 재료들을 일관된 방식으로 미리 정의한 작은 단위라고 볼 수 있다.
Brand Logo, Symbol / 출처 : Netflix예를 들어 넷플릭스의 브랜드 색상인 빨간색은 디자인 토큰으로 저장된다. 그래서 넷플릭스는 PC, 모바일, TV 어디서든 같은 빨간색을 사용한다. 이 시스템 덕분에 각기 다른 플랫폼에서도 일관된 디자인을 유지할 수 있는 것이다. 전문적인 용어로 말하면 디자인 토큰은 UI 요소의 속성—색상, 타이포그래피, 그림자, 모서리 반경 등—을 프로그래밍적으로 정의한 변수나 상수로, 디자이너와 개발자가 일관된 UI 경험을 구현할 수 있게 해준다.
이를 통해 디자인 시스템은 전반적인 일관성을 유지하고, 변경사항이 생기더라도 한 번에 수정할 수 있는 유연성을 제공한다. 버튼 색상을 수정할 때 토큰을 변경하면 해당 색상을 사용하는 모든 요소가 자동으로 업데이트되는 것이다.
더 나아가 넷플릭스는 컴포넌트 기반 설계를 통해 디바이스 간의 디자인을 효율적으로 관리한다. 컴포넌트는 특정 기능을 수행하는 디자인 조각으로 버튼, 메뉴, 카드와 같은 UI 요소들을 의미한다. 이러한 컴포넌트는 모든 디바이스에서 재사용 가능하며, 한 번의 변경만으로 전체 시스템에 적용할 수 있다. 이를 통해 넷플릭스는 디자인 유지 비용을 줄이면서도 지속적인 일관성을 보장한다.
3억 명의 이용자, 그리고 2억 개의 넷플릭스
넷플릭스의 디자인 시스템은 다른 OTT 서비스와 비교했을 때 몇 가지 독보적인 강점을 자랑한다. 첫째는 개인화된 사용자 경험이다. 넷플릭스는 수많은 시청 데이터를 분석해 각 사용자에게 맞춤형 UI를 제공한다. 공포 영화를 자주 시청하는 사용자에게는 공포 테마의 콘텐츠가 눈에 띄게 표시되며, 시청 기록에 따라 콘텐츠 추천과 인터페이스 배치도 달라진다. 3억 명이 이용 중인 인터페이스가 제각기 모두 다를 수밖에 없는 이유이다.
또한 넷플릭스는 다국어 지원과 현지화에 탁월한 시스템을 갖추고 있다. 넷플릭스는 190여개 국가에서 서비스되며, 다양한 언어와 문화를 고려한 현지화된 UI를 제공한다. 이는 단순한 언어 변환을 넘어서, 각 나라의 콘텐츠 소비 패턴과 문화적 특성을 반영한 인터페이스를 제공하는 것이다. 특정 국가에서는 드라마 시리즈가 더 잘 보이도록 디자인되기도 하는 식이다.
마지막으로 넷플릭스는 빠르게 변화하는 기술 환경에 대응할 수 있는 유연한 디자인 시스템을 갖추고 있다. 새로운 기술이 등장하면 디자인 시스템에 그 변화를 적용할 수 있는 구조적 준비가 되어 있다. 넷플릭스는 AR(증강현실)이나 VR(가상현실)과 같은 차세대 기술에 맞춘 UI를 개발할 때도 현재의 디자인 시스템을 확장해 사용할 수 있는 준비가 되어 있다. 이를 통해 넷플릭스는 앞으로도 경쟁 OTT 서비스보다 한 발 앞선 사용자경험을 제공할 수 있는 능력을 유지하고 있다.
이렇게 우리가 매일 만나는 다양한 디바이스의 넷플릭스 서비스 내부에는 우리가 알지 못했던 강력하고 지능적인 디자인 시스템의 비밀이 숨겨져 있다.
Q. 넷플릭스는 어떤 장비에서도 동일한 서비스를 제공하기 위한 디자인 시스템이 있다고?
반응형 디자인과 디자인 토큰을 기반으로 모든 디바이스에서 일관된 사용자 경험을 제공하며, 개인화와 현지화를 통해 각 사용자에게 맞춤형 UI를 구현하는 시스템이다.
[저자소개] <미디어 시크릿> 넷플릭스와 유튜브 뒤에 숨겨진 비밀들
[YES24] <미디어 시크릿> 넷플릭스와 유튜브 뒤에 숨겨진 비밀들
https://www.yes24.com/product/goods/146352493
