기타 컴포넌트

기타 컴포넌트는 특정한 공간과 탐색 문제를 해결하지만 콘텐츠를 숨기거나 화면 움직임을 강제할 수 있습니다. 편의성보다 정보 발견 가능성, 키보드 접근, 작은 화면에서의 동작을 우선 확인합니다.

컴포넌트 목록

컴포넌트	사용 목적	사용 시점과 주의사항
Accordion	여러 정보 그룹을 각각 펼치고 접기	FAQ처럼 제목만 보고 필요한 섹션을 선택할 수 있을 때 사용합니다. 여러 패널의 동시 열림 가능 여부를 명확히 합니다.
Collapse	단일 콘텐츠 영역의 노출 상태 전환	부가 설명이나 고급 옵션 한 영역을 접을 때 사용합니다. 핵심 정보와 필수 입력은 기본적으로 숨기지 않습니다.
Carousel	제한된 영역에서 여러 콘텐츠 순환 탐색	항목의 시각적 탐색이 중요하고 일부 노출이 허용될 때 사용합니다. 자동 전환은 기본적으로 피합니다.
Affix	스크롤 중 중요한 제어나 정보를 화면에 고정	긴 문서의 목차나 주요 액션을 계속 제공할 때 사용합니다. 화면을 과도하게 가리거나 다른 고정 요소와 겹치지 않게 합니다.
BackTop	긴 페이지에서 시작 위치로 빠르게 이동	충분히 긴 페이지에서만 제공하며 이동 후 포커스와 스크롤 결과가 예측 가능해야 합니다.

선택 기준

여러 독립 섹션에는 Accordion, 한 영역의 단순 노출 전환에는 Collapse를 사용합니다. 고정 UI는 화면 공간을 줄이므로 실제 콘텐츠 길이와 사용 빈도를 근거로 Affix 또는 BackTop을 추가합니다.

동작과 접근성

• 펼침 제어는 aria-expanded와 대상 영역의 연결 관계를 전달합니다.
• Carousel에는 이전·다음, 현재 위치, 전체 항목 수를 제공하고 자동 전환 시 정지 기능을 제공합니다.
• 사용자의 움직임 감소 설정을 존중하고 불필요한 스크롤 애니메이션을 줄입니다.
• 콘텐츠가 열리거나 화면 위치가 바뀔 때 포커스를 무조건 이동하지 말고 작업 맥락에 맞게 관리합니다.