한 줄 요약 좋아요 버튼에 마우스를 올리면 이모지 반응 줄이 톡톡 튀어 올라오고, 하나를 누르면 버튼이 그 반응으로 바뀌는 작은 인터랙션이에요.
이럴 때 필요해요
"좋아요" 하나만으로는 감정을 다 담기 어려워요. 그렇다고 버튼을 여섯 개 늘어놓으면 화면이 지저분해지죠. 이 패턴은 평소엔 버튼 하나만 보여주고, 반응하려 할 때만 이모지들을 펼쳐서 고르게 합니다. SNS의 "좋아요 꾹 누르면 나오는 반응"이 바로 이거예요. 댓글게시물후기처럼 가벼운 감정 표현이 필요한 곳에 잘 맞아요.
어떻게 동작하나
좋아요 버튼 영역에 마우스를 올리면(또는 탭하면) 위쪽에 이모지 팝업이 떠요.
각 이모지는
transform(아래에서 위로 + 크기)과opacity만 바꿔서 나타나고, 시작 시간을 조금씩 늦춰(stagger) 왼쪽부터 차례로 튀어 올라요. 살짝 통통 튀는 느낌은 스프링 같은cubic-bezier곡선에서 나와요.이모지 위에 올리면
scale로 커져요 너비를 바꾸는 게 아니라 확대라서 옆 이모지들이 밀리지 않아요. 위에는 라벨이 떠요.이모지를 누르면 그 반응이 버튼에 반영되고(이모지라벨색), 팝업은 닫혀요.
핵심은 이거예요
마우스가 버튼에서 팝업으로 옮겨갈 때 그 빈 틈에서 메뉴가 바로 닫히지 않게 하는 거예요. 떠나는 순간 닫지 말고 아주 짧게(약 0.18초) 기다렸다가 닫으면, 그 사이 팝업에 다시 들어오면 닫기를 취소해서 끊김 없이 이어져요.
놓치기 쉬운 것
트리거와 팝업이 떨어져 있으면 그 사이를 지날 때 hover가 끊겨 메뉴가 깜빡 닫혀요 닫기를 살짝 지연시켜 해결.
데스크톱은 hover지만 터치 기기엔 hover가 없어요 버튼 클릭으로도 열고 닫게 같이 처리.
확대를
width나font-size로 하면 레이아웃이 출렁여요transform: scale로 해야 주변이 고정돼요.
이런 곳에 써요
게시물댓글후기의 감정 반응(좋아요 외 여러 표정)
메시지/채팅의 빠른 이모지 반응
만족도 조사처럼 한 번의 탭으로 감정을 받는 자리