상위 Epic 문서
연관 자료
아코디언 UI 특징
컴포넌트 안내
Core Component Recipe의 아코디언 세트의 품목 중 하나인 List Type입니다.
가장 기본적인 형태의 아코디언 컴포넌트로, 사용자에게 방대한 정보를 펼치기/접기 인터랙션을 통해 간결하게 전달할 수 있으며, 많은 정보가 나열되어야 할 경우에 특히 효과적인 컴포넌트입니다.
이 컴포넌트는 정보의 과부하를 줄이고 사용자가 필요할 때만 정보를 접근할 수 있도록 함으로써, UX를 개선하고 사용자 경험을 향상시키는 역할을 합니다. 또한 다양한 디바이스에서 일관된 사용성을 제공하도록 설계되어, 접근성을 강화합니다. 이를 통해 정보 구조의 복잡성을 줄이고, 사용자로 하여금 보다 직관적으로 정보를 탐색할 수 있도록 돕습니다
사용성 안내
1.
데이터 나열 및 탐색
긴 목록 형태로 정보를 제공할 때, 예를 들어 SU, AC 불러오기, 특정한 정보 목록처럼 많은 항목이 나열되는 경우, 각 항목을 아코디언으로 묶어 사용자가 필요한 부분만 열람할 수 있게 합니다. 이를 통해 정보의 밀도를 줄이고 시각적 복잡성을 효과적으로 해소할 수 있습니다.
2.
단계적 정보 공개
사용자가 전체 정보를 한 번에 보기보다는 필요에 따라 단계적으로 접근할 수 있도록 할 때 유용합니다. 예를 들어, 학습 자료, 지침서, 단계별 프로세스를 제공하는 경우, 사용자가 각 단계를 하나씩 탐색하며 내용을 이해하도록 돕습니다.
3.
대시보드 및 관리 화면에서의 정보 통합
설정 화면이나 대시보드처럼 여러 데이터 셋을 포함한 섹션이 있는 경우, 필요에 따라 열고 닫을 수 있도록 하여 정보의 복잡도를 줄이고 사용자가 필요한 정보에 집중할 수 있도록 합니다. 이를 통해 보다 직관적인 UI 경험을 제공합니다.
4.
반응에서의 탁월한 영역 확보
화면이 작은 모바일 기기에서 많은 양의 정보를 효율적으로 제공하는 데 유용합니다. 아코디언을 활용하여 공간을 절약하고 사용자가 관심 있는 부분만 선택적으로 열어볼 수 있도록 하여, 제한된 화면에서 정보 접근성을 높입니다.
컴포넌트 Spec
아코디언 서머리 : 상태 분류
Collapse
•
Inactive
액션이 없는 기본적인 컴포넌트 상태
•
Hover
마우스 커서를 오버할 경우 변화되는 호버 상태
•
Active
특정한 조건으로 인해 아코디언 컴포넌트가 활성화 되어있는 상태
•
Selected
선택 등으로 1개 혹은 n개의 아코디언 컴포넌트가 선택되어 있는 상태
•
Selected : Hover
선택되어 있는 상태에서 마우스를 오버했을 경우 아코디언 컴포넌트가 활성화 되어 있는 상태
•
Pressed
리스트를 클릭하기 위해 물리적으로 가해지는 프레스 액션
•
Selected Pressed
리스트 아이템 컴포넌트가 선택이 된 상태에서 리스트를 클릭하기 위해 물리적으로 가해지는 프레스 액션
•
Disabled
아코디언 서머리 영역이 비활성화 된 상태
Expand
•
Inactive
액션이 없는 기본적인 컴포넌트 상태
•
Hover
마우스 커서를 오버할 경우 변화되는 호버 상태
•
Active
특정한 조건으로 인해 아코디언 컴포넌트가 활성화 되어있는 상태
•
Selected
선택 등으로 1개 혹은 n개의 아코디언 컴포넌트가 선택되어 있는 상태
•
Selected : Hover
선택되어 있는 상태에서 마우스를 오버했을 경우 아코디언 컴포넌트가 활성화 되어 있는 상태
•
Pressed
리스트를 클릭하기 위해 물리적으로 가해지는 프레스 액션
•
Selected Pressed
리스트 아이템 컴포넌트가 선택이 된 상태에서 리스트를 클릭하기 위해 물리적으로 가해지는 프레스 액션
•
Disabled
아코디언 서머리 영역이 비활성화 된 상태
아코디언 리스트 아이템 : 상태 분류
•
Inactive
액션이 없는 기본적인 컴포넌트 상태
•
Hover
마우스 커서를 오버할 경우 변화되는 호버 상태
•
Active
특정한 조건으로 인해 아코디언 컴포넌트가 활성화 되어있는 상태
•
Selected
선택 등으로 1개 혹은 n개의 아코디언 컴포넌트가 선택되어 있는 상태
•
Selected : Hover
선택되어 있는 상태에서 마우스를 오버했을 경우 아코디언 컴포넌트가 활성화 되어 있는 상태
•
Pressed
리스트를 클릭하기 위해 물리적으로 가해지는 프레스 액션
•
Selected Pressed
리스트 아이템 컴포넌트가 선택이 된 상태에서 리스트를 클릭하기 위해 물리적으로 가해지는 프레스 액션
•
Disabled
리스트 아이템 영역이 비활성화 된 상태
기대효과
1.
사용자 경험 개선
아코디언 컴포넌트를 통해 방대한 정보를 효과적으로 구조화함으로써, 사용자는 필요한 정보에만 집중할 수 있게 됩니다. 정보 과부하를 줄이고, 각 항목을 손쉽게 탐색할 수 있어 전반적인 사용자 경험을 향상시킵니다.
2.
접근성 향상
정보가 펼쳐지고 접히는 방식으로 제공되므로, 사용자가 특정 상황에 맞게 필요한 정보를 선택적으로 접근할 수 있습니다. 특히 모바일 환경에서 공간 절약을 통해 접근성을 높임으로써, 다양한 디바이스에서 일관되고 원활한 경험을 제공합니다.
3.
정보 전달의 효율성
단계적으로 정보를 공개하거나 필요할 때만 세부사항을 열람할 수 있도록 설계함으로써, 정보의 밀도를 낮추고 사용자가 핵심적인 내용을 빠르게 파악할 수 있게 됩니다. 이를 통해 정보 전달이 보다 효율적이 됩니다.
4.
프론트엔드 개발 효율성 향상
기준이 되어 있는 컴포넌트 템플릿을 통해 빠른 설계를 진행할 수 있으며, 동일한 컴포넌트가 병렬적으로 개발되는 현상을 배제할 수 있습니다.