#UX

컴포넌트 하나에서 에러가 났는데 전체 페이지가 흰색이 됩니다. `react-error-boundary`로 에러를 격리하고, 우아한 폴백 UI를 보여주는 방법.

로그인 화면을 만들었는데 키보드가 올라오니 노란 줄무늬 에러가 뜹니다. resizeToAvoidBottomInset부터 스크롤 뷰, 그리고 채팅 앱을 위한 reverse 팁까지, 키보드 대응의 모든 것을 정리해봤습니다.

사용자가 상품 결제를 하려다 로그인 창이 떠서 로그인을 했는데, 뜬금없이 메인 페이지로 이동된다면? 당황한 사용자는 그대로 이탈합니다. 로그인 후 원래 페이지로 되돌려보내는 리다이렉트 구현 방법과, 그 과정에서 발생할 수 있는 보안 취약점(Open Redirect)을 막는 방법을 공유합니다.

쇼핑몰 목록에서 상품을 보고 뒤로가기를 눌렀는데, 스크롤이 초기화되어 사용자가 이탈했습니다. SPA와 Next.js에서 스크롤 복원(Scroll Restoration) 문제를 해결한 삽질기를 공유합니다.

사용자가 '앱이 느리다', '고장 났다'고 느끼는 진짜 이유는 API 속도가 아니라 불친절한 UI 때문입니다. 덜덜거리며 깜빡이는 화면 대신 스켈레톤 UI를 도입하고, alert() 창 대신 우아한 에러 처리를 구현하여 UX를 개선한 경험을 공유합니다.