2017. 4. 5. 07:54ㆍRe-design!
최근 네이버 뉴스에서는 기사에 대한 사용자 반응을 공감해요에서 감성 아이콘으로 변경했습니다. http://blog.naver.com/nvr_design/220971828846
페이스북의 감정 리액션을 따라 한 것 같은데요. 참여 사용자의 수를 보면 상당히 호응이 좋은 것 같습니다. 기사라는 성격에 맞게 훈훈해요. 후속 기사 원해요 라는 선택도 적절해 보입니다.
하지만 참여한 사용자들의 반응을 보여주는 방식이 아쉽습니다.
기사에 대한 독자의 주된 감정이 드러나게 하기
득표가 0인 경우는 회색으로 확실히 대조를 만드는 게 좋습니다. 아래는 아이콘이 가운데 정렬, 위에는 하단 정렬되어 있습니다. 1차원 바차트가 아니더라도 크기를 비교하는 거라면 위처럼 정렬 하는 게 좋습니다.
사용한 코드를 수정해서 나만의 디자인을 연습해 보세요. http://codepen.io/taekie/pen/bqzmPN
아이콘을 :before pseudo 요소를 이용해서 그리고 있는데요. 보통은 DOM 객체의 스타일을 변경하지만 :before는 실제 DOM 요소가 아니라 CSS 선택자로 직접 선택할 수가 없습니다. 할 수 없이 문서의 스타일 객체에 :before 를 재정의해 주는 주었습니다.
$(function(){ setTimeout(redesign,500); }) function redesign(){ //좋아요 var max_count=1; $(".u_likeit .u_likeit_list_count").each(function(){ var count=parseInt($(this).text()); if(count>max_count) max_count=count; }); $(".u_likeit .u_likeit_list_count").each(function(i){ var count=parseInt($(this).text()); var size=count/max_count*0.5+0.5; var opacity=count/max_count*0.8+0.5; var gray=0; if(count==0) gray=1; var style="<style>.u_likeit_list:nth-child("+(i+1)+") a:before{transform:scale("+size+");opacity:"+opacity+";filter:grayscale("+gray+");}</style>" $(style).appendTo('head'); }); }
훈훈한 기사를 모아보면 좋겠어요
기사에 직접 사용자의 감정 반응을 넣도록 한 것 좋은 시도라고 생각합니다. 사실 대부분의 뉴스가 화나고 슬픕니다. 그런 소식들이 기삿거리가 되니까요. 하지만 가끔 훈훈한 뉴스를 보면서 위안을 얻고 싶을 때가 있는데요. 데이터가 쌓이면 이런 독자 감정 반응으로 검색해서 모아 볼 수 있는 기능도 제공되면 좋겠습니다.
[참고##Design Hacking##]
지식IN에도 감성 아이콘셋이 적용되었더라구요.
좋아요/유익해요/재밌어요/동의못해요/광고같아요
그렇기는 한데 네이버측에서 생각을 안해보진 않았을 것 같다는 생각도 드네요. 숫자를 뇌에서 한번 해석해봐야 함으로써 어느정도 타인들의 감정으로부터 거리감을 얻게되고, 그로부터 객관성을 조금 더 얻을 수 있게 되지 않을까 하는 생각입니다. 사람들은 다수의 감정에 쉽게 휩쓸리니까요.
다른 감정 이모티콘과 달리 '후속기사원해요' 글자가 잘 안보이고 감정과 거리가 있어서 '후속이시원해요'라고 처음에읽었어요;;
저는 후 속기 시원해요 라고 읽었어요 ㅋㅋㅋㅋㅋㅋㅋㅋㅋ 그래서 아 이거 오타 아닌가 생각했죠