감정 반응 UI

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

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

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

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

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

핵심 내용

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

관련 개념

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

출처

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