16강. 상호작용 상태와 움직임

이번 강의의 결과물은 마우스, 키보드, 터치 입력에 상태 피드백을 제공하고 사용자의 움직임 감소 설정을 존중하는 링크와 버튼입니다.

?1. 이번 강의에서 해결할 문제

링크가 평상시와 똑같이 보이면 사용자는 마우스를 올렸는지, 키보드 포커스가 어디에 있는지 알기 어렵습니다. 상태 변화를 분명하게 표시하되 과한 움직임이 불편한 사용자에게는 전환 효과를 줄입니다.

✓학습 목표

• 링크가 평상시와 똑같이 보이면 사용자는 마우스를 올렸는지, 키보드 포커스가 어디에 있는지 알기 어렵습니다. 상태 변화를 분명하게 표시하되 과한 움직임이 불편한 사용자에게는 전환 효과를 줄입니다.
• 핵심 개념을 코드 예시와 짧은 실습에 적용하고 결과를 설명합니다.

◇2. 핵심 개념

• :hover: 포인터가 요소 위에 있는 상태
• :focus-visible: 키보드 탐색 등으로 포커스 표시가 필요한 상태
• :active: 링크나 버튼을 활성화하는 동안의 상태
• transition: CSS 값이 바뀔 때 중간 상태를 일정 시간에 걸쳐 표현
• prefers-reduced-motion: 사용자가 불필요한 움직임을 줄이도록 요청했는지 확인

hover는 터치 환경에서 존재하지 않을 수 있으므로 중요한 정보와 기능을 hover에만 의존하면 안 됩니다. focus-visible은 키보드 사용자가 현재 위치를 찾는 핵심 단서입니다. W3C Selectors 표준, W3C Focus Visible 안내

</>3. 코드 예시

파일명: web-basics/portfolio/index.html

<p>
  <a class="button-link" href="#projects">프로젝트 보기</a>
</p>

파일명: web-basics/portfolio/css/style.css

.button-link {
  display: inline-block;
  padding: 0.75rem 1rem;
  color: white;
  background-color: var(--color-primary);
  border-radius: 0.5rem;
  text-decoration: none;
  transition:
    background-color 160ms ease,
    transform 160ms ease;
}

.button-link:hover {
  background-color: #1e40af;
  transform: translateY(-2px);
}

.button-link:focus-visible {
  outline: 3px solid #f59e0b;
  outline-offset: 3px;
}

.button-link:active {
  transform: translateY(1px);
}

@media (prefers-reduced-motion: reduce) {
  .button-link {
    transition: none;
  }

  .button-link:hover,
  .button-link:active {
    transform: none;
  }
}

실행 위치: D:\WebProject\StartBook\dev-foundations\web-basics\portfolio

python -m http.server 5500

→4. 코드가 동작하는 이유

1. 기본 규칙이 링크의 평상시 모양을 정합니다.
2. 상태가 바뀌면 더 구체적인 의사 클래스 규칙이 배경색과 위치 값을 변경합니다.
3. transition이 지정된 속성만 즉시 바꾸지 않고 160ms 동안 연결합니다.
4. 키보드 포커스에는 outline을 제공해 현재 위치를 분명하게 표시합니다.
5. 사용자가 움직임 감소를 요청하면 미디어 쿼리가 전환과 위치 이동을 제거합니다.

prefers-reduced-motion: reduce는 시스템에서 불필요한 움직임을 줄이도록 선택한 사용자를 감지하기 위한 표준 기능입니다. W3C Media Queries Level 5

!5. 자주 하는 실수

• hover에서만 중요한 설명이나 기능을 제공함
• outline: none만 적용하고 대체 포커스 표시를 만들지 않음
• transition: all로 의도하지 않은 속성까지 움직이게 함
• 긴 이동과 반복 애니메이션을 필수 피드백처럼 사용함
• 색상 변화만 너무 미세하게 주어 상태를 알아보기 어려움
• 움직임 감소 설정에서는 모든 기능까지 제거함

✎6. 짧은 실습 과제

1. 프로젝트 링크 하나를 .button-link로 만듭니다.
2. 마우스 hover, 키보드 focus, 클릭 active 상태를 각각 확인합니다.
3. Tab을 눌렀을 때 포커스 표시가 충분히 선명한지 확인합니다.
4. transition 시간을 80ms, 500ms로 바꾸어 체감 차이를 기록합니다.
5. 운영체제 또는 개발자 도구에서 움직임 감소를 활성화하고 전환이 제거되는지 확인합니다.

완료 기준은 포인터 없이도 현재 포커스를 알 수 있고, 움직임 감소 상태에서도 기능과 상태 구분이 유지되는 것입니다.

?7. 이해 점검 질문 3개

1. hover 상태만으로 중요한 기능을 제공하면 안 되는 이유는 무엇인가요?
2. focus-visible의 outline은 어떤 사용자에게 필요한가요?
3. 움직임 감소 설정에서는 기능이 아니라 어떤 부분을 줄여야 하나요?

■핵심 요약

• 이번 강의의 핵심 개념을 코드의 구조와 실행 결과에 연결했습니다.
• 코드 예시를 직접 바꾸는 짧은 실습으로 핵심 동작을 확인했습니다.
• 이해 점검 질문에 답하며 다음 강의에 필요한 기준을 정리했습니다.