개요

디지털 명함 에디터를 개발하면서 가장 깊이 고민했던 기능 중 하나는 바로 Undo/Redo 기능이었다. 단순해 보이지만 실제로 구현하려면 복잡한 상태 관리, 요소 추적, ID 문제, 그리고 사용자 경험까지 고려해야 하는 만만치 않은 문제였다. 이 글에서는 Undo/Redo 기능을 개발하며 겪은 시행착오, 고민의 흔적들, 그리고 최종적으로 도달한 해결책을 공유하고자 한다.

1. "되돌리기" 기능의 중요성

에디터에서 사용자가 작업 중에 실수했을 때 "되돌리고 싶다"는 요구는 필수적이다. 이는 단순히 상태를 관리하는 것을 넘어서, 변경 전의 상태를 저장하고, 그 상태로 복원하는 메커니즘이 필요하다는 것을 의미한다.

2. 첫 번째 접근: 개별 요소 기반 저장 방식

처음에는 가능한 한 단순하게 접근하고 싶었기에, 개별 요소의 변경 사항만 기록하는 방식을 선택했다. 이러한 선택에는 다음과 같은 이유가 있었다:

• 직관적인 구현: 요소 하나가 변경되면 그 요소만 기록하면 되므로 구조가 간단하게 느껴졌다.
• 메모리 효율성: 전체 상태를 매번 복사하는 것보다 변경된 요소만 기록하는 것이 메모리 사용 측면에서 효율적이라고 판단했다.
• 유연한 확장성: 텍스트 외에도 이미지, 도형 등 다양한 요소가 추가될 것을 고려했을 때, 개별 요소 추적 방식이 더 유연할 것으로 보였다.

이러한 판단으로 초기 구현은 다음과 같은 구조로 시작했다:

export interface EditorState {
  histories: TextElement[];  // 개별 요소들의 기록
  historyIdx: number;        // 현재 기록 위치
  showElements: TextElement[]; // 화면에 표시되는 요소들
  // ... 기타 상태 및 함수들
}

• 요소 추가 시: histories 배열에 새 요소 추가
• 요소 수정 시: updateText(id, updates)를 통해 ID에 맞는 요소를 찾아 업데이트
• Undo 실행 시: historyIdx--로 이전 상태로 이동
• Redo 실행 시: historyIdx++로 다음 상태로 이동

3. 발생한 문제점들

이 접근 방식은 초기에는 괜찮아 보였지만, 실제로 구현하고 테스트하면서 여러 문제점이 드러났다.

3.1. 첫 번째 요소만 기록되는 문제

const updatedElement = state.histories.map(el => el.id === id ? { ...el, ...updates } : el);
const updatedHistories = [...state.histories, updatedElement[0]];

이 코드에서는 map() 함수가 전체 배열을 반환하는데, 그 중 [0]번 요소만 히스토리에 추가했다. 이로 인해 수정한 요소가 아닌, 항상 배열의 첫 번째 요소만 기록되는 문제가 발생했다. 실제로 디버깅해보니 내가 수정하고 있는 요소의 ID는 048c...인데, 히스토리에 저장되는 것은 매번 0032...와 같은 고정된 ID였다.