Vimeo의 디테일

이번에 Vimeo를 사용하며 발견한 쿨한 부분을 정리해보았습니다.

일단 로그인창 & 회원 가입 동선입니다. 일단 저는 Vimeo에 동영상을 올리기 위해 들어왔습니다. 로그인 창에 아이디로 사용되는 제 메일주소를 넣었습니다. 이때만 해도 제가 vimeo에 가입한 적이 있었는지, 언제 가입했는지 아리까리한 상황이었습니다. 클릭하지마세요. 아래에서 확대해드리겠습니다. 저는 친절하니까요.

자.. 가장 중요한 메일 아이디와 패스워드가 크게 보이고, 아래에 로그인 버튼이 보입니다. 옆에 f connet가 두드러져보여서 좀 맘에 들진 않았습니다. 근처에 패스워드 분실 문의, 회원 가입 부분이 보이네요. 구색 면에서는 적절합니다. 

맨날 쓰던 비밀번호를 넣고 로그인을 시도하자 패스워드 틀렸다고 나오네요. 몇가지 적어보니 다 실패. 뭔가 문제가 있나보네요. 젠장 내가 가입을 안했던가? 좌측에 보이는 Join Vimeo를 클릭합니다.

오늘 제가 글을 쓰게 된 이유입니다. 확대해볼게요.

가입 부분의 심플함은 일단 접어두고라도, 저 메일 아이디 입력하는 부분에 제 메일 주소가 자동으로 들어가있네요. 앞에 로그인한다고 삽질한걸 알고 있던걸까요? (지금 생각해보니 브라우저 자동 완성일수도 있지만 what ever.)

아마도 닉네임으로 사용될법한 이름 입력 부분이 있고, 그 아래에 메일 입력란, 그 아래에 비밀번호가 보입니다. 두번 입력해서 확인하라 안하네요. 아래에 약관 체크가 있고, 조인 버튼 누르면 오케이. 가입절차 한번 정말 간단합니다.

켁. 가입 눌렀는데 이미 있는 메일 주소래요. 뭔가 문제가 있나봅니다.

다시 로그인 화면으로 돌아가서 옆에 보이는 Forgot your password?를 클릭했습니다.

이번에도 역시 메일주소는 자동으로 입력되어있고요, help me라는 재미있는 버튼을 누르면 아래와 같이 나옵니다.

"오케이, 너한테 링크 보냈으니까, 메일 확인해봐. 스팸 폴더에 들어갔을지도 몰라. 가는데 좀 시간이 걸릴수도 있어." 라고 친절히 설명해주네요. 유저의 두가지 삽질 포인트를 미연에 차단하고있습니다. 메일이 안왔다고 지랄지랄 할 경우 스팸함에 들어갔을수도 있으니 확인해보라, 메일이 좀 늦게 올수도 있으니 기다려라. 두가지죠. 이런 구어체의 디테일한 배려 맘에듭니다.

그리고 제가 메일함에서 링크를 클릭해서 나온 화면이 아래입니다.

이렇게 패스워드를 입력하라고 나옵니다. 제가 맨날 쓰는 패스워드 입력하고 save 눌렀죠.

확대해봅시다.

이런식으로 "니 패스워드 리셋 되었고, 로그인해서 제대로 되나 확인해봐" 하고 알려줍니다. 근데 좀 병맛인 부분은 그 아래입니다. 원래 패스워드였던 부분이 이메일로 바뀌어있고, save는 그대로 남아있습니다. 이게 뭔 그지같은 설계인가요? 당최 알 수 없는 UI입니다.

저는 일단 하라는데로 로그인 시도를 다시 해봤고, 4번에 걸친 패스워드 재변경 사투를 벌인 끝에 결국 로그인을 하지 못했습니다. miriya.lee@gmail.c0m 계정을 포기하고 새로 만들었네요. 일단 앞에 UI 디테일이 어떻건 간에 중요한걸 놓쳤으므로 거의 빵점에 가깝게 왕창 감점되었습니다.

다음은 어쨌거나 로그인 한 다음의 화면에 대한 디테일입니다.

제가 가입한 다음, 비디오 업로드 버튼을 누른 다음 나온 화면입니다. 가운데쪽을 확대해볼게요.

일단 위쪽에 이번 다운로드 기능에 대해 설명하고있고, 그 아래에 인증메일에 대해 이야기하고있습니다. "아.. 잠시만. 일단 먼저 메일 인증을 해야 비디오를 올릴 수 있어. 인증 메일을 보내두었으니 아래 메일 주소에서 확인해봐~" 라고 하네요. 그리고 그 아래에선 메일을 못받았을 경우, 스팸함을 뒤져보라 이야기하고, 만약 다시 받고 싶을 경우 아래의 버튼을 누르라고 나옵니다.

자 일단 한메일 스팸함에 들어가서 인증 메일을 받아 인증 성공했고요, 이젠 올려볼까 합니다.

위 사진은 제가 업로드 버튼 위에 마우스를 올렸을 때 나오는 부분인데요, 캬아, 이 부분 정말 깔끔해요. 확대해보겠습니다.

1주일 무료 업로드 용량중 어느정도 남았는지 미리 보여줍니다. 별거 아닌데도 괜찮아보이네요. 다음은 업로드 페이지입니다.

업로드 페이지 첫단계입니다. 일단 우측에 1주일동안 올릴 수 있는 업로드 용량을 어느정도 쓰고있는지 비주얼하게 보여주고있습니다. 그리고 가운데 부분은 확대해서 보도록 하죠.

일단 1단계로 파일 업로드 버튼이 크게 보이고요, 그 아래에는 몇가지 주의사항이 보입니다. 1. 니가 만든 동영상만 올릴것. 2. 상업적으로 쓰지 말것. 3. 게임 영상, 야한거, 영화, 티비, 트레일러 등등 웹에서 본 니가 안만든거 올리지 말것 등등입니다. 

그리고 가능한 비디오 포멧이 뭐 뭐 있는지 보여줍니다. 그리고 좋은 화질을 위해 어떤식으로 인코딩할지 링크도 주고있고요.

또한 HD 비디오를 올릴 경우에 대해서도 적어주고있습니다. 일주일에 1개만 올릴 수 있고, 돈 낼 경우엔 HD 비디오를 무제한 올릴 수 있다고 꼬시고있네요. 바람직해요.

더 질문할거 있으면 튜토리얼 보고 니가 해결하던가, 아니면 물어보던가 하라는군요.

맨 아래에는 모바일 장치로 올릴 경우에 대해, 그리고 HD에 대해 더 알려주는 부분이 있습니다.

다들 중요도에 맞게 순서가 배치되어있고, 중요도에 맞는 크기와 색으로 강조되어있습니다. 빼먹은건 없어보이니 바람직합니다. 그럼 이제 업로드 버튼 눌러보죠.

파일 선택해서 올리는데 별 문제 없었고, 올라가는 저 화면에 대해 더 뜯어보자구요.

일단 탭에는 몇퍼센트 올라가고있나 보여주고있습니다. 지루하게 기다리지 않고 다른 탭에 가서 놀아도 문제 없습니다.

그리고 인디케이터 역시 맘에듭니다. 스트라이프 디자인이 좀 애매하게 생겼다는건 맘에 안들지만, 그래도 기능에 충실합니다. 몇퍼센트 올라갔는지, 총 몇메가중 몇메가까지 올라가고있는지, 심지어는 속도가 얼마나 빠른지, 몇분 남았는지도 보여줍니다. 멋져요. 섹시해요. 참고로 저건 플래시를 이용하고있습니다.

이번에는 그 탭을 닫아보려고 시도하니 이런 메시지가 뜹니다. "아직 올리고 있는데 정말 이 페이지 나갈거야?" 이쯤 되면 완벽합니다. 동영상 올릴때 수시로 뻗은것만 빼면 구색은 잘 갖춰놨네요.

그리고 비디오 올라갈 때 지루하니 하나하나 살펴보게 되는데요, 일단 아래쪽 보죠.

동영상 올라가는 아래에 제목과 설명, 태그 등을 적는 란이 있습니다. 설명 위에 보이는 No HTML please가 귀엽네요. 그리고 자동완성으로 "우리 알바가 지우지 않도록 뭔가 프로페셔널한 컨텐츠 등을 올릴때는 이 설명 란에 최대한 채워서 오해를 막을것." 이라고 적어놨네요. 태그 부분도 사용법에 대해 적절히 안내하고있습니다. 그리고 좌측을 보면 다른 탭이 보이는데요..

(까먹을까봐 그림 다시 가져옵니다.)

방금 채운건 기본 정보고요, 프라이버시 탭에 한번 들어가보죠. 

"이 비디오는 공개되어있으며, 아무나 볼 수 있음" 하고 맨 위에 큰 글씨로 보여주는게 역시 양키 최신유행 다운 직관성입니다. 섹시하죠, 이런거 멋져요.

그리고 아래에서 라디오버튼으로 하나하나 클릭해서 세팅할 수 있고요, 그 아래에선 비디오 원본을다운받을 수 있는지, 그룹이나 채널, 앨범등에 넣도록 허용할건지 정할 수 있고, 댓글 달 수 있나 설정할 수 있습니다.

people you choose 를 클릭했을때 나오는 화면입니다. 이런식으로 Ajax쓰면 귀엽고 편리하죠. 맨 위에 "니가 선택한 사람들만 이 비디오 볼 수 있음" 하고 빨간색에 자물쇠까지 써서 크게 보여주는 부분도 멋집니다. 그리고 좌측 하단에 변경사항 저장버튼 색이 파랗게 변하는 부분도 좋습니다. 아 이런 쫄깃한 맛이 있어야죠.

아무튼 뭐 이렇게 업로드 하는 동안 다른 내용들을 채워볼 수 있습니다. 좀 아쉬운 부분은 저 부분은 학습이 약간 필요하다는겁니다. 측면에 탭이 있다보니 시각적으로 상상되는 트리 구조가 마치 업로드 탭 안에 업로드 인디케이터가 들어있는것 같아보입니다. 왠지 프라이버시 탭 등을 누르면 업로드가 중단될것 같거든요. 저라면 아마 맨 위에 업로드 인디케이터를 올리고, 그 아래에 '마치 업로드 아래에 탭들이 종속되어있는 듯'한 느낌이 들도록 배치하지 않았을까 싶습니다. 

일단 여기는 이정도까지 보고요, 오, 업로드가 끝났네요.

업로드 끝난 화면인데요, 동영상을 로딩하나 싶더니 이런 화면이 나오네요.

"줄서있음. 1시간 19분 44초 후에 컨버팅을 시작할것 같음. 컨버팅 다 하면 메일로 알려줄테니 이 페이지 나가서 놀고있어도 됨 ㅋ Vimeo Plus 멤버들은 줄 맨 앞으로 갈 수 있고, 기다릴 필요 없음 ㅋ"

이라고 얄밉게 말해주네요. 그리고 그 아래에 큼직하게 광고까지 하고있습니다. 수익모델에 직접적으로 연결시키고있죠. 징한것들.. 심플하고 예쁘고, 직관적으로 만들되 수익은 항상 추구하고있습니다. 바람직한 모습이네요.

컨버팅중인 화면입니다.

이건 컨버팅 다 끝난 화면입니다. 우상단의 거대한 세팅과 삭제 버튼이 눈에 들어오네요.

이건 퍼가기 화면입니다. 뒤 어두워지는것부터 아래 옵션 설정 부분과 그에 연동되어 변하는 텍스트들까지 그야말로 폭풍간지가 휘몰아칩니다. 

다 올라간 모습입니다.

...  젠장 왜 여기서 재생 안된다고 나오지? 이유를 모르는 차단으로 감점-_-;

이건 Vimeo의 도움말 페이지입니다. 여긴 좀 굉장합니다. 뭔가 사람 냄새가 나죠. 일단 우측에 담당자 얼굴을 박아놨습니다. 좀 굉장하네요. 이렇게 얼굴 내놓고 있으면 로봇이 아니라 사람이 답변해준다는 신뢰감이 생깁니다. 뭐 워낙 세상 넓어서 얼굴 까놓고 다녀도 될만한 영어권이라 생각했겠지만. 우리나라에선 보기 힘든 광경이죠?

이건 그야말로 폭풍간지의 도움말 검색 창입니다. 무려 자동완성을 집어넣었네요. 아 ㅎㅎ 진짜 미치겠습니다. 좀 오타쿠같은놈이 만들었는지 사이트 하나 하나 참 맘에 들게 설계해놨네요. 일단 동영상 재생 화면에서 재생중에 컨트롤러 감추는것도 꽤 급진적인데, 사이트 곳곳에서 격하고 과감한 시도가 엿보이네요.

이건 도움말 관련 포럼인데요, 우리나라처럼 게시판식이 아니라 포럼 형태로 운영하고있는데, 꼬리에 꼬리를 물고 내용들이 이어지는게 신기합니다. 저렇게 얼굴 까고 다 공론화 되는곳에선 예전 다음 공식블로그에 어떤 또라이처럼 "골비고 무능력한년" 이런 욕설들이 올라오지 않는 점잖은 분위기가 조성되겠지요. 뭐랄까, 저런 곳에서는 이용자 한명 한명이 서비스 개선에 참여한다는 그런 흐뭇한 느낌이 듭니다.

국내 웹 서비스도 이런 양키 최신 유행을 많이 받아들였으면 좋겠습니다. 과하게 급진적으로 만들어서 이해 안가게 만들라는 말은 아니고요, 직관적이고 심플하게 만든 부분은 좋다는 뜻입니다.

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

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

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

다음 블로그로 스크랩하거나, 출처와 함께 퍼가도 뭐라 안합니다.(출처 없으면 뭐라 할겁니다.)