coastdigitalgroup/coastai-skills

상호작용 상태 시스템

목적

상호작용 상태 시스템 스킬은 UI 컴포넌트가 사용자 입력에 어떻게 반응할지 정의하는 프레임워크를 제공합니다. 모든 상호작용 요소(버튼, 링크, 입력 필드, 카드)가 마우스, 키보드, 터치 등 모든 상호작용 모드에서 명확하고 일관되며 접근 가능한 시각적 피드백을 갖도록 보장합니다. 이 시스템은 개발자의 모호함을 제거하고 최종 사용자에게 높은 품질의 반응형 느낌을 보장합니다.

사용 사례

• 디자인 시스템 또는 UI 라이브러리의 컴포넌트 동작 정의
• 기존 사이트의 '데드(dead)' 또는 반응하지 않는 상호작용 감사
• 포커스 표시기, 대상 크기, 상호작용 어포던스에 대한 WCAG 2.2 준수 보장
• 피드백 패턴 표준화 (예: 모든 파괴적 동작이 동일하게 작동)

사용하지 말아야 할 경우

• 정적 콘텐츠: 클릭, 탭 또는 키보드 상호작용이 없는 순수 정보 요소
• 실험적 모션 디자인: 기능적 상태 피드백보다 복잡하고 비표준적인 애니메이션이 목표인 경우
• 표준 브라우저 기본값: 스타일링되지 않은 기본 브라우저 요소에만 엄격히 의존하는 프로젝트 (전문 웹사이트 디자인에서는 드뭅니다)

입력

1. 컴포넌트 인벤토리: 디자인에 있는 모든 상호작용 요소 목록
2. 브랜드 색상 시스템: 기존 기본, 보조 및 의미론적 색상 스케일
3. 접근성 목표: (예: WCAG 레벨 AA) 상태별 명암비를 결정

출력

1. 상태 매트릭스: 모든 컴포넌트에 대한 기본(Default), 호버(Hover), 포커스(Focus), 활성(Active), 비활성(Disabled) 상태를 보여주는 종합적인 맵
2. 상호작용 가이드라인: 전환(transitions), 타이밍(ms), 이징(easing) 함수에 대한 규칙
3. 접근성 명세: 포커스 링 및 키보드 전용 시각적 신호에 대한 명확한 정의

워크플로우

1. 상호작용 요소 식별

상호작용 유형별로 요소를 분류합니다:

• 작업(Actions): 버튼, 링크, 메뉴 항목
• 입력(Inputs): 텍스트 필드, 체크박스, 라디오 버튼, 선택
• 컨테이너(Containers): 클릭 가능한 카드, 아코디언 헤더, 탭

2. 상태 팔레트 정의

상태별로 시각적 변수가 어떻게 변경되는지 결정합니다:

• 호버(마우스): 배경색, 테두리 또는 엘리베이션(그림자)의 약간의 변화
• 포커스(키보드): 고대비 링 또는 아웃라인. 호버 상태와 구별되어야 합니다.
• 활성/누름: 시각적 '압축'(예: 약간 어두워지거나 축소)으로 성공적인 클릭/탭을 나타냄
• 비활성: 투명도 감소 및 상호작용 신호 제거(커서 변경)
• 방문함(링크): 방문한 링크에 대한 구별된 색상 (콘텐츠가 많은 사이트에 중요)

3. 포커스 로직 수립

키보드 사용자가 항상 자신의 위치를 알 수 있도록 '전역 포커스 스타일'을 설계합니다.

• 규칙: 포커스 표시기는 배경과 컴포넌트의 포커스되지 않은 상태 모두에 대해 최소 3:1의 명암비를 가져야 합니다.
• 규칙(WCAG 2.2 SC 2.4.11): 포커스 표시기는 다른 콘텐츠에 의해 완전히 가려져서는 안 됩니다 (예: 스크롤 시 고정 헤더가 포커스된 요소를 덮는 경우). 표시기의 적어도 일부는 항상 보여야 합니다.

4. 터치(모바일) 최적화

터치 기기에는 호버 상태가 없으므로:

• active 상태가 즉각적인 피드백을 제공하는지 확인합니다.
• 터치 대상이 WCAG 2.2 SC 2.5.8(최소 24x24px)을 충족하는지 확인하고, 레이아웃이 허용하는 경우 편안한 엄지손가락 도달을 위해 44x44px를 선호합니다.
• 호버 종속 정보는 제거합니다 (탭 시 툴팁 또는 영구 레이블 사용).

5. 전환 문서화

변경이 어떻게 발생하는지 정의합니다:

• 지속 시간: 상태 변경의 경우 150ms~250ms가 표준입니다.
• 이징: ease-in-out 또는 cubic-bezier(0.4, 0, 0.2, 1)

결정 규칙

• 상태 지속성: 포커스 표시기는 요소가 포커스를 가지고 있는 동안 계속 보여야 합니다.
• 어포던스 우선: 상호작용 요소는 기본 상태에서 '클릭 가능하게' 보여야 합니다 (예: 버튼은 클릭 불가능한 태그보다 더 많은 시각적 무게를 가져야 함).
• 색상 전용 상태 금지: 상태를 나타내는 데 색상에만 의존하지 않습니다 (예: 오류 상태는 아이콘 또는 테두리 두께 변경을 포함해야 함).
• 즉각적인 피드백: 상호작용 반응은 즉각적으로 느껴져야 합니다 (<100ms 시작 시간).

제약 조건

• 접근성: 포커스 표시기는 강력한 대안을 제공하지 않고 CSS outline: none을 통해 '숨길' 수 없습니다.
• 반응성: 상태는 마우스 호버에 의존하지 않고 작은 화면에서도 작동해야 합니다.
• 성능: 레이아웃 스래싱(thrashing)을 방지하기 위해 자주 트리거되는 상태(호버 등)에서 무거운 box-shadow나 복잡한 필터를 피합니다.

일반적인 실패 패턴

• 보이지 않는 포커스: 브라우저의 기본 포커스 링을 제거하고 대체하지 않아 키보드 사용자가 사이트를 사용할 수 없게 만듦.
• 호버 전용 로직: 중요한 정보나 작업을 호버 상태에만 배치하여 모바일에서 접근 불가능하게 만듦.
• 모호한 활성 상태: 클릭해도 변경되지 않는 버튼으로 인해 사용자가 여러 번 클릭하게 됨.
• 혼란스러운 비활성 상태: 비활성처럼 보이지만 실제로는 클릭 가능한 요소, 또는 그 반대.

검증 기준

• 모든 상호작용 요소에 정의된 호버, 포커스 및 활성 상태가 있음
• 포커스 표시기가 3:1 명암비 요구 사항을 충족하고 다른 콘텐츠에 의해 완전히 가려지지 않음 (WCAG 2.2 SC 2.4.11)
• 터치 대상이 최소 24x24px(WCAG 2.2 SC 2.5.8)를 충족하며, 44x44px 선호
• 중요한 정보가 호버 전용 상호작용 뒤에 숨겨져 있지 않음
• 비활성 상태가 시각적으로 구별되며 pointer-events: none(또는 이와 동등한 로직)을 가짐
• 시스템에 상태에 대한 명확한 전환/애니메이션 가이드라인이 포함됨