뒤로
준프
·
Optimistic UI에 대해
Optimistic UI에 대해 아시나요? Optimistic UI란 서버에서 응답이 오지 않더라도 "괜찮을 거야"라고 낙관하고 미리 결과를 화면에 노출하는 방법입니다. 그렇다면 Optimistic UI를 구현하기 위해 준비해야할 건 무엇일까요?
사실 UI를 구현하는데 고민할게 있을까? 싶을 수 있습니다. 평소엔 서버에 요청을 보내고 로딩 스피너를 노출했다면, 이젠 바로 완료 메세지를 보여주면 되지 않을까요?
사실 그렇지 않습니다. 서버에서 오류가 발생해 UI를 되돌려야 한다고 생각해보면 많은 이슈들을 고려해야 하기 때문입니다.
이번에 소개해드릴 아티클은 Optimistic UI를 구현하기위해 알아야할 그리고 준비해야할 것들을 명료하게 소개합니다.
가장 먼저 서버에서 실패하는 경우가 아주 희귀해야 한다는 전제 조건이 필요합니다. 그렇지 않다면 Optimistic UI를 구현하는 것 자체가 큰 비용일 수 있습니다.
그리고 실패란 코드 분석을 통해서 실패 발생 케이스가 0%이지 않고서는 실패가 발생할 가능성은 존재하기 때문에 대응하는 케이스를 준비해둬야 합니다. 그건 바로 클라이언트와 서버의 데이터 일관성과 동기화 입니다. 왜냐하면 실패했을 때 rollback을 할 책임을 클라이언트 역시 갖기 때문입니다.
더 자세한 내용은 아티클을 참고해주세요 ! 그리 길지 않습니다 :)
프론트엔드 개발자들
그룹의 글
0
댓글
로그인 후 댓글을 남길 수 있습니다.
FE 독립적인 사례는 아니지만, 커머스에서 주문/결제 시 결제가 완료되지 않았더라도 '주문 완료' 페이지를 랜딩해주는 기법도 자주 쓰이는 것 같습니다. 기존에는 장바구니 담고 -> 결제할 품목을 선택하고 -> 배송지 정보를 입력하고 -> 결제를 하게 되는데, 결제가 생각보다 오래걸리고 결제되는 그 순간에도 이탈하는 경우가 꽤 있어서 결제는 서버 애플리케이션에서 백그라운드로 수행하고, 성공 여부와 무관하게 주문 완료 페이지를 사용자에게 노출시키는 전략인데요. 결제가 만약 실패했다면 사용자에게 이메일, 문자, 카카오톡 알림톡 등으로 안내해주더라구요.
이런 케이스에서도 사용 되는 군요 !! 확실히 결제 프로세스가 긴 경우 로딩이 걸리는 하나하나가 사용자에게 많은 영향을 줄 것 같아요. 좋은 사례 소개 해주셔서 감사합니다 :)
그런 방식도 Optimistic UI를 사용한다라고 볼 수 있군요! 👍👍
도움이 되셨다니 !! 감사합니다 :)
좋은 인사이트를 얻은 것 같아요!! 좋은 글 감사합니다!