백엔드 속이는 프론트엔드 성능 최적화, ‘Optimistic UI’

사용자 경험을 한 단계 높이는 프론트엔드 패턴

프론트엔드는 백엔드 개발의 노고 덕분에 돌아가지만, 사용자와의 첫 접점에서 칭찬받는 역할을 합니다. 필자는 처음에 백엔드에서 시작해 프론트엔드로 전향하였습니다. 'Optimistic UI'라는 기법은 간단한 코드로 사용자에게 빠른 피드백을 제공하며, 이를 통해 최고의 가성비를 낼 수 있습니다.

INP: 구글도 인정한 상호작용의 중요성

구글의 INP(Interaction to Next Paint) 지표는 사용자 인터랙션 후 화면 업데이트 속도를 측정합니다. 이는 Core Web Vitals의 공식 지표로 채택되어 웹사이트의 UX 향상에 중요한 역할을 하고 있습니다. 예를 들어, RedBus는 INP 최적화로 매출이 7% 증가했습니다.

'Optimistic UI' 패턴은 INP 지표에서 효과적으로 즉시 UI를 업데이트하여 사용자의 경험을 향상시킵니다.

Optimistic UI가 뭔데?

Optimistic UI는 요청이 끝나기 전에 UI를 즉시 업데이트하는 패턴으로, 전통적인 대기 방식에 비해 사용자 경험을 크게 향상시킵니다.

전통적인 UI 패턴: 사용자 → 액션 발생 → API 요청 → 로딩 표시 → 서버 처리 → 응답 수신 → UI 업데이트

반면 Optimistic UI는 서버 응답을 예상하고 UI를 즉시 업데이트합니다. 이러한 패턴은 특히 예측 가능한 결과에 유용합니다.

디스코드에서도 쓴다!

디스코드는 메시지 전송 시 최대한 빠른 반응을 위해 이 패턴을 사용하여 즉각적인 피드백을 제공합니다.

Optimistic UI 구현을 위한 핵심 전략과 패턴

1. 원본 상태 백업과 낙관적 업데이트

요청 실패 시 원본 상태로 롤백할 수 있도록 상태를 백업합니다. 예를 들어, 좋아요 버튼을 구현할 때 원본 상태를 저장하고 업데이트를 진행합니다.

2. 리스트 내 항목 업데이트 처리

항목 추가 시 임시 ID를 사용하여 즉시 표시하고, 서버 응답 후 실제 ID로 업데이트합니다.

3. 중복 요청 및 경쟁 상태 처리

사용자가 빠르게 액션을 취하는 상황을 처리하기 위해 마지막 요청만 반영하거나 디바운스를 적용합니다.

리액트 팀도 Optimistic UI를 중요하게 생각합니다

리액트 19에서는 낙관적 업데이트를 선언적으로 처리할 수 있는 `useOptimistic` 훅이 도입되었습니다. 이를 통해 상태를 더 쉽게 관리할 수 있습니다.

더 나은 프론트엔드 개발자로 가기

Optimistic UI는 모든 상황에 적합하지 않지만, 많은 일상적인 상호작용에서는 사용자 경험을 크게 향상시킵니다. 현대 웹 개발에서 이러한 패턴을 적용하여 사용자 경험을 개선하고, 이력서에 좋은 사례를 추가할 수 있습니다. 이로 인해 프론트엔드 개발자는 "성능 최적화" 경험을 당당히 어필할 수 있습니다.