아코디언 vs. 탭
아코디언은 페이지 안에서 여러 섹션을 열어 둘 수 있어요. 반면 탭은 하나의 공간에서 한 번에 하나씩만 보여줘요.
사람들이 함께 읽을 수 있는 질문이나 섹션에는 아코디언을 사용하세요. 한 번에 하나만 중요한 몇 가지 별도의 보기는 탭을 사용하세요.
각 패턴이 무엇을 하는지 확인하세요
각 예제를 시도해 보세요. 그런 다음 그것이 수행하려는 작업에 대해 읽어보세요.
아코디언
아코디언은 각 섹션의 제목을 눌러 내용을 열고 닫을 수 있게 겹겹이 쌓는 거예요.
아코디언
아코디언은 각 섹션의 제목을 눌러 내용을 열고 닫을 수 있게 겹겹이 쌓는 거예요.
다음과 같은 경우 선택하세요.
각기 명확하고 별도의 제목이 있는 선택적 섹션에 사용하세요.
FAQ는 질문을 먼저 보여줘요. 페이지를 떠나지 않고도 답을 열어 볼 수 있어요.
- 사용할 때
- 각기 명확하고 별도의 제목이 있는 선택적 섹션에 사용하세요.
- 다음 경우에는 사용하지 마세요
- 페이지를 깔끔하게 보이게 하기 위해 짧고 필수적인 정보를 절대 숨기지 마세요.
- 코드에서 사용된 이름
<details><summary>
탭들
탭은 레이블을 사용하여 하나의 공유 패널에서 콘텐츠를 전환합니다. 주요 작업은 열려 있습니다.
개요, 활동, 권한은 동일한 프로젝트가 열려 있는 동안 하단 패널을 변경합니다.
- 사용할 때
- 레이블이 보이도록 유지해야 하는 동일한 수준의 몇 개 섹션에는 탭을 사용하세요.
- 다음 경우에는 사용하지 마세요
- 서로 관련 없는 페이지에 대한 작은 링크로 탭을 사용하지 마세요.
- 코드에서 사용된 이름
role="tablist"
빠른 비교
| UI 패턴 | 이런 경우에 가장 좋아요 | 대상 아님 | 코드에서 사용된 이름 |
|---|---|---|---|
| 아코디언Accordion | 각기 명확하고 별도의 제목이 있는 선택적 섹션에 사용하세요. | 페이지를 깔끔하게 보이게 하기 위해 짧고 필수적인 정보를 절대 숨기지 마세요. | <details><summary> |
| 탭들Tabs | 레이블이 보이도록 유지해야 하는 동일한 수준의 몇 개 섹션에는 탭을 사용하세요. | 서로 관련 없는 페이지에 대한 작은 링크로 탭을 사용하지 마세요. | role="tablist" |
출시하기 전에
- 01
그 사람이 해야 할 일을 적으세요.
- 02
키보드, 포커스, 터치, 확대/축소, 로딩, 비어 있음, 오류 상태를 테스트하세요.
- 03
사람들이 마우스 오버나 동작 없이 동일한 정보를 얻을 수 있도록 하세요.
- 04
작은 화면과 큰 화면에서 실제 콘텐츠로 테스트하세요.
비교 요청 복사 가능
팀이 패턴 사이에서 선택하는 데 도움이 필요할 때 이것을 복사하세요.
실제 사용자 흐름에 가장 적합한 패턴을 아코디언 (Accordion)、탭들 (Tabs)에서 선택하세요. 이 규칙 사용: 아코디언은 페이지 안에서 여러 섹션을 열어 둘 수 있어요. 반면 탭은 하나의 공간에서 한 번에 하나씩만 보여줘요. 작업, 콘텐츠 양, 흐름 중단 비용을 기록하세요. 키보드, 터치, 로딩, 오류, 축소 동작을 확인하세요. 선택 이유를 설명한 후 프로젝트 디자인 시스템으로 가장 작은 접근 가능한 버전을 만드세요.