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

삼성 투모로우 블로그 개편 관련 전방위 까댐 리뷰

MIRiyA☆ 2013. 8. 26. 13:39

끊임없이 까댈거리를 제공하고 해명하는 삼성 투모로우 블로그가 개편되었다.

소감과 함께 듣기 싫은 말들을 좀 적어보련다.



블로그 들어가자 마자 개편 기념 자랑 페이지를 보여주는걸 보니 개편 담당한 분이 굉장히 자부심에 차 있었나보다. 뭐 한 일을 자랑하고 알리는건 좋은 일이니까 나쁘지 않다. 하지만 자랑이 실체보다 과하면 거부감이 들 수 밖에 없다. 자랑은 항상 가볍게 하고 실력으로 증명하는게 제일이다.



1. 버벅거림, 느림

블로그 딱 열자 마자 뭔가 무리수가 느껴진다. 상당히 고사양에 속하는 내 컴퓨터에서조차 화면이 버벅거리는게 뭔가 반응형 웹이라고 떡칠을 해놓은것 같다. 얼마나 버벅거리는지 옛날 같았으면 플래시 썼는줄 알았겠다. 






2. 우상단의 검색창 모양은 정말 쒯이다. 

플랫하게 만들라다가 못생기게 어긋난것 같다. 우측에 까만 여백은 왜 넣었는지 이유를 모르겠다. 1번이 원본, 2번이 여백 제거, 3번이 상하에 여백 살짝 넣은거다. iOS7을 필두로 요새 유행이 구분선 없는 플랫이라지만, 구분선 없는 플랫을 적용하려면 저기 뿐만 아니라 모든 페이지에 일관성 있게 적용하던가.. 검색 부분에만 넣으니 디자인적인 완성도가 떨어질 수 밖에 없다.




3. 눈이 썩을것 같은 실시간 뉴스 라벨 색감

조나단 아이브의 iOS7을 보는 기분이다. 뭔가 블랙 & 비비드로 포인트를 주고 싶었던 것 같은데 망삘이라는 생각이 드는건 나뿐일까. 또한 실시간 뉴스 흘러가는것마다 자세히보기, 자세히보기.. 그냥 제목만 넣어도 될것 같다. 뭐 그래도 이런 부분은 사용성 이슈가 있기 때문에 잘잘못을 따질 수 없는 부분이다. 글씨만 달랑 있으면 링크인지 그냥 라벨인지 알기 힘들기 때문에 한번 더 강조하는 효과가 있다. 다만 다른곳과 일관성은 있어야 사용성이 올라간다.





4. 큰 배너 흘러가는 캐로셀은 맘에든다.

근데 우하단의 재생/정지 버튼은 없애는게 나을것 같다. 항목이 끽해야 3개밖에 없는데 저걸 일일히 눌러가며 정독할 사람들이 있나? 누가 제안했는지는 몰라도 취향 몹시 노티난다. 그냥 배너에 마우스 올리면 재생이 멈추는 정도가 적당하다. 사용성 이야기를 할 수도 있겠지만, 대체 누가 쓸까 싶은 기능 때문에 시선을 분산시키는 꼴이 맘에 안든다. 양옆에 <> 버튼도 큼직하게 있구만. 저 < > 버튼도 참 맘에든다. 크고 눈에 잘띄고 쓰기 편하다. 어 그리고 배너 아래로 칠해놓은 검정색 그라데이션은 무척 싸보인다. 대체 어느 디자이너가 #000000 블랙 0%에서 100%로 그라데이션을 먹인단 말인가. 아무리 앞에 흰 글씨가 들어간다 해도 그렇지 해도 너무 촌스럽잖아. 포토샵 기본으로 나오는 그라데이션 쓴 느낌? 심하게 욕하면 파워포인트로 디자인한 느낌?



예전에 이 글에서 깠던 내용인데, 삼성은 그라데이션 정말 심각하게 못쓴다. 갤럭시S 시리즈의 위젯부터 시작해서 스마트TV UI, 심지어는 오늘 까고 있는 이 블로그 디자인까지.



저 '추천' 부분 그라데이션 봐라. 돈천만원짜리 TV에 들어갈 디자인이라고 생각되지 않을 정도의 막디자인이다. 격조없고 형편없다. 하드웨어 디자인은 정상급인데 UI가 저모양이니 이건 그냥 키만 큰 팔푼이 느낌? 이게 블로그에서도 비슷하게 보이니 어우.. 심했어 정말.




차라리 이정도가 낫지 않나 싶다. 나라면 저 파란거 배너에 그라데이션도 뺐겠지만. 블로그 전체가 다 플랫한데 배너에 저렇게 그라데이션 넣으면 어쩌잔거야. 분명 이건 배너 디자인한 사람이랑 블로그 디자인한 사람이랑 달라서 생기는 문제다. 배너 디자인한 사람에게 할 말 밑에 있으니 각오하라.





4. 하단의 각 항목들에 [더 보기] 버튼 넣은거 참 맘에 든다.

'more' 이딴거 박는건 영어 사대주의자이자 디자인 무능력자들이 생각없이 마구 넣는거라 생각한다. '더 보기' 이 시발 디자이너 놈들아. 한글 안떠오르냐. 그런 면에서 이 부분 정말 많이 칭찬하고 싶다. 더보기 버튼의 우측 여백과 하단 여백이 안맞는건 몹시 짜증나지만 일단 넘어가자.





5. 개별 글로 들어가서 글 하단의 댓글이나 이전글/다음글, 작성자 소개 등은 난잡하다.

칸만 나눠놨지 안에 내용 넣은건 드러움. 일례로 작성자 소개는 양옆이 휑하다. 뭔가 아직 안넣은 느낌이랄까. 소속이나 전문 분야 이런거 왜 다 라벨만 있고 내용이 없어? 그리고 댓글란이 이전글/다음글보다 더 아래에 있는것도 맘에 안든다. 댓글이 본문과 더 밀접한 관계가 있기 때문에 그들 사이에는 아무도 끼어들어선 안된다. 마치 부모 자식간에 삼촌네 식구들이 껴있는 느낌이랄까. 하단 부분은 디자인이나 정보설계나 빵점이다.





6. 좌측 SNS 공유 버튼들은 깔끔하게 잘 만들어놨네.

나도 차용하고 싶다. 마우스 올릴 때 각 SNS의 색감대로 하이라이트 되는것도 좋고, 잘 어울리고, 잘 정돈되어있고. 이건 100점 준다. 훌륭하게 잘 만든 작품이다.




7. 한국어/중국어/영어 3개 국어 지원하는건 정말 흠좀무;;

단어 구사해놓은거 보면 상당히 훌륭한데 번역기야 이게? 찍어보면 구글 번역인것 같다. 구글 번역도 훌륭한듯. 맘에 안드는건 저 버튼 디자인 정도.




8. 우측 삼성 투모로우 매거진의 <> 버튼 좁디좁은 클릭 영역은 유감.

내가 빨간색으로 마킹해둔 부분만 클릭이 된다. 너무 좁다. 이런건 기본이잖아. 상단 내비게이션 두번째줄의 뉴스, 리뷰, TV 등의 버튼들도 마찬가지. 메인 페이지 배너에선 잘해놓고 왜 여기선 이모양인지..


9. 그리드, 그리드, 그리드

글목록 등에서 글 제목보다 범주와 글쓴 시간을 더 위에 넣는게 난잡해 보이는데 한몫을 한다. 굵고 큰 글 제목이 맨 위에서 무게를 잡아주고 내용을 구분지어야 하는데, 그 위에 연하고 짧은 범주와 글쓴 시간이 올라가 있어서 이가 빠져보이는거다. 안타깝다. 




위는 원본, 아래는 내가 임의로 정렬해본거다. 제목이 두줄이상 늘어지지 않도록 줄여 쓰는것도 필수. 각종 그리드 맞추는건 디자이너의 일상 아닌가? 난 디자이너에게 그리드 맞추라고 말하는것만큼 짜증나는게 없었다. 




디자인 1,2년차도 아니고 뭐가 저렇게 따로 놀아. 어려운 작업도 하나도 없구만. 제목 두줄 넘어가는건 개발단에서 해결해줄 수도 있지만 글 올린놈이 확인 제대로 안한것 같고. 애초에 그리드도 안맞춰져있었으니 좋게 나올 턱이 있나. 그리고 세번째 사진. 갤럭시탭3 사진이나 맨 아래 LTE-A 사진처럼 흰색이 포함되어있으면 그리드가 망가진다. 테두리 하나 넣는게 그렇게 힘든가?



10. 병신같은 무한 스크롤

위 스샷에 보이는 페이지 footer 부분 볼라면 스크롤 엄청나게 내려서 내용이 끝날때까지 가야된다. 내가 이거 이벤트나 제품 페이지에서 footer 온전하게 볼라고 한 5분 내내 스크롤하다가 빡쳐서 인포그래픽 가서 한 5페이지 넘기고 겨우 footer 스샷 찍는데 성공했다. 스크롤 내렸다 하면 계속 다음 페이지 로딩하는 바람에 볼래도 볼 수가 없어. 안보여줄라면 왜만들어놨니? 차라리 footer 부분 내용들만 상단에 메뉴 만들어서 처박아버리던가. 아니면 중요치 않은 부분이니 아무렇게나 나와도 상관 없다는건가.. 이런게 다 너무 많이 인터렉티브 어쩌고 처발라둔 웹 페이지의 공해다. 마우스를 어디 둬야 할지 모르겠다. 생각해봐, 난 분명 밑에 저거 누를라 했는데 내리면 사라지고 내리면 사라지고 내리면 또 사라져! 열 안받음?




11. 모바일 사이즈로 볼 때 최신 글은 사라지고 추천글만 나온다.

이건 좀 유감임. 난 삼성이 골라주는거 말고 최신글이 더 보고싶거든.




12. 용량 문제

웹진에 고릴라 얼굴 나오는 쪼매난 사진이 1.1메가바이트나 먹는다. 저거 좀 내리던지 리사이즈해서 다시 올리던지 어떻게좀 해봐라! 블로그 들어가자마자 컴퓨터에 냉각팬이 돌기 시작했다. 전반적으로 이 홈페이지 퍼포먼스 좀먹는건 자바스크립트 떡칠보단 사진 크기라 본다. 특히 저 웹진에 나오는 이미지들은 죄다 썸네일도 안만들었나봐. 저건 어떻게 좀 해야된다. 저 사이즈, 보통이면 20kb면 충분한거 아냐? 필요한 용량보다 50배 많이 쓰고 있다. 더 깊이 들어가봐?



안녕하세요_블로그_병맛으로_만들었습니다.png


전반적으로 페이지 전체에서 다이어트 할게 한무더기. 가운데 큰 배너에 세탁기 이미지 저딴게 200kb가 넘는다. 고품질 인물 사진도 아니면서, 심지어 원본도 아니면서 용량이 저래.. 75kb 정도면 충분하다. 저 이미지 올린 사람은 이미지 압축할 줄 모르는 사람인듯. 



이 글 보고 좀 배워. 상식이야.


자 봐봐 나눔고딕 웹폰트별로 3개 각각 거의 1메가 좀 안되게 잡아먹고 있고, 웹진 이미지가 막 2메가짜리도 있다. 엽기적이잖아 이쯤가면? 첫페이지 로딩하는데 40초나 걸려! 돌았구만. 이 블로그에서 제일 급한건 이미지 사이즈 줄이는거야. 정말 또라이같이 페이지 무겁게하는게 저 이미지다. 약도 없다 이건. 최대한 빨리 개선하라.



13. 나눔고딕 웹폰트.

디자이너의 자존심이라 굴림이나 돋움, 많이 봐줘서 맑은 고딕으로 본문 폰트가 나오는걸 용납할 수 없었나보다. 이해한다. 나도 내 서비스 만들 때 나눔고딕 웹폰트로 넣었으니까. 다만 본문 폰트는 그냥 나눔고딕 넣고, 굵은 폰트는 그냥 font-weight :bold 해도 큰 차이 없지 않나? extra-bold까지 거의 1메가 할당하여 3종을 따로 넣어 줬는데 폰트가 굵어질수록 눈에 띄게 지저분해지는 나눔고딕 특성상 심미성 면에서도 속도 면에서도 노멀 폰트 하나만 쓰는게 낫지 않았을까 싶다. 많이들 알겠지만 나눔고딕은 노멀이 제일 예쁘다. 굵게 들어가면 갑자기 튀김가루 묻힌것처럼 둔해진다. 나눔고딕은 본문용이지 헤더용 폰트는 정말 아니다.



전반적으로 점수 매긴다면?

- 디자인 : 심미적인 수준 낮음. 대학교 갓 졸업한 1,2년차가 디자인한것 같음

- 개발 : 수고 했음, 근데 결과물 보면 수고좀 더 해야할것 같음

- 운영 : 상식 탑재하고 이미지 크기 신경써라



내 컴퓨터에서조차 버벅거리는 화면에 반응형 웹이라고 온통 광고를 하는데.. 반응형 웹이 뭐 엄청나게 대단한 특수 기술도 아니고, 반응형 웹을 사용하여 도리어 사용성을 떨어뜨린 부분은 정말 유감이다. 아마 이거 외주 개발한 업체 마케터가 "우린 '반응형 웹'과 'HTML5' 기술을 사용하여 개발할것이다" 이렇게 드립쳐서 포장했겠지. 과연 이 블로그 개편에서 반응형 웹을 도입하여 사용자에게 어떤 가치를 주었을까? 글 보기 편하다? 속도가 빠르다? 어떤 단말기에서든 최적화된 화면으로 볼 수 있다? 아마 후자이지 싶지만 앞의 두개를 모두 재낀 개편인지라 아쉬움이 남는다. 


그리고 위에서 짚은 디자인과 기술적인 부분 이외에도 삼성 투모로우가 왜 욕먹는지 잘좀 대응했으면 한다. 맨날 뭔 이슈 생길때마다 어줍잖게 대응해서 불을 지르는데.. 그냥 입 다물고 있는게 더 나았을법한 일도 있다. 예를 들어 저번에 갤럭시S4 벤치마크 오버클럭 관련건. 지금 페북이나 트위터 같은데서 다른 기업들이 어떻게 활동하고 있는지 보고 잘좀 해봐라. 삼성전자 나팔수처럼 찬양만 하고 떠들지 말고 인간적인 모습을 보이란 말이다. 뭐든지 잘했다고 포장하고 자기네 입장만 대변하지 말고. 인조인간 로보트같은 소통은 딱 질색이다.



사족.

홈페이지랑은 별개로, 광고에 지긋지긋하게 백인만 나오는거 언제 접을지 원. 정말 정말 싫은 컨셉이다. 내가 싫어하는거 - 양공주, 영어 사대주의, 백인 우월주의 이런거. 백인 무슨 시발 가끔은 흑인도 섞어주고, 황인종도 섞어주고 라틴계열도 섞어주던가. 아주 눈에 띌 정도로 백인만 민다. 그것도 우리나라에 방영되는 광고에서. 더 웃기는건 백인이 쓰는 폰에 글씨는 한글로 나와 푸하하하하. 저번에 배컴 나오는 광고에서 거대하게 한글 메시지 뜬거 보고 좀 웃었다. 찐따같네 아주. 그렇게 백인이 좋으면 유한락스로 얼굴 표백 해라 시발놈들아. 백인! 백인! 정의로운 백인! 감성드립 칠라면 차라리 현대차 광고 보고 따라하던가. 그냥 니들은 광고 효과 있다 치면 뭐든 해댈거야. 기준 없이 뭐든 해대니까 독창적인게 하나라도 있냐?