[Design Hacking] 네이버 뉴스 감성 아이콘 사용자 반응 시각화

최근 네이버 뉴스에서는 기사에 대한 사용자 반응을 공감해요에서 감성 아이콘으로 변경했습니다. http://blog.naver.com/nvr_design/220971828846

페이스북의 감정 리액션을 따라 한 것 같은데요. 참여 사용자의 수를 보면 상당히 호응이 좋은 것 같습니다. 기사라는 성격에 맞게 훈훈해요. 후속 기사 원해요 라는 선택도 적절해 보입니다.

하지만 참여한 사용자들의 반응을 보여주는 방식이 아쉽습니다.

기사에 대한 독자의 주된 감정이 드러나게 하기

기사의 상단에는 최다 득표를 한 감정 아이콘 2개를 노출합니다. 하지만 그 비율이 어떤지는 알 수 없습니다. 하단의 감성 아이콘은 얼마나 많은 사용자가 반응했는지 숫자로 정보를 보여주는 기능과 아이콘을 눌러 참여하는 액션 버튼으로의 두 가지 기능을 동시에 하고 있습니다. 

네이버 뉴스에서의 감성 아이콘 표현

액션 버튼에 덤으로 정보도 있다고 생각하면 이해를 할 수도 있지만 기왕 정보를 보여주는 것이라면 쉽게 표현이 되면 좋겠습니다. 독자 중에서 이런 반응에 참여하는 비율이 보통 20% 이하인데요. 80%의 사용자에게는 다른 사람들이 어떻게 반응했는지 확인하는 상태 표시가 더 의미가 있으니까요.

사용자의 반응이 잘 눈에 안 들어오는 건 숫자를 뇌에서 해석하여 비교해야 하기 때문인데요. 전 주의처리 속성을 이용해 시각화하면 좋겠습니다. 아이콘을 사용하고 있으니 득표 수에 따라 크기를 달리하는 걸 가장 먼저 생각해 볼 수 있는데요. 가장 많은 득표를 한 아이콘을 기본으로 두고 다른 감정을 상대적으로 작게 표현하도록 해봤습니다. 주된 감정을 알고 싶은 거지 정확한 비율을 알고 싶은 건 아니라 득표가 0이라고 안 보이게 하기보다는 최소를 50% 정도로 잡았습니다. 그래프에서 양을 제대로 비교하려면 크기는 2차원이니까 제곱 근에 비례하게 조정해야 하겠지만 그렇게까지 하지는 않았습니다. :)

이 정도만 조정을 해도 기사에 대한 독자들의 주된 감정이 무엇인지 바로 눈에 들어옵니다. 상단에서 화나요와 슬퍼요 두개 표시된 것으로는 두 감정이 비등한지 아닌지 알 수 없습니다. 하지만 이렇게 전체 감정의 비율을 시각화 함으로써 화나요가 다른 감정 등에 비해 월등히 우세한 반응이라는 것이 바로 드러납니다.

득표가 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##]