UI&사용성 이야기/UI 디테일

딴지걸기 #0001 - 다음 동영상 첨부기능

MIRiyA☆ 2007. 10. 9. 11:54
저번 포스팅에서 일반 웹페이지의 탈을 쓴 플래시의 스무스한 센스라고 격찬했던 다음 동영상.
요즘 동영상 여러개를 올리다보니 간혹 보이는 에러에도 잘 참고 쓰고있는데, 그간 눈에 살짝살짝 거슬리던 부분을 정리해보았다.

 

 

위는 동영상 첨부 창인데, 찾기 옆에 동영상 올리기 버튼이 있다.
반드시 찾기 버튼을 눌러 동영상은 선택한다음 올리기 버튼을 사용할 수 있는데, 그럼 동영상 올리기 버튼을 그냥 누르면 어떻게 되는지 한번 테스트해보자.



이런식의 화면이 나오고, 이전 버튼을 눌러서 돌아가야 한다.

까탈스러운 내 눈으로 보기에는 좀 딱딱한면이 있다. 그럼 예상되는 대안은 뭐가 있을까?




1. 동영상 올리기 버튼 누르면 그냥 무시하고 찾기 버튼 누른것처럼 파일 찾는 창을 띄운다.

그럼 이용자가 어쨌든 이전 버튼 하나 더 누르는 수고를 하지 않고 올리기야 할 수 있겠지.


이 경우 버튼 이름은 '동영상 올리기'인데 동영상 찾기의 기능을 수행하는 웃기는 결과가 생긴다.

나름 뭐 좋은게 좋은거라 무난하게 생각하면 편하긴 하지만 곰곰히 생각해보면 뭔가 내면에서 자존심이 상한다고 할 수 있겠다.

 


2. 찾기 버튼과 동영상 올리기 버튼을 동시에 두지 않는다. 즉 찾기 버튼만 보이게 한 다음, 파일을 선택하면 동영상 올리기 버튼이 생기게 만든다.

제법 보기에 세련되 보일것이고 나도 이런 step-by-step 방식을 좋아한다. 저번 포스팅에서 역시 말했듯 뒤에 나올 내용을 앞에 설명하는 경우를 피할 수 있으니까. 다만 우려스러운건 이걸 투박하게 그냥 적용할 경우 지극히 저변이 넓은 포탈 이용자가 보기에 어려워질 수 있다는 것이다. 동영상 올리는 창인데 찾기 버튼만 보이고 동영상을 올리는 다음 단계를 예측할 수 없을테니까. 너무 멀리 나간 우려인가? 이 부분은 그냥 눈에 잘 띄게 설명만 해주면 끝나는 문제인것 같다. 파일 선택 글씨 위에 "올릴 동영상을 선택하세요"라는 글만 가운데 정렬로 박아넣으면 해결될것 같은데..


3. 다른 방법은 찾기 버튼을 누르지 않고 동영상 업로드를 눌렀을 경우, "업로드할 동영상 파일을 선택하셔요" 등의 안내를 따로 페이지를 넘겨 알려주지 말고 버튼 아래에 보여주는 것이다. 여러 사이트의 회원가입 화면에서 비밀번호 재입력란 옆에 나타나는 빨간 글씨 같은거 말이다. 나같은 GEEK은 메시지 말고 찾기 버튼이 조용히 깜빡거리는걸로 대체하려 할지도 모르겠지만 :)


이번에는 다른걸 살펴보자.


위는 동영상을 업로드한다음 썸네일을 정하는 화면이다.

아래에 로고 이미지 올리기 버튼이 보이는데, 저건 선택 사항이므로 옵션으로 만든걸 존중한다.

다만, 다음이 문제다.

 

 

여기서는 정말 실소를 금할수 없다.
'로고 이미지 올리기'버튼을 눌러서 들어왔는데, '로고 사용하기' 라디오버튼에 '사용 안함'이 디폴트 지정되어있다. 괜히 한 depth 더 집어넣는 이유가 뭘까? 분명 이용자는 로고를 사용하려고 로고 이미지 올리기 버튼을 눌러서 들어왔을 것이다. 그 의사를 존중해야 하는게 아닐까? 아니면 저 위에 '사용했던 로고 중 선택하기'가 로딩이 좀 걸리던데 그걸 로딩하는 시간을 벌고자 1 depth 추가했을까? 이 역시 말도 안된다. 로딩은 그야말로 침삼키는 시간일 뿐이다. 실수라고 밖에 여겨지지 않는다. 내가 간과한 부분이 더 있을까? 기본적으로 사용에 체크되어있어 페이지 들어오자마자 바로 파일을 첨부하거나 예전에 올린 이미지를 올릴 수 있도록 해주는게 옳다. 저건 정말 당황스러운 UI다.



 


그리고 로고 사이즈도 좀 불만인데, png 파일까지 지원되는건 정말 멋지다.
하지만 80x30 픽셀의 코딱지만한 로고로 뭘 할 수 있을까?


세로 80픽셀까지도 지원되지만, 문제는 세로가 아니라 가로다.

저 조막만한 공간에 가독성을 유지하며 주소를 표시하기 위해 비트맵 신공을 사용했다.

물론 동영상에 겹치지 않고 검은 여백에 나오게 하기 위해 하단에 공간을 두는 센스를 썼고.동영상에 로고 넣은 사람들 많이들 봤는데 대부분 너무 욕심들을 부렸는지 찌그러져서 제대로 보이지도 않는다. 뭐 이건 개인 사정이니 넘어가야 한다고 치자.. 가로 영역좀 널찍하게 해주면 안될까? 생각해보니 뭐 광고 영역과 겹치지도 않고, 가로 영역은 아무 문제가 없어 보이는데 말이다. http 조차 쓰지 못했다. -_-;




하지만 진정한 대박은 이거다. 정말 이거만큼 어이없는걸 보지 못했다.

저 위에 보면 'Daum 블로그/카페'라고 버튼이 있는데, 저걸 클릭하면 다음 블로그나 카페에서 쓰라고 최적화된 object/embed 태그가 클립보드에 복사된다. 근데 문제가 무엇이냐~ 하면. 저 소스를 다음 카페에서 쓰지 못한다는 말이다. 소스를 한번 보자.




영상 인코딩할때마다 로고 박아넣는 곰인코더를 이용하느냐, 아니면 온갖 이상한 잡버그로 신음하는 BADAK을 이용할 것이냐, 무게 엄청 무겁고 CBR 음성 인코딩 옵션도 없는 토마토 인코더를 이용하느냐 고민하고있다. 다음 동영상은 너무 웹단에만 치중한게 아닌가? 몇달넘게 소식없는 멀티킷에 포함된 무비킷? -_-; 그건 인코딩 품질 옵션도 없더라.  어렵다 어려워..


몇일 전에 나는 이놈의 동영상 업로드 방법 바이블 작성한다고 새벽 2시부터 아침 11시까지 장장 9시간동안 자리를 뜨지 않았다. 세로 41,000픽셀의 무시무시한 스크롤 압박 강좌가 탄생했다. 카페 회원들이 쉽게 이용하는걸 보며 기분은 좋았지만 이 안에 태그제한 회피법 같은게 한 파트로 들어가있다는게 참 어이가 없었다. 이 이슈를 알고있는지 모르고있는지 알 수 없으나 방치하지는 말지어다. 포탈은 개선이 너무너무 느리다.



ps. 이놈의 태그를 그냥 에디터에서 붙여넣었는데 제멋대로 object 태그를 지워버렸다. 그리고 아래쪽의 글 내용마저 한 문단 몽창 지워버렸다. 열받아서, 에디터 따위에 지기 싫어서 이미지로 캡쳐해서 붙여넣는다. HTML모드에서 기능하라고 넣은것도 아니고 그냥 텍스트로 쓰려고 한건데 뭐 이리 분별이 없을까? 그림 첨부하면 소스 꼬이고 문장이 그림 위아래로 점프뛰고 문단 간격 안드로메다로 벌어지는 스미소니언 곤충(bug) 박물관 같은 에디터 정말 싫다. 정말 어느 세월에 편하게좀 써볼까?