액션

액션 (Actions)

액션은 사용자가 연결된 컴포넌트를 클릭하거나 선택해서 트리거할 수 있는 모든 프로세스예요. 흔한 액션에는 추가(add), 삭제(delete), 편집(edit), 필터링(filter), 제출(submit) 등이 있어요. PatternFly에서 대부분의 액션은 UI에서 액션 버튼(action button), 액션 항목(action item, 메뉴 안), 액션 카드(action card)로 표시됩니다. 이러한 컴포넌트는 액션 버튼이 있는 툴바, 액션 항목이 있는 드롭다운 메뉴처럼 다른 컴포넌트의 디자인에 통합됩니다.

출처: 문서

본문

요소 (Elements)

다음 카드 뷰 이미지는 UI에서 찾을 수 있는 액션의 가장 흔한 용도 중 일부를 보여주지만, 모든 시나리오를 다루지는 않아요.

액션 버튼(Action button): UI의 대부분 버튼은 액션을 트리거합니다.
액션 카드(Action card): 카드 자체가 액션 가능(actionable)할 수 있습니다. 즉 사용자가 카드를 선택하면 액션이 트리거됩니다.
액션 아이콘(버튼)(Action icon (button)): 아이콘 버튼은 인식 가능하고 반복되는 액션을 트리거하는 데 흔히 사용됩니다. 예를 들어 타원(ellipsis) 아이콘은 메뉴를 여는 데 사용됩니다.
액션 메뉴 항목(Action menu item): 공간을 절약하기 위해 액션을 메뉴 안에 배치할 수 있습니다. 이는 사용자가 취할 수 있는 액션이 여러 개일 때도 유용합니다.

용도 (Usage)

사용자가 UI에서 작업을 명확하고 편리하게 완료할 수 있게 하려면 액션을 사용하세요. 의도적으로 적용하면 액션은 UI를 더 효율적이고 효과적으로 만들 수 있습니다.

UI에서 액션에 라벨을 붙이거나 액션을 언급할 때는 저희 terminology 가이드라인을 따르고, 사용하는 모든 아이콘을 저희 icon design foundations에 설명된 사용 동작과 정렬하세요.

삭제 vs 제거 (Deletion vs removal)

사용자가 UI를 통해 데이터 객체, 항목 또는 유사한 리소스를 삭제하거나 제거하는 것의 목적과 결과를 이해하도록 해야 합니다. 삭제(deleting)는 제거(removing)와 다릅니다.

삭제(Deletion): 정보의 파괴를 의미합니다(예: 그룹, 시스템, 또는 역할 삭제). 종종 쓰레기통(trash) 아이콘으로 식별됩니다.
제거(Removal): 정보의 파괴 없이 특정 뷰에서 콘텐츠/시스템을 제거하는 것을 의미합니다(예: 그룹에서 무언가 제거하기 또는 사용자 제거). 종종 실선 minus-circle 아이콘으로 식별됩니다.

삭제 (Deletion)

리소스 삭제가 되돌릴 수 없을 때, 사용자가 매우 중요한 정보나 데이터를 잃을 위험이 높으므로, 삭제의 영향을 이해하도록 확실히 해야 합니다.

사용자는 보통 버튼이나 메뉴 항목으로 삭제를 트리거할 수 있습니다. 삭제 트리거에 대해 다음을 고려하세요:

버튼 트리거는 secondary button 스타일을 사용해야 합니다.
메뉴 항목 트리거(옵션/케밥 메뉴 안처럼)는 기본 텍스트 스타일을 사용해야 합니다.
삭제 버튼이나 메뉴 항목에 빨간 danger 스타일을 사용하지 마세요. 둘 다 삭제를 완료하기 전에 확인 모달(confirmation modal)을 띄우기 때문입니다.

사용자가 삭제를 트리거한 후, 확인 모달을 통해 삭제가 영구적임을 전달하세요:

제목 옆에 경고 아이콘.
리소스 이름을 확인하도록 요청하는 라벨이 붙은 텍스트 입력.
사용자가 리소스 이름을 입력하지 않거나, 리소스 이름이 삭제되는 리소스와 일치하지 않으면 오류가 표시됩니다.
모달을 제출하는 danger button.

리소스가 성공적으로 삭제된 후에는 인라인 성공 알림(inline success alert)을 표시하세요.

제거 (Removal)

리소스 제거 액션이 되돌릴 수 있을 때, 사용자 경험에 미치는 영향은 더 낮습니다. 사용자가 제거된 리소스를 쉽게 검색할 수 있으므로 확인 대화상자는 필요하지 않습니다.

제거에 확인 대화상자를 사용하기로 선택했다면, danger button이 아닌 primary button을 사용해 모달을 제출하세요. 사용자에게 텍스트 입력을 요청하지 마세요.

변형 (Variations)

적절한 액션 버튼 스타일은 저희 button 컴포넌트 가이드라인에 따라 선택하세요.

액션이 사용자에게 쉽게 발견되고, 어떤 데이터 소스나 요소에 영향을 미치는지 명확해지도록 UI에서 전략적으로 배치하는 것이 중요합니다. 그 결과, 액션은 보통 2가지 범주 중 하나에 속합니다:

컴포넌트 수준 액션 (Component-level actions)
페이지 전체 액션 (Page-wide actions)

컴포넌트 수준 액션 (Component-level actions)

많은 PatternFly 컴포넌트에 액션을 포함할 수 있는 디자인 옵션이 있습니다. 액션이 특정 컴포넌트에 영향을 미친다면, 버튼은 해당 디자인 가이드라인에 따라 컴포넌트 안에 배치되어야 합니다. 버튼을 영향받는 콘텐츠 근처에 배치하면 사용자가 버튼의 사용 사례를 더 잘 이해할 수 있게 됩니다.

예를 들어, 버튼이 테이블이나 카드 뷰의 데이터에 영향을 미친다면, 해당 버튼을 툴바에 배치하세요.

페이지 전체 액션 (Page-wide actions)

때로는 액션이 특정 컴포넌트에 영향을 미치기 위한 것이 아니라, 페이지 헤더 편집, 관련 창 실행, 또는 페이지 전체에 영향을 미치는 액션처럼 더 높은 수준의 프로세스를 위한 것일 수 있습니다.

페이지 전체에 영향을 미치는 액션은 페이지 상단 오른쪽, 헤더 수준에 배치되어야 합니다. 페이지 전체 액션을 툴바에 배치하지 마세요.

단일 액션 (Single actions)

페이지 전체 액션이 하나뿐이라면 primary 또는 secondary button을 사용하세요. 사용자가 페이지에서 취하길 원하는 주요 액션이라면 primary를, 주요 콜투액션이 아니라면 secondary button을 사용하세요.

여러 액션 (Multiple actions)

사용자가 페이지에서 취할 수 있는 페이지 전체 액션이 여러 개 있다면, 이를 드롭다운 메뉴에 담으세요. 메뉴 토글 스타일에 대한 지침은 dropdown menu 디자인 가이드라인을 참고하세요.

액션