Button Compoments

Button은 사용자의 성공적 작업 수행을 위해 Button에 따른 시각적 계층 구조에 차이가 있습니다. 계층 구조에 따른 스타일 가이드를 유의하며, 임의 스타일 추가 및 사용은 제한합니다. 어떠한 Action을 수행하거나 다른 위치로 이동할때 (navigate to another page) 사용됩니다.

Components

Button은 스타일 및 쓰임새에 따라 Primary Button, Secondary Button, Tertiary Button, Extra Button 4가지로 분류되는데, 그 안에서도 Icon의 유무 혹은 사용되는 방식에 따른 Background Color의 분류에 따라 세부항목으로 분리되어 사용되어집니다. Extra Type을 제외한 3가지 Type은 주요하게 사용되는 Main Type입니다.

1. Main Type (Primary, Secondary, Tertiary Type)

Primary Type은 가장 흔하게 사용되는 타입으로, Text Label 만 사용되는 경우와 Icon과 함께 사용되는 경우 두가지로 크게 사용되어 집니다. Secondary Type의 경우 Primary와 거의 동일한 형태이되, Color Type이 다른 경우로 두번째 위계의 Button의 동작에 사용되어 집니다. 마지막으로 Tertiary Type의 경우 Icon으로만 구성된 Icon Button으로 동작의 위계에 따라 Icon Button 내에서도 Primary, Secondary로 나뉘어 사용되어 집니다.

2. Extra Type

Extra Button Type (Segment Button, Progreess Status Button, Text Button, Combo Button)은 주요하게 사용되지는 않으나 Zoomable내에서 잦은 빈도 수로 사용되는 Button의 Type들 입니다. 각각이 기능이나 목적에 따라 다양하게 구성되어져 있는것이 특징입니다.

Primary & Secondary Button

Button은 사용자의 성공적 작업 수행을 위해 Button에 따른 시각적 계층 구조에 차이가 있습니다. 계층 구조에 따른 스타일 가이드를 유의하며, 임의 스타일 추가 및 사용은 제한합니다. 어떠한 Action을 수행하거나 다른 위치로 이동할때 (navigate to another page) 사용됩니다.

Button

Button은 가장 기본적인 Button으로 중요도와 쓰임새에 따라 세부 속성을 변경해 사용합니다. 자세한 내용은 Variants와 Table of Figma Properties를 참고합니다.

Button 기본 케이스인 Primary 와 Secondary 버튼 조합 적용 예시입니다.

Anatomy

Varients

Button

Primary

주요 버튼(Primary Buttons)은 페이지 키 액션에 사용하는 Button으로 한 페이지에 한 번만 사용합니다. 대표적인 예시로 로그인 페이지 내 '로그인' Button과 Image Quality Check 페이지 내 'Start or Done' Button으로 사용됩니다.

Button

Secondary

보조 버튼(Secondary Button)은 Primary Buttons의 보조로 사용합니다. 대표적인 예시로 로그인 페이지 내 'Back to Login Button'과 OSD Viewer 페이지 내 'Reset All Button'에서 사용됩니다.

Size

사이즈는 높이 기준으로 Large, Medium, Small, xSmall, 2xSmall을 사용합니다. 사이즈에 따라 폰트 크기, 아이콘 사이즈, 레디어스, 패딩은 상이합니다. 이외 최소 높이 28 미만(Tiny)은 최소 터치 영역 확보 이슈로 사용을 지양합니다.

Table of Figma Properties

Spec

Usage & Placement

Rule for Full Width Buttons

일반적으로 사용 되는 버튼의 Width의 최소값(64px, 71px, 80px, 90px)보다 작은 Width 값을 가지는 경우를 제외하고는 Text Label의 Width 값에 Hug한 상태로 맞춰 사용되어지는것이 일반적입니다. 예외적으로 위치한 Container의 Remained Width 값이 사용된 버튼의 Width 값 보다 작은 경우에 Container의 Width 값을 동일하게 n등분한 값을 Width 값으로 가지는 것으로 합니다. 버튼이 하나 존재 하는 경우에도 Full Width Button 방식으로 사용될 수 있으며 통일성을 위해 사용되거나 목적성에 따라 채워 사용 될 수 있습니다.

(e.g. OSD Viewer, Login)

Placement of Button Group

Button의 Width 값은 Text Label의 값에 Hug한 상태로 맞춰 사용되어지는 것이 일반적입니다. 'Rule of Full Width Buttons'의 경우를 만족시키는 영역내에서 사용되는 Button 혹은 Button Group은 우측 기준으로 정렬되어 사용되어집니다. 일반적으로 Modal 내에서 많이 사용되어 집니다.

Requirement Feedback

Rule for Button Activation

일반적으로 Modal 내에 사용되어지는 Button은 필수요건을 모두 충족하지 않더라도 모두 활성화 시키는 것을 기본으로 합니다. 해당 경우 필수요건을 미충족된 상태에서 Button을 동작시, 미충족 상태에 대한 Alert를 통해 정보를 전달하는 것이 특징입니다.

Exception Case of Button Disabled

Modal 내에 사용되어지는 버튼중 활성화가 아닌 비활성화로 두는 예외 케이스로, Button의 동작이 의미하는 Action에 해당하는 Task가 Modal 내에서 명확히 들어나는 경우로 Export PDF 에서 파일이 Export 되는 Process 중이거나 Remove List 에서 Checkbox를 선택하지 않은 경우로 현재 두가지로 사용되어 집니다.

Loading Status

Loading Spinner Size

Button 내에서 표출되는 Spinner의 경우에 기존 버튼 사이즈 내의 Text Height와 동일하게 맞춰 표출 되는 것이 특징입니다. Loading 표출시에 Width 값의 경우 Loading 발생시점 직전에 사용되는 Width와 동일하게 사용하는 것이 특징입니다.

Tertiary Button (Icon Button)

Icon Button은 별도의 Text Label 없이 Icon으로만 이루어진 버튼입니다.

Icon Button

Icon Button은 별도의 Text Label 없이 Icon으로만 이루어진 버튼입니다. 가능한 직관적으로 이해가 가능한 동작에 대한 Text를 포함한 버튼을 사용하는 것을 지향 하되, 공간이 부족하거나 Icon의 시각적 요소가 사용자가 이해할 수 있을 정도로 직관적인 경우 아이콘 버튼을 레이블 없이 사용할 수 있습니다. 또한 아이콘 버튼은 선택 (On) 또는 선택 취소 (OFF)의 액션으로도 사용될수 있습니다. Icon Button은 Tooltip의 표출을 반드시 하는 것을 원칙으로 합니다.

Anatomy

Varients

Primary Type

Icon Button은 Primary, Secondary, Tertiary 3 가지로 나뉘어 사용되며 컨텐츠 별 각 유형을 유동적으로 사용하게 됩니다. Primary Icon Button은 각 페이지에 중복되어 사용될수 없으며 한 페이지에 하나만 사용하는것을 지향 합니다.

Secondary Type

Icon Button은 Primary, Secondary, Tertiary 3 가지로 나뉘어 사용되며 컨텐츠 별 각 유형을 유동적으로 사용하게 됩니다. Primary Icon Button은 각 페이지에 중복되어 사용될수 없으며 한 페이지에 하나만 사용하는것을 지향 합니다.

Tertiary Type

Tertiary Type Icon Button은 Container, Outlined을 모두 가지고 있지 않으며 외부 BG Color에 따라 다르게 사용 되어 집니다. 3 가지로 나뉘어 사용되며 컨텐츠 별 각 유형을 유동적으로 사용하게 됩니다. Primary Icon Button은 각 페이지에 중복되어 사용될수 없으며 한 페이지에 하나만 사용하는것을 지향 합니다.

State

아이콘 버튼의 기본 State는 4가지 (Default, Hover, Clicked, Disabled)로 구성됩니다.

Size

사이즈는 높이 기준으로 Large, Medium, Small, xSmall, 2xSmall, 3xSmall, 4xSmall을 사용합니다. 사이즈에 따라 컨테이너 크기, 아이콘 사이즈, 레디어스, 패딩은 상이합니다.

Table of Figma Properties

Icon Button in Table

아이콘 버튼 간의 간격은 4px or 8px 로 하며 리스트내에서 헤더와 같이 사용될 경우 항상 마진에 유의에서 사용하도록 합니다. Tabel 내에서 Icon Button의 조합이 사용되어지는 경우에는 각 Row에 대한 동작을 수행하고자 할때 사용이 되어지며 해당 경우 우측을 기준으로 정렬되어 지는 것이 측징입니다.

Popup Tooltip

Popup Tooltip을 표출하기 위한 Information Icon을 포함한 형태의 버튼은 Tertiary Type의 Icon Button을 사용하도록 합니다. Status 를 동일하게 가져가며 Header와 함께 사용되어지는 것이 특징입니다. 해당 Button의 동작 (Action)의 결과는 특정 부가 설명에 해당하는 Tooltip이 표출 되는 것이며, 해당 동작을 멈추기 위해서는 Button을 다시 클릭 하거나 다른 영역을 클릭하는 것을 동작해제 (Tooltip이 사라지는 것) 가 되는 것이 특징입니다.

Usage & Placement

Header with Icon

Header와 함께 사용 되어 지는 Icon으로, Header를 포함한 전체 영역을 Touch Point Area로 사용하며, 해당 영역에 대한 동작에 대한 것은 Icon으로 표출하여 보여줍니다. 해당 경우 Status를 지난 Icon Button을 사용하지 않는 것이 특징이며, 별도의 Hover, Clicked Status가 없이 Clickable하게 사용됩니다.

(e.g. Item List - Expand Icon, OSD Viewer Panel - Expand Icon)

Extra Button (Text, Segment, Progress Status, Combo Button)

Extra Button Type은 주요하게 사용되지는 않으나 Zoomable내에서 잦은 빈도 수로 사용 되는 Button의 Type들 입니다. 각각이 기능이나 목적에 따라 Segment Button, Progress Status Button, Text Button, Combo Button등으로 다양하게 구성되어져 있는것이 특징입니다.

Text Button

Text Button은 별도의 Container 및 Outlined 없이 사용되는 버튼으로 Inline Button으로 폼을 제외해 Text (Label) 또는 Linked 형태의 언더라인을 같이 결합해 사용되어지는 것이 특징입니다. 문장의 일부 혹은 단독적으로 사용되며 다른 페이지로 안내하거나 현재 페이지에서의 이동, 추가적인 정보 표출 등의 용도로 사용됩니다.

Varients

Type

Text Button은 Label (Primary, Secondary)와 Link 형태의 2가지로 나뉘어 사용되며 컨텐츠 별 각 유형을 콘텐츠에 맞게 유동적으로 사용하게 됩니다.

State

텍스트 버튼의 기본 State는 4가지 (Default, Hover, Clicked, Disabled)로 구성됩니다.

Size

Text Button은 본문과 동일하게 사이즈 기준 Medium, Small, Xsmall을 사용합니다. 네비게이션 상 이동 (자세히 보기) 목적으로 사용 시 본문과 동일한 폰트 크기를 사용합니다.

Table of Figma Properties

Segment Button

Segment Button은 페이지 내 유사한 콘텐츠를 그룹화하여 섹션 간 이동시 사용합니다. 해당 페이지를 벗어나지 않고 섹션별 같은 위계의 콘텐츠 둘러보기가 가능합니다. Selected 상태로 사용자 위치를 쉽고 빠르게 나타내므로 시각적 일관성이 필요합니다. Segment Button은 Select가 없는 상태가 없으며, 한개의 Item은 항상 Selected 되어 있는 것이 특징입니다.

Varients

Type

Segment Button은 형태에 따라 Label, Icon의 형태 2가지로 나뉘며, 위치하는 방식에 따라 Floating=true, Floating=false 의 두가지 방식으로 사용되어 집니다. 콘텐츠, 해상도에 맞게 유동적으로 사용하게 됩니다.

State

Segment Button의 기본 State는 2가지 (Clicked, Unclicked)로 구성됩니다. Clicked 상태일 경우 폰트의 weight와 color는 Inter/Medium, Green 500로 구성됩니다.

Size

Segment Button의 Size는 Large, Medium로 2가지로 구성됩니다. 일반적인 버튼에서 사용하는 Large의 Height의 경우에는 40px로 사용되어지나, Segment Button의 경우 36px로 사용됩니다.

Progress Status Button

Progress Status Button은 사용자의 성공적 작업 수행을 위해 단계별 Button에 따른 시각적 계층 구조에 차이가 있습니다. 계층 구조에 따른 스타일 가이드를 유의하며, 임의 스타일 추가 및 사용은 제한합니다. Wind OSD Viewer 화면의 Progress Status에서 상태 및 작업 흐름에 대한 Workflow에 따른 시각적 버튼을 사용합니다.

Varients

Type

Progress Status Button은 Approved, In Review 2가지 형태로 나뉘어 사용되며 진행단계 및 상황 위계에 맞게 각 유형을 유동적으로 사용하게 됩니다.

State

Progress Status Button은 Default, Hover 2가지 상태로 구성됩니다. 진행상황 단계에 맞게 알맞는 상태를 사용합니다.

Size

Progress Status Button의 Size는 여러 사이즈로 분리가 되지 않으며, 한가지 Type의 사이즈만 사용되어집니다. Width = 58px, Height = 18px로 고정하여 사용되어집니다.

Combo Button

Dropdown List를 가지는 Button으로 연관된 동작에 대한 Button이 다중으로 제공되어야 할때 사용 되어 집니다. Wind Do Task 화면에서 여러 종류(Export PDF, CSV, AI Hub)의 Export를 지원하고자 하는 목적으로 사용 되는 버튼 입니다. Icon을 포함한 Primary Button을 사용합니다.

Varients

Type

Combo Button은 현재 한가지 Type으로 사용되어지고 있으며, 경우에 따라 Secondary Type의 Combo Button을 구성하여 사용되어 질 수 있습니다.

State

Combo Button은 Default, Hover, Clicked, Disable의 4가지 상태로 구성됩니다. Dropdown이 가지는 State와 동일한 상태 값들을 가지는 것이 특징입니다.

Combo Button Menu

Combo Button의 선택시 표출되는 Menu의 경우 Dropdown Menu의 경우 동일한 사이즈의 Dropdown Menu Component가 사용되어 집니다. Menu내에서 제공되어지는 Item들의 경우 Button의 Width와 동일한 Width를 가지는 것이 특징입니다.