Accordion

Accordion (아코디언)

아코디언은 열고 닫을 수 있는 관련 콘텐츠 섹션을 묶어 주는 컴포넌트예요. 화면을 깔끔하게 유지하면서도 사용자가 필요한 정보를 선택해서 볼 수 있게 도와주죠.

출처: 문서

본문

아코디언은 관련 내용의 섹션들을 묶어서 열고 닫을 수 있게 해 주는 컴포넌트예요. 아코디언은 사용자가 어떤 콘텐츠를 볼지 직접 고르게 함으로써 인지 부하(cognitive load)를 줄여 줘요. FAQ에서 질문 여럿을 한 화면에 담을 때가 대표적인 예시예요. 다만 현재 진행 중인 작업에 꼭 필요한 정보를 아코디언 안에 넣으면 안 돼요. 그런 정보는 더 눈에 띄게 처리하는 걸 고려해 보세요.

Behavior (동작)

기본적으로 닫혀 있어요

기본적으로 아코디언 항목은 닫혀 있어요. 어떤 정보에 더 눈에 띄게 하고 싶고 자동으로 보이게 하고 싶다면, 기본으로 열려 있어야 할 아코디언 항목을 지정해 주세요.

여러 항목 동시에 열기

아코디언에서 한 항목을 열면 다른 항목이 자동으로 닫혀요. 다만 어떤 상황에서는 사용자가 여러 항목을 동시에 열어 두고 싶어 할 수도 있어요. 여러 항목을 한꺼번에 열어도 부담스럽지 않은 시나리오라면 허용해 주세요. 다만 한 아코디언 항목의 정보를 다른 아코디언 항목에서 다시 참조해야 하는 경우에는 절대 아코디언을 쓰면 안 돼요.

Layout (레이아웃)

쉐브론(chevron) 아이콘은 추가 콘텐츠가 있다는 뜻이고, 아코디언 항목이 상호작용할 수 있음을 나타내요. 쉐브론은 헤더의 시작이나 끝 어디에든 둘 수 있어요. 한 경험 안에서는 아이콘 위치를 일관되게 유지하세요.

Accessibility (접근성)

아코디언 헤더는 button 역할(role)을 갖고 있어서 보조 기술(assistive technology)이 인식할 수 있어요. 아코디언 항목이 열려 있으면 aria-expanded와 active 속성이 true로 설정되어야 해요.

Content (콘텐츠)

아코디언 헤더는 아코디언 패널에 담긴 콘텐츠가 무엇인지 짐작할 수 있게 해 줘야 해요. 헤더는 짧게 유지하세요. 기본적으로 헤더 콘텐츠는 좁은 폭에서 다음 줄로 넘어가는데, 여러 줄로 넘어가면 한눈에 훑어보기(scannability)가 나빠질 수 있어요.

문장식 대문자 규칙(sentence-style capitalization)을 사용해서 첫 단어만 대문자로 써요. 자세한 내용은 Microsoft Writing Style Guide의 Capitalization 항목을 참고하세요.

제목 끝에는 마침표를 쓰지 마세요. 자세한 내용은 Microsoft Writing Style Guide의 Periods 항목을 참고하세요.