호버

호버(hover)는 웹디자인과 사용자 인터페이스 설계에서 주로 사용되는 용어로, 사용자가 마우스를 특정 요소 위에 올려놓았을 때 발생하는 시각적 또는 기능적 변화를 의미한다. 보통 버튼, 링크, 이미지와 같은 인터랙티브 요소에 사용되며, CSS를 통해 구현된다.

[아사달] 스마트 호스팅

상세

호버는 마우스 커서를 화면의 특정 아이템 영역 위에 올리면 마치 선택된 것처럼 배경색이 달라지는 등의 효과가 입혀지는 것을 말한다. 이는 사용자가 액션을 일으키도록 유도한다. 호버는 마우스 오버의 상위 개념으로 마우스 커서가 UI 영역에 진입하고 올려지는 행위를 포괄한다.

호버 효과는 웹의 초창기부터 존재해 왔으며, HTML과 CSS의 발전과 함께 점점 더 정교해졌다. 초기의 호버 효과는 주로 링크의 색상을 변경하는 것에 그쳤으나, 현재는 애니메이션, 트랜지션, 변환(transform) 등을 활용한 다양한 시각적 효과가 가능하다. 호버 효과는 주로 CSS를 사용하여 구현된다. CSS의 :hover 의사 클래스(pseudo-class)를 사용하여 특정 요소에 호버 효과를 적용할 수 있다. 호버 효과는 사용자가 마우스를 특정 요소 위에 올려놓았을 때 해당 요소가 반응함으로써 사용자는 그 요소가 클릭 가능하거나 상호작용할 수 있음을 인식할 수 있다. 이러한 피드백을 통해 사용자 경험을 향상시키고, 웹사이트나 애플리케이션의 사용성을 높이는 데 기여한다. 또한, 다양한 호버 효과를 통해 웹 디자인을 더욱 매력적으로 만들고, 사용자에게 시각적 즐거움을 줄 수 있다.

특징

구현

가장 기본적인 수준에서 호버 효과는 HTML과 CSS를 사용하여 구현할 수 있다. 뷰쓰리(Vue3), 리액트(React), 앵귤러제이에스(AngularJS) 및 제이쿼리(jQuery)와 같은 고급 웹 개발 프레임워크 및 라이브러리의 출현으로 개발자는 복잡한 애니메이션, 전환 및 상호 작용을 쉽게 추가하여 더욱 매력적인 호버 효과를 얻을 수 있다. 이러한 효과는 웹사이트의 전반적인 디자인에 기여할 뿐만 아니라 웹사이트 UI의 직관성과 반응성을 향상시켜 사용자 참여, 접근성, 전환율에 직접적인 영향을 미친다. 닐슨노먼그룹(Nielsen Norman Group)이 실시한 연구에 따르면 다양한 유형의 호버 효과를 활용하는 웹사이트는 사용자 참여도가 10% 증가하고 전체 사용성 점수가 8% 향상되는 것으로 나타났다.

종류

웹 개발에서 호버 효과 적용은 크게 정적 및 동적의 두 가지 주요 유형으로 분류할 수 있다.

• 정적 호버 효과 : 최소한의 변형을 포함하며 일반적으로 요소의 색상, 배경색, 불투명도 또는 테두리 두께의 변경으로 구성된다. 구현이 비교적 간단하며 CSS 변경이 최소화되는 경우가 많다. 정적 호버 효과의 예로는 호버 시 버튼의 배경색 변경, 밑줄 또는 텍스트 색상 변경으로 탐색 메뉴 항목 강조 표시 등이 있다.
• 동적 호버 효과 : 사용자 상호 작용에 반응하면서 더욱 복잡한 애니메이션과 전환을 나타낸다. 효과적으로 구현하려면 CSS 속성과 자바스크립트 이벤트 리스너의 조합이 필요하다. 동적 호버 효과의 예로는 추가 정보를 표시하기 위한 이미지 애니메이션, 호버 시 드롭다운 메뉴 확장, UI 요소 변환 및 모핑, 시각적 구성 요소에 3D 회전 적용 등이 있다.

장점

호버의 장점은 다음과 같다.

• 시각적 흥미 : 사용자의 주의를 끌기 위한 효과적인 방법이다. 마우스를 올리면 이미지가 변하므로 사용자는 관심을 가능성이 높다.
• 정보 전달 : 사용자에게 추가 정보를 제공할 수 있다. 예를 들어 제품 이미지에 마우스를 올리면 가격이나 설명과 같은 추가 정보를 제공할 수 있다.
• 사용자 상호작용 촉진 : 사용자는 웹사이트나 앱과 상호작용할 수 있다. 이는 사용자 경험을 개선하고 사용자가 사이트에서 더 많은 시간을 보내도록 유도할 수 있다.
• 시각적인 디자인 향상 : 웹페이지나 앱의 디자인을 개선하는 데 도움이 된다. 동적인 효과를 추가하여 페이지가 더 생동감 있고 현대적으로 보이도록 할 수 있다.
• 상태 표시 : 상태를 나타내는 데 사용될 수 있다. 예를 들어 사용자가 특정 이미지 위로 마우스를 올리면 해당 이미지의 상태가 변경될 수 있다.

고려사항

호버 효과를 설계할 때는 가시성, 일관성, 반응성, 접근성을 고려해야 한다. 호버 효과는 사용자가 쉽게 인식할 수 있어야 하며, 미세한 변화보다는 명확한 변화를 주는 것이 좋다. 또한, 웹사이트나 애플리케이션 전반에 걸쳐 일관된 호버 효과를 사용하는 것이 중요하다. 일관된 패턴은 사용자 경험을 향상시키기 때문이다. 호버 효과는 즉각적으로 반응해야 하며, 딜레이가 발생하면 사용자에게 불편을 줄 수 있다. 마지막으로, 호버 효과는 키보드 내비게이션이나 스크린 리더와 같은 보조 기술과 호환되도록 설계해야 한다. 이는 웹 접근성 지침(WCAG)을 준수하는 데 중요하다.

예시

다양한 호버 효과 예시를 살펴보면, 색상 변경, 크기 변화, 투명도 변화, 움직임, 텍스트 변화, 이미지 변화 등이 있다.

• 색상 변경 : 요소의 배경색, 텍스트 색상, 테두리 색상 등이 변경된다.
• 크기 변화 : 요소가 확대되거나 축소된다.
• 투명도 변화 : 요소의 투명도가 변경된다.
• 움직임 : 요소가 특정 방향으로 이동하거나 회전한다.
• 텍스트 변화 : 텍스트의 스타일이 변경되거나, 밑줄이 나타난다.
• 이미지 변화 : 이미지가 다른 이미지로 교체되거나, 확대/축소된다.

호버 효과는 다양한 웹사이트와 애플리케이션에서 사용되고 있다. 예를 들어, 대부분의 웹사이트는 내비게이션 메뉴에 호버 효과를 사용하여 사용자가 현재 위치한 메뉴 항목을 시각적으로 강조한다. 많은 블로그나 포트폴리오 사이트에서는 카드 레이아웃을 사용하며, 카드에 마우스를 올렸을 때 확대되거나 그림자가 생기는 호버 효과를 적용한다. 버튼에 호버 효과를 적용하여 클릭 가능성을 강조하고, 클릭 전후의 상태를 명확히 구분한다. 이미지 갤러리에서는 이미지에 호버 효과를 적용하여 확대되거나 설명 텍스트가 나타나도록 할 수 있다.

참고자료

• 〈롤오버(Hover)란 무엇인가요?〉, 《아임웹》
• UX 컨설턴트 전민수, 〈체크박스에 호버 효과를 줘야 하는 이유〉, 《브런치스토리》, 2016-10-18
• jaewooojung, 〈(HTML, CSS) 마우스 커서 올릴 때 (오버) 효과주는 방법 - hover〉, 《티스토리》, 2019-08-10
• NINA.C, 〈기획 용어 5부: 인터랙션/제스처 알아가기〉, 《요즘IT》, 2021-07-26
• yunamom, 〈(CSS) 이미지에 적용한 마우스 hover 효과들 (예시포함)〉, 《티스토리》, 2022-04-17
• Park.D, 〈이미지 호버 효과 만들기〉, 《벨로그》, 2023-04-21
• 호락호락한순무, 〈(Web) CSS hover란 무엇일까〉, 《티스토리》, 2023-08-14
• 〈호버 효과〉, 《앱마스터》, 2023-09-15
• Louis, 〈CSS 마우스 오버 효과〉, 《벨로그》, 2023-10-19
• 〈CSS 이미지 호버 효과(Image hover effect)〉, 《디자인키트》, 2024-04-30

같이 보기

• 웹디자인
• 사용자 인터페이스
• 마우스

이 호버 문서는 인터넷에 관한 글로서 검토가 필요합니다. 위키 문서는 누구든지 자유롭게 편집할 수 있습니다. [편집]을 눌러 문서 내용을 검토·수정해 주세요.

개발 : 프로그래밍, 소프트웨어, 데이터, 솔루션, 보안, 하드웨어, 컴퓨터, 사무자동화, 인터넷 □■⊕, 모바일, 사물인터넷, 게임, 메타버스, 디자인 인터넷 PC통신 • 그누텔라 • 네트워크 • 다크넷 • 다크웹 • 딥웹 • 무선인터넷 • 슈퍼피어 • 스타링크 • 아르파넷 • 아이투피(I2P) • 엑스트라넷 • 오버레이 네트워크 • 오투오(O2O) • 오프라인 • 온라인 • 온오프라인 • 유선인터넷 • 인터넷 • 인트라넷 • 초고속 인터넷 • 토어(토르) • 표면웹 • 프리넷 • 피투피(P2P) • 하이브리드 피투피(P2P) • 홈네트워크 인터넷 기술 ARP • DNS • FTP • G-클라우드 • HTTP • HTTPS • IPFS • IPv4 • IPv6 • IRC • IRI • ISBN • LDAP • MOIP • OpenSSL • OSI 7 계층 • RFC • RFID • SFTP • SOAP • SSH • SSL • SSO • TCP • TCP/IP • TLS • UCI • UDP • URI • URL • URN • VoIP • 강화 내부 게이트웨이 라우팅 프로토콜 • 검색 • 검색엔진 • 게이트웨이 • 경계 경로 프로토콜 • 내부 게이트웨이 라우팅 프로토콜 • 다운로드 • 데몬 • 라우팅 정보 프로토콜 • 백엔드 • 사물인터넷 • 서버 • 서버-클라이언트 • 서브넷마스크 • 세션 • 스트리밍 • 식별자 • 아이피(IP) • 업로드 • 에듀테크 • 온프레미스 • 원격 프로시저 호출(RPC) • 유비쿼터스 • 인터넷 기술 • 자율시스템 • 정보기술 • 정보통신 • 채팅 • 챗봇 • 최단경로 우선 프로토콜(OSPF) • 쿠키 • 크롤링 • 클라이언트 • 키워드 • 텔넷 • 토폴로지 • 트래픽 • 패킷 • 포털 • 포트 • 프런트엔드 • 프로토콜 • 프록시 • 해시태그 이메일 IMAP • POP3 • SMTP • 계정메일 • 네이버 메일 • 다음 메일 • 센드메일 • 스팸 • 스팸메일 • 스팸필터링 • 아웃룩 익스프레스 • 야후 메일 • 웹메일 • 이메일 • 지메일 • 카카오 메일 • 한메일 • 핫메일 웹 KWCAG • WCAG • 서핑 • 시맨틱 웹 • 오프라인 웹 • 웹 • 웹 1.0 • 웹 2.0 • 웹 3.0 • 웹개방성 • 웹서비스 • 웹접근성 • 웹접근성 인증마크 • 웹주소 • 웹표준 • 웹호환성 • 피드 웹사이트 BBS • GNB • LNB • UI/UX • 게시판 • 관리자 사이트 • 그래픽 사용자 인터페이스(GUI) • 누리집 • 대시보드 • 드롭다운 메뉴 • 랜딩 템플릿 • 랜딩 페이지 • 리더보드 • 마이홈피 • 메뉴 • 모달창 • 미니홈피 • 방명록 • 배너 • 사용자 경험(UX) • 사용자 인터페이스(UI) • 섹션 • 왼쪽메뉴 • 웹기획 • 웹사이트 • 웹페이지 • 인터페이스 • 쪽지 • 커뮤니티 • 탑메뉴 • 탭메뉴 • 템플릿 • 팝업 • 페이지 • 페이지뷰 • 햄버거 메뉴 • 호버 • 홈페이지 • 화면 웹브라우저 넷스케이프 • 모자이크 • 브라우저 • 브레이브 브라우저 • 블록체인 브라우저 • 사파리 • 삼성인터넷 • 스윙 • 엣지 • 오시리스 • 오페라 • 웨일 • 웹브라우저 • 인터넷 익스플로러(IE) • 크롬 • 파이어폭스 • 판도브라우저 인터넷 서비스 구글 • 구글 미트 • 구글챗 • 구글 행아웃 • 깃허브 • 네아로 • 네이버 • 네이버 웹툰 • 네이버 카페 • 넷플릭스 • 다음 • 라이코스 • 레진코믹스 • 메일루 • 멜론 • 바이두 • 바이트댄스 • 비트토렌트 • 빌리빌리 • 빙 • 소리바다 • 스포티파이 • 아마존 웹서비스(AWS) • 애플 • 야후 • 야후재팬 • 얀덱스 • 에버노트 • 에어비앤비 • 왓챠 • 웹소설 • 웹툰 • 유튜브 • 인스타툰 • 인터넷 서비스 • 인터넷카페 • 잼라이브 • 줌 • 카카오 • 카카오 웹툰 • 카카오페이지 • 탑툰 • 텐센트 • 팟캐스트 • 패스 • 페이오니아 • 페이팔 • 해시넷 • 화상통화 • 화상회의 인터넷쇼핑 11번가 • 그립 • 네이버 쇼핑 • 네이버 쇼핑 라이브 • 라이브방송 • 라이브커머스 • 모바일쇼핑 • 스쉐라이브 • 스타일쉐어 • 아마존 • 알리바바 • 오픈마켓 • 옥션 • 온라인쇼핑 • 위메프 • 이베이 • 인터넷쇼핑 • 인터파크 • 전자상거래 • 지마켓 • 징동닷컴 • 카카오 쇼핑 • 카카오 쇼핑 라이브 • 커머스 • 쿠팡 • 쿠팡 라이브 • 타오바오 • 티몬 소셜 네트워크 SNS(소셜 네트워크 서비스) • 구글 블로거 • 네이버 밴드 • 네이버 블로그 • 디시인사이드 • 링크드인 • 마이크로블로그 • 맞팔 • 브런치스토리 • 블로그 • 소셜 네트워크 • 엑스 (트위터) • 웨이보 • 인스타그램 • 트루스소셜 • 티스토리 • 팔로우 • 페이스북 • 플리커 • 핀터레스트 메신저 골프메신저 • 님버즈 • 대화방 • 두레이 • 디스코드 • 딩톡 • 라인 • 라인웍스 • 마이크로소프트 팀즈 • 메신저 • 버디버디 • 스냅챗 • 스노우 • 스카이프 • 슬랙 • 아이씨큐(ICQ) • 왓츠앱 • 웹메신저 • 위챗 • 잔디 • 직톡 • 카카오워크 • 카카오톡 • 카톡방 • 큐큐(QQ) • 탱고 • 텔레그램 • 틱톡 • 페이스북 메신저 • 플로우 도메인 네임서버 • 다국어도메인 • 도메인 • 레지스트라 • 레지스트리 • 아이피 • 인터넷주소 • 인터넷키워드 • 한글인터넷주소 • 후이즈 호스팅 메일호스팅 • 서버호스팅 • 웹호스팅 • 코로케이션 • 클라우드 • 클라우드 네이티브 • 파킹 • 포워딩 • 호스팅 위키 구스위키 • 나무위키 • 노스모크 • 더위키 • 디시위키 • 리그베다위키(엔하위키) • 리브레위키 • 미디어위키 • 바다위키 • 백괴사전 • 아이티위키 • 알파위키 • 엔하계 위키 • 요다위키 • 우만위키 • 위키 • 위키낱말사전 • 위키독스 • 위키문법 • 위키문서 • 위키문헌 • 위키미디어재단 • 위키백과 • 위키스 • 위키엔진 • 위키원 • 위키원드 • 위키트리 • 위키휴가 • 제이위키 • 제타위키 • 중국위키 • 팬덤(위키아) • 한국어 위키백과 • 한국위키미디어협회 • 항공위키 인터넷 사용자 가입 • 가입자 • 강퇴 • 계정 • 관리자 • 네트워크 관리자 • 네티즌 • 누리꾼 • 대기자 • 데이터베이스 관리자 • 등록자 • 디지털 원패스 • 로그아웃 • 로그인 • 방문자 • 방장 • 블로거 • 블록체인 관리자 • 비회원 • 사용자 • 사이트 관리자 • 서버관리자 • 시삽 • 시스템 관리자 • 아이디(ID) • 운영진 • 웹관리자 • 웹마스터 • 유튜버 • 접속자 • 차단 • 최고관리자 • 탈퇴 • 탈퇴자 • 회원 • 회원제 • 휴면 • 휴면계정 인터넷 단체 IANA • ICANN • W3C • 다르파 • 유럽입자물리연구소(CERN) 위키 : 자동차, 교통, 지역, 지도, 산업, 기업, 단체, 업무, 생활, 쇼핑, 블록체인, 암호화폐, 인공지능, 개발, 인물, 행사, 일반