Accordion

Accordion (아코디언)

아코디언은 세로로 쌓인 헤더 목록으로, 각 섹션과 연결된 내용을 펼치거나 접을 수 있게 해주는 컴포넌트예요. 좁은 공간에 많은 내용을 담아야 할 때 점진적 공개(progressive disclosure) 방식으로 유용하게 씁니다.

출처: Accordion

본문

개요 (Overview)

아코디언 컴포넌트는 점진적 공개를 통해 큰 분량의 콘텐츠를 작은 공간에 담아내요. 헤더 제목은 사용자에게 내용에 대한 높은 수준의 개요를 제공해서, 어느 섹션을 읽을지 스스로 결정할 수 있게 해줍니다.

아코디언은 정보 처리와 발견(discovering)을 더 효과적으로 만들어 주지만, 한편으로는 콘텐츠를 숨기기 때문에 사용자가 포함된 내용을 모두 눈치채지 못하거나 읽지 않을 수 있다는 점을 반드시 고려해야 해요.

언제 사용할까요 (When to use)

관련 정보를 구조화할 때.
내용이 반드시 전체를 읽을 필요가 없는 경우, 페이지를 줄이고 스크롤을 줄이려 할 때.
공간이 부족하고 긴 내용을 한 번에 모두 표시할 수 없을 때. 예를 들어 모바일 인터페이스나 사이드 패널에서요.

언제 사용하지 말아야 할까요 (When not to use)

중첩(nested)할 수 있는 대량의 정보를 구조화해야 한다면 트리 뷰(tree view) 사용을 고려하세요.
사용자가 콘텐츠 전체를 읽을 가능성이 높다면 아코디언을 쓰지 마세요. 추가 클릭이라는 부담이 생기니까요. 대신 일반 헤더를 가진 전체 스크롤 페이지를 사용하세요.

포맷 (Formatting)

구조 (Anatomy)

헤더(Header): 섹션 제목을 담고 있으며 패널을 펼치는 컨트롤 역할을 해요.
아이콘(Icon): 패널이 열려 있는지 닫혀 있는지를 나타내요.
패널(Panel): 아코디언 헤더와 연결된 콘텐츠 섹션이에요.

정렬 (Alignment)

플러시 정렬 (Flush alignment)

페이지의 사이드 패널이나 사이드바처럼 작은 공간에서 디자인할 때 플러시 정렬을 사용하면 다른 콘텐츠와 텍스트 정렬이 더 좋아져요. 플러시 정렬은 페이지에서 서로 가까이 있는 컴포넌트 사이에 구분선(rule line)이 겹치는 것도 피하게 해줍니다.

플러시 정렬은 행 제목과 쉐브론(chevron) 아이콘을 0px 패딩으로 배치해 구분선에 딱 붙게 유지해요. 호버(hover)와 포커스(focus) 인터랙션 상태에서는 왼쪽과 오른쪽 패딩에 16px 패딩이 추가됩니다.

아이콘 정렬 (Icon alignment)

기본적으로 쉐브론 아이콘은 헤더의 end 쪽에 배치되어요. 이렇게 하면 start 쪽의 제목이 레이아웃의 다른 타이포그래피 요소와 정렬되는데, 이것이 선호되는 정렬 방식입니다.

다만 드문 경우에는 아이콘을 제목 앞인 start 쪽에 배치해 트리(tree)에 가깝게 동작하도록 아코디언을 수정할 수도 있어요. 대부분의 경우, 특히 순수 콘텐츠나 문서 용도라면 기본 end 정렬을 사용해야 합니다. 아코디언의 아이콘 배치는 페이지 전체에서 일관되게 유지해야 하며 번갈아 바꾸면 안 돼요.

대부분은 기본 end 아이콘 정렬을 사용해서 아코디언 텍스트가 페이지의 다른 콘텐츠와 정렬되도록 하세요. 드물게 트리 같은 기능을 위해 start 쪽에 아이콘을 배치할 수도 있어요.

배치 (Placement)

아코디언은 메인 페이지 콘텐츠와 함께 배치하거나, 사이드 패널이나 타일 같은 컨테이너 안에 넣어 배치할 수 있어요.

그리드 배치 (Grid placement)

아코디언을 기본 정렬로 2x 그리드에 배치하면, 들여쓰기된 제목과 콘텐츠는 그리드 컬럼에 정렬되고 위아래 테두리는 거터(gutter)로 걸쳐집니다. 다만 아코디언은 플러시 정렬로 수정할 수 있어서, 이 경우 제목과 콘텐츠는 위아래 테두리와 함께 플러시 정렬되고 0px 패딩을 갖게 됩니다.

콘텐츠 (Content)

주요 요소 (Main elements)

제목 (Title)

제목은 명확하고 설명적이면서도 가능한 한 간결해야 해요.
각 제목은 페이지의 정보 구조(IA)에 적합한 heading 역할(h1-h6)로 감싸야 합니다.

본문 텍스트 (Body copy)

섹션 안의 콘텐츠는 단락으로 나눌 수 있으며, 필요하다면 하위 헤더를 포함할 수도 있어요.

스크롤 콘텐츠 (Scrolling content)

아코디언 콘텐츠가 뷰포트보다 길어지면 아코디언 전체가 세로로 스크롤되어야 해요. 개별 패널 안에서 콘텐츠가 스크롤되면 안 되고, 아코디언 안에서 콘텐츠가 가로로 스크롤되는 일도 없어야 합니다.

추가 가이드 (Further guidance)

더 자세한 콘텐츠 가이드는 Carbon의 콘텐츠 가이드라인을 참고하세요.

동작 (Behaviors)

상태 (States)

아코디언 컴포넌트에는 접힘(collapsed)과 펼침(expanded)이라는 두 가지 주요 상태가 있어요. 아코디언 끝의 쉐브론 아이콘이 현재 상태를 나타내며, 아래를 가리키면 접힘, 위를 가리키면 펼침을 의미합니다.

아코디언은 기본적으로 모든 콘텐츠 패널이 닫힌 접힘 상태에서 시작해요. 접힘 상태로 시작하면 사용자에게 제공되는 정보에 대한 높은 수준의 개요를 줄 수 있습니다.

사용자는 아코디언의 각 섹션을 독립적으로 펼칠 수 있어서, 여러 섹션이 동시에 열려 있을 수 있어요.

접힘·펼침 상태 외에도 아코디언은 포커스, 호버, 비활성(disabled) 같은 인터랙션 상태를 가져요. 자세한 내용은 스타일 탭을 참고하세요.

인터랙션 (Interactions)

마우스 (Mouse)

사용자는 쉐브론을 클릭하거나 헤더 영역의 아무 곳이나 클릭해서 상태를 변경할 수 있어요.

키보드 (Keyboard)

사용자는 Tab 또는 Shift-Tab을 눌러 아코디언 헤더 사이를 이동할 수 있어요. 헤더 영역에 포커스가 있는 동안 Enter 또는 Space를 누르면 상태를 변경할 수 있습니다. 추가 키보드 인터랙션은 접근성 탭을 참고하세요.

다음 컴포넌트들도 콘텐츠를 정리하는 또 다른 방법이에요. 콘텐츠 컨테이너를 고를 때는 다루는 콘텐츠의 유형과 길이를 고려하세요. 긴 형식의 콘텐츠는 탭(Tabs)이나 콘텐츠 스위처(Content switcher)가 유리하고, 아주 짧은 콘텐츠는 구조화된 리스트(Structured list)가 더 좋을 수 있어요.

콘텐츠 스위처(Content switcher)는 화면의 같은 공간에서 두 개 이상의 콘텐츠 섹션을 전환할 수 있게 해줘요.
프로그레스 인디케이터(Progress indicator)는 완료·현재·예정 단계를 보여줘서 선형의 다단계 작업을 안내해요.
구조화된 리스트(Structured list)는 용어와 정의처럼 서로 비슷하거나 관련된 콘텐츠를 그룹화해요.
탭(Tabs)은 같은 컨텍스트 안에 나타나는 정보 그룹 사이를 사용자가 이동할 수 있게 해서 관련 콘텐츠를 정리해요.
트리 뷰(Tree view)는 중첩된 수준의 탐색을 제공하는 계층 구조예요.

참고 자료 (References)

Hoa Loranger, Accordions Are Not Always the Answer for Complex Content on Desktops (Nielsen Norman Group, 2014)

더 알아보기 (Learn more)

아코디언은 관련 정보를 구조화하고 공간을 절약할 때 가장 효과적이에요. 다만 콘텐츠를 숨긴다는 점을 항상 염두에 두고, 사용자가 내용을 모두 읽어야 하는 상황이라면 일반 스크롤 페이지를 대신 고려하세요. 기본 end 아이콘 정렬과 플러시 정렬을 상황에 맞게 활용하면 더 깔끔한 레이아웃을 만들 수 있어요.