넷플릭스의 텍스트
넷플릭스의 타이틀과 소개 글을 살펴본다.
넷플릭스를 자주 본다.
그래서 넷플릭스 앱을 보면서 들었던 생각을 한 번 정리해보았다.
넷플릭스는 심플한 구성을 가지고 있고, 꼼꼼한 정보도 제공하고 있다.
타이틀(콘텐츠의 로고), 썸네일, 텍스트의 사용에 대해서 의식의 흐름대로 써보았다.
전체 화면 훑어보기
로그인하는 프로필과 시기에 따라서 구성이 매번 달라진다.아이폰 X의 기준으로 대강 6개 화면이 이어져 있다. 꽤 길고, 꽤 많은 콘텐츠가 표시된다.
5개의 넷플릭스 프로필을 사용 중인데, 프로필마다 표시되는 콘텐츠와 분류가 다르다. 넷플릭스는 세부적인 카테고리를 가지고 있고, 그 카테고리를 적극적으로 노출하는 편이다. 주로 사용하는 프로필에서는 내가 본 콘텐츠와 비슷한 콘텐츠를 찾아준다.
굵은 글자로 표시된 부분은 다른 부분과 다른 UI를 가지고 있는 부분이다.
대부분의 링크는 콘텐츠의 정보로 연결되고, 직접 영상을 재생 하는 부분은 크게 세 곳이다.
붉은색 라인으로 표시된 부분이 영상(콘텐츠)을 직접 재생한다. 첫 화면은 이미지로 가득하고 이후는 텍스트가 가득하다.
곧바로 영상을 시청하는 붉은 선의 플로우를 타지 않은 사용자는 두 단계를 경험한 후, 영상을 시청하게 된다. 첫 번째는 정보량은 적지만 여러 측면에서 분류된 이미지, 두 번째는 텍스트로 전달되는 중립적인 정보다.
이쯤에서 넷플릭스가 부르는 콘텐츠가 앱에서 표현되는 방식이 국내 서비스와 다르다는 생각이 들었다.
상태에 따른 메뉴 변화
첫 화면에서 다음 화면으로 이동을 어떻게 하는지 살펴보자.
2018년 이후 '공개 예정' 부분이 하단 탭 바에 추가되었다.다른 앱들과 비슷한 수준의 탭 바를 가지고 있는데, 스크롤할 때와 영상을 하나 정도 재생한 후에 탭 바가 변한다. 넷플릭스는 첫 화면 상단에 '미리 보기'가 있어서 스크롤 시에 최초의 위치에서 30% 정도까지는 상단 메뉴의 배경색 투명도가 서서히 감소한다.
상단 내비게이션의 경우, 간단하게 되어 있다. 다른 앱과 다른 점은 각 카테고리를 충분히 길게 표시하는 방식을 택했다는 점이다. 텍스트로 간결하지만 충분한 여백을 사용해서 표현되고 있다.
하지만 메뉴가 바뀌어도 구조는 비슷하다.
타이틀도 콘텐츠다.
국외 서비스인 넷플릭스, 아마존 프라임과 국내 서비스인 왓챠, 웨이브의 차이는 여러 가지가 있다. 어떤 차이는 쉽게 극복할 수 없고, 디자이너의 역량과 스타일이라고 하기도 어렵다.
넷플릭스와 비슷한 레이아웃을 만들기 위해서는 이미지, 텍스트와 같은 콘텐츠를 통제해야 한다. 텍스트로 표현되는 콘텐츠의 '제목'과 '설명'을 살펴보자.
가장 먼저 보이는 부분은 ‘미리 보기’다.
2018년에서 2020년까지의 변화미리보기의 경우는 2018년 버전에서 많은 변화가 있었다. 넓은 영역에 텍스트가 많이 표시되었고, 분명하게 전달하는 것에 집중한 듯하다. 재생하기 버튼의 변화는 참고할 만하다. 대개의 경우, 중요한 버튼은 메인 컬러로 하는 경우가 많다. 넷플릭스는 이메일에는 빨간 재생 버튼이 있었지만, 앱의 경우는 흰 배경의 버튼을 사용하고 있다.
넷플릭스는 텍스트를 많이 사용하지만, 다른 영상 서비스와 달리 제목을 중복해서 텍스트로 쓰지 않는다. 미리 보기를 보면, 상단 바의 구성은 각 콘텐츠의 타이틀은 이미지로 되어 있다. 영상은 세로 사이즈로 편집되어 있고, 영상 위에 표시되는 UI의 색상은 콘텐츠에 따라 유연하게 변한다.
영상은 블러 처리된 영상에서 로딩이 끝나면, 자동으로 재생되기 시작한다.
콘텐츠에서 타이틀의 사용은 콘텐츠의 제목을 다시 표시하지 않고, 그래서 썸네일의 레이아웃을 간단하게 만든다. 리스트를 살펴보자.
2020년 넷플릭스의 콘텐츠 썸네일이다. 타이틀과 콘텐츠 썸네일이 분리되어 각각 사용되기 때문에 다양한 방식으로 활용할 수 있다.
콘텐츠를 표현되는 정보가 이미지처럼 결합되어 있다.
'헬보이 2: 골든 아미'의 경우, 서로 다른 타이틀과 썸네일로 하나의 콘텐츠를 다양한 모습으로 보여줄 수 있다. 그리고 타이틀이 분리되어 있기 때문에 다른 나라의 언어로 서비스될 경우, 해당 로고를 각각의 언어로 표시한다. 디바이스별로 다른 화면 크기에 맞추는 작업도 훨씬 더 용이할 것으로 보인다.
자체 제작 콘텐츠를 표시하는 경우, 붉은 'N'자로 로고가 단순화되었다. 자체 제작한 콘텐츠의 경우는 일정한 규칙을 유지하여 배치된다.
'오리지널' 콘텐츠의 경우는 다른 콘텐츠보다 넓은 면적을 사용하는데, 마찬가지로 타이틀과 썸네일 배경이 분리되어 있다.
예고편을 미리 재생하는 부분의 경우에도 예고편의 재생 크기는 일정하다. 재생 버튼이 있는 경우는 썸네일이지만, 영상의 경우는 거의 즉시 재생한다. 콘텐츠 정보의 경우는 타이틀을 텍스트로 표시하지만, 공개 예정의 경우는 타이틀을 이미지로 표시하고 있다.
한 번 보기 시작하면, '시청 중인 콘텐츠'로 분류되어 해당 태스크에 맞는 메뉴를 제공한다. 즉시 재생해서 보거나, 저장하거나, 평가하거나, 목록에서 삭제할 수 있다.
넷플릭스에서는 아이콘 사용이 매우 제한적이며 아이콘을 사용한 액션 중에서 상세 정보는 자주 노출된다. 첫 화면에서 말하는 것처럼 대부분의 링크는 상세 정보로 이어지기 때문이다.
상세정보의 텍스트
상세 정보의 텍스트의 경우도 주목할 점이 많다.
먼저 영상 콘텐츠의 정보는 상당히 상이한 정보를 한 번에 표시되어야 하는 경우가 많다. 넷플릭스의 경우는 상세 정보 페이지에서 많은 정보를 마크나 배지처럼 표시한다. 가장 상위의 정보는 자체 제작 콘텐츠 여부이며, 그 이후에는 콘텐츠의 타이틀, 그 이후 추가 정보다.
시즌이 있는 경우는 시즌을 표시하고, 재생 버튼을 표시한다.
또 하나 부분은 각 콘텐츠와 에피소드를 설명하는 텍스트다. 이 텍스트가 넷플릭스의 특징 중의 하나다. 모든 설명은 일정한 길이의 텍스트로 되어 있다. 어떤 설명은 한 줄이고, 어떤 설명은 5줄인 경우가 없다. 마찬가지로 말줄임표(...)도 없다. 내 아이폰 기준으로 거의 모든 콘텐츠의 설명이 3줄 정도의 분량을 유지하고 있다. 이 설명을 쓰는 작가가 따로 있다고 들었다.
첫 화면에서는 일반 텍스트의 노출을 절제하고 있지만, 상세 정보 페이지에서는 충분한 분량의 정보를 텍스트를 전달한다.
개인적으로 프로필과 해당 텍스트를 잘 보면, 평론가의 별점이나 다른 사람의 리뷰에 신경 쓰지 않고 내가 보고 싶은 장르와 작품에 집중할 수 있다.
텍스트와 콘텐츠, 그리고 디자인
많은 사람들이 심플한 디자인을 추종하는 편이다. 하지만 대부분의 상품은 충분한 정보를 제공해야 팔리는 경우가 많다.
충분한 정보에는 제품 자체 정보뿐 아니라, 결정에 도움이 되는 사회적 영향력을 표시하는 별점이나 평점, 리뷰와 사용기까지 포함하는 경우가 많다. 이 많은 정보를 '잘' 디자인해서 전달하는 것은 쉽지 않다. 경우에 따라 어떤 부분은 '생략'해야 한다.
넷플릭스의 콘텐츠가 상품이라고 하면, 그 상품의 썸네일, 소개, 정보가 텍스트로 일정하게 정리되어사용자가 지나가는 경로와 각 단계에 적용된다. 넷플릭스의 정보는 자체 가공된 상태로 제공되고, 일정한 패턴으로 제공된다. 그리고 콘텐츠 정보는 예고편 동영상과 포스터와 유사한 썸네일, 세부적인 텍스트로 전달된다. 콘텐츠의 장면을 별도로 담은 스크린샷은 없다.
콘텐츠에 대한 정보를 관리하기 때문에 콘텐츠의 타이틀 썸네일을 변경하고, 노출 위치와 얼마나 반복해서 노출할지 결정하는 전략을 짤 수 있다. 디자이너의 입장에서 콘텐츠를 구성하는 정보가 일정하면 공간을 낭비하지 않고, 중요한 콘텐츠를 표시할 공간을 확보할 수 있다. 또 규칙을 깨는 실험적인 시도도 할 수 있다.
UI 디자인과 텍스트
최근에는 UX Writing에 대한 글도 가끔 보이는데, 모든 콘텐츠는 이야기를 담고 있고, 이야기는 일관성과 흐름이 중요하다. 그리고 이야기는 UI의 기능적인 부분을 설명하는 것 이상의 의미를 전달할 수 있다. UI의 글 쓰기에 대한 생각을 할 수 있다면, UI가 제공하는 콘텐츠에 대해서도 더 많은 이야기가 필요하다.
앞으로는 시스템이나 플랫폼의 사용자가 접하는 콘텐츠가 경쟁 요소가 될 것 같아서 넷플릭스의 사례를 살펴보았다. UI 디자인에서 오브젝트의 형태와 구성을 단순하게 만드는 디자인을 하면, 그 반작용으로 다른 부분에 대한 세밀한 접근이 필요하다. 그래서 기존에 많이 간과되었던 텍스트 활용 방식의 중요성, UI에서 사용되는 특성을 잘 반영한 텍스트 스타일의 위계와 타이포그래피의 의미도 점점 더 커질 것으로 예상된다.
다른 쇼핑몰 디자인을 바꿔볼 때, 넷플릭스 같은 스타일을 적용해보는 것도 재미있을 것 같다.