인터페이스에서의 호버: 정의, 효과 종류 및 구현

웹 디자인에서 호버란 무엇인가

호버(영어 “to hover”에서) — 마우스 커서가 요소 위에 있을 때의 인터페이스 요소의 시각적 반응입니다. 이 용어는 CSS :hover 가상 클래스와 호버 시 요소의 상태 둘 다를 지칭하는 데 사용됩니다.

호버의 개념은 Xerox Alto(1973)의 초기 그래픽 인터페이스에서 시작되었고, 1998년 CSS2의 도입으로 웹에서 표준화되었습니다. 그 이후 호버는 데스크탑에서 사용자 경험의 빈수를 이루는 요소가 되었습니다.

CSS Usage Statistics (2025)에 따르면, 상위 1000개 사이트의 94%가 적어도 한 가지 요소에 :hover 가상 클래스를 사용합니다. 호버는 버튼(89%), 링크(85%) 및 카드(62%)에 가장 많이 적용됩니다.

호버와 다른 상태의 차이

호버 ≠ active. :hover는 마우스를 가리킬 때 활성화되고, :active는 클릭 순간에 활성화됩니다. :focus는 키보드를 통해 포커스를 받을 때 활성화됩니다. 각 상태는 고유한 목적이 있습니다. 호버는 미리보기이고, active는 작업 확인입니다.

CSS에서 :hover 가상 클래스

CSS에서 :hover 가상 클래스는 사용자가 마우스 커서를 요소 위로 가리킬 때 스타일을 적용합니다. 이는 어떤 HTML 요소에서도 작동하지만 그리 상호작용적 요소에서 가장 많이 사용됩니다.

/* Basic hover implementation */
.button {
    background: #4A90D9;
    color: white;
    padding: 12px 24px;
    border: none;
    transition: all 0.3s ease;
}

.button:hover {
    background: #357ABD;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(74,144,217,0.4);
}

:hover 선택자의 구체성은 클래스(0,1,0)와 동일합니다. 특정 요소에 대한 호버를 재정의해야 하는 경우, 더 높은 구체성의 선택자를 사용하십시오. 선언 순서가 중요합니다. :hover가 :focus 다음에 선언되면, 포커스시 호버가 작동하지 않을 수 있습니다.

결합 가상 클래스

:hover는 다른 가상 클래스와 결합할 수 있습니다 복잡한 로직을 만들기 위해. 예를 들어, .card:hover .card__title는 카드 전체를 호버할 때 카드 내의 타이틀 스타일을 변경합니다. 이를 통해 중첩 애니메이션이 있는 효과를 만들 수 있습니다.

호버 효과의 종류

호버 효과는 변경되는 특성의 종류에 따라 분류됩니다. 각 종류는 다른 시나리오에 적합하며 사용자에게 특정한 느낌을 전달합니다.

가장 효과적인 종류는 색상과 그림자 효과의 조합입니다. Material Design은 호버 피드백의 주요 유형으로 엘리베이션 변경(그림자 높이 변경)을 사용할 것을 권장합니다.

Google Material Design (2024)에 따르면, 호버 효과는 늬라보이지만 주변을 분산시켜서는 안 됩니다. 권장되는 애니메이션 기간은 200–300 밀리초입니다. 너무 빠른 효과(100ms 미만)는 몰라차릴 수 있고, 너무 느린 효과(500ms 초과)는 사용자를 짜증나게 합니다.

부드러운 효과를 위한 CSS 트랜지션

CSS 속성 transition은 시간에 걸쳐 속성 변경을 애니메이션하여 호버 효과를 부드럽게 만듭니다. transition이 없으면 호버가 즐각 발생하여 또닥거리고 불편합니다.

/* Different transitions per property */
.card {
    transition:
        box-shadow 0.3s ease-out,
        transform 0.2s ease-out,
        background 0.15s linear;
}

.card:hover {
    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
    transform: translateY(-4px);
}

transition 기간은 문맥에 따라 달라집니다. 작은 요소(아이콘, 링크)의 경우 150–200ms. 큰 요소(카드, 모달)의 경우 250–350ms. 이징 함수 ease-out은 말미에 애니메이션을 부드럽게 감속시켜 자연스러운 느낌을 만듭니다.

권장되는 실무 — 애니메이트된 각 속성에 대해 transition을 개별적으로 지정하십시오. all 속성은 개발 시 편리하지만, 생산 환경에서는 예기치 못한 효과를 피하기 위해 애니메이션에 대한 구체적인 속성을 정의하는 것이 좋습니다.

터치 기기에서의 호버

터치 기기에서는 호버의 개념이 존재하지 않습니다. 요소 위를 가리킬 커서가 없습니다. 요소를 탭하면 호버 상태를 거치지 않고 곡장 클릭이 발생합니다. 인터페이스가 호버에 완전히 의존하는 경우 문제가 되지만, 이것은 문제를 오하는 요소가 된다면 더 심각합니다.

StatCounter (2026)에 따르면, 글로벌 웹 트래픽의 62%가 모바일 기기에서 발생합니다. 터치 화면에서 호버의 부재를 무시하는 것은 대부분의 사용자에 대한 UX 제어를 잃는 것을 의미합니다.

/* Disable hover on touch devices */
@media (hover: none) and (pointer: coarse) {
    .button:hover {
        background: initial;
        transform: none;
    }
}

hover: none 미디어 쿼리를 통해 기기가 호버를 지원하지 않는다는 것을 감지할 수 있습니다. 처럼 기기에서는 호버 효과가 비활성화되고, :active와 :focus 상태를 기반으로 상호작용합니다. 대체 해결얉으로는 탭 시 호버 콘텐츠를 표시하는 것(첫 번째 탭은 호버 표시, 둘째 탭은 동작 수행)이 있지만, 이 패턴은 UX를 이해시킵니다.

호버 효과의 접근성

호버 접근성은 좌종 간과되는 중요한 측면입니다. 키보드로 인터페이스를 네비게이션하는 사용자는 :hover를 활성화할 수 없습니다. 호버를 통해서만 사용 가능한 기능은 그들에게 접근할 수 없게 됩니다.

WCAG 2.2 규칙(성공 기준 1.4.13 — 호버 또는 포커스시 콘텐츠): 호버 시 나타나는 콘텐츠는 포커스시에도 사용 가능해야 합니다. 호버가 추가 정보(툴튼, 드롭다운 메뉴)를 표시하는 경우, 동일한 정보가 :focus에서도 적용되어야 합니다.

/* Hover + focus for accessibility */
.tooltip-trigger:hover .tooltip,
.tooltip-trigger:focus .tooltip {
    opacity: 1;
    visibility: visible;
}

/* Disable animation for vestibular disorder */
@media (prefers-reduced-motion: reduce) {
    *:hover {
        transition: none;
    }
}

prefers-reduced-motion 미디어 쿼리 — 사용자의 시스템 설정을 존중하십시오. 사용자가 시스템에서 애니메이션을 비활성화한 경우, 호버 효과는 transition 없이 즐각 적용되어야 합니다. 이는 전정 장애가 있는 사람들을 돕습니다.

추가 권장 사항: 중요한 기능에 호버를 사용하지 마세요, 호버 시 정보를 전달하는 데 색상만 의존하지 마세요(아이콘 또는 텍스트 추가), 그리고 호버 상태에 대한 충분한 대비를 확보하십시오.