유튜브의 부실한 화면 설계

최근 올린 아이폰 새 광고 동영상 건으로 소스 복사를 위해 유튜브에 방문했는데, 여러가지 UI 덩어리가 이상하게 배치된걸 확인할 수 있었습니다. 한번 까보죠.

워어. 화면 크네요. 동영상을 넓게 감상할 수 있게 만든 레이아웃입니다. 여기서 주목할 부분은 동영상 컨트롤러의 버튼입니다. 동영상 버튼 부분만 크게 확대해볼게요.

이 버튼들이 어떤 의미라고 생각하십니까? ▶ 버튼은 동영상 재생을 뜻하는, 널리 알려진 메타포죠. 그리고 옆의 빨간 긴 줄은 재생될 동영상의 총 길이와 현재까지 재생된 부분이 어디까지인지 보여주는 부분이지요. 거기 더불어 둥근 버튼을 잡고 움직이면 동영상을 특정 위치까지 움직여서 재생하거나 하는게 가능합니다. 그 옆의 동영상 재생 시간과 스피커 버튼도 뭐라 그닥 태클 걸 부분은 없구요.

그럼 CC는 뭘까요? 블로그 좀 써본 제가 생각하기엔 아 이거 Creative Commons가 붙어있는건가? 하고 생각했습니다만, 유저가 조작할 수 없는 부분이 저렇게 명당 자리에 떡하니 붙어서 붉은색으로 존재감을 뽐낼 이유가 없다고 생각했습니다.

마우스를 올려보니 이런게 나오네요. 뭔가 자막 설정하는 부분인가봐요. 영상의 소리를 스스로 해석해서 영어로 자막을 뿌려주기도 하고, 자막을 한글로 번역해줄수도 있으며, 기타 설정이 가능하답니다. 유튜브가 부실한게 뭐냐면요, 동영상 플레이어 안에서 UI가 일관성이 없다는겁니다.

이런식으로 동영상 품질 설정 부분에선 480p, 360p 이런식으로 선택할 수 있게 만들어주고, 볼륨 조절 막대 역시 회색 톤으로 비슷하게 통일을 해놨습니다. 그라데이션 넣고 높이 맞추고 등등은 썩 상쾌한 디자인은 아니라고 생각되지 않지만, 아무튼 회색톤이니 그렇다 쳐요, 근데 자막 설정하는 부분은 왜 자기 혼자 검은 바탕이냔 말이에요. 할라면 일관성 있게 디자인 해야죠. 검은 바탕이 시크하게 보이면 다 검은 바탕으로 넣던가.

뒷 배경 색만 다른거 갖고 뭐라 하면 유튜브에 대해 너무 화를 많이 내고 있는거죠. 배경 색 다른게 진짜 문제가 아니라, 사람 혼란스럽게 만드는게 문제에요. 가령, Transcribe Audio와 Translate Captions라는 텍스트는 윗놈은 흰색, 아랫놈은 어둡게 회색으로 보입니다. 아. 아랫놈은 뭔가 선택 불가능이고 윗놈은 선택된건가? 아니면 윗놈은 활성화 된거고, 아랫놈은 비활성화 된건가? 굳이 이런식으로 머리를 굴리고 구체적으로 행동으로 옮겨야 기능의 뜻을 알아먹을 수 있습니다. 

앞서 480p, 360p 선택하는것처럼 딱 아 저놈이 선택된거고 저놈은 선택 안된거라고 알아먹을 수 있으면 얼마나 좋아요. 사실 유튜브가 의도한건 흰색 글씨는 활성화된거고, 회색 글씨는 비활성화 되었다는 표시였습니다. 다시 말해 Transcribe Audio(음성인식 자동자막)는 클릭이 되고, Translate Captions(자막 번역)는 클릭이 안된다는 뜻이지요. 아니 그럼 자막도 없는 영상에 왜 Translate Captions(자막 번역)이라는 버튼을 아예 생략하지 않고 보여주느냐..

이건 참 복잡한데(복잡하게 만든것임), 이해를 돕기 위해 제가 아예 기능 소개를 해볼게요.

위와 같이 CC 버튼에 마우스를 올려서 Transcribe Audio BETA 를 클릭합니다.

이런 안내 문구가 나와요.

구글의 음성 인식 기술을 응용해서 자동으로 자막을 보여주는거고, 아직 실험중인 기술이라는겁니다. 

잠시 디자인에 대해 까보고 넘어갈게요. 정말 유튜브 이자식들은 디자이너가 한명도 없는지 디자인이 왜 저렇냔 말입니까. 검정 창틀 테두리를 흰색으로 잡은건 이 창이 어두운 배경에서나 밝은 배경에서나 잘 구분되어 보이라는 뜻으로 만든건데, 그 4군데 코너의 픽셀을 이상하게 다듬었어요.

뭐에요 이게 아마추어같이. 무슨 콧구멍 밖으로 털 삐져나온것 같네요.

저 버튼 텍스트 치우친거랑 하단에 픽셀 튀어나온것 좀 보세요. 배경 박스는 사각으로 쳐놓고 버튼은 라운드로 해놔서 영 어울리지도 않고.. 그리고 글씨체 아무거나 막 사용하지요. 글씨체에는 성격이 있어요. 저게 어디 쓰이면 멍청해보일지, 어디 쓰이면 똑똑해보일지 이런 성격이 나오거든요. 구글이 사용한 글씨체는 펑퍼짐해갖고 멍청해보이는 글씨체에요.

뭐 사각 모서리쪽 픽셀 잘 못 다듬어 놓다고 까는건 디자이너의 입장이고 대게 개발할때는, 특히 구글 같은 회사에서 디자인할때는 그다지 중시하지 않을 것이므로 패스. 암튼 다시 돌아왔어요. OK 버튼을 누르면 어떻게 되는지 보여드릴게요.

이렇게 영상의 소리를 자동으로 인식해서 자막을 보여줍니다. 대단하네요. 신기해요. 쭈욱 들어보니 생각보다 인식률도 좋은것 같습니다.

이 상태에서 CC에 마우스를 올리면 이런 화면이 보입니다. 아래에 English(transcribed)라고 새로 생긴게 보이죠? 그리고 Transcribe Audio가 회색으로 비활성화되어있고, Translate Captions가 활성화 되어있네요. 아 이게 구리단 말이에요. 엄연히 지금 진행중인 Transcribe Audio를 비활성화 해놓으면 이게 무슨 '지금은 사용할 수 없는 메뉴'같아 보인다는거죠. 이건 켜고 끌 수 있는 메뉴처럼 보이게 체크박스를 보여준다거나 해야지요. 이걸 비활성화 해놓는 법이 어디있냐구요.

그리고, Translate Captions도 음성을 인식해 자막으로 바꿔주자 그제서야 자막을 번역할 수 있게 활성화 됩니다. 이거 이용자가 두번 수고해야하는겁니다. 서비스가 덜 똑똑한거죠. 그럼 이번에는 활성화된 Translate Captions 버튼을 눌러봤습니다.

이렇게 팝업이 나옵니다. 갈리시아어? 갈리시아어가 나랑 무슨 상관인데? 그리고 저 화면만 보면 제겐 선택권이 없어보입니다. 갈리시아어가 선택된 상태로 [확인] / [취소] 결정만 할 수 있어 보인다는거죠. 저 옆에 그 흔하디 흔한 화살표 같은거 하나만 넣어주면 훨 나아지지 않을까요?

자.. 그럼 갈리시아어 부분을 눌러봤습니다.

이렇게 뭐가 열리는데요, 위 아래 테두리 씹힌건 그렇다 치고 맨 위에 한국어 안넣어주는거. 이건 유튜브 자체의 언어 설정에서 가져오면 되는거고, 보아하니 가져오긴 가져왔습니다. 옆에 노르웨이어, 덴마크어 하고 한글로 보여주잖아요. 가져오는 김에 최상단에 한국어를 갖다 놓지, 아니, 디폴트로 한국어를 해놓지 머리는 장식입니까? 그리고 오른쪽의 스크롤 막대가 거지같이 생긴거 등등 씹을게 한두개가 아닙니다. 아무튼 한국어 골라봤습니다. 그리고 확인 버튼을 눌렀어요.

자막이 한국어로 번역되서 나오네요. 뭐 정확성은 기술적인거니 UX를 다루는 이 순간에선 걍 넘어가줍시다.

이 상태에서 캡션 버튼 누르니 이렇게 나오네요. 저기서 기타 설정(Other Settings)를 눌러보겠습니다.

글꼴 고르는 부분에서 역시 아래로 펼침 화살표 하나 안넣어준 무성의한 UI, 그리고 오른쪽 라인 사라진건 이미 한두번이 아니니 대충 지나가지요.. 그럼 저기 보이는 [배경]과 [+] [-] 버튼은 뭘까요? 전 눌러도 아무 반응이 없는것 같아서 놀랬는데, 몇번 더 해보니 알겠더군요. [배경]버튼을 누르면 저기 자막 글씨 뒤로 보이는 검은 상자를 켜고 끄는거고, +/- 버튼은 글씨 크기 설정이었습니다. 저걸 그냥 무턱대고 '배경', '+/-' 이렇게 적어버리니까 전 저거 누르면 배경색 같은거 설정하는 창이 나오나 싶었고, +/- 누르면 뭔가 싶었지요. 에휴.. 저거 자체를 이해 못하는 상황에서 밑에 바로가기 키 안내까지 있으니 혼란 두배였습니다. 배경은 체크박스를 앞에 달아놓고, +/- 는 '글씨크기'라는 설명글을 한단어라도 적어줬으면 훨씬 이해하기 쉬웠을겁니다.

다시 캡션 부분으로 돌아가서,, 그럼 유튜브의 저 덩어리는 어떻게 정화해야하느냐.. 답은 방법 지향이 아닌 결과 지향적인 UI 설계입니다. 유튜브는 구글의 신기능을 소개하느라 정신이 팔려 이용자가 뭘 원하는지를 망각했습니다.

최종 결과물은 자막이다

최종 결과물은 '자막'이라는 핵심을 생각하고 이용자 입장에서 어떻게 해놔야 혼란스럽지 않을지 고려해야합니다. 수단인 음성 인식 자동 자막이나 자막 번역 등을 고르지 않고, 최종 결과물인 자막을 고를 수 있게 만들어주는겁니다. 'Original Captions(원래 자막)'을 보여주던가, 'Translated Captions(원래 자막이 번역된 자막)'을 보여주던가, 'Transcribed Audio(음성 인식 자동 자막)'을 보여주던가 셋중에서 선택하는거죠.

가령 이래요.

동영상 A는 음성이 없고 자체 자막만 있고, 동영상 B는 자막이 없고 음성만 나오며, 동영상 C는 자막도 있고 음성도 있어요.

동영상 A - 음성 없음, 자막 있음.

자막만 있으므로 선택 메뉴는 'Original Captions(원래 자막)', 'Translated Captions(번역된 자막)', 'Hide Captions(자막 숨김)' 셋 중 하나만 고르면 됩니다. 그리고 'Translated Captions(번역된 자막)' 옆에 작은 설정 버튼을 만들거나, Translated Captions를 클릭하면 아코디언 UI로 주르륵 펼쳐져서 번역할 언어를 고르게 해줘야지요.

여기서 참조할 부분은 유튜브 자체가 갖고 있는 언어 옵션입니다. 가령 제 경우는 위치를 '전세계'로, 언어를 '한국어'로 해놓습니다. 그럼 답 나오죠. 기본 값을 '한국어'로 번역하게 해주면 되는겁니다. 그래야 스마트하죠. 이걸 기본값 한국어로 안해놓고 갈리시아어 이런걸 앞에 갖다 놓는건 불친절과 게으름의 극치인겁니다. 최대한 똑똑하게, 최대한 자동화해서 이용자가 공클릭할 수고를 줄여야지요.

동영상 B - 음성 있음, 자막 없음

위의 아이폰 동영상처럼 음성만 있으므로 'No Captions(자막 없음)', 'Transcribed Audio(음성 인식 자동 자막)' 둘 중 하나를 고르게 하면 됩니다. 이걸 유튜브 사람들은 공돌이같이 음성을 Transcribed Audio(음성 인식 자동 자막)를 클릭해서 자막을 보여주게 만들고, 자막이 생겼으니 'Translate Captions(자막 번역)' 기능을 보여주어 자막을 번역하게 만든다는 생각으로 만든겁니다. 2단계로 수고해야하죠.

동영상 C - 음성 있음. 자막 있음

이 경우엔 둘 다 있으므로 'No Captions(자막 없음)', 'Original Captions(원래 자막)', 'Translated Captions(번역된 자막)', 'Transcribed Audio(음성 인식 자동 자막)' 넷을 보여주면 됩니다. 디폴트로는 Original Captions가 선택된 상태여야하고요.

이렇게 자막을 중심으로 사고하면 母 항목인 Caption Actions, Caption Selection 텍스트도 보여줄 필요가 없게 됩니다. UI가 심플하고 깔끔해져서 보기도 좋고 이해하기도 좋아지는거죠.

그럼 이번에는 또 다른 부분 짚어보지요.

볼륨 조절 막대가 표시되는 딜레이를 옆의 캡션 조작부와 연동하지 않아 짜증을 불러일으키고 있습니다. 겹친다는거죠. 캡션 조작부가 올라가면 스피커는 싹 빠져야 깔끔하지요. 

그럼 아예 스피커 버튼에서 마우스 빼면 볼륨 조절 막대가 사라지도록 딜레이를 없애면 되지 않느냐.. 딜레이는 스피커 버튼 크기가 작기 때문에, 마우스를 올려서 볼륨을 조작하려고 할 때 마우스가 볼륨 조절 막대의 좌우로 삐끗날 경우를 대비해서 설정한겁니다. 마우스가 삐끗나면 볼륨 조작부가 닫혀버리잖아요. 이런건 우리가 가로로 긴 내비게이션에서 겪는 짜증과 일맥상통합니다.

감이 오시죠? 위 예제의 경우 '글로벌교육'을 마우스로 선택해서 밑으로 메뉴가 펼쳐지게 만들고, 마우스를 아래 오른쪽으로 이동하여 '유럽지역'을 선택하는 등의 액션이 필요합니다. 근데 이게 마우스가 좀 더 밑으로 빠지거나 할 경우 메뉴가 닫혀버려 상당히 짜증나거든요. 

만약 마우스 롤오버 영역(플래시에선 hit 영역)을 실제 눈에 보이는 영역보다 밑으로 길게 잡아서 메뉴가 닫히지 않게 만들어도 문제입니다. 정작 조작하는 이용자는 머릿속에서 "아 시발 이거 마우스 옆으로 옮기다가 삑쌀나면 메뉴 닫히는거 아냐?" 하고 지레짐작하게 되고, 조작시 껄끄러운 감정을 가지게 되는거죠.

생각해보세요. 여의도 LG 트윈타워 건물 사이에 외나무다리를 놓으려고 합니다. 폭 10cm의 철제 기둥을 쭈욱 깔았어요. 근데 사람이 그 좁은 위를 건너가다간 발 약간만 삐끗해도 밑으로 떨어져서 많이 아플것 같아요. 그래서 안전 차원에서 철제 기둥 좌우에 3m 폭의 거대한 '투명' 유리를 깔았습니다. 유리 밟아도 안떨어지게요. 근데 그거 건너가는 사람 눈에 폭 10cm의 철제 기둥만 보이지 투명 유리가 보이냐고요. 기분 얼마나 불안하겠어요. 

이 예제를 보세요. 옆으로 널찍한 폭에 밑으로 펼쳐지니 마우스 옮기기가 한결 맘편하죠. 뭐 이런 내비게이션 부분에 대해서는 UX에 대해 논한다 하는 사람들은 다 수십번 들어봤을테죠. 다시 유튜브 까러 넘어가봅시다.

다시 맨 앞에서 봤던 스샷입니다. 여기서 맨 오른쪽은 화살표가 사방으로 넓어지는걸 보니 창 확대라던가, 더 나아가 전체 화면이라는걸 어렵지 않게 짐작할 수 있습니다. 잘 했지요. 근데 그 옆의 버튼은 뭘까요? 화살표 방향을 보아하니 화면의 상단과 좌측으로 뭔가 넓어지거나 이동하는것 같네요. 근데 이거 클릭하면 화면이 이렇게 됩니다.

결국 동영상의 크기가 작게 줄어드는 버튼이었습니다.

제가 보다못해 10분만에 하나 그려봤습니다. 차라리 이런식으로 바꾸는게 더 이해하기 쉽지 않겠습니까? 아니면 적어도 화살표 방향 만이라도 ↑← 이렇게 바꾸던가요.

이번에는 동영상 재생기에서 벗어나 전체 화면 레이아웃에 대해 짚어보지요.

클릭하면 커집니다. 일단 동영상 가로 사이즈가 화면 전체의 가로 사이즈와 그리드가 맞지 않은게 보입니다. 그 덕에 오른쪽에 있는 동영상 목록의 텍스트가 아주 지저분하게 보이지요. 왼쪽의 동영상 이름과 재생 정보쪽과도 맞지 않습니다. 저라면 동영상의 가로 사이즈를 더 늘려줬으련만.. 이 경우는 아마 브라우저의 도구모음이 많은 사람의 경우 동영상이 잘려 보이는 문제 때문에 작게 넣은것 같습니다.

잘 보시면 상단에 뭔가 도구 버튼 모음이 있는데요, 확대해볼게요.

왼쪽부터 좋음/구림 버튼이 보이고, 그 다음은 Save to라고 자기 즐겨찾기나 재생목록에 추가하는 기능이네요. 어떻게 보면 원본 다운로드 처럼 보이지만.. 그리고 그 다음칸이 메일이나 페이스북, 트위터로 공유하는 기능이네요. 

누르면 이렇게 창이 하나 열립니다. 여기서 문제중 하나는 이 창과 위 Share 버튼과의 연관고리가 단지 버튼에 색이 켜졌다는거 하나 뿐입니다. 창과 Share 버튼 간의 거리가 엄청 멀어요. 분명 의미적으로는 옆의 Save to 버튼과 Share 버튼간의 간격 보다는 가깝습니다만, 화면에선 아니죠. 처음 보는 사람이 저 창이 위 좋음/구림 버튼, Save to 버튼, Share 버튼, Embed 버튼 중 어느것과 관련되어있는지 알 수 있을까요? 그나마 버튼 클릭후 즉각적으로 창이 열리기 망정이지, 시각적으로는 영 동떨어져있습니다. 이건 무슨 팝업창 띄운걸 그냥 레이어로 표현한거나 마찬가지입니다. 오른쪽 위에 X 버튼 달아놓은것도 그렇구요, 창이 위에서 아래로 펼쳐졌다기보다는 뿅 하고 나타난거죠.

윗줄 하나는 동영상의 링크고, 아래 버튼들을 누르면 각각 새 창이 뜨면서 관련 서비스에 바로 포스팅 할 수 있도록 되어있습니다. 뭐 여기까지는 괜찮은데.. 문제는 쌩뚱맞은 EMBED 버튼의 위치.

이거 제 생각에는 Share 버튼과 Embed 버튼은 유사한 기능이라 생각하는데, 왜 저리 멀리 떨어뜨려 놨을까요? 참고로 Embed 버튼 옆의 깃발 모양은 신고 버튼입니다. 의미적으로 서로 가깝지 않은 기능을 붙여놨네요. 전 Save to, Share, Embed 버튼이 서로 붙어있어야 한다고 봅니다. 신고 버튼은 위험한 버튼이니 떨궈놓는게 맞죠.

그 외에 embed에서 깔만한건 별로 중요하지 않은 부분들이네요. 구질구질한 플레이어에 색만 다른, 그것도 이상한 색감으로 늘어놓은 스킨들이라던가, 제한된 사이즈의 가로세로 길이라던가.. 그 외엔 오케이. 유튜브의 다른 부분도 까자면 한도 끝도 없을만큼 허술한지라 오늘은 이정도만 적고 끝내겠습니다. 오늘은 일부러 유튜브 한국어판의 번역은 다루지 않았습니다. 구글의 한국어판 페이지(유튜브, 버즈 등등)는 정신건강 및 이해의 편의를 위해 사용하지 마시고, 영문판 오리지널을 사용하시는걸 권장합니다. 유튜브랑 플리커 둘이 아마 거의 동급일듯.

ps. 독자분중 한분의 친구분이 유튜브 디자인 팀에 있으며, 유튜브가 구글과 달리 창업자중 한명이 디자이너인지라 디자인에 많은 신경을 쓴다고 합니다. 이 글에서 크게 실례한것 같아서 비난성 표현을 많이 유화했습니다.

유사한 글

- 구글은 디자이너좀 뽑길..

- 구글 코리아, 양키 센스는 이제 그만.

- 무심한 구글, 그리고 번역과 디자인

- 구글값 못하는 구글 리더

제 블로그에는 아이폰과 DSLR 카메라에 대한 정보와 팁,

웹서비스의 사용성과 UX에 대한 글이 올라옵니다.

이 글이 도움이 되었다면 RSS로 구독해보세요.

매번 블로그에 방문하지 않아도 새 글 소식을 받아보실 수 있습니다.

http://blog.daum.net/xml/rss/miriya

이 블로그의 모든 글은 자유롭게 링크할 수 있으며, 오픈캐스트 발행을 허용합니다. 

다른 블로그로 스크랩하거나, 출처와 함께라면 퍼가도 됩니다.