다양한 구성요소의 조합으로 이루어진 사용 빈도가 높은 액션 패턴입니다.
Add
단일 데이터 또는 데이터 세트를 추가하는 액션입니다.
Pattern
데이터를 하나씩 선택하여 여러 번에 걸쳐 입력하는 경우 또는 데이터 세트 단위로 새롭게 입력하는 경우에 사용합니다. 추가 액션을 제공하는 작업에는 반드시 제거(remove) 액션도 함께 제공해야 합니다.
Related
Cancel
현재 진행 중인 작업을 중지하는 액션입니다.
Pattern
버튼 등의 트리거를 통해 작동하며, 모달창이나 팝오버 등 오버레이 요소에서 작업 중인 상태라면 취소 실행과 동시에 닫힙니다.
만약 취소로 인해 데이터 손실 등의 부정적인 결과가 발생하는 경우에는 취소 실행 전에 반드시 사용자에게 경고를 해줘야 합니다.
취소는 저장, 제출 등 작업의 진행을 실행하는 액션과 함께 제공하며, 버튼으로 표시할 때는 주 버튼과 대비되는 스타일로 제공합니다.
Related
Clear
입력한 데이터나 선택한 옵션을 지우는 액션입니다.
Pattern
데이터 입력을 하거나 옵션을 선택하면 클리어 컨트롤 요소가 표시됩니다. 해당 컨트롤을 클릭하면 입력한 데이터 또는 선택한 옵션이 지워지며 초기 상태로 돌아갑니다.
•
Placeholder 또는 기본 선택 옵션이 있는 경우에는 제거 이후 해당 값으로 표시합니다.
•
입력 폼에서는 1byte 이상 입력할 경우에 컨트롤 요소를 표시합니다.
•
셀렉트 폼에서는 옵션을 선택한 순간 컨트롤 요소를 표시합니다.
•
싱글 셀렉트 폼에서는 지원하지 않고 멀티 셀렉트 폼에서만 제공합니다.
1.
데이터 입력 전에는 지우기 컨트롤을 표시하지 않습니다.
2.
입력과 동시에 지우기 컨트롤을 표시합니다.
3.
지우기를 실행하면 최초 상태로 돌아갑니다.
Related
Close
현재 열려있는 페이지나 오버레이 요소를 닫습니다.
Pattern
얼럿창에서는 하단에 닫기 버튼을 배치하고 모달창, 팝오버, 드로어 등은 우측 상단에 배치합니다.
닫기 버튼은 보편적으로 통용되는 X 아이콘으로 사용할 수 있으며, ‘닫기’ 레이블의 버튼을 사용할 수도 있습니다.
사용자 작업 요소를 포함하는 경우에는 닫기 버튼이 ‘취소’의 기능도 가집니다. 작업 진행 간에 닫기 버튼을 클릭하면 실행 전에 반드시 사용자에게 경고 메시지를 제공해야 합니다.
드로어에서는 하단에 ‘돌아가기’ 버튼으로 닫기 기능을 대신할 수 있습니다.
Related
Edit
입력한 정보나 데이터 값을 수정합니다.
Pattern
수정은 정보 그룹(섹션) 단위로 제공할 수 있으며, 이 경우 수정 버튼을 해당 영역의 우측 상단에 배치하여 사용합니다.
수정 버튼을 클릭하면 수정 가능한 항목이 ‘읽기 전용 상태’에서 ‘입력 활성화 상태’로 변경됩니다.
수정 버튼은 아이콘 버튼으로 사용할 수 있습니다. 이 경우에는 보편적으로 인식 가능한 아이콘을 사용합니다.
Related
Error
사용자 작업이나 시스템 프로세스가 성공하지 못해 오류가 발생할 경우, 사용자에게 신속히 안내합니다.
Pattern
오류가 발생하면 사용자에게 즉각적으로 알려야 합니다.
사용자에게 알릴 때는 발생한 상황에 대한 설명과 함께 작업을 성공하기 위한 명확한 방법이나 경로를 제공해야 합니다.
사용자의 입력 오류의 경우에는 입력 폼 하단에 인라인 메시지로 오류를 안내하고 다른 액션에 관련한 오류의 경우에는 얼럿창으로 안내합니다.
1.
입력폼 오류 안내
•
폼 하단에 오류 메시지가 표시되고 화면 포커스가 됩니다.
•
복수의 입력 폼에서 동시에 오류 메시지를 표시하는 경우에는 tabindex 값을 기준으로 가장 처음에 위치한 폼에 포커스 됩니다.
•
오류가 발생한 폼에 데이터를 입력하는 순간 오류 메시지는 사라지고 활성화 상태로 변경됩니다.
•
오류 메시지는 가급적 폼의 너비를 넘지 않도록 간결하게 작성하고 부득이하게 내용이 길 경우에는 줄바꿈을 하는 등 가독성을 최대한 고려하여 표시합니다.
2.
얼럿창 오류 안내
•
안내해야 할 내용이 많은 경우에는 타이틀을 사용합니다.
•
해결 방법을 안내하거나 링크를 제공합니다.
Related
Previous / Next
이전/다음 단계 또는 화면으로 이동합니다.
Pattern
일련의 프로세스 중에서 이전 단계 또는 다음 단계로 이동하여 작업을 진행할 수 있습니다. 또한 중첩된 화면의 데이터 조회 중에 이전, 다음 화면을 볼 수 있습니다.
1.
작업간 이전/다음 단계로 이동
•
조건에 따라 이전/다음 단계의 이동 가능 상태를 결정하고 활성화/비활성화 상태로 표시합니다.
•
아이콘 버튼으로 사용할 경우에는 텍스트 레이블을 함께 사용합니다.
2.
이전/다음 화면 전환
•
현재 화면의 순번과 전체 화면 숫자를 표시합니다.
•
이전/다음 화면으로의 이동을 의미하는 기표를 사용하여 화면 전환을 제공합니다.
Related
Refresh
현재 화면의 데이터를 새로 불러옵니다.
Pattern
현재 보는 화면의 데이터가 서버와 동기화되어 있지 않은 경우에 데이터 세트, 목록, 객체 등을 다시 불러와 표시합니다. 보통 목록 우측 상단에 아이콘 형태로 배치하여 사용합니다.
아이콘은 보편적으로 통용되는 새로고침 아이콘을 사용하고 가급적 텍스트 레이블을 함께 표시합니다.
Related
Remove
목록이나 항목에서 단일 데이터 또는 데이터 세트를 제거합니다.
Pattern
개체를 완전히 없애버리는 삭제(delete)와는 다르게, 선택한 개체를 해제하는 개념으로 사용합니다. 한번에 여러 개의 제거 액션을 수행할 수 있습니다.
대상 항목의 우측 상단 또는 우측 중단에 제거를 의미하는 아이콘을 배치하여 사용합니다.
Related
Reset
선택 가능한 값을 마지막으로 저장한 상태로 되돌립니다.
Pattern
사용자가 가장 최근에 직접 선택하여 저장한 값으로 되돌립니다. 직접 선택한 값이 없는 상태라면, 시스템에서 제공하는 기본 값으로 되돌립니다.
필터, 날짜 설정에서 사용하며 명확히 인지 가능한 버튼 형태로 제공합니다.
Related
