이 글의 내용
김희준
Undo와 Redo는 창작 작업을 안전하게 되돌리는 장치입니다. 어떤 변경이 복원되는지 보여 주고 선택과 위치를 유지하며, 공동 편집에서는 변경 범위를 설명해야 합니다. 먼저 기록 모델을 정한 뒤 복합 작업과 동시 편집을 테스트하세요. Pixso의 UI 디자인 협업 환경에서 전후 상태를 나란히 검토할 수 있습니다.
예측 가능한 변경 기록을 만든다
사용자는 다음 Undo가 무엇을 없애는지 알아야 합니다. 낮은 수준의 속성이 아니라 의도한 작업 단위로 묶고 작업 이름과 대상을 보여 주세요. 새 편집으로 분기가 생기면 Redo가 어떻게 되는지 설명합니다.
파괴적 편집에서 복구하게 한다
삭제나 일괄 교체에는 동작 가까이에 복구 방법을 둡니다. 작은 변경은 Toast로, 범위가 넓거나 되돌릴 수 없는 동작은 확인 대화상자로 처리합니다. 복원 뒤에도 화면 위치와 포커스를 최대한 유지하고 무엇이 바뀌었는지 짧게 표시합니다.
분기, 단축키와 공동 편집을 다룬다
단축키는 보이는 컨트롤과 일치시키고 운영체제 관습을 따릅니다. 협업 파일에서는 내 Undo와 다른 사람의 변경을 구분하세요. 단일·복합·일괄 편집, 오프라인 복귀와 빈 기록 상태를 차례로 테스트합니다.
경계 조건을 포함한 복구 테스트
| 상황 | 확인할 행동 | 기대 결과 |
|---|---|---|
| 기록이 비어 있음 | Undo·Redo를 누름 | 아무 변경도 만들지 않고 현재 위치와 선택을 유지함 |
| 한 번의 이동과 라벨 변경 | 한 번 Undo | 같은 의도로 묶인 변경이 함께 복원되는지 확인함 |
| Undo 뒤 새 편집 | 새 값을 입력한 뒤 Redo를 누름 | 새 분기에서 Redo가 가능한지, 불가능하면 그 이유를 설명함 |
| 다른 사람이 동시에 수정 | 내 변경을 Undo | 상대방의 변경까지 되돌리지 않고 대상 범위를 명확히 표시함 |
| 연결이 끊겼다 다시 연결됨 | 복구 후 기록과 선택을 확인함 | 저장된 상태와 충돌 여부를 보여 주고 확인되지 않은 변경을 조용히 삭제하지 않음 |
이 테스트는 기능이 있다는 사실보다 사용자가 다음 결과를 예측할 수 있는지를 확인합니다. 하나라도 기대 결과를 설명할 수 없다면 버튼 이름, 기록 단위 또는 충돌 안내를 먼저 수정하세요.
프로토타입에서 복구 경로를 검토한다
변경, Undo, 복원 확인, Redo 순서로 프로토타입을 실행합니다. Pixso에서 기록 상태를 화면 옆에 두고 기대하는 복구 결과를 댓글로 남기면 개발 전달 전 검토가 쉬워집니다.
성공의 기준은 변경을 찾고 복원한 뒤 다른 작업을 잃지 않고 계속하는 것입니다.
구현 전에 복구 범위를 상태 매트릭스로 정한다
Undo와 Redo 버튼만 추가하면 사용자는 어디까지 되돌아가는지 알기 어렵습니다. 먼저 하나의 작업으로 묶을 변경, 저장된 상태, 다른 사용자가 만든 변경을 구분하고 각 상태에서 보여 줄 설명을 정하세요. 여러 요소를 함께 이동한 작업은 한 번에 되돌리고, 텍스트 입력은 글자마다 별도 기록을 만들지 않는 식으로 사용자의 의도에 맞춰 기록 단위를 정해야 합니다.
| 상태 | 사용자가 확인할 내용 | 화면과 동작 |
|---|---|---|
| 변경 직후 | 무엇을 되돌릴 수 있는가 | Undo를 활성화하고 대상 작업을 짧게 설명합니다. |
| 처음 상태 | 더 되돌릴 수 있는가 | Undo를 비활성화하고 기록의 시작임을 알립니다. |
| 공동 편집 후 | 내 작업과 섞이지 않았는가 | 변경자와 시점을 보여 주고 복구 범위를 확인하게 합니다. |
| 새 작업 시작 후 | 이전 Redo를 쓸 수 있는가 | 기록 분기를 설명하고 사라질 작업을 미리 알립니다. |
복구 후 결과까지 확인하는 테스트를 만든다
정상 사례만 테스트하지 말고 빈 기록, 복합 작업, 키보드 단축키, 잠깐 끊긴 네트워크를 재현하세요. Undo 뒤 선택 영역이나 스크롤 위치가 달라진다면 유지되는 상태를 화면에서 확인할 수 있어야 합니다. Pixso에서 변경 전후 프레임을 나란히 놓고 댓글에 되돌릴 대상, 유지할 상태, 재시도 방법을 남기면 리뷰어가 동작을 추측하지 않고 검토할 수 있습니다.
성공 기준은 기록의 개수가 아니라 사용자가 변경을 안전하게 복구하고 다음 작업을 잃지 않는지입니다. 복구 뒤 현재 위치와 다음 행동을 일관되게 보여 주는 것이 더 중요합니다.
![[가이드]디자인 기초--타이포그래피 디자인](https://pixso.net/kr/assets/editorial/20261007/typography-design/hero-ko-fa248433836c9fc9.webp)
