LEVEL 6 QUEST

버튼에 생명 불어넣기

클릭·호버·애니메이션, 인터랙션의 기초

🎯

버튼에 생명 불어넣기

밋밋한 버튼을 클릭하고 싶은 매력적인 버튼으로! hover, active, 애니메이션의 세계

🤔 인터랙션이 뭔가요?

인터랙션(Interaction) = 사용자와 웹페이지 사이의 상호작용이에요. 마우스를 올리면 색이 변하고, 클릭하면 눌리는 효과가 나고, 스크롤하면 요소가 나타나는 것 모두 인터랙션입니다!

생각해 보세요. 엘리베이터 버튼을 누르면 불이 들어오죠? 버튼이 "네, 입력 받았어요!"라고 피드백을 주는 거예요. 웹에서도 마찬가지입니다. 사용자가 행동하면 웹이 반응해야 해요. 반응이 없으면 사용자는 "이거 작동하는 건가?" 하고 불안해합니다.

😐 인터랙션 없는 버튼

마우스를 올려도 변화 없음, 클릭해도 눌리는 느낌 없음, "이거 버튼 맞아?" 하는 혼란, 싸구려 느낌, 사용자 이탈률 상승

🤩 인터랙션 있는 버튼

마우스를 올리면 색이 변함, 클릭 시 살짝 눌리는 효과, 직관적이고 전문적인 느낌, 사용자 만족도 UP, 클릭률 상승

🔒

여기까지는 미리보기입니다

버튼에 생명 불어넣기
무료 가입하면 이어서 볼 수 있고, 강의를 완료할 때마다 XP와 레벨이 쌓입니다.