비관적 업데이트(pessimistic)? 낙관적(optimistic) 업데이트?

 비관적 업데이트 

서버의 응답을 받고 확인한 후에 UI를 업데이트하는 접근 방식

작동 방식 :

사용자 액션(상호작용)

➔ 서버 응답을 기다리는 동안 로딩 인디케이터를 표시하여 사용자에게 현재 상태를 알림

➔ 오류 발생 : 사용자에게 즉시 알림 / 성공적인 응답 : UI를 업데이트

 

특징:

1. 응답 대기 : 사용자가 데이터를 변경하는 작업(예: 데이터베이스에 정보 추가, 수정, 삭제 등)을 요청하면, 서버에서의 처리 결과를 기다림 ➔ 이 처리가 성공적으로 완료됨을 확인한 후 ➔ UI가 업데이트
2. 안정성 : 사용자에게 최종 상태를 보여주기 전에 서버에서의 처리 결과를 확인함. 실패할 경우 오류 메시지를 사용자에게 제공하고, 데이터의 일관성을 유지할 수 있기 때문에 더 안정적
3. 사용자 경험(UX) 지연
4. 적용 분야 : 주로 중요한 데이터 처리, 금융 거래, 중요한 정보의 업데이트 등 오류가 발생했을 때 큰 문제가 생길 수 있는 상황에서 사용. 이러한 경우 사용자에게 정확한 정보 제공이 중요하기때문

👉 비관적 업데이트는 사용자가 서버의 응답을 기다리는 동안 불확실성을 최소화하고, 서버와 클라이언트 간의 데이터 일관성을 보장한다.

 

 낙관적 업데이트 

낙관적 사용자 인터페이스(Optimistic User Interface)는 UI 로딩을 없애고 사용자의 행동에 즉각적인 반응을 제공하는 디자인 패턴이다. (더 넓은 의미)

낙관적 업데이트는 낙관적 UI를 구현하는 한 방법이다.

데이터 조작(생성, 수정, 삭제 등)과 관련된 사용자의 액션에 초점을 맞춘 것으로, 이러한 작업이 서버에 요청되고 처리될 때, 결과를 기다리지 않고 미리 UI를 업데이트하는 특정한 방법이다.

 

낙관적 UI 작동 방식

작동 방식 

사용자 액션(상호작용)

➔ 애플리케이션은 작업이 성공할 것이라 가정하고 애플리케이션은 서버의 확인 기다리지 X

➔  예상 결과를 반영해 UI를 즉시 업데이트 

➔ 서버가 작업 성공을 확인하면 변경 사항 없음

 

사용자가 UI와 상호작용(버튼을 클릭하거나 데이터를 제출)한 직후와
데이터베이스의 실제 데이터를 변경하라는 요청이 이루어지기 전이나 요청 사이에 데이터를 검증하고 계산함으로써 요청이 성공적으로 완료될 때까지 가짜지만 정확한 데이터를 유지한다.

 

예측한 데이터로 UI를 업데이트하여 사용자의 행동에 대한 답변을 즉시 제공합니다.

 

 

백그라운드 요청이 실패하면?

이는 드문 경우이다. why? 대부분의 경우 테스트되지 않은 코드를 프로덕션에 푸시하지 않을 것이기 때문에 

그러나 만약 실패한다면 

사용자에게 실패에 대해 알려야 하며(사용자에게 피드백 제공) UI를 이전 상태로 다시 설정(오류 발생 시 UI 롤백)해야 한다.

사용자가 같은 작업을 쉽게 다시 시도할 수 있도록 하는 메커니즘을 제공 ("다시 시도" 버튼을 제공 or 오류 발생 시 자동으로 재시도하는 로직을 구현) 등등

 

특징

1. 향상된 사용자 경험 : 상호 작용이 더 빠르고 자연스러워져 사용자 만족도가 높아진다.
2. 백그라운드 처리 : 데이터 변경이 백엔드에서 처리되는 동안 사용자는 애플리케이션을 계속 사용할 수 있다. 
3. 데이터 일관성의 잠재적 문제 : 낙관적 UI를 구현할 때는 서버의 응답과 클라이언트의 상태 사이에 불일치가 발생할 가능성을 고려해야 한다. 서버에서 오류가 발생하거나 변경이 반영되지 않는 경우, UI를 원래 상태로 롤백해야 할 수도 있다.
4. 사용자 혼란 : UI가 성공으로 가정하고 나중에 서버 거부로 인해 되돌리면 사용자는 기대와 실제 결과가 일치하지 않아 혼란을 겪을 수 있다.
5. 오류 처리 복잡성 : 오류 처리는 낙관적 UI에서 더욱 복잡해진다. 애플리케이션이 가정된 성공이 서버의 응답과 일치하지 않는 경우를 감지하고 처리해야 하기 때문.
6. 적용 분야 : 좋아요, 팔로우, 댓글 등의 상호작용을 할 때, 할 일 목록에 새 할 일을 추가, 메시지나 이메일 전송 등

 

요약

특성 / 상황	비관적 업데이트	낙관적 업데이트
응답 대기	서버 응답을 기다린 후 UI 업데이트	결과를 기다리지 않고 미리 UI 업데이트
안정성	오류 발생 시 안정적, 사용자에게 오류 메시지 제공	서버 오류 발생 시 UI를 원래대로 롤백
사용자 경험	더 느린 반응성, 하지만 데이터 일관성 보장	즉각적인 반응성으로 더 나은 사용자 경험 제공
적용 분야	금융 거래, 중요 데이터 변경 같은 중요한 작업	사용자 경험이 중요하며 실패 가능성이 낮은 작업
기본 가정	작업이 실패할 수도 있다는 가정	작업이 성공할 것이라는 가정
오류 처리	사용자 액션 전에 오류 예측 및 처리	실패 시 사용자에게 알리고 UI 롤백
적합한 예시	금융 거래, 중요 설정 변경	소셜 미디어 상호작용, 리스트 항목 추가/삭제

 

 

참고 자료

https://javascript.plainenglish.io/what-is-optimistic-ui-656b9d6e187c