Soop —
Stream, Watch, Chat, Live
Project Overview 이 프로젝트는 Soop 스트리머의 라이브 방송 경험과 시청자의 방송 시청 경험을 향상시키기 위해 시청자 검색 기능 추가, 라이브 방송 정보 UI 개선, 그리고 정보 구조 최적화를 목표로 합니다.
시청자 검색
시청자 검색 기능을 추가하여 스트리머가 현재 방송을 시청하는 시청자를 실시간으로 찾을 수 있도록 최적화하고 관리 및 소통을 원활하게 합니다.
라이브 방송 정보
스트리머가 진행하는 방송 정보를 보다 쉽게 확인할 수 있도록 UI를 개선하고, iPhone의 손쉬운 사용(Accessibility) 중 한 손 모드와의 충돌을 방지하는 디자인을 적용합니다.
Information Hierarchy
불필요한 정보를 정리하고 잘못된 연결 흐름을 수정하여 정보의 계층 구조를 명확하게 정리하고 직관적인 탐색이 가능하도록 개선합니다.
방송 & 시청자 정보 접근
방송 및 시청자 정보에 접근하는 과정을 개선합니다.
As-Is
스트리머의 라이브 방송에 접속 후, 시청자 수가 노출된 버튼을 클릭해 방송 및 시청자 정보에 접근합니다.
방송 정보임을 알기 어렵기 때문에, 방송 정보임을 알 수 있는 직관적인 UI가 필요합니다.
To-Be
기존 구독하기 기능을 하단 Chat Input 옆 선물하기에 포함시키고, 방송 & 시청자 정보에 쉽게 접근할 수 있는 UI를 추가합니다.
Soop에서 스트리머의 팬이 되는 과정은 금전적 후원을 기반으로 합니다. 이에 따라 결제와 그에 따른 보상, 그리고 기존의 구독하기 기능은 모두 Chat Input옆에 위치한 ‘선물하기’로 통합시킵니다.
방송 & 시청자 정보 조회
방송 & 시청자 정보의 정보의 위계 구조를 개선합니다.
As-Is
시청자 수, 방송 시간, 카테고리 등의 정보를 담고 있는 방송 정보와 스트리머의 방송을 시청하고 있는 모든 시청자 정보가 표시됩니다.
방송을 시청하고 있는 시청자 수가 많은 경우, 특정한 시청자를 찾기 어렵습니다. 시청자 수, 방송 시간, 카테고리, 해상도, 화질 외 더 많은 방송 정보를 담아야 합니다.
To-Be
탭을 통해 방송 정보와 시청자 정보를 구분합니다. 방송 시간, 시청자 수 등 더 직관적으로 정보를 표시합니다. 스트리머의 방송국에 접근하거나, 스트리머에게 쪽지를 보내는 과정을 더 단순화시킵니다.
스트리머의 라이브 방송은 많은 콘텐츠들을 포함하고 있습니다. 스트리머는 시청자가 제시한 다양한 미션을 수행하고, 방송 내에서 공지를 하며, 시청자와 쪽지를 주고받으며 소통합니다. 그러나 미션은 하단 Chat Input 옆 선물하기에서, 공지는 Chat에서, 쪽지는 스트리머를 탭한 후 쪽지 보내기에서 이루어지고, 이 행동들은 모두 다른 영역에서 이루어집니다.
탭을 이용해 방송 정보와 시청자 정보를 나누고, 방송 내에서 이루어지는 다양한 콘텐츠를 포함할 수 있도록 Bottom Sheet의 Height값을 추가합니다.
시청자 검색 과정
시청자를 검색하는 과정을 개선합니다.
As-Is
시청자 수, 방송 시간, 카테고리 등의 정보를 담고 있는 방송 정보와 스트리머의 방송을 시청하고 있는 모든 시청자 정보가 표시됩니다.
방송 정보 영역의 position이 fixed되어 있어, 시청자 리스트를 스크롤할 수 있는 영역이 좁아, iPhone의 손쉬운 사용(Accessibility) 중 한 손 모드와 충돌하는 현상이 발생합니다.
To-Be
검색량이 많을 것으로 예상되는 그룹 순으로 시청자를 나누어 배치합니다. 상단의 탭과 Search Input의 Position을 Fixed로 고정하고, Scroll 영역을 더 넓게 수정합니다.
특정 시청자 검색
Search Input을 통해 특정 시청자를 검색하는 과정을 추가합니다.
As-Is
리르파르 닉네임을 가진 시청자를 스크롤해 찾습니다.
To-Be
Search Input에 리르파르를 검색합니다.
시청자 정보 확인
시청자 정보 내 정보 위계 구조를 개선하고, 잘못 연결되어 있는 UX Flow를 개선합니다.
As-Is
스크롤 과정을 통해 찾은 시청자를 탭한 후, 시청자 정보를 확인합니다.
라이브 방송을 시청중인 시청자 리스트 중에는 현재 라이브 방송을 진행하는 스트리머도 포함되어 있습니다. 일반 시청자와 Soop 스트리머를 구분할 수 있는 UI 디자인이 필요합니다.
Soop을 이용하는 모든 사용자는 ‘방송국’이라는 개인 공간을 소유하고 있습니다. 개인 방송국에 더 쉽게 접근할 수 있는 방법이 필요합니다.
SAYBUZZ 광고 서비스는 플랫폼과 크리에이터의 광고 지면에 누구나 손쉽게 광고를 게재할 수 있도록 중개하는 서비스입니다. SAYBUZZ에 아이템을 등록하지 않은 시청자의 경우 “SAYBUZZ 아이템을 등록해보세요!”라는 배너가 노출되지만, 이 배너를 탭할 경우 본인의 아이템을 등록하는 단계로 이어집니다. 해당 시청자의 배너를 탭했을 경우, 해당 시청자의 SAYBUZZ 아이템 등록을 유도할 수 있는 과정으로 이어져야 합니다.
To-Be
시청자 정보, 해당 시청자와 할 수 있는 상호작용, SAYBUZZ 아이템 등록, 광고로 화면을 구성합니다. 해당 시청자가 Soop의 스트리머이고, 라이브 방송을 진행중일 경우, 이를 확인할 수 있는 UI 디자인을 추가합니다.
해당 시청자가 SAYBUZZ 아이템을 등록하지 않았을 경우, 등록되지 않았다는 메세지와 함께 등록하라고 알려주는 과정으로 이어져야 합니다. 본인이 아이템을 등록하지 않았을 경우, “등록하기”라는 메세지가 함께 노출됩니다.
쪽지 보내기
특정 시청자에게 쪽지를 보내는 화면의 UI 디자인을 개선합니다.
As-Is
시청자 정보에서 “쪽지 보내기"를 탭해 쪽지 내용을 입력하고, 전송합니다.
하단 레이어에 방송 정보, 시청자 정보 등이 혼재되어 있어 배경과의 시각적 분리가 명확하게 되어있지 않습니다.
쪽지를 입력하는 공간이 좁고, 쪽지를 보내는 Action이 명확하게 정의되어 있지 않습니다.
쪽지를 보내고자 하는 사용자는 닉네임으로 검색을 진행했을 가능성이 높지만, 쪽지에는 “아이디”로 명시되어 있어 사용자의 인지 흐름을 방해할 수 있습니다.
특정 시청자에게 쪽지를 보내는 과정은 크게 두 가지로 나뉘는데(첫 번째, “Live Chat > 사용자 탭 > 쪽지보내기”와 두 번째, “방송 정보 > 사용자 검색 > 사용자 탭 > 쪽지보내기”), 최종적으로 쪽지를 보내는 화면의 UI 구성은 두 경로 간에 현저한 차이가 있어, 사용자 경험의 일관성을 위해 이를 통일할 필요가 있습니다.
To-Be
Background Stack을 통해 사용자가 Task의 흐름과 단계를 보다 직관적으로 인식할 수 있도록 합니다. “보내기” 버튼을 통해 보다 직관적은 CTA를 유도합니다. 쪽지를 보내는 공간의 Height를 늘려 텍스트를 입력하는 과정을 방해받지 않도록 합니다.
선물하기
결제와 그에 따른 보상이 따르는 모든 행동을 선물하기로 통합시킵니다.
As-Is
라이브 화면 하단, Chat Input 옆에 위치한 버튼을 통해 “선물하기”에 접근합니다.
To-Be
라이브 화면 하단, Chat Input 옆에 위치한 버튼을 통해 “선물하기”에 접근합니다.
선물하기 > 후원하기
UI 전반에 걸쳐 시각적 부담을 줄이고, 기능과 목적을 명확하게 전달하는 방향으로 개선합니다.
As-Is
스트리머에게 선물할 수 있는 다양한 방법을 탐색합니다. 기존에 보유한 캐쉬를 후원 메세지(옵션)와 함께 스트리머를 후원하고, 보유한 캐쉬가 없다면 충전할 수 있습니다.
금전 거래와 관련된 화면에서 필요한 정보와 목적을 명확하게 해야할 필요가 있습니다. 후원 메세지를 입력하는 공간이 좁아 전체 메세지를 한 눈에 확인하기 어렵습니다.
To-Be
보유한 캐쉬에 대한 정보와 캐쉬를 충전하는 버튼의 시인성을 높여 디자인의 목적을 명확하게 정리합니다.
선물하기 > 구독하기
결제와 그에 따른 보상이 따라오는 행동을 하나로 묶어 제공합니다.
As-Is
스트리머에게 선물할 수 있는 다양한 방법을 탐색합니다. 기존에 보유한 캐쉬를 후원 메세지(옵션)와 함께 스트리머를 후원하고, 보유한 캐쉬가 없다면 충전할 수 있습니다.
금전 거래와 관련된 화면에서 필요한 정보와 목적을 명확하게 해야할 필요가 있습니다. 후원 메세지를 입력하는 공간이 좁아 전체 메세지를 한 눈에 확인하기 어렵습니다.
To-Be
선물하기 > 구독하기 탭으로 통합시켜 유사한 행동과 보상을 받는 기능들을 하나로 정리합니다. 사용자가 구독하기 전, 선택한 옵션과 행동을 시각적 명도 대비를 이용해 명확하게 전달합니다. CTA 버튼을 통해 결제 행동을 명확하게 유도합니다.
스트리머 구독 옵션은 크게 두 가지(티어1, 티어2)가 있습니다. 그러나 3배가 넘는 구독료에 비해, 두 옵션 간의 차이가 명확하게 드러나있지 않습니다. 정책을 만들어, 사용자에게 명확하게 제시할 필요가 있습니다.