떳떳(?)한 디자인의 과정(오픈패스 UXG3과정)
무작정 베끼지 않고 디자인하는 방법 - 유튜브 리디자인 포트폴리오
본 글은 오픈패스에서 UX General 과정을 통해 유튜브 개선안을 제시한 일련의 과정을 작성한 글입니다. 기존에는 무작정 래퍼런스를 뒤지다가 맘에 드는 디자인을 찾으면 따라서 그리던 파렴치한(?) 작업을 하는 것에서 벗어나 폭넓은 리서치와 근거있는 디자인을 해본 경험을 잊지 않으려 작성하였습니다.
Desk Research
우선 프로젝트의 첫 스텝으로 데스크 리서치를 실행하였습니다. 구글링을 통해 유튜브 서비스의 가치, 시장 점유율 , 타 서비스와의 차이점 등 다양하고 방대한 정보를 수집하여 유튜브 서비스에 대한 이해를 빠르게 높였습니다. 프로젝트를 하며 중요한 점은 서비스에 대한 이해를 빠르고 깊게 해야 한다는 점을 확인할 수 있었습니다.
�우리는 디자이너가 얼마나 프로젝트에 대한 이해도가 있느냐 Ownership을 가지고 디자인을 하느냐에 따라 그저 이쁘기만 한 디자인이 아닌 좋은 설계의 디자인이 될 수 있음을 알아야 합니다.
유튜브의 가장 주요한 가치는 자유에 대한 가치였습니다. (1. 표현의 자유 2. 정보의 자유 3. 기회의 자유 4. 소속의 자유) 또한 콘텐츠적, 기능적으로 다양하고 풍부한 모습을 띄고 있었습니다.
동영상 시청 서비스 시장에서의 초기 선점효과로 UX의 기준이 되고 있었으며, 국가와 인종 연령을 초월한 서비스의 성격상 일반적이고 직관적인 사용성을 가지고 있었습니다.
유튜브 서비스는 사용률이 카카오톡을 뛰어넘을 정도로 전 연령대에서 1위를 기록하였으며, 급속도로 성장하고 있는 모습을 보이고 있었습니다. OTT 시장도 코로나 상황에 따라 확대되었지만 강력한 후발주자들이 존재하고 있음을 확인할 수 있었습니다. (글로벌 MAU 19억 명, 국내 3300만 명, 일간 합계 사용시간 10억 시간, 50대 이상 연령층 사용률 90% 증가)
유튜브는 구글의 강력한 물적 인적 자원을 토대로 다양한 기능들이 존재하고 있음을 확인할 수 있었고 유튜브는 단순한 동영상 시청 플랫폼을 뛰어넘어 교육, 엔터테인먼트, 저널리즘의 다양한 플랫폼으로 성장하고 있음을 확인할 수 있었습니다.
그 결과 유튜브의 가장 주요한 특징과 성격인 Global, Free, Growth 세 가지의 키워드를 도출이 되었습니다.
Indepth Interview & Affinity Diagram
실제 유튜브 사용자를 모셔 1시간가량 인뎁스 인터뷰를 진행하였고 조원 개별로 1명씩 더 진행하여 총 9명의 유저 데이터를 수집하였습니다. 나아가 산발적으로 분산되어 있는 유저 보이스를 응집력 있는 정보로 만들기 위해 어피니티 다이어그램을 진행하여 제가 주목하는 인사이트들을 정리해보았습니다.
1. 사용하는 탭 또는 기능만 사용한다.
사용성에 있어서 큰 불편함에 대한 니즈 보이스는 없었습니다. 그에 반해 사용 행태가 사용하는 탭만 사용하거나 기능만 사용한다는 점이었습니다. 아주 많은 기능과 콘텐츠가 존재하였지만 실제 그 기능을 효과적으로 사용하는 사용자는 찾기 어려웠습니다. 단순한 동영상 시청을 통한 킬링타임 및 정보 탐색이 유튜브 서비스의 본질적 목적이기 때문입니다. 구글의 다양하고 강력한 기능들이 있었지만 사용자는 인식하지 못하는 경우가 많았습니다.
2. 영상 자체에 집중하지 않는다.
유튜브 사용행태에 있어서 가장 큰 특징이었습니다. 실제 동영상 시청을 위해 서비스에 접근 하지만 특정한 목적이 뚜렷하지 않아 (킬링타임 목적) 계속 다른 정보를 하는 탐색하는 사용성을 띄고 있었습니다.
댓글로 바로 넘어가거나 다음 관련 동영상 목록을 보거나 크리에이터 채널을 들어가 다른 동영상들을 파악하는 모습을 보였습니다.
3. 댓글 사용성 개선이 필요하다.
OTT 서비스 중 유튜브만의 가장 특별한 특징인 댓글에 대한 사용자 보이스를 확인할 수 있었습니다.
다만 국내 사용자를 배려한 사용성을 띄지 못해 아쉬움이 있었습니다. 댓글 언급이나 국가별 언어 필터 등이 없어 불편하다는 니즈 보이스가 있었습니다.
4. 영상 북마크가 산발적으로 이루어져 개선이 필요하다.
나중에 다시 보기 위한 영상 북마크 기능이 명칭에서 다양한 표현이 사용되고 있었고 실제 사용에 있어서도 자동 저장 기능이 있어 실제 다시 보기 위해 재생목록을 들어갔을 때 사용자에게 명확하게 인식이 되지 않을 뿐만 아니라 정리가 되지 않고 있었습니다. 실 사용자들의 이용 행태에 있어서도 각자 다른 방식으로 재생목록을 관리하고 있어 개선 필요성을 확인하였습니다.
�처음 진행해 본 유저 인터뷰에서 중요한 점은 역시나 사용자는 나보다 더 똑똑하고 서비스에 대해 잘 안다는 점을 잊지 말아야 한다는 것이었습니다. 지레짐작, 고정관념 등은 유저 인터뷰에서 지양해야 하고 공감과 질문의 자연스러운 연결은 지향해야 하는 것입니다. (인터뷰의 방향이나 인사이트를 얻고자 하는 Object에 대한 명확한 방향성은 필요합니다.)
Heuristic evaluation
10가지 항목의 Heuristics Evaluation을 통해 유튜브의 전체적인 사용성을 평가해보았습니다.
전체적인 화면을 모두 캡처하고 실제 사이즈를 재보거나 컬러 값을 확인하고 세부적인 메뉴명 등 UX writing, 전반적인 사용성, 세분적이고 디테일한 사용성을 확인하였고, 전체적인 시스템과 일관성, 표준성 등의 항목들도 평가해 보았습니다.
그중 사용자가 적은 인지적 노력으로 시스템을 사용할 수 있게 한다라는 항목이 타 항목에 비해서도, 타 서비스에 비해서도 낮은 점수를 받은 것을 확인할 수 있었습니다.
(메뉴의 그루핑이 적절한가? 메뉴명이 직관적인가? 한 화면에서 제공되는 콘텐츠나 요소 간의 상호 관련성이 있는가?, 최소한의 여백이 제공되고 있는가? 등)
유독 이 항목이 낮은 점수를 받은 이유를 생각해 보았을 때 유튜브 서비스의 단점을 확인할 수 있었습니다.
다양한 기능과 콘텐츠가 한 서비스 안에 묶여 있기 때문이라고 판단하였습니다.
�휴리스틱 평가를 통해 서비스의 알 수 없었던 서비스의 성격을 알 수 있었을 뿐만 아니라 구체적인 이유와 원인을 파악하는데 도움이 되었습니다. 전체적인 시스템과 일관성과 통일성에 대한 평가가 주요했습니다. 다만 구글에서 서비스하는 유튜브는 휴리스틱 평가에서 우수한 점수를 얻은 서비스였기 때문에 우수사례로 적절합니다. 잘 지켜지지 않는 서비스를 조사를 해보는 것도 도움이 될 것입니다.
Goal
이를 통해 유튜브 개선 프로젝트의 Goal을 세웠습니다.
'기존 경험을 최대한 유지하는 바운더리 안에서의 간편화 일원화 고도화'
유튜브의 장점은 다양하고 자유롭습니다.
콘텐츠적이면에서도, 또 기능적인 면에서도 그렇기 때문에 급속도로 성장할 수 있었고 강력한 서비스가 되었습니다.
하지만 그로 인해 오는 단점들도 발견할 수 있었습니다.
복잡하고 무겁다.
강력한 구글의 기술력 및 패밀리 앱에서 오는 기능들,
다국적 다양한 사용자의 니즈 보이스,
자유롭고 다양하지만 통제하기 어려운 일반 크리에이터들의 콘텐츠 등
유튜브는 장점이지만 단점으로서 서비스가 복잡하고 무거워졌습니다.
또 사용자 분석을 통해
첫째, 다양한 기능이 있지만 그것들을 제대로 활용하지 못하고 있고 사용하는 기능만 사용하는 점
(어? 그런 기능이 있었어요?)
둘째, 기능이나 이용에 있어서 산발적으로 이루어지거나 정리가 되고 있지 못한 점
(나중에 보기 목록 저장, 좋아요, 댓글 사용성)
셋째, 다양한 기능이나 방대한 콘텐츠를 산만하다고 느끼는 점등을 확인할 수 있었습니다.
이러한 Point들을 저는 Pain Point로 설정하였고, 이번 프로젝트의 Goal을 유튜브 서비스의 간편화 일원화 고도화로 설정하였습니다. 그에 따라 Lowfi 한 스케치를 진행하고 스케치를 통해 와이어 프레임 작업을 간편하고 빠르게 해 본 결과 문제점을 발견할 수 있었습니다.
❗️유튜브 서비스는 글로벌 서비스이고 이용시간 이용자 수가 매우 많은 서비스였습니다.
그렇기 때문에 가장 중요한 Respect Legacy → 즉 기존 사용자 경험을 중요시하여야 한다는 사실을 제가 간과하고 있음을 파악하였고, 기존 사용자 경험을 최대한 헤치지 않는 방향의 개선안을 제안하여야 함을 인지 할 수 있었습니다. 디자이너나 내부 인원이 보았을 때는 오류 투성이이고 난센스 한 부분이 있더라도 어떤 사용자는 그 경험을 잘 사용하고 있을 수도 있으니까요.
�요번 프로젝트의 가장 의미 있는 점은 다양한 리서치를 통한 이유 있는, 근거 있는 디자인입니다. 많은 디자이너들이 리디자인을 하게 되면 대대적인 개편을 통해 새로운 화면을 제시하고 시각적으로 새롭고 시선을 끄는 리디자인을 진행하게 됩니다. 하지만 그와 같은 작업은 어쩌면 올바르지 않은 제안일 수 있습니다. 논리적인 UX 디자인의 관점에서 본다면 서비스의 리뉴얼 성격의 개선안보다 작은 부분에서 조금씩 바뀌는 리디자인이 사용자에게 더 나은 경험을 제공할 수 있습니다. 더 나아가 요소 하나하나에 대한 고민과 데이터 드리븐 , 리서치를 한 개인보다 많이 유튜브에서 더 많이 가지고 진행하지만 왜 대대적인 개편을 하지 않는지에 대한 의미를 생각해 보아야 합니다.
Visual Concept
다음 단계로 Visual Concept을 설정해 보았습니다.
사실 이번 과정을 하면서 계속 드는 의문은 정말로 유튜브는 OTT 서비스 일까?라는 지점이었습니다. 넷플릭스 왓챠 티빙과 같은 서비스는 오프라인 공간으로 생각해 보았을 때 영화관 서점과 같은 공간으로 이해될 수 있었습니다. 하지만 유튜브는 그러한 성격과는 다른 점을 확인할 수 있었고 거기에 나아가서 고민해 본 결과 유튜브 서비스는 카페와 유사하다는 점을 확인할 수 있었습니다.
( 1. 특별한 목적 없이 이용한다. 2. 집중할 수 있어야 한다. 3. 적절한 방해가 필요하다. 4. 커뮤니케이션이 중요하다.)
이를 통해 비주얼 키워드의 발산 과정으로 나아갔습니다.
Focus Connect Segment Simple이라는 4가지의 키워드를 선정해보았습니다. 사용자가 집중하고자 하는 요소에 집중할 수 있게 도와주고 한 요소요소가 한 지점에서 끝나는 것이 아니라 Flow를 가지고 연결되어야 합니다. 집중과 연결을 극대화하기 위해 콘텐츠나 기능, 시선에 분절 분리가 필요하다고 생각하였습니다. 또 만약 제가 표현하고자 하는 것들은 직관적이어야 하고 명확하여야 합니다.
이를 통해 무드 보드를 Bright & Dark, Unity, Simple로 3가지로 정리해보았습니다.
그 이후 디자인 시스템을 구축해보았습니다. 컬러 타입 페이스 타입 스케일 컴포넌트 등의 디자인 시스템은 기존의 구글 머터리얼 가이드를 기반으로 유튜브 서비스를 개발자 도구를 통해 확인하였고 그것을 최대한 활용하고자 하였습니다.
Design Review
유튜브 서비스의 가장 핵심 화면인 플레이어 화면으로 규정하고 개선해 보았습니다.
1) 타임라인 스탬프
중복된 UI를 삭제하고 동영상 시청에 꼭 필요하고 최대한 기존 경험을 헤치지 않는 선에서 UI를 덜어내는 작업을 하였습니다. ( 상 PLAYER 화면)
좌우 스와이프를 통해 이전 다음 동영상으로 이동할 수 있어 사용성을 개선하였습니다. (하 PLAYER 화면)
기존 경험을 살리기 위해 상하로 드래그하거나 요소를 클릭하면 기존 화면으로 돌아갈 수 있도록 설계하였습니다.
시선을 플레이어 영역에 더 둘 수 있게끔 유튜브 사용 행태 조사에 나온 댓글을 탐색하고 더보기 정보를 타임스탬프 요소로 풀어 시선 체류가 플레이어 영역 안에서 이루어질 수 있도록 하였습니다.
2) 해시태그 검색
기존에는 해시태그 검색 부분이 어포던스가 약해 사용자에게 있어 실제 사용하는 모습이 없다시피 했으며, 실제 검색 Flow에 있어서도 적절치 못한 검색 결과가 나와 활용도가 떨어져 개선하였습니다.
관련 검색어의 아이디어를 착안해 다중 검색어를 채워 나갈 수 있는 Flow를 설계하였습니다.
동영상 탐색을 관련 동영상 피드로 하는 것에서 나아가 새로운 방식의 동영상 탐색을 제안합니다.
각 단계가 끊어지는 것이 아니라 연속성 있는 Flow를 가지고 있으며 더 깊은 탐색을 할 수 있습니다.
뿐만 아니라 기존 사용성을 고려하여 즉각적으로 기존 화면으로 돌아갈 수 있도록 뒤로 가기 버튼뿐만 아니라 바로 닫기 버튼을 넣었습니다.
카테고리 분류가 어려운 유튜브 동영상 콘텐츠에 대한 기준 데이터를 수집할 수 있습니다.
3) 북마크 저장
기존에는 사용자의 편의를 위해 나중에 보기를 클릭하면 최근 재생 목록에 자동으로 추가되었습니다.. → 자동으로 추가되어 사용자의 이해와 인식이 낮아 실제 사용할 때 산발적으로 저장되어 실사용에 있어 불편한 것을 확인할 수 있었습니다.
명칭이 나중에 보기, 재생목록에 저장 등 통일화되지 않아 북마크 저장으로 통일화하였습니다.
북마크 저장을 누르면 디폴트로 나중에 볼 동영상 저장 목록으로 설정되어 있는 내 재생목록이 나타나고 저장하게 하여 사용자에게 어떤 목록에 저장하는지 인식될 수 있게 하였습니다.
추가로 저장된 재생목록 이름과 함께 저장이 완료되었다는 Alert 창을 하단에 띄워 한번 더 사용자에게 인식시켜 줄 수 있도록 하였습니다.
실제 사용자에게 재생목록 관리의 자동화보다 직접 컨트롤할 수 있도록 하고 재생목록에 대한 이해를 요구하여 실제로 나중에 다시 보기 목록을 들어갔을 때 본인이 직접 관리한 목록들이 나타나 산발적으로 이루어지는 재생 목록 관리를 개선하였습니다.
https://medium.muz.li/the-youtube-redesign-that-got-me-hired-982b237f77
유사한 주제의 유튜브 아티클 보러 가기
저자도 첫 단락에서 이렇게 말합니다. '리디자인의 의미를 재조명해야 한다. 대대적이고 획기적인 리디자인 보다 기존 경험의 중요성, 기존 브랜딩 요소를 유지하는 것이 중요하다'
요번 프로젝트의 인사이트와 동일하여 이번 목표가 유의미한 목표임을 확인할 수 있었습니다.
더 나아가 위의 아티클에서는 자신의 제안에 근거를 뒷받침할 수 있게끔 제안 아이디어에 대한 서베이를 진행하여 어떤 점이 사람들의 마음을 사로잡았는지 긍정적인 평가인지 부정적인 평가인지를 언급하였습니다.
Outro
1. 리서치의 중요성과 그 방법을 경험하게 되었다.
2. 리서치를 통한 근거를 어떻게 디자인으로 옮길 수 있을 것이냐? 에 대한 고민
3. 리서치로서 얻어지는 다양한 인사이트들 중에서 취사선택해 디벨롭하는 의사결정이 디자이너의 능력!
4.❗️기존에는 리디자인이라고 하면 새로운 화면 제시, 시각적으로 우수한 전체적인 리뉴얼 등을 떠올렸다. 물론 요번 과정에 있어서도 계속 이러한 점을 고민하고 고민하였다. 하지만 다른 관점의 리디자인의 의미와 실제적 인적용이 가능하고 사용될 수 있는 개선 포인트를 생각해 볼 수 있는 좋은 경험이었다.
4-1. 사용자와 끊임없이 소통하면서 한 발자국씩 개선하는 작업을 계속해야 한다.
