Common actions
Common actions (공통 동작)
공통 동작은 서로 다른 컴포넌트와 작업 흐름에 걸쳐 자주 나타나요. 플랫폼 일관성을 위해 이 동작들은 아래에 설명된 방식으로만 적용해야 합니다.
출처: Common actions
본문
추가 (Add)
추가는 기존 객체를 리스트, 집합, 또는 시스템에 삽입해요. 예를 들어 폴더에 문서를 추가하는 경우입니다.
위계와 배치 (Hierarchy and placement)
페이지에서 추가 동작의 중요성에 따라 강조는 높음, 중간, 낮음일 수 있어요. 예를 들어 높은 강조 동작은 단일 기본 버튼을 사용하고 나머지는 모두 보조 버튼으로 해야 합니다.
고려 사항 (Considerations)
메시징의 작은 조정이 사용자 불확실성을 줄여줘요. 다음을 고려하세요.
- 추가 동작이 사용자에게 어떤 의미가 있나요? 금전적, 접근성, 법적 고려 사항이 있나요?
- 사용자에게 이 동작에 대한 올바른 권한이 있나요?
- 동작이 영구적인가요?
- 동작에 어떤 시간대가 걸리나요(초, 분, 시간, 일)?
- 동작이 실패하면 사용자는 무엇을 해야 하나요?
- 이것은 단일 동작인가 일괄 동작인가요?
취소 (Cancel)
취소는 현재 동작을 멈추고 컴포넌트나 항목을 닫아요. 프로세스가 진행되지 않을 때의 부정적 결과(예: 데이터 손상이나 데이터 손실)에 대해 사용자에게 경고하세요.
취소 동작에는 보조 버튼이나 링크를 사용하세요.
지우기 (Clear)
지우기는 필드에서 데이터를 제거하거나 선택을 제거해요. 지우기는 로그 같은 문서의 내용을 삭제할 수도 있습니다. 라디오 버튼처럼 기본 선택이나 값이 있는 컨트롤의 경우 기본 선택이나 값이 리셋됩니다.
필드, 항목, 또는 값의 오른쪽에 close 아이콘을 사용하세요.
닫기 (Close)
닫기는 현재 페이지, 창, 또는 메뉴를 종료해요. 닫기는 알림 같은 정보를 해제하는 데도 사용됩니다.
보통 요소의 오른쪽 위에 배치되는 close 아이콘을 사용하세요. 버튼 안에서는 close를 사용하지 마세요.
복사 (Copy)
복사는 선택된 객체(들)의 동일한 새 인스턴스를 만듭니다.
클릭 또는 탭 후 나타나는 "copied" 확인 툴팁과 함께 copy 아이콘을 사용하세요.
삭제 (Delete)
삭제는 객체를 파괴해요. 삭제 동작은 쉽게 되돌릴 수 없고 대개 영구적입니다. 객체가 파괴될 때의 부정적 결과(예: 데이터 손실)에 대해 사용자에게 경고하세요. delete 또는 trash can 아이콘, 위험(danger) 버튼, 또는 메뉴의 위험 옵션을 사용하세요. 동작을 확인하는 경고가 필요하면 위험 모달을 사용합니다.
영향이 낮은 삭제 (Low-impact deletion)
삭제를 되돌리거나 데이터를 재생성하는 것이 사소할 때 사용하세요. 추가 경고 없이 클릭 또는 탭 시 데이터를 삭제합니다.
영향이 중간인 삭제 (Moderate-impact deletion)
동작을 되돌릴 수 없거나 데이터를 쉽게 재생성할 수 없을 때 사용하세요. 이 패턴은 한 번에 둘 이상의 것을 삭제할 때도 유용해요.
삭제 시 무엇이 일어날지 안내와 함께 삭제 확인을 요청하세요.
영향이 높은 삭제 (High-impact deletion)
데이터를 재생성하는 것이 매우 비싸거나 시간이 많이 걸릴 때 사용하세요. 동작이 많은 양의 데이터를 삭제하거나, 그 결과로 다른 중요한 항목이 삭제될 때도 사용합니다.
대화상자를 제시하는 것에 더해, 사용자가 삭제 중인 리소스의 이름을 입력하게 하세요(수동 확인).
삭제 후 (Post-deletion)
사용자가 데이터를 삭제한 후 삭제된 데이터를 나열하는 페이지로 돌아가세요. 리스트나 페이지에서 데이터 제거를 애니메이션으로 보여주고 성공 알림을 제시하세요.
삭제가 실패하면 사용자에게 삭제 실패를 알리는 알림을 올리세요. 가능하면 이메일 같은 다른 통신 채널로 두 번째 알림을 보내세요. 가능하면 데이터를 페이지로 다시 애니메이션화하세요.
편집 (Edit)
편집은 데이터나 값을 변경할 수 있게 해줘요. 편집은 일반적으로 대상 객체나 입력 항목에 상태 변경을 트리거합니다.
편집을 메뉴의 옵션으로, 또는 버튼이나 edit 아이콘으로 제공하세요.
오류 (Errors)
오류는 동작이나 프로세스가 성공하지 못할 때 발생해요. 오류 알림은 전체 페이지, 폼 필드, 알림, 모달을 차지할 수 있습니다. 오류 알림은 무슨 일이 일어났는지에 대한 맥락과 계속할 명확한 경로를 제공해야 합니다.
사용자를 이전 상태, 지원 페이지로 리다이렉트하거나 권장 사항을 제공하는 것을 고려하세요. 정직하고 도움이 되게 하세요.
텍스트 입력과 폼 필드 오류 같은 일부 컴포넌트는 매우 작아 오류 처리의 공간과 배치에 더 세심한 접근이 필요해요. 이런 경우 인라인 오류 알림을 고려하세요.
콘텐츠 가이드라인 (Content guidelines)
간결하고, 정직하며, 지지적으로 하세요. 무슨 일이 일어났는지와 사용자가 오류를 해결하기 위해 무엇을 할 수 있는지 설명하세요.
전체 페이지와 큰 모달의 경우 오류 메시지를 세 문단 줄 이하로 유지하세요. 폼 오류의 경우 오류 메시지를 두 줄 이하로 유지하세요.
다음 (Next)
다음은 마법사 같은 단계 시퀀스의 다음 단계로 사용자를 진행시켜요.
아이콘이 있는 버튼이나 독립형 forward 아이콘으로 다음을 나타내세요.
새로고침 (Refresh)
이 동작은 표시된 뷰가 소스와 동기화되지 않았을 때 객체, 리스트, 또는 데이터 세트의 뷰를 다시 로드해요.
refresh 아이콘이나 버튼을 사용하세요.
제거 (Remove)
이 동작은 리스트나 항목에서 객체를 제거해요. 제거는 삭제와 다릅니다. 제거된 항목은 파괴되지 않기 때문이에요. 한 번에 여러 객체를 제거할 수 있습니다.
위계와 배치 (Hierarchy and placement)
제거를 버튼이나 subtract 아이콘(글리프)으로 나타내세요. 제거 동작은 페이지에서 기본 동작이 되기 드물며 지나치게 강조해서는 안 됩니다.
고려 사항 (Considerations)
- 제거 동작이 사용자에게 어떤 의미가 있나요? 금전적, 접근성, 법적 고려 사항이 있나요?
- 이 동작은 삭제와 혼동될 수 있어요.
- 사용자가 이 동작에 대한 올바른 권한이 없을 수 있습니다.
- 결과가 영구적이면 사용자에게 알려주세요.
- 동작에 얼마나 오래 걸리나요? 초, 분, 시간, 일?
- 제거가 실패하면 사용자는 무엇을 해야 하나요?
- 단일 동작인가 일괄 동작인가요?
리셋 (Reset)
리셋은 값을 마지막 저장된 상태로 되돌려요. 마지막 저장된 상태는 사용자가 Apply를 클릭하거나 트리거한 마지막 시간에 저장된 값을 포함합니다.
리셋은 일반적으로 링크로 적용됩니다.
더 알아보기 (Learn more)
공통 동작은 플랫폼 전반의 일관성을 위해 각각 정해진 방식으로 적용해야 해요. 추가, 취소, 지우기, 닫기, 복사, 편집, 오류, 다음, 새로고침, 제거, 리셋은 각각 사용할 아이콘/버튼과 경고 수준이 다릅니다. 특히 삭제는 영향도에 따라 낮음·중간·높음으로 나누어 확인 방식을 달리하고, 제거는 삭제와 구분해서 다뤄야 합니다.