항공 프론트엔드 구축기 (5/10): 뒤로가기가 가장 어려웠다
Summary
웹과 앱의 뒤로가기를 코드 하나로 해결하는 똑똑한 모달 제어법
브라우저 히스토리와 하드웨어 백키의 극적인 타협점을 찾아서
웹의 히스토리 기반 뒤로가기와 웹뷰의 하드웨어 백키는 동작 원리가 근본적으로 다릅니다. 이 아티클은 두 환경의 고유 방식을 억지로 통합하지 않고, 공통 콜백으로 수렴시키는 추상화 구조를 설계하여 뒤로가기 문제를 깔끔하게 해결한 여정을 공유합니다. 덕분에 개발자들은 웹인지 앱인지 의식하지 않고 직관적인 컴포넌트 선언만으로 완벽한 네비게이션을 구현하게 되었습니다.
- 01웹뷰 환경에서는 DOM 마운트 순서를 활용한 보이지 않는 트리거 버튼 구조로 전역 백키 이벤트를 안전하게 수신
- 02웹 환경에서는 URL 해시(#modal)와 popstate를 단일 싱글톤 매니저가 전담하여 모달 상태를 조율하도록 개선
- 03뒤로가기 시 닫혀야 하는 모달과 사용자 입력을 대기하기 위해 버텨야 하는 모달의 타입을 분리하여 안정성 강화
- 04서비스 개발 코드에서는 백키 제어 코드가 단 한 줄도 남지 않도록 완벽한 캡슐화 달성
RECOMMENDATION
웹과 웹뷰를 동시에 지원하는 하이브리드 앱 환경의 프론트엔드 엔지니어에게 적극 추천합니다. 특히 모달, 바텀시트 등의 복잡한 네비게이션 스택 처리에 골머리를 앓고 있다면 아티클의 이원화된 콜백 매핑 아키텍처가 실무적인 돌파구가 될 것입니다.
The Problem
웹 브라우저의 히스토리 방식과 안드로이드 하드웨어 백키 방식이 서로 달라, 하나의 프론트엔드 코드베이스에서 두 환경의 뒤로가기 동작을 일관되게 제어하기 어려웠습니다. 특히 단순 라우터 백을 실행하면 화면 전체가 뒤로 이동하여 떠 있는 모달이나 다이얼로그만 순차적으로 닫지 못하는 문제가 발생했습니다.
The Solution
웹과 웹뷰 환경의 메커니즘을 억지로 하나로 합치지 않고, 동일한 콜백에 도달하도록 추상화했습니다. 웹뷰에서는 마운트 순서대로 data-order를 가진 보이지 않는 버튼을 렌더링하여 전역 백키 핸들러가 가장 최근의 버튼을 클릭하게 했고, 웹에서는 단일 싱글톤 매니저가 URL 해시(#modal)와 popstate 리스너를 소유하여 모달의 등록 및 히스토리 이벤트를 조율하도록 구현했습니다.
The Result
서비스 레이어의 개발 코드는 백키 처리 로직을 완전히 배제하고 오직 onHide와 onNativeBack 속성만 정의하도록 완전히 추상화되었습니다. 이를 통해 웹과 웹뷰 양쪽 환경 모두에서 복잡한 뒤로가기 분기문 없이도 안전하고 자연스러운 사용자 경험을 제공할 수 있게 되었습니다.
Trade-off
웹 환경에서 겹쳐 있는 모달들이 뒤로가기 한 번에 모두 닫히는 한계가 존재합니다. 또한 뒤로가기를 흡수하는 로직의 오작동을 방지하기 위해 100ms 타임아웃 같은 경험적 수치에 의존하는 트릭이나 화면 딤드 영역을 2배로 넓게 그리는 임시방편적 트릭을 일부 사용했습니다.
Key Concepts
More from 여기어때
View all posts from 여기어때EKS 컨테이너 메모리 스파이크 추적기
EKSPage CacheLogback2일 전SRE 업무에 AI 녹여내기 — 2편: Alert Adviser로 장애 원인 분석 자동화
GrafanaMCPSlack Bot6일 전SRE 업무에 AI 녹여내기 — 1편: Smart RI Calc로 인프라 비용 산정 자동화
SREAWS KarpenterCost Estimation6일 전WebFlux 전환 부하 테스트를 다시 쓴 이야기
WebFluxSpring BootLoad Testing1주 전데드락을 해결하려다, 락을 줄이게 된 이야기
MySQL InnoDBDeadlockPessimistic Lock1주 전
Related reads#WebView
Explore #WebView
토스는 어떻게 광고 속에 게임을 넣었을까
Laying the Rails Beyond WebView: Why Karrot Chose Lynx
항공 프론트엔드 구축기 (6/10): 컨테이너를 둘로 쪼개지 않았다
항공 프론트엔드 구축기 (1/10): 웹, 모바일웹, 웹뷰를 코드 한 벌로
