이번 스터디에서는 트위치를분석해본다.
매인 화면을 중점으로 웹과 앱 모두 많이 사용되는 서비스로 웹페이지에서 제공될때와 앱 페이지에서 제공될때 같은 디자인이 디바이스와 서비스 형식에 따라 어떤 방식으로 다르게 디자인 되어야 하는지 알아보자.
메인화면
웹
정확한 거터 사이즈는 알 수 없으나, 웹 사이즈 1920 x 1080을 기준으로 했을때 마진을 12px로 사용하는데, 꽤나 마진을 좁게 사용하는 편이다.
메인 화면에서는 영상의 썸네일이 주로 올라오기 때문에 공간을 크게 쓰는듯 하다.
폰트는 2배수 12-18px 까지 사용 하고 타이틀과 서브타이틀은 24-20px까지 크게 사용한다.
메인의 내가 구독하는 스트리머의 생방송과 트위치의 프로모션 방송이 슬라이드 형식으로 제공된다. 썸네일은 664 x 375 픽셀로 사이즈가 굉장히 크다.
오른쪽에는 내가 지금 구독하는 채널의 목록과 온/오프라인 상황, 새로 올라온 동영상 추천 채널이 리스트 형식으로 제공된다.
하단에는 추천 채널 영역으로 지금 진행되는 생방송중 내 구독 채널과 비슷한 채널이 추천된다.
형식은 썸네일 형식으로 썸네일은 375x212로 썸네일-프로필사진-타이틀-닉네임-방송 카테고리-태그 순으로 나와있다.
각 컴포넌트들 사이의 마진은 역시 2배수로 떨어진다.
서브타이틀-컨텐츠 사이는 20px,각 요소들 사이의 마진은 12px을 기본으로 사용하고 있고 컴포넌트 사이의 거리는 최소 30픽셀 이상을 사용한다.
팔로우 중인 채널의 목록수를 줄이고 추천 채널의 목록을 늘려신규 채널로의 유입을 늘리고 추천채널을 모두 지금 생방송을 진행중인 채널로만 추천해 즉시 생방송으로 유입이 가능하게 함과 동시에 팔로워 검색을 이 바로 밑에 배치해서 검색을 위해서는 추천채널을 거치게끔 만들었다는 점이 특이했다.
모바일
모바일은 376 x 812 사이즈를 기본으로 분석했다. 모바일 마진은 홈화면기 기준 10px/채널상세 페이지 기준 14px로 메인화면을 가장 넓게 쓰고 상세 페이지로 들어가면 줄어든다.
컴포넌트들 사이의 마진은 컴포넌트 단 사이는 34, 각 컴포넌트 사이의 마진은 12-14px 로 떨어지는 걸로 보아 2배수로 맞춘것을 알 수 있다.
역시 썸네일 위주의 구성으로 생방송채널들이 제일 상단에 보여진다. 그 밑으로 생방송이 진행중인 추천 채널들, 맨 밑에는 팔로우 채널 중 오프라인 상태인 채널들을 리스트로 보여준다.
단순한 구성으로 사실 영상 스트리밍 서비스를 제공하는 앱으로 가장 기본적이지만 가장 기능적인 디자인이라는 생각이 든다.
하지만 한가지 아쉬운것은 웹 페이지에서는 내가 팔로우중인 채널의 생방송을 더 사이즈가 크게 강조해 보여주는데 앱 UI 에서는 모든 방송의 썸네일이 똑같아 내가 팔로우한 채널과 그렇지 않은 채널의 구분이 잘 되지 않기 때문에 사이즈를 다르게 설정하는게 더 낫지 않았을까 하는 생각이 든다.
총평
웹 페이지의 내가 팔로우 중인 채널에 집중한 레이아웃이 앱 화면에서는 보이지 않아 아쉬웠다.
트위치는 내가 팔로우하고 팬인 스트리머의 업데이트나 방송을 보는 비중이 랜덤으로 추천된 스트리머의 방송을 보는 비중보다 훨씬 높기 때문에 구독중인 스트리머를 강조하고 그 스트리머의 클립 영상을 상단에 올리면 어떨까
GNB, 헤더
웹
세로사이즈 60px 로 사용하고 있다.
텍스트 사이즈는 24px 로 꽤 큰 텍스트를 사용한다.
GNB 구성은 단순한 편으로 팔로잉 / 탐색 / 알림 / 쪽지 / 프로필 로 구성되어 있고 탐색 오른쪽의 햄버거 메뉴에 너무 많은정보들이 들어있어 정보 구조가 한눈에 들어오지 않는다.
물론 팔로잉과 카테고리가 가장 중요한 항목인건 알겠지만 그렇다고 다른 정보들을 이렇게 서랍에 마구잡이로 쑤셔넣은 옷처럼 넣어놨어야 했나 라는 생각이 든다.
너무 복잡한 기타일반 햄버거 메뉴
모바일
모바일은 헤더와 GNB 모두 세로 55px로 높이가 동일하다.
gnb의 구성은 팔로잉/찾기/탐색 으로 아주 간단하게 구성되어있어 한눈에 들어온다.
터치범위는 55 x 55 로 가로세로 넓이를 넓게 사용하고 있다.
gnb 항목이 적은것은 좋지만 팔로잉을 제외한 찾기와 탐색의 기능에 큰 차이점이 없기 때문에 굳이 두개가 같이 gnb 에 들어있기보단 하나를 제외하고 마이페이지에 바로 접근 할 수 있는 버튼을 넣었다면 어땠을까?
헤더도 역시 55px로 프로필 / 방송 시작/ 알림/ 귓속말 / 통합검색 을 제공한다.
프로필을 터치하면 마이페이지로 진입 할 수 있다.
웹에서는 프로필 드롭다운 메뉴를 통해 진입 가능한 기능중 자주 사용하는 기능들을 상단에 배치했다.
총평
웹 gnb는 보기에는 깔끔해 보이지만 더러운 방을 치울때 서랍에 모든 물건을 넣어 겉으로만 깨끗하게 보이도록 만든 느낌이었다.
반면 모바일 gnb와 헤더는 깔끔하다고 느꼈다.
버튼의 수를 최대한 줄여 직관적이지만 위에서 말했던것처럼 gnb에 분류가 모호한 페이지를 동시에 함께 넣어둔것이 아쉽다.
헤더는 웹과 달리 자주 쓰는 기능들은 마이페이지에 꺼내 배치한것은 아주 좋지만 상단에 검색창이 바로 없고 검색 버튼을 한번 더 터치해야 검색 기능에 접근이 가능한 점은 웹과의 통일성이 떨어져 보인다는 느낌을 받았다.
탐색
웹
탐색은 게임이나 방송의 주제를 나눈 카테고리별로 볼 수 있게 만든 페이지로 맨 상단에는 내 활동 맞춤 카테고리를 제공한다.
나의 경우 주로 게임 방송을 시청하기 때문에 게임 카테고리가 추천으로 상단에 뜨는것을 알 수 있다.
추천 카테고리 하단에는 카테고리 대분류를 버튼으로 제공하고 그 밑으로 트위치 에서 프로모션중인 방송이나 채널이 추천된다.
대분류를 띄워주는것은 좋지만 대체 마지막 카테고리인 크리에이티브 버튼이 왜 저렇게 깨졌는지 이유를 알 수 가 없다.
영어에서 한글로 번역되면서 생긴 텍스트 공간의 부족때문인것 같은데 트위치처럼 큰 회사에서 저런것하나 신경쓰지 못한다는 사실은 조금 아쉽다.
대분류를 들어가면 추천 소분류가 뜨고 그 밑으로는 쭉 생방송 썸네일만 뜨는 구성이다. 여기에서도 역시 내 활동에 맞춘 카테고리 소분류 (ex. 게임 장르)를 추천해준다.
모바일
전체 화면 오프셋은 14픽셀로 메인보다 공간을 덜 쓴다.
카테고리와 생방송 채널을 분리해서 제공하는 부분은 웹보다 더 사용이 편하다고 느껴졌다.
앱 화면의 상단에 대분류 카테고리를 제공하고 리스트 형태로 카테고리를 제공한다.
리스트 컴포넌트는 카테고리 커버 이미지 타이틀-서브타이틀-태그 로 구성되어 있으며 각 요소 컴포넌트 사이의 마진은 14픽셀이다.
그리고 정렬과 필터를 사용자 맞춤화 할 수 있는 기능을 제공하고 있는것이 웹과의 가장 큰 차이점 이라고 할 수 있을것 같다.
총평
제한된 모바일 화면에서 사용자가 원하는 정보만을 볼 수 있게 정렬과 필터 기능을 넣은것은 좋은 방법이라고 생각한다.
웹처럼 하단으로 영상의 썸네일을 무한정 나열하는 배치를 고집하지 않고 카테고리와 생방송 채널의 탭을 분리한것도 모바일 뿐 아니라 웹에서도 이렇게 제공한다면 좋지 않았을까? 라는 생각을 하게 한다.
세부 카테고리에 대한 불만도 있다.
물론 너무 다양한 게임들의 방송이 진행되고 있고, 상단에 추천 게임 방송이 있다고 하더라도 스트리머에 국한되지 않고 게임에 따라 시청하는 시청자가 분명히 존재하고 소분류 토픽 자체를 팔로우 할 수 있는 기능을 넣었음에도 불구하고 리스트 형태로 소분류의 종류를 제공하지 않고 오직 사용자 검색에만 의존하는것은 많이 아쉽다.
마치며
웹과 앱은 사용할 수 있는 공간이 차이가 많이 나기 때문에 웹에서 제공하고 있는 서비스를 앱에서 같은 수준으로 제공하기란 정말 어렵다.
웹과 앱 모두에서 UI나 UX적으로 아쉬운 부분들이 있기는 했지만
동시에 공간의 제약이 있는 앱화면을 어떻게 효과적으로 사용할 수 있을지에 대한 트위치의 고민이 느껴졌다.
동시에 웹을 앱이나 모바일 화면으로 옮겨올때에 가장 무너지기 쉬운것은 정보의 위계구조라는 점을 새롭게 느끼게 되었던것 같다.
디자인을 하면서 무의식적으로 모바일의 제한된 공간을 제약이라고 생각해왔는데 이번 스터디를 진행하며 제한된 공간이 아닌 더 깔끔한 레이아웃이 가능한 공간이 될 수 도 있구나 라는 깨달음도 얻을 수 있었다.
