Accordion

세부 정보를 점진적으로 공개할 수 있는, 수직으로 쌓인 목록 컴포넌트입니다.

Anatomy

Accordion은 Trigger(Prefix, Title, Description, Chevron Icon)와 확장 시 Custom Content로 구성됩니다.

Trigger는 사용자가 클릭하여 콘텐츠를 열고 닫을 수 있는 영역입니다. Prefix, Title, Description, Chevron Icon을 포함합니다.

Accordion의 Anatomy 이미지. Trigger(Prefix, Title, Description, Chevron Icon)와 확장 시 Custom Content로 구성됩니다.

Properties

Open

Accordion은 기본적으로 두 가지 시각적 상태를 가집니다.

Collapsed: 헤더만 노출되며 Content Panel이 숨겨진 상태입니다. Chevron Icon이 아래 방향을 가리킵니다.
Expanded: 헤더 아래에 Content Panel이 펼쳐진 상태입니다. Chevron Icon이 위 방향을 가리킵니다.

기본적으로 모든 패널은 Collapsed 상태로 시작하여, 사용자에게 콘텐츠의 전체적인 개요를 먼저 제공합니다.

Accordion의 Open Property - Collapsed, Expanded

Size

모바일과 PC를 하나의 컴포넌트로 대응하기 위한 prop입니다. 사이즈에 따라 Padding, Font Size, Chevron Icon Size가 다릅니다. 기본 값으로는 Medium입니다.

Medium: 모바일 기본 사이즈입니다.
Large: PC 대응 사이즈입니다.

Large 사이즈는 PC 환경에서 뷰포트 너비가 변하더라도 폰트 사이즈가 동일하게 유지됩니다. 반응형에 따라 달라지는 것은 컴포넌트의 레이아웃 요소이며, 타이포그래피는 고정값을 사용합니다.

Accordion의 Size Property - Medium, Large

Variant

Accordion Item들의 시각적 배치 방식을 정의합니다. 콘텐츠의 성격과 레이아웃에 따라 적절한 Variant를 선택해 주세요.

Accordion의 Variant - Inline, Separated

State

Accordion 컴포넌트는 Enabled, Pressed, Disabled 상태를 제공합니다.

Accordion의 State - Enabled, Pressed, Enabled + Focus, Disabled

Prefix

Prefix Slot은 Accordion 좌측에 위치합니다. 아이콘 이외에 다른 요소를 사용하고 싶은 경우 Custom을 이용해 변경해 주세요.

Prefix에 어떤 요소가 오느냐에 따라 Trigger와의 간격을 사용처에서 커스텀하여 조절할 수 있습니다. 간격 조정 시에는 디자인 시스템에서 제공하는 spacing token을 활용해 주세요.

Accordion의 Prefix Property - None, Icon, Custom

Guidelines

Accordion 기본 사용하기

Accordion은 관련 정보를 그룹화하거나, 긴 페이지의 스크롤을 줄여야 할 때 사용합니다.

Accordion을 활용한 사용 예시

Item 최소 개수

Accordion은 여러 섹션을 접고 펼치며 탐색하는 컴포넌트이므로, 최소 2개 이상의 Item으로 구성해야 합니다.

단일 콘텐츠를 접고 펼치는 용도는 해당 아이템에 Collapsible 동작을 활용할 수 있어요.

2개 이상의 Item으로 구성한 Accordion 예시

Accordion 터치 영역

터치 영역은 Chevron 아이콘뿐만 아니라 Trigger 전체를 포함합니다.

Accordion의 터치 영역 예시. Chevron 아이콘뿐만 아니라 Trigger 전체를 포함합니다.

Expansion Behavior 차이

동작	설명	사용처
Single Expand	한 번에 하나의 패널만 열 수 있습니다. 다른 패널을 열면 기존 패널이 자동으로 닫힙니다.	단계별 프로세스, 작은 화면 혹은 영역
Multi Expand	여러 패널을 동시에 열 수 있습니다. 각 패널의 상태가 독립적으로 관리됩니다.	FAQ, 콘텐츠가 풍부한 경우

Single Expand 사용 예시

Multi Expand 사용 예시

variant=separated, size=medium

각 Accordion Item이 개별 카드 형태로 분리되어 표현됩니다. 항목 간 시각적 독립성이 필요하거나, 각 섹션의 중요도가 동등할 때 사용합니다.

상태	슬롯	속성	값
enabled	root	gap	$dimension.x3

variant=separated, size=large

각 Accordion Item이 개별 카드 형태로 분리되어 표현됩니다. 항목 간 시각적 독립성이 필요하거나, 각 섹션의 중요도가 동등할 때 사용합니다.

상태	슬롯	속성	값
enabled	root	gap	$dimension.x4

Accordion Item

base

상태	슬롯	속성	값
enabled	root	colorDuration	$duration.color-transition
		colorTimingFunction	$timing-function.easing
	trigger	paddingX	$dimension.spacing-x.global-gutter 화면 전체에 적용되는 기본 수평 padding 값입니다.
	body	gap	$dimension.x0_5
	prefixIcon	color	$color.fg.neutral 일반적인 콘텐츠에 사용되는 기본 색상입니다.
	title	color	$color.fg.neutral 일반적인 콘텐츠에 사용되는 기본 색상입니다.
		fontWeight	$font-weight.medium
	description	color	$color.fg.neutral-subtle 일반적인 콘텐츠에 사용되는 기본 색상입니다. (subtle)
		fontWeight	$font-weight.medium
	suffixIcon	color	$color.fg.neutral-subtle 일반적인 콘텐츠에 사용되는 기본 색상입니다. (subtle)
		rotateDuration	$duration.d6
		rotateTimingFunction	$timing-function.easing
	content	expandHeightDuration	$duration.d6
		expandHeightTimingFunction	$timing-function.easing
		collapseHeightDuration	$duration.d6
		collapseHeightTimingFunction	$timing-function.easing
disabled	prefixIcon	color	$color.fg.disabled
	title	color	$color.fg.disabled
	description	color	$color.fg.disabled
	suffixIcon	color	$color.fg.disabled
pressed	trigger	color	$color.bg.transparent-pressed
		marginX	$dimension.x1_5
		cornerRadius	$dimension.x2_5

size=medium

상태	슬롯	속성	값
enabled	trigger	paddingY	$dimension.x4
	prefix	paddingRight	$dimension.x3
	prefixIcon	size
	title	fontSize	$font-size.t5
		lineHeight	$line-height.t5
	description	fontSize	$font-size.t3
		lineHeight	$line-height.t3
	suffixIcon	size	$dimension.x5
		paddingLeft	$dimension.x3

size=large

상태	슬롯	속성	값
enabled	trigger	paddingY	$dimension.x5
	prefix	paddingRight	$dimension.x3
	prefixIcon	size
	title	fontSize	$font-size.t7
		lineHeight	$line-height.t7
	description	fontSize	$font-size.t5
		lineHeight	$line-height.t5
	suffixIcon	size	$dimension.x6
		paddingLeft	$dimension.x3

variant=inline

Accordion Item들이 하나의 연속된 목록처럼 표현됩니다. 밀접하게 관련된 항목들을 컴팩트하게 나열할 때 사용합니다.

상태	슬롯	속성	값
enabled	root	dividerColor	$color.stroke.neutral-subtle 일반적인 콘텐츠에 사용되는 기본 색상입니다. (subtle)
		dividerPaddingX	$dimension.x3

variant=separated

각 Accordion Item이 개별 카드 형태로 분리되어 표현됩니다. 항목 간 시각적 독립성이 필요하거나, 각 섹션의 중요도가 동등할 때 사용합니다.

상태	슬롯	속성	값
enabled	root	strokeColor	$color.stroke.neutral-muted 일반적인 콘텐츠에 사용되는 기본 색상입니다. (muted)
		strokeWidth
		cornerRadius	$radius.r3

Accordion

Anatomy

Properties

Open

Size

Variant

State

Prefix

Guidelines

Accordion 기본 사용하기

Item 최소 개수

Accordion 터치 영역

Expansion Behavior 차이

확장 시 자동 스크롤 / 포커스 이동

Content Panel 내 스크롤 지양

Specification

Accordion

variant=separated, size=medium

variant=separated, size=large

Accordion Item

base

size=medium

size=large

variant=inline

variant=separated

On this page