감정 반응 UI

감정 반응 UI는 사용자가 콘텐츠에 대한 감정적 반응을 표현할 수 있는 인터페이스 패턴이다. 페이스북의 단일 '좋아요(Like)' 버튼이 이 분야의 최초 표준을 만들었고, 이후 6가지 감정으로 확장된 공감(Reactions) 버튼이 주요 사례가 되었다.

페이스북 좋아요 → 공감(Reactions) 전환 사례: 1년간의 프로젝트로 출시된 페이스북의 6감정 공감 버튼은 Julie Zhuo가 총괄했다. 인사이드 아웃의 자문이기도 했던 UC 버클리의 Dacher Keltner 교수가 도움을 주어, 수백 가지 감정에서 20~25개로 추리고, 사용자 댓글에서 가장 많이 표현되는 감정 7개를 선정한 후, 실험을 거쳐 'yay'를 제외한 6개 (좋아요·사랑해요·하하·와우·슬퍼요·화나요)로 최종 출시했다.

'좋아요' 단일 버튼의 강력함: 페이스북 최고의 히트 UX였던 '좋아요'의 강점은 좋아요 자체가 아니라 '좋아요 하나밖에 없음'에 있었다. 옵션이 하나뿐이라서 의사 결정 비용이 0에 수렴했고, 빠른 사회적 인정을 가능하게 했다.

6감정 확장의 디자인 결정과 그 평가:

• ✅ '싫어요' 버튼 배제: UX가 사용자 요구를 그대로 들어주는 것이 능사가 아님을 보여주는 대표 사례. 부정 반응은 페이스북을 황폐화시켰을 것.
• ✅ 롤오버/롱프레스로 펼치는 인터랙션: 6개를 동시에 노출하지 않아 시각적 혼란 방지, 사용자의 점진적 적응 유도.
• ❓ '공감해요' 버튼의 부재: 친구가 슬픈 일을 겪을 때 '슬퍼요'(나도 슬프다) ≠ '공감해요'(너의 감정을 지지한다). 부정적 상황에 '좋아요'를 누르기 꺼려져 결국 아무 반응도 없는 싸늘함이 발생.
• ❓ 언어적 설명 부착: 이모티콘만으로 충분할 텐데 '좋아요-사랑해요-하하-와우-슬퍼요-화나요' 식의 라벨을 단 결정. 영어권에서는 단어 형태(형용사·감탄사·동사·명사)가 문법적으로 안 맞는 비판도 있다. 다양한 해석의 여지를 좁히는 결과.

집계된 반응 데이터의 시각화 문제: 감정 반응 UI는 사용자가 반응을 입력하는 단계뿐 아니라, 반응이 쌓인 후 그 결과를 어떻게 보여줄지도 중요한 설계 과제다. 네이버 뉴스가 기존 '공감해요' 단일 버튼을 페이스북 Reactions를 본뜬 여러 감성 아이콘으로 바꾼 사례를 분석해보면, 기사 상단에는 최다 득표 아이콘 2개만 노출하고 하단 아이콘들은 득표수를 텍스트로만 표시해, 실제로 반응이 어떤 비율로 분포하는지 한눈에 파악하기 어려운 한계가 있었다. 반응 버튼은 '숫자 정보 제공'과 '참여를 위한 액션 버튼'이라는 두 기능을 동시에 수행하지만, 실제로 반응에 직접 참여하는 사용자는 전체 독자의 20% 이하인 경우가 많아, 나머지 80%에게는 다른 사람들의 반응 상태를 파악하는 정보 전달 기능이 더 중요하다.

크기 기반 시각화 개선안: 숫자를 일일이 비교·해석해야 하는 부담을 줄이기 위해, 득표수에 비례해 아이콘 크기를 달리 표현하는 전주의처리(pre-attentive) 속성 기반 시각화가 제안됐다. 최다 득표 아이콘을 기준 크기로 두고 나머지는 상대적으로 작게 표시하되, 득표가 0이어도 완전히 숨기지 않도록 최소 크기(약 50%)를 보장한다. 정확한 비율 전달이 목적이라면 면적 비교이므로 크기를 득표수의 제곱근에 비례시켜야 하지만, 이 사례에서는 '주된 감정이 무엇인지'를 직관적으로 드러내는 데 목적을 두어 단순 비례 방식을 택했다. 득표 0인 아이콘은 회색조로 처리해 대비를 주고, 아이콘 정렬 기준(하단/가운데 정렬)을 통일해 크기 비교가 쉽도록 조정했다. 구현은 `:before` 가상 요소의 스타일을 실제 DOM이 아닌 문서 스타일 객체에 동적으로 재정의하는 방식으로, jQuery로 득표수 대비 최댓값 비율을 계산해 `transform: scale()`과 `opacity`, `grayscale` 필터를 적용했다.

핵심 내용

• 페이스북 Reactions: 좋아요 → 6감정 확장의 대표 사례
• 단일 옵션 UX의 강점은 선택의 부재에 있음
• '싫어요' 미도입 = 사용자 요구 ≠ 정답을 보여주는 사례
• 감정 라벨링은 해석 자유도를 좁히므로 신중해야 함
• '공감해요' 같은 메타 감정의 부재는 슬픔/위로 상황의 표현 공백을 만듦
• 롤오버/롱프레스로 펼치는 점진적 노출이 시각적 혼란 방지

관련 개념

• 행동경제학과 UX — 선택지 수가 의사 결정에 미치는 영향
• 힉의 법칙 — 선택지 증가 → 결정 시간 증가의 원리
• UI 컴포넌트 용어 — Reaction 버튼, 이모지 컴포넌트의 분류

출처

• 페이스북 새 공감(좋아요) 버튼에 대한 개인적인 느낌 — 이 재용, UX 가벼운 이야기