Design Library

About

Brand

Foundations

Components

Expressions

Resources

Articles

Design Library

Button

Button은 사용자가 클릭 또는 탭을 통해 특정 작업을 수행하도록 트리거하는 기본 UI 요소입니다.  사용자의 주요 행동(Action)을 실행하는 데 사용되며, 제품 내에서 가장 기본적인 상호작용 패턴을 제공합니다.

Figma UI Kit

DONE

Contents

DONE

Develop

iOS

DONE

Android

DONE

Button

Figma UI Kit

DONE

Contents

DONE

Develop

iOS

DONE

Android

DONE

Button

Figma UI Kit

DONE

Contents

DONE

Develop

iOS

DONE

Android

DONE

Usage

Content

Writing principle

버튼 텍스트는 사용자가 고민하지 않고 즉시 행동할 수 있도록 분명하고 직관적으로 작성되어야 합니다. 모호하거나 예측하기 어려운 텍스트는 사용자의 의사결정을 방해하므로, 정확하고 일관된 표현을 사용합니다. 특히 동일 화면에 여러 버튼이 배치되는 경우, 각 버튼의 차이를 명확하게 구분할 수 있어야 합니다.

Writing principle

Guidelines

Title

Description

내용

버튼 텍스트에 들어가야 하는 내용은 아래와 같습니다.

사용자가 취해야 할 액션 1가지 (e.g. Don’t 취소하고 나가기 / Do 취소)
버튼을 눌렀을 때 이어질 결과나 화면을 예상할 수 있는 정보

문장 유형

명사형을 기본으로 사용하되, 상황에 따라 문장형을 사용할 수 있습니다.
e.g. 명사형: 취소 / 문장형: 네, 취소할게요.

특수문자

가독성 저해 방지를 위해 특수문자 중 일부만 사용 가능합니다.
쉼표(,), 쌍점(:), 가운뎃점(・), 붙임표(-), 빗금(/)

글자 수

컴포넌트 사이즈별 권장 글자 수는 아래와 같습니다.

XLarge, Large: 띄어쓰기 포함 최대 16자
Medium, Small: 띄어쓰기 포함 최대 8자

띄어쓰기

버튼 텍스트는 한글맞춤법 제2항에 따라 각 단어는 띄어쓰기를 원칙으로 합니다.

버튼 텍스트 어미의 사용

기본적으로 어미는 ‘순수 명사’ 종결을 지향합니다. 사용자는 명사만으로도 충분히 버튼의 의도를 파악할 수 있기 때문입니다.  다만 버튼 UI가 단독으로 쓰여 화면 내 여유 공간이 있거나 단어의 뉘앙스로 인해 정확성을 부여해야 할 경우 디자이너의 판단에 따라 자율적으로 사용할 수 있습니다. 단, 여러 개의 버튼을 나열해서 쓸 경우 어미는 혼용해서 쓰지 않고 통일해서 사용해주세요.