행동과 되돌리기

목적

Dot의 행동은 사용자가 실행 결과를 미리 이해하고, 진행 중인 상태를 놓치지 않으며, 실수했을 때 가능한 범위 안에서 복구하게 한다. 행동을 빠르게 실행시키는 것보다 의도와 결과를 일치시키는 것이 우선이다.

하나의 학습 고리를 완결하는 행동은 완료 상태를 분명히 만들고 다음 배움으로 자연스럽게 이어져야 한다. 저장, 검증, 발행처럼 순서가 있는 작업은 현재 단계와 다음 단계를 끊지 않는다.

행동의 계층

빈도만으로 행동 계층을 정하지 않는다. 매일 쓰는 새로고침보다 드물게 쓰는 초안 저장이 화면의 완료 기준에 가까우면 주 행동이다.

행동 이름

버튼은 클릭 동작이 아니라 결과를 말한다.

• 동사와 대상을 함께 써서 단독으로 읽어도 결과를 예측하게 한다.
• 처리 중에는 저장 중…, 검증 중…처럼 원래 행동을 유지한다.
• 완료 후에는 저장됨, 검증 통과처럼 결과 상태를 표시한다.
• 대상 수나 범위가 결정에 중요하면 행동 이름 또는 인접한 설명에 포함한다.
• 같은 결과에는 화면마다 같은 표현을 사용한다.

배치

• 페이지의 주 행동은 PageHeader actions에 둔다.
• 데이터에 영향을 주는 검색·필터·새로고침은 PageToolbar에 둔다.
• 필드와 직접 관련된 행동은 해당 필드 가까이에 둔다.
• dialog의 행동은 설명을 읽은 뒤 자연스럽게 도달하는 footer에 둔다.
• 긴 편집에서 주 행동을 고정할 필요가 있으면 WorkflowBar로 현재 상태와 함께 제공한다.
• 같은 행동을 페이지 상단과 하단에 서로 다른 상태로 중복 배치하지 않는다.

시각 배치가 RTL이나 플랫폼 관례에 종속되지 않도록 의미, DOM 순서, focus 순서를 함께 검토한다.

되돌릴 수 있음의 단계

즉시 되돌릴 수 있음

정렬 변경, 임시 선택처럼 저장 전 상태는 즉시 되돌리거나 취소할 수 있게 한다. 별도 확인 dialog를 사용하지 않는다.

짧은 시간 안에 되돌릴 수 있음

단일 항목 숨김, 보관처럼 서버에 반영되지만 안전하게 복원할 수 있는 행동은 완료 피드백과 되돌리기를 제공할 수 있다. 되돌리기 가능 시간을 사용자가 알 필요가 있으면 명시한다.

별도 복구가 가능함

발행, 일괄 변경처럼 이력에서 복구할 수 있지만 영향이 큰 행동은 대상, 영향, 복구 경로를 실행 전에 보여준다. 단순한 “정말 진행할까요?”로 끝내지 않는다.

되돌릴 수 없음

영구 삭제나 외부 발송처럼 복구할 수 없는 행동은 대상, 범위, 즉시 발생하는 결과, 대체 행동을 설명하고 명시적 확인을 받는다.

확인이 필요한 조건

다음 중 하나라도 해당하면 ConfirmActionDialog를 검토한다.

• 저장하지 않은 작업을 잃는다.
• 여러 사람이나 운영 중인 콘텐츠에 영향을 준다.
• 외부로 메시지나 결과가 전달된다.
• 삭제·발행·권한 변경처럼 결과가 즉시 또는 광범위하다.
• 사용자의 현재 목표와 반대되는 행동이다.
• 실행 후 자동 복구가 불가능하다.

확인 dialog에는 다음을 포함한다.

1. 무엇을 실행하는지
2. 어떤 대상에 영향을 주는지
3. 되돌릴 수 있는지
4. 지금 실행해야 하는 주 행동
5. 안전하게 돌아가는 취소 행동

일상적이고 되돌릴 수 있는 행동에는 확인 dialog를 사용하지 않는다. 반복 확인은 사용자가 읽지 않고 통과하게 만든다.

순서가 있는 행동

저장 → 검증 → 발행처럼 선행 조건이 있는 작업은 WorkflowBar로 현재 단계와 다음 행동을 연결한다.

• 변경 있음: 초안 저장
• 저장됨, 미검증: 검증 실행
• 검증 실패: 오류 목록과 문제 수정
• 검증 통과: 커리큘럼 발행
• 발행됨: 완료 상태와 다음 관리 행동

사용자가 앞 단계를 완료하면 다음 행동의 위치가 급격히 바뀌지 않아야 한다. 이미 끝난 행동은 완료 상태로 바뀌고, 다음 행동이 같은 흐름에서 이어진다.

비동기 행동

• 실행 즉시 trigger를 중복 실행하지 못하게 한다.
• 진행 중인 대상과 행동을 텍스트로 유지한다.
• 화면을 떠나도 계속되는 작업인지, 취소 가능한지 알려준다.
• 일부만 성공하면 성공·실패 수와 실패 대상을 나눠 보여준다.
• 재시도는 동일 요청을 안전하게 반복할 수 있을 때만 제공한다.
• 처리 시간이 긴 AI 작업은 DotMotion의 processing을 사용할 수 있지만 진행 상태와 취소·실패 텍스트를 대체하지 않는다.
• 완료 결과는 사용자가 다음 판단을 할 위치에 남긴다. toast만으로 중요한 결과를 전달하지 않는다.

Flexible, Link, Glow의 적용

• Flexible: 권한, 대상 수, 화면 크기, 작업 단계에 따라 행동의 표현과 배치를 바꾸되 결과 이름과 안전 조건은 유지한다.
• Link: 행동 전 상태, 진행 상태, 결과, 되돌리기 경로를 하나의 연속된 흐름으로 연결한다.
• Glow: 불확실한 다음 단계를 안내할 때만 은은하게 사용할 수 있다. 일반 버튼 강조나 위험 행동에는 사용하지 않는다.

예외와 피해야 할 사용

• disabled 버튼만 보여주고 이유를 숨기지 않는다.
• primary 버튼을 두 개 이상 나란히 두지 않는다.
• destructive 색을 경고 배너, 취소, 일반 오류 복구에 남용하지 않는다.
• 위험 행동을 메뉴에 숨기는 것만으로 안전하다고 판단하지 않는다.
• 저장과 발행을 하나의 모호한 완료 행동으로 합치지 않는다.
• 비동기 실행 중 버튼 레이블을 spinner만으로 바꾸지 않는다.
• 실패 후 입력과 선택을 초기화하지 않는다.
• optimistic update가 실패했는데 성공처럼 남겨두지 않는다.
• AI 제안을 자동 확정하거나 외부 발송하면서 사용자의 검토 상태를 생략하지 않는다.

상태와 접근성

• 버튼의 accessible name은 시각적 레이블과 결과 의미가 일치해야 한다.
• icon-only 행동은 aria-label을 제공하고 필요하면 Tooltip을 함께 사용한다.
• interactive target은 최소 40×40px을 유지한다.
• 로딩 중에는 aria-busy와 필요한 live region으로 상태를 전달한다.
• dialog가 열리면 focus를 내부로 이동하고 닫으면 trigger로 돌려보낸다.
• 위험 행동에 색만 사용하지 않고 제목과 문장에 결과를 명시한다.
• keyboard 사용자가 Enter와 Space의 실행 조건, Escape의 취소 결과를 예측할 수 있어야 한다.
• 실행 완료 후 focus는 사라진 항목 대신 결과 메시지나 다음 유효한 항목으로 이동한다.

검토 질문

• 버튼만 읽어도 대상과 결과를 예측할 수 있는가?
• 한 화면에 가장 강한 행동이 하나뿐인가?
• 확인 dialog가 실제 위험을 줄이는가, 습관적인 단계만 추가하는가?
• 되돌릴 수 있는 행동에는 더 가벼운 복구 경로가 있는가?
• 대상 수, 공개 범위, 데이터 손실 가능성을 행동 전에 알 수 있는가?
• 처리 중·성공·부분 성공·실패 상태가 같은 흐름에서 이어지는가?
• 실패 후 사용자의 입력과 맥락이 보존되는가?
• keyboard와 screen reader에서도 행동 이름과 상태가 명확한가?
• 다음 단계가 이전 단계와 같은 위치·언어로 연결되는가?
• 브랜드 강조가 안내 역할을 하는가, 단순히 버튼을 화려하게 만드는가?