Behavior Layer 분리를 통한 UI 인터랙션의 모듈화 및 재사용성 확보

Context

상태 변화나 애니메이션 같은 인터랙션 동작이 특정 컴포넌트에 종속된 구조적 한계 발생. 이로 인해 동일한 Press 효과를 여러 요소에 적용할 때 중복 코드가 생성되는 유지보수 효율성 저하 문제 직면.

Technical Solution

• CSS @layer behaviors 도입을 통한 시각적 스타일과 동작 레이어의 물리적 분리
• 인터랙션 패턴을 독립적인 클래스(.b-press)로 정의하여 컴포넌트 의존성 제거
• CSS Variable을 활용한 쉐도우 상태 정의로 디자인 시스템의 일관성 유지
• HTML 클래스 조합 방식을 통한 다중 Behavior 적층 구조 설계
• aria-disabled 속성 기반의 상태 제어로 접근성과 인터랙션 가시성을 동시에 해결