Button

Button (버튼)

버튼은 액션을 시작하는 데 사용하는 컴포넌트예요. 버튼 라벨은 사용자가 버튼과 상호작용할 때 어떤 액션이 일어날지 표현합니다. 모든 페이지에서 사용자의 다음 단계를 명확히 안내하는 핵심 인터랙션 요소입니다.

출처: Button

본문

참고: 여기서 다루는 예시 중 일부에는 production에서 사용할 수 없는 플루이드(full-span) 및 행잉(hanging) 버튼이 포함돼요. 이 지침은 이 주제들에 대한 현재의 이해를 반영하며, 향후 Carbon 버전에서 이 작업을 릴리스하기 위해 작업 중입니다.

개요 (Overview)

버튼은 액션을 트리거하는 데 사용하는 클릭 가능한 요소예요. 사용자에게 콜투액션(CTA)을 전달하고 다양한 방식으로 페이지와 상호작용할 수 있게 해줍니다. 버튼 라벨은 사용자가 상호작용할 때 어떤 액션이 일어날지 표현해요.

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

사용자가 취할 수 있는 액션을 전달하고 사용자가 페이지와 상호작용할 수 있게 하려면 버튼을 사용하세요. 각 페이지에는 기본(primary) 버튼이 하나만 있어야 해요. 나머지 콜투액션은 더 낮은 강조(emphasis)의 버튼으로 표현해야 합니다.

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

버튼을 내비게이션 요소로 사용하지 마세요. 사용자를 새 페이지로 데려가는 것이 목표라면 링크(links)를 대신 사용하세요.

변형 (Variants)

각 버튼 변형은 특정 기능을 가지며, 그 디자인이 사용자에게 기능을 신호합니다. 따라서 서로 다른 변형을 제품 전반에 걸쳐 일관되게 구현해 올바른 액션을 전달하는 것이 매우 중요해요.

변형 (Variant)	용도 (Purpose)
Primary	페이지의 주요 콜투액션용. 기본 버튼은 화면당 한 번만 나타나야 해요(애플리케이션 헤더, 모달 다이얼로그, 사이드 패널 제외).
Secondary	각 페이지의 보조 액션용. 보조 버튼은 기본 버튼과 함께만 사용할 수 있어요. 쌍으로서 보조 버튼의 기능은 "Cancel"이나 "Back" 같은 설정의 부정적 액션을 수행하는 것입니다. 보조 버튼을 단독으로 쓰지 말고, 긍정적 액션에 쓰지도 마세요.
Tertiary	덜 두드러지고 때로는 독립적인 액션용. 콜투액션이 여러 개일 때 단독으로 또는 기본 버튼과 짝지어 사용할 수 있어요. 또한 기본 버튼이 존재하는 페이지의 하위 작업(sub-task)에도 사용할 수 있습니다.
Ghost	가장 덜 두드러지는 액션용이며, 종종 기본 버튼과 함께 사용돼요. 진행 흐름 같은 상황에서 고스트 버튼은 기본·보조 버튼 세트와 짝지을 수 있는데, 기본 버튼은 진행 액션, 보조 버튼은 "Back", 고스트 버튼은 "Cancel" 용입니다.
Danger	사용자 데이터에 파괴적인 영향을 줄 수 있는 액션(예: delete, remove)용. Danger 버튼에는 primary, tertiary, ghost의 세 가지 스타일이 있어요.

포맷 (Formatting)

구조 (Anatomy)

버튼의 라벨은 사용자가 상호작용할 때 수행되는 액션을 전달해요. 라벨이 없는 아이콘 전용 버튼에서는 아이콘이 버튼이 하는 일을 정확히 나타내야 합니다.

Carbon 버튼에서 라벨은 항상 왼쪽 정렬이며, 중앙 정렬이 아니에요. 라벨이 있는 버튼의 아이콘은 오른쪽 정렬이지만, 아이콘 전용 버튼에서는 아이콘이 중앙에 있습니다.

버튼의 구조

1. Button (버튼)

A. Label (라벨) B. Container (컨테이너) C. Icon (아이콘, 선택)

3. Ghost button (고스트 버튼)

A. Label (라벨) C. Icon (아이콘, 선택)

2. Tertiary button (터셔리 버튼)

A. Label (라벨) B. Container (컨테이너) C. Icon (아이콘, 선택)

4. Icon button (아이콘 버튼)

B. Container (컨테이너) C. Icon (아이콘)

버튼 크기 (Button sizes)

버튼은 일곱 가지 크기로 제공돼요: extra small, small, medium, large (productive), large (expressive), extra large, 2XL. 아래 표는 각 크기의 사용 사례에 대한 맥락을 더해줍니다. 버튼 높이 지침은 Style 탭의 Size를 참고하세요.

#button-groups에서 서로 다른 버튼 크기를 섞는 것은 권장하지 않아요.

버튼 크기 (Button size)	사용 사례 (Use case)
Extra small	세로 공간이 제한적이거나 밀집된 레이아웃 영역에서 사용.
Small	버튼이 32px 작은 크기의 입력 필드와 짝을 이룰 때 사용.
Medium	버튼이 40px 중간 크기의 입력 필드와 짝을 이룰 때 사용.
Large (productive)	소프트웨어 제품에서 가장 흔한 버튼 크기. 14px body copy와 짝을 이룸.
Large (expressive)	이 버튼 안의 더 큰 표현적(expressive) 타입 크기는 16px body copy와 짝을 이룰 때 균형을 제공. IBM.com 팀이 웹사이트 배너에서 사용.
Extra large	모달, 사이드 패널, 좁은 티어시트(tearsheet)처럼 버튼이 더 큰 컴포넌트의 가장자리까지 확장될 때 사용.
2XL	큰 티어시트처럼 버튼이 전체 화면 컴포넌트의 가장자리까지 확장될 때 사용.

용도에 따른 버튼 크기.

강조 (Emphasis)

라벨이 암시하는 순서대로 버튼을 사용할 필요는 없어요. 보조 버튼은 기본 버튼보다 채도가 낮아 시각적으로 덜 두드러지지만 여전히 톤이 무겁습니다. 레이아웃에 여러 액션이 필요하다면—일부 툴바, 데이터 리스트, 대시보드의 경우처럼—낮은 강조의 버튼(tertiary나 ghost)이 더 나은 선택일 수 있어요.

가장 중요한 것은 UI 안의 버튼들 사이에 시각적 위계를 확립하는 것입니다. 다음 모범 사례를 기억하세요.

단일 고강조 버튼 (A single, high-emphasis button)

일반적으로 레이아웃에는 다른 버튼이 위계에서 덜 중요함을 분명히 하는 단일 고강조 버튼이 있어야 해요. 이 고강조 버튼이 가장 많은 주목을 받습니다.

다중 버튼 강조 (Multiple button emphasis)

고강조 버튼은 덜 중요한 액션을 수행하는 중간·낮은 강조 버튼과 함께할 수 있어요. 서로 관계가 있는 콜투액션만 함께 그룹화해야 한다는 점을 기억하세요.

버튼 그룹에 고강조와 중간 강조 버튼을 사용하세요.

버튼 그룹에 두 개의 고강조 버튼을 사용하지 마세요.

정렬 (Alignment)

정렬은 버튼이 창, 컨테이너, 레이아웃의 오른쪽에 정렬되는지 왼쪽에 정렬되는지를 말해요. 버튼은 어디에 나타나고 다른 컴포넌트 안에 포함되는지에 따라 정렬이 달라진다는 점에서 다른 어떤 컴포넌트보다 독특합니다.

일반적으로 전체 페이지 디자인에서는 기본 버튼이 페이지 왼쪽에 있어요. 브라우저 창이 크고 사용자가 읽으려고 스크롤할 때는 사용자의 시선이 계속 머물던 곳에 기본 버튼을 두는 것이 좋습니다. 반면 마법사(wizard)처럼 일련의 단계나 다이얼로그 창을 진행할 때는 기본 액션이 전통적으로 오른쪽 아래에 놓여요. 알림, 검색 필드, 데이터 테이블 같은 컴포넌트 안의 버튼도 오른쪽 정렬입니다.

어떤 경우에는 버튼 그룹—또는 사이드 패널이나 작은 타일의 경우 단일 버튼—이 창이나 컨테이너의 전체 너비를 가로지를 수 있어요. 일반적인 중첩 버튼 위치는 다음과 같습니다:

• 배너 콜투액션
• 다이얼로그 창
• 마법사(Wizards)
• 폼(Forms)
• 카드(Cards)
• 툴바(Toolbars)

여러 레이아웃에 걸친 버튼 정렬.

정렬 (Alignment)	사용 사례 (Use case)
Left-justified	배너 콜투액션, 페이지 내 폼, 타일 같은 컴포넌트의 중첩 버튼.
Right-justified	인라인 알림, 인라인 필드 버튼·데이터 테이블, 점진적 폼, 마법사, 단일 버튼 다이얼로그.
Full-span	다이얼로그, 사이드 패널, 작은 타일; 현재 Carbon은 여기에 언급된 override 없이는 코드에서 full-span 버튼을 구현하는 방법을 제공하지 않으며, 최대 320px로 제한됩니다.

고정 너비 버튼 (Fixed width button)

버튼 정렬은 버튼이 레이아웃 안에서 고정(fixed) 요소인지 플루이드(fluid) 요소인지와도 밀접한 관련이 있어요. "고정"이라고 할 때는 버튼 라벨 왼쪽에 16px, 오른쪽에 64px의 고정 패딩이 있다는 뜻입니다. 버튼 라벨이 버튼의 너비를 결정해요. 자세한 지침은 Style 탭을 참고하세요.

레이아웃 안의 고정 너비 기본 버튼 예시.

행잉 대 비행잉 버튼 정렬 (Hanging versus non-hanging button alignment)

행잉(Hanging) 버튼 정렬은 버튼 라벨이 컨테이너가 아닌 그리드에 정렬되는 방식이에요. 이 정렬은 서로 직접 영향을 주는 컴포넌트와 버튼 사이의 섹션을 그룹화할 때 사용해야 합니다.

비행잉(Non-hanging) 버튼 정렬은 버튼 컨테이너가 그리드에 정렬되는 방식이에요. 이 규칙은 보이는 컨테이너가 있는 버튼에 적용됩니다. 기본 상태에서 보이는 컨테이너가 없는 버튼(고스트 버튼, danger ghost 버튼)은 고스트 버튼 정렬을 참고하세요.

고정 너비 버튼의 행잉 정렬 예시.

고정 너비 버튼의 비행잉 정렬 예시.

플루이드 너비 버튼 (Fluid width button)

반응형 컬럼 그리드에서 플로팅 primary, secondary, tertiary 버튼이 지정된 수의 컬럼에 걸치면서 플루이드 너비를 가질 수 있는 하이브리드 시나리오가 있어요. 이를 "플루이드 너비 버튼"이라고 합니다.

플루이드 너비 버튼은 레이아웃에서 항상 고정 너비 기본 버튼보다 선호돼요. 가능하면 버튼 컨테이너의 상대적 위치를 반응형 레이아웃 그리드에 맞추고 버튼 너비를 페이지의 다른 요소 너비와 일치시키세요. 이상적으로는 관련 버튼 그룹(티어시트나 모달이 아닌 이상 고스트 버튼 제외)을 사용할 때 모두 같은 너비여야 합니다. 자세한 내용은 아래 버튼 그룹을 참고하세요.

레이아웃에서 카드의 너비와 일치하는 플루이드 너비 기본 버튼 예시.

버튼 그룹 (Button groups)

버튼 그룹은 관계가 있는 버튼을 정렬하는 유용한 방법이에요. 사용과 중요도에 따라 버튼을 논리적으로 세트로 그룹화하세요. 콜투액션이 너무 많으면 사용자를 압도하고 혼란시키므로 피해야 합니다.

강조(Emphasis) 섹션에서 언급했듯이, 라벨이 암시하는 순서대로 버튼을 사용할 필요는 없어요. 기본 버튼과 함께 secondary 또는 tertiary 버튼을 사용할 수 있습니다. 실제로 보조 버튼의 시각적 무게 때문에, 콜투액션이 3개를 넘는 레이아웃에서는 tertiary 또는 ghost 버튼을 사용하는 것이 권장됩니다.

UI에서 버튼 그룹 예시.

버튼 그룹 대 메뉴 버튼 (Button groups versus menu buttons)

사용자가 고려해야 할 액션이 두세 개일 때는 버튼 그룹을 사용해야 해요. 세 개보다 많은 액션은 메뉴 버튼(menu buttons)으로 의미 있게 그룹화해, 이러한 액션이 페이지에서 차지하는 공간을 줄여야 합니다. 또는 많은 공통 액션·기능이 필요한 인터페이스라면 툴바(toolbar) 사용을 고려하세요.

같은 데이터에 적용되는 의미 있는 액션을 그룹화하려면 메뉴 버튼을 사용하세요.

같은 데이터에 적용되는 개별 버튼을 여러 개 사용하지 마세요.

버튼 그룹의 버튼 너비 (Button width in button groups)

관련 버튼 그룹(고스트 버튼 제외)을 사용할 때는 모두 같은 너비여야 해요. 모든 버튼의 너비는 보통 가장 긴 버튼 라벨에 의해 결정됩니다.

참고: 이 지침은 툴바와 일괄 작업(batch actions) 툴바에도 적용할 것을 권장합니다.

버튼 그룹의 버튼 너비 예시.

그룹의 모든 버튼에 확장(bleed)되지 않더라도 같은 너비를 적용하세요.

그룹의 버튼을 서로 다른 너비로 만들지 마세요.

행잉 대 비행잉 플루이드 너비 버튼 그룹 정렬 (Hanging versus non-hanging fluid width button group alignment)

이것은 두 가지 방법 중 하나로 달성할 수 있으며, 둘 다 수용 가능해요. 첫 번째 접근 방식은 좁은 거터 모드(narrow gutter mode)를 사용하는 것입니다. 이 상황에서는 각 버튼이 컬럼 그리드에 개별적으로 설정됩니다.

참고: Carbon 개발자들이 narrow gutter mode를 작업 중이며, 현재 왼쪽 행잉 버튼은 override로만 달성할 수 있어요.

일부 제품은 버튼을 거터에 행잉하지 않으면서도 버튼 사이에 16px 거리를 원해요. 이는 버튼 그룹을 그리드에서 (두 개의 개별 엔티티가 아닌) 단일 객체로 취급하면, 같은 너비의 버튼을 유지하면서 달성할 수 있습니다. 각 버튼은 본질적으로 컨테이너의 50%를 차지하고, 그 사이에 프로그래밍 방식의 16px 거터가 만들어집니다.

버튼 그룹에서 행잉 버튼 예시.

버튼 그룹은 거터 행잉 없이 둘 사이에 16px 거터를 만들기 위해 그리드에서 하나의 요소로 취급됩니다.

플루이드 버튼 그룹 (Fluid button groups)

"플루이드"라고 할 때는 버튼이 컨테이너의 두 개 이상의 가장자리로 확장(bleed)됨으로써 더 큰 복합 컴포넌트의 일부가 된다는 뜻이에요. 플루이드 버튼의 너비는 컬럼이나 미니 단위로 정의되는 대신 컨테이너 너비의 백분율(종종 50%)로 정의됩니다.

페이지 레이아웃 안에서 primary, secondary, tertiary 변형의 버튼은 플루이드 너비를 가질 수 있어요. 티어시트나 모달 같은 더 제한된 공간에서는 고스트 버튼이 그룹의 다른 버튼과 짝을 이룰 때 플루이드 너비를 가질 수 있습니다. 또한 일반적으로 플루이드 버튼은 레이아웃이나 컨테이너에서 왼쪽 정렬되지 않아요—오른쪽 정렬되거나 컨테이너의 전체 너비를 가로지릅니다.

플루이드 입력 필드와 플루이드 버튼을 사용한 로그인 화면.

고스트 버튼이 다른 플루이드 버튼과 짝을 이룰 때 호버를 확장(bleed)시키세요.

플루이드 애플리케이션에서 tertiary 버튼을 사용하지 마세요.

플루이드 버튼 테두리 (Fluid button border)

$button-separator 토큰을 테두리에 사용하는 모든 플루이드 버튼 사이에는 1px 테두리가 있어요. 이 기능은 두 인터랙티브 UI 요소 사이에 3:1 구분을 추가합니다. 테두리는 접근성을 개선하기 위한 권장 기능입니다. 자세한 지침은 Style 탭을 참고하세요.

플루이드 버튼 사이의 $button-separator 토큰 테두리 예시.

가로 배치 그룹 (Horizontally arranged groups)

여러 버튼을 사용할 때 기본 버튼의 위치는 위의 정렬 지침을 따릅니다. 요약하면, 전체 페이지 디자인에서 기본 버튼은 왼쪽 정렬되어 secondary/tertiary 버튼의 왼쪽에 배치됩니다. 마법사와 다이얼로그 창 안에서는 기본 버튼이 오른쪽 정렬되어 secondary/tertiary 버튼의 오른쪽에 나타납니다.

참고: 이 지침은 변경됐어요. 이전에는 버튼 그룹이 왼쪽 정렬일 때 기본 버튼을 보조 버튼의 오른쪽에 유지하는 것을 주장했습니다. 팀들과 이야기하고 더 많은 연구를 한 후, 우리는 입장을 수정했습니다.

세로로 쌓인 버튼 그룹 (Vertically stacked button groups)

일반적인 제품 랜딩 페이지는 버튼이 나란히 배치됩니다. 그러나 세로 버튼 그룹도 제품에서 흔한데, 좁은 컬럼과 때로는 사이드 패널에서 공간을 절약하기 위해서입니다.

이렇게 쌓인 버튼은 사이드 패널로 확장되는 플루이드 버튼으로 동작하거나, 사이드 패널 주변에 16px 간격을 가질 수 있어요. 16px 간격은 세로로 쌓인 버튼 그룹에서 tertiary 버튼을 사용할 수 있게 해줍니다. 이런 경우 기본 버튼은 항상 위에 있고, secondary 또는 tertiary 버튼은 아래에 있어요.

참고: 쌓인 플루이드 버튼을 실험하려면 기존 코드에 대한 override가 필요합니다.

버튼 그룹 조합 (Button group combinations)

버튼 그룹은 제품 사용 사례에 따라 다른 버튼 변형으로 구성될 수 있어요. 다음 버튼 그룹 조합을 권장합니다.

기본 버튼이 있는 버튼 그룹

버튼 수 (Number of buttons)	권장 조합 (Recommended combinations)
2	- Primary and secondary button - Primary and tertiary button - Primary and ghost button - Primary and danger tertiary button - Danger primary and secondary button - Danger primary and ghost button
3	- Primary, secondary, and tertiary button - Primary, secondary, and ghost button - Primary and 2 secondary buttons - Primary and 2 tertiary buttons - Primary, tertiary, and danger tertiary

기본 버튼이 없는 버튼 그룹

버튼 수 (Number of buttons)	권장 조합 (Recommended combinations)
2	- 2 Tertiary buttons - Tertiary and ghost button - 2 Ghost buttons
3	- 3 Tertiary buttons - 2 Tertiary and 1 danger tertiary button

피해야 할 버튼 그룹 조합 (Button group combinations to avoid)

버튼 그룹은 제품 사용 사례에 따라 다른 버튼 변형으로 구성될 수 있어요. 다음 버튼 그룹 조합은 피할 것을 권장합니다.

버튼 그룹에 두 개의 고강조 버튼을 사용하지 마세요.

버튼 그룹에 두 개의 고강조 버튼을 사용하지 마세요.

secondary 버튼을 primary 이외의 버튼과 함께 사용하지 마세요.

tertiary와 danger tertiary 버튼을 함께 사용하지 마세요.

primary와 danger ghost 버튼을 함께 사용하지 마세요.

tertiary와 danger ghost 버튼을 함께 사용하지 마세요.

콘텐츠 (Content)

주요 요소 (Main elements)

버튼 라벨 (Button label)

버튼의 라벨은 버튼에서 가장 중요한 요소인데, 사용자가 상호작용할 때 수행될 액션을 전달하기 때문이에요. 버튼은 명확하고 예측 가능해야 합니다.

버튼 라벨은 버튼의 액션을 명확히 나타내야 해요. 충분한 컨텍스트를 제공하려면 "Done", "Close", "Cancel", "Add", "Delete" 같은 흔한 액션의 경우를 제외하고 버튼에 {동사} + {명사} 콘텐츠 공식을 사용하세요.

컴팩트한 UI에서 버튼 길이가 문제를 일으키거나 번역에 부정적 영향을 줄 수 있는 상황에는 이 규칙의 예외가 있지만, {verb} + {noun} 공식이 여전히 모범 사례입니다.

Carbon은 기본적으로 모든 버튼 라벨에 문장식 대소문자(sentence case)를 사용해요.

일관성을 위해 권장 액션 라벨 목록은 Carbon의 콘텐츠 가이드라인을 참고하세요.

가능하면 버튼에 {verb} + {noun} 콘텐츠 공식을 사용하세요.

명사만으로 버튼 라벨을 만들지 마세요.

라벨 정렬

버튼이 넓더라도 라벨을 왼쪽 정렬하세요.

버튼이 넓더라도 라벨을 중앙 정렬하지 마세요.

국제화 (RTL)

오른쪽에서 왼쪽(RTL) 언어의 경우 버튼 전체가 가로로 반전돼요. 라벨은 오른쪽 정렬되고 아이콘은 왼쪽 정렬됩니다.

RTL이 없는/있는 기본 버튼.

넘침 콘텐츠 (Overflow content)

버튼 라벨이 버튼의 가용 공간에 맞기 너무 길면 라벨은 넘쳐 두 번째 줄로 줄바꿈되어야 해요. 버튼 라벨을 잘라내는 것은 권장하지 않습니다.

위에서 언급했듯이 버튼 라벨을 간결하게 유지하고 {verb} + {noun} 콘텐츠 공식을 따르는 것이 모범 사례입니다.

넘침 콘텐츠가 있으면 버튼 라벨을 두 번째 줄로 줄바꿈하세요.

버튼 내부 공간이 부족하다고 버튼 라벨을 잘라내지 마세요.

추가 가이드 (Further guidance)

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

공통 동작 (Universal behaviors)

기본 버튼 포커스 (Primary button focus)

기본 버튼은 기본 액션(default action)이에요. 다이얼로그가 나타나면 기본 버튼이 보통 포커스를 받습니다. 폼에서 포커스가 Enter 키로 액션할 수 없는 컴포넌트에 있다면, Enter를 누르면 기본 버튼이 활성화됩니다.

다이얼로그에 다른 액션 가능한 컴포넌트가 없을 때 기본 버튼이 기본 포커스를 받아요.

상태 (States)

버튼의 기본 및 인터랙션 상태는 버튼 Style 탭 가이드라인을 따라야 해요.

인터랙션 (Interactions)

마우스 (Mouse)

사용자는 버튼 컨테이너 안 아무 곳이나 클릭해 버튼을 실행할 수 있어요.

버튼의 마우스 인터랙션.

키보드 (Keyboard)

버튼에 포커스가 있는 동안 Enter 또는 Space를 눌러 버튼을 실행할 수 있어요. 추가 키보드 인터랙션은 접근성(Accessibility) 탭을 참고하세요.

로딩 (Loading)

버튼은 액션이 진행 중임을 시각적으로 알려주는 인라인 로딩(inline loading)을 가질 수 있어요. 인라인 로딩이 진행되는 동안 버튼은 비활성화됩니다.

버튼 맥락의 인라인 로딩.

Primary button (기본 버튼)

기본 버튼은 페이지의 주요 콜투액션에 사용돼요. 기본 버튼은 화면당 한 번만 나타나야 합니다(유일한 예외는 기본 액션이 있는 임시 흐름). 기본 버튼은 사용자에게 포커스를 주고 기대되는 다음 단계에 대한 맥락을 제공해요.

제품 UI 맥락의 기본 버튼.

기본 액션이 있는 임시 흐름 (Temporary flows with primary action)

페이지에 기본 버튼이 있지만, 페이지 콘텐츠와의 상호작용을 통해 자체 기본 버튼을 가진 다른 흐름이 시작되는 경우가 있을 수 있어요. 일시적으로 페이지에 두 개의 기본 버튼이 있을 수 있습니다.

이 경우 사용자가 다른 흐름에 집중하려는 의도로 무언가를 트리거했으므로, 페이지에 일시적으로 두 개의 기본 버튼이 있는 것은 허용됩니다. 이것이 페이지에 두 개의 기본 액션이 있는 것이 권장되는 유일한 시나리오입니다.

기본 액션이 있는 데이터 테이블에 자체 기본 액션이 있는 열린 사이드 패널이 있는 임시 사용자 흐름.

모범 사례 (Best practices)

모든 페이지에 기본 버튼이 필요한 것은 아니다 (Not every page needs a primary button)

때로는 페이지의 주요 목적이 액션을 트리거하는 것이 아니라 다른 컴포넌트와 상호작용하거나 콘텐츠를 읽는 것일 수 있어요. 이 경우 이러한 보조 액션이나 경험에는 tertiary와 ghost 버튼을 사용하세요.

이 페이지의 주 의도는 콘텐츠를 제시하는 것이며, 필터링·편집 같은 액션은 tertiary와 ghost 버튼으로 표현됩니다.

Secondary button (보조 버튼)

강조(emphasis) 섹션에서 언급했듯이 보조 버튼은 톤이 무겁지만 기본 버튼보다 채도가 낮아 시각적으로 덜 두드러집니다. 결과적으로 보조 버튼은 기본 버튼과 함께 사용하도록 설계됐어요. 쌍으로 사용할 때 보조 버튼은 "Cancel"이나 "Back" 같은 설정의 부정적 액션을 실행합니다.

제품 UI 맥락의 보조 버튼.

보조 버튼은 단독으로 또는 긍정/기본 액션에 사용하면 안 돼요. 보조 버튼 사용 방법에 대한 자세한 지침은 버튼 그룹을 참고하세요.

보조 버튼을 기본 버튼과 함께 사용하세요.

보조 버튼을 단독으로 또는 긍정/기본 액션에 사용하지 마세요.

Tertiary button (터셔리 버튼)

터셔리 버튼은 기본 버튼보다 덜 두드러지고 고스트 버튼보다 약간 더 두드러져요. 터셔리 버튼은 단독으로 또는 버튼 그룹의 일부로 잘 동작합니다.

제품 UI 맥락의 터셔리 버튼.

터셔리 버튼은 페이지의 콘텐츠와 정렬된 상태를 유지해야 해요. 항상 터셔리 버튼이 모든 면에 적절한 패딩을 갖도록 하세요. 플루이드 버튼 지침에서 언급했듯이, 터셔리 버튼은 플루이드 배열에서 사용하면 안 됩니다.

터셔리 버튼을 나머지 콘텐츠와 정렬하세요.

플루이드 배열에서 터셔리 버튼을 사용하지 마세요.

모범 사례 (Best practices)

페이지 헤더용 터셔리 버튼 (Tertiary buttons for page headers)

페이지의 헤더에 기본 버튼을 사용하기는 어려워요. 헤더 아래의 콘텐츠가 기본 액션을 가질 가능성이 높기 때문입니다(또는 향후 릴리스에서 그럴 것입니다). 페이지 헤더의 버튼이 기본 버튼으로 스타일링되지 않더라도, 위계적으로 상단에 배치되어 상당한 두드러짐을 가집니다. 따라서 페이지 헤더에는 터셔리 버튼을 사용하는 것이 좋습니다.

모든 탭에 걸쳐 페이지 헤더의 버튼이 기본이어야 한다고 결정된다면, 헤더 아래의 어떤 콘텐츠도 또 다른 기본 액션을 포함하지 않도록 하세요.

콘텐츠 섹션에 기본 버튼이 있으면 페이지 헤더에 터셔리 버튼을 사용하세요.

페이지 헤더와 콘텐츠 섹션 모두에 기본 버튼을 사용하지 마세요.

버튼 그룹의 터셔리 버튼 (Tertiary buttons in button groups)

버튼 그룹에서 하나의 기본과 같은 중요도를 공유하는 다른 두 액션이 있을 때, 터셔리 버튼 사용을 고려하세요.

버튼 그룹에서 사용된 터셔리 버튼 예시.

빈 상태의 터셔리 버튼 (Tertiary buttons in empty states)

이미 기본 액션이 정의된 페이지에 나타나는 빈 상태(empty state)에는, 새 작업 흐름을 시작하기 위한 이상적인 해결책이 터셔리 버튼이에요.

빈 상태 콘텐츠와 함께 사용된 터셔리 버튼 예시.

Ghost button (고스트 버튼)

고스트 버튼은 버튼 변형 중 가장 덜 두드러져요. 고스트 버튼은 더 미묘해서 보조 액션에 이상적입니다. 컨테이너에 딱 붙어 있거나 다른 요소와 가로로 그룹화될 때 가장 잘 동작합니다.

제품 UI 맥락의 고스트 버튼.

고스트 버튼 정렬 (Aligning ghost buttons)

고스트 버튼은 컨테이너의 모서리에 정렬될 때 잘 동작해요. 고스트 버튼을 다른 콘텐츠와 세로로 정렬하는 일반적인 규칙은, 그 라벨이 페이지의 다른 텍스트와 정렬되도록 하는 것입니다.

고스트 버튼 라벨을 나머지 콘텐츠와 정렬하세요.

부분적으로 정렬된 것처럼 보여도 고스트 버튼의 가장자리를 나머지 콘텐츠와 정렬하지 마세요.

고스트 버튼은 사이드 패널의 작은 보조 액션에 유용할 수 있어요. 이 맥락에서 고스트 버튼의 너비를 컨테이너의 전체 너비로 확장하면 이 처리가 의도적으로 보입니다. 컨테이너의 전체 너비에 정렬하는 것은 사이드 패널 480px(medium) 이하처럼 컨테이너가 더 작을 때만 권장합니다.

고스트 버튼을 사이드 패널의 전체 너비로 확장하세요.

사이드 패널 안에서 고스트 버튼을 반쯤 행잉된 채로 두지 마세요.

고스트 버튼은 페이지의 다른 컴포넌트와 가로로 인라인 정렬될 수도 있어요.

컴포넌트와 가로로 인라인 정렬된 고스트 버튼 예시.

모범 사례 (Best practices)

데이터 테이블 액션용 고스트 버튼 (Ghost buttons for data table actions)

테이블 툴바의 버튼은 종종 기본 버튼으로 묘사되지만, 항상 그런 것은 아니에요. 페이지에 기본 스타일링이 필요한 다른 버튼이 있다면 고스트 버튼을 대신 사용하세요.

고스트 버튼은 페이지 헤더의 기본 버튼과의 충돌을 피하기 위해 데이터 테이블의 기본 액션을 나타냅니다.

프로덕티브 카드의 고스트 버튼 (Ghost buttons in productive cards)

여러 프로덕티브 카드가 있는 대시보드에서 고스트 버튼은 tertiary 버튼보다 덜 주목을 끌기 때문에 잘 작동해요. 컨테이너 안의 세로 배치에서 정렬된 것처럼 보이도록 고스트 버튼은 컨테이너의 최소 두 모서리에 닿는 것이 권장됩니다.

자세한 내용은 카드 컴포넌트를 참고하세요.

카드에서 사용된 고스트 버튼 예시.

취소 액션으로 사용되는 고스트 버튼 (Ghost button used as a cancel action)

고스트 버튼은 덜 주목을 끌기 때문에 점진적 흐름에서 취소 버튼으로 잘 작동해요—사용자가 의도적으로 찾아 클릭해야 취소됩니다. 티어시트에서는 버튼이 플루이드이므로 tertiary 버튼에 적합한 적용이 아닙니다.

모달에서 사용된 고스트 버튼 예시.

Danger button (위험 버튼)

Danger 버튼은 "Delete", "Remove", "Stop"처럼 파괴적인 영향을 줄 수 있는 액션에 사용돼요.

Danger 버튼에는 primary, tertiary, ghost의 세 가지 스타일이 있어요. 어떤 danger 버튼 스타일을 쓸지는 파괴적 액션에 주려는 강조 수준에 따라 달라집니다. 워크플로에서 필수이거나 기본 단계인 파괴적 액션은 primary danger 버튼 스타일을 사용해야 해요. 그러나 파괴적 액션이 사용자가 선택할 수 있는 여러 액션 중 하나에 불과하다면, tertiary danger 버튼이나 ghost danger 버튼 같은 더 낮은 강조 스타일이 더 적합할 수 있습니다.

제품 UI 맥락의 danger 버튼.

낮은 강조의 파괴적 액션에는 tertiary danger 버튼을 사용하세요.

낮은 강조의 파괴적 액션에는 ghost danger 버튼을 사용하세요.

수정자 (Modifiers)

아이콘이 있는 버튼 (Button with icon)

아이콘은 라벨 옆에 배치해 액션을 명확히 하고 버튼에 주의를 끌 수 있어요. 그러나 아이콘은 자주 사용하면 시각적 소음이 생기고 경험을 덜 사용하기 쉽게 만들 수 있으므로 아껴서 사용해야 해요. UI의 한 부분에 아이콘이 있는 버튼을 사용한다고 다른 모든 버튼에 아이콘을 추가해야 하는 것은 아닙니다.

• 버튼 안에는 16px 아이콘을 사용하고, 큰 표현적(expressive) 버튼 안에는 20px 아이콘을 사용하세요.
• 아이콘은 단색 모양과 도려낸(knocked-out) 디테일로 구분됩니다.
• 아이콘은 항상 라벨의 오른쪽에 나타나야 해요.
• 버튼에 사용된 아이콘은 사용자가 취하는 액션과 직접 관련되어야 합니다.
• 아이콘은 버튼 안의 라벨과 같은 색상 값을 가져야 해요.

라벨 뒤 버튼의 오른쪽에 아이콘을 배치하세요.

아이콘을 버튼의 라벨 왼쪽에 배치하지 마세요.

고스트 버튼에서 라벨과 아이콘 사이에 8px 간격을 사용하세요.

고스트 버튼에서 라벨과 아이콘 사이에 너무 많은 공간을 두지 마세요.

잘 정립된 아이콘이 있는 보편적 액션 (Universal actions with well-established icons)

버튼에 아이콘을 추가할지 결정할 때는 아이콘이 얼마나 인식 가능한지, 다른 맥락에서 비슷한 아이콘이 다른 의미로 사용될 수 있는지 고려하는 것이 중요해요. 완전히 다른 액션에 같은 아이콘이 사용되는 것을 피하고 싶습니다.

이러한 이유로 우리는 버튼 라벨 옆에 아이콘을 추가하기에 적합한 보편적 액션 세트를 정의했어요. 이들은 IBM Software 안팎에서 명확히 정의되고 널리 인식되는 아이콘을 가집니다.

이 목록에 없는 아이콘도, 아이콘이 의도한 액션을 명확히 전달한다면 버튼에서 사용할 수 있어요. 아이콘의 기대 사용을 결정하려면 Carbon 아이콘 라이브러리에서 이름을 확인하세요.

액션 이름 (Name of action)	관련 아이콘 (Associated icon)	라이브러리 이름 (Name in icon library)
Create/Add		Add
Edit		Edit
Copy		Copy
Delete		Trash can
Remove		Subtract alt
Export		Export
Upload		Upload
Download		Download
Play/Start		Play
Pause		Pause
Stop		Stop outline
Refresh		Restart

명확히 정의된 아이콘이 있는 보편적 액션이 빠져 있다고 생각하시나요? 여기에서 알려주세요.

정의된 아이콘을 다른 보편적 액션을 나타내는 데 사용하지 마세요 (Do not use a defined icon to represent a different universal action)

위 목록의 아이콘을 다른 액션에 사용하면 기대 결과와 경험을 혼란시킬 수 있어요.

정의된 아이콘을 보편적 액션을 나타내는 데 사용하세요.

연관되지 않을 액션에 아이콘을 사용하지 마세요.

실행 아이콘 (Launch icon)

Launch 아이콘은 사용자를 다른 탭으로 보내는 모든 콜투액션(새 탭의 콘텐츠가 같은 제품의 일부든 완전히 별개의 웹 리소스든)에 사용해야 해요. Launch 아이콘이 필요한 버튼과 링크는 주로 UI 왼쪽 내비게이션 영역, 사이드 패널, 카드, 모달에서 찾을 수 있습니다. Launch 액션의 대상 목적지는 버튼이나 링크 라벨과 주변 컨텍스트를 통해 사용자에게 명확히 해야 해요.

IBM 직원 전용: 콘텐츠 가이드의 내비게이션 라벨을 참고하세요.

버튼을 클릭하면 새 페이지가 열릴 것임을 나타내는 launch 아이콘이 있는 tertiary 버튼 예시.

버튼 그룹의 버튼에서 아이콘 사용을 일관되게 하세요 (Be consistent with icon usage for buttons in a button group)

버튼 그룹에서 아이콘 사용은 선택 사항이에요. 일관성을 위해 버튼 그룹의 각 버튼에 아이콘을 모두 표시하거나 모두 표시하지 않는 것을 권장합니다. 버튼 라벨과 아이콘을 짝지으면 아이콘이 액션을 시각적으로 설명하고 더 많은 주의를 끌기 때문에 이점이 있습니다. 그러나 어떤 경우에는 그룹에 아이콘이 있는 버튼을 너무 많이 사용하면 UI에 원치 않는 소음이 생기고 단순한 경험을 과도하게 복잡하게 만들 수 있어요.

위 표에 나열된 보편적 액션 또는 특정 아이콘이 일반적으로 짝지어 연관되는 다른 액션에만 버튼 그룹에서 아이콘을 사용하세요.

아이콘을 도입할 때 버튼 그룹 전체에 일관된 접근 방식을 따르세요.

아이콘을 도입할 때 버튼 그룹 전체에 일관된 접근 방식을 따르세요.

버튼 그룹의 몇몇 버튼에만 아이콘을 도입하지 마세요.

버튼 그룹의 몇몇 버튼에만 아이콘을 도입하지 마세요.

모든 아이콘에 기본 변형 사용 (Use the default variation for all icons)

Carbon 라이브러리에는 몇몇 아이콘의 채워진(filled) 변형이 있어요. 모든 아이콘이 이 변형을 가지는 것은 아니므로, 모든 아이콘에 기본 옵션을 사용할 것을 권장합니다(유일한 예외는 자체 정의된 아이콘을 가진 상태 아이콘). 기본 아이콘은 그 액션의 이름을 따서 명명됩니다.

"Play"인 기본 아이콘을 사용하세요.

채워진 아이콘 변형을 사용하지 마세요.

아이콘 전용 버튼 (Icon only buttons)

아이콘 전용 버튼은 사용자가 한 번의 탭으로 액션을 취하고 선택을 할 수 있게 해줘요. 아이콘 버튼은 primary, secondary, tertiary, ghost 변형의 형태를 가질 수 있지만, 대부분 primary 또는 ghost 버튼으로 스타일링됩니다.

아이콘 전용 버튼은 아껴서 사용해야 해요. "대부분의 상황에서 사용자는 텍스트만으로 아이콘만으로보다 정확한 해석을 더 잘 배운다." — Wiedenbeck, S (1999). 이러한 이유로 아이콘 전용 버튼 사용은 다음 사용 사례에 권장됩니다:

• 아이콘은 라벨 없이도 표준화되고 인식 가능해야 하거나, 핀 아이콘이 핀 액션을 나타내는 것처럼 강한 시각적 속성을 가진 액션을 나타내야 해요.
• 공간이 부족하고 여러 액션이 있어서 아이콘 버튼을 사용하는 툴바가 필요할 때. 자세한 내용은 툴바 컴포넌트를 참고하세요.

호버 시 툴팁을 보여주는 툴바의 아이콘 전용 고스트 버튼 예시.

아이콘 전용 버튼의 툴팁 (Tooltips for icon only buttons)

아이콘이 얼마나 인식 가능한지, 또는 그 액션이 보편적 액션 목록 안에 있는지와 관계없이, 클릭했을 때 아이콘 버튼이 무엇을 할지 설명하는 텍스트가 있는 툴팁은 항상 필요해요.

호버 시 툴팁을 보여주는 아이콘 전용 고스트 버튼 예시.

아이콘 전용 고스트 버튼의 색상 (Colors of icon only ghost buttons)

Carbon은 type, color, spacing 토큰을 컴포넌트에 구축해 컴포넌트 사용을 쉽게 해줘요. 아이콘 전용 고스트 버튼의 색상 토큰을 변경하지 마세요. 이는 컴포넌트 전반의 스펙에도 동일하게 적용됩니다. 아이콘 전용 고스트 버튼 색상에 대해 더 알아보려면 Style 탭을 참고하세요.

시스템이 정의한 고스트 아이콘 전용 버튼 색상을 사용하세요.

고스트 아이콘 전용 버튼의 색상을 변경하지 마세요.

Danger 버튼은 아이콘 전용 형태로 사용할 수 없다 (Danger buttons cannot be used in an icon only form)

Danger는 중요한 액션이 될 수 있고, 시각적 라벨과 함께 더 높은 강조를 가진 버튼에 적용해야 해요. danger 버튼 지침에서 언급했듯이, danger 버튼을 primary, tertiary, ghost 버튼 형태로 사용하는 것이 가장 좋습니다.

파괴적 액션에 danger 버튼에서 시각적 라벨을 사용하세요.

파괴적 액션에 아이콘 전용 형태의 danger 버튼을 사용하지 마세요.

관련 컴포넌트 (Related)

• Button labels
• Fixed button bars
• Form pattern
• Icons
• Link component
• Menu buttons
• Modal component

참고 자료 (References)

• Mehmet Goktürk, The Glossary of Human Computer Interaction, Chapter 37 (The Interaction Design Foundation)
• Jakob Nielsen, OK-Cancel or Cancel-OK? The Trouble With Buttons (Nielsen Norman Group, 2008)
• Artem Syzonenko, Buttons on the web: placement and order (UX Collective, 2019)
• Wiedenbeck, S (1999). The use of icons and labels in an end-user application program: An empirical study of learning and retention. Behavior & Information Technology, 18(2), p68–82

더 알아보기 (Learn more)

버튼은 액션을 트리거하는 핵심 컴포넌트로, 화면당 기본 버튼은 하나만 두고 나머지 콜투액션은 강조 수준에 따라 secondary·tertiary·ghost로 표현하는 게 원칙이에요. 변형별로 용도와 정렬 규칙이 정해져 있으니 상황에 맞춰 선택하고, 버튼 그룹에서 조합 규칙을 지키면 위계가 명확한 UI를 만들 수 있어요. 파괴적 액션에는 danger 버튼, 아이콘 사용은 아껴서 활용하세요.