개선된 페이지 스택으로 LINE 증권의 웹 페이지 전환 처리하기

이 글은 LINE 증권에서 웹 페이지 전환 처리를 개선하기 위해 '페이지 스택' 구조를 어떻게 활용했는지 설명합니다. 페이지 스택은 DOM을 삭제하지 않고 순서대로 쌓아 페이지 전환 시 깜빡임 현상을 해소하고, 헤더와 바디를 별개 컴포넌트로 구현하여 네이티브 앱과 유사한 헤더 parallax 전환 효과를 구현했습니다.

또한, 스와이프 제스처의 트리거 조건을 이동 거리뿐만 아니라 속도까지 고려하도록 개선하여 사용자 경험을 향상시켰습니다. 이를 통해 LINE 증권은 더욱 부드럽고 자연스러운 웹 페이지 전환 경험을 제공할 수 있게 되었습니다.