당근 동네걷기 위에서 동시에 쏟아지는 오버레이들을 우아하게 제어하기
Summary
동시에 쏟아지는 모달과 OS 권한 팝업, 당근 FE팀은 어떻게 'Promise'로 줄 세웠을까?
웹뷰와 네이티브 경계를 넘어, 복잡한 오버레이 지옥을 우아한 비동기 큐로 정복한 이야기
당근 로컬비즈니스실 동네걷기팀에서는 무분별하게 마운트되어 겹쳐 나타나는 온갖 모달, 바텀시트, 네이티브 팝업으로 인해 골머리를 앓았습니다. 필자는 이 현상을 UI 라이브러리로 제어하는 대신, 본질적인 원인인 '제멋대로 발화되는 비동기 제어권'에 주목하여 자바스크립트의 표준 명세 기반인 비동기 상태 머신을 새로 정의했습니다. Promise와 마이크로태스크 큐를 조합해 도메인 로직의 응집도를 무너뜨리지 않는 세련된 동시성 제어 큐를 완성해낸 영리한 FE 엔지니어링 과정을 소개합니다.
- 01오버레이 겹침을 화면 UI 문제가 아닌 '비동기 작업의 동시성 제어' 관점으로 치환한 뛰어난 문제 재정의 능력
- 02웹뷰가 직접 통제할 수 없는 OS 시스템 팝업을 브릿지 Promise의 pending 기간을 활용해 실행 큐 속에 완벽히 병합
- 03ES2024 표준으로 정립된 Promise.withResolvers 패턴을 사용해 선언적이고 간결하게 외부 settle 제어권 획득
- 04React 마운트 주기에서 발생하는 다중 예약을 queueMicrotask로 가로채어 동기식 경합 없이 정확한 우선순위 정렬 보장
- 05복합 비동기 시퀀스(권한 요청→조건 분기→모달 노출)를 단 하나의 트리거 단위로 묶어 완벽한 트랜잭션 보장
RECOMMENDATION
복잡한 사용자 인터랙션과 다양한 비동기 온보딩 시나리오가 뒤얽힌 웹뷰 애플리케이션을 개발하고 계신 분들께 추천합니다. 특히 팝업 제어용 전역 플래그가 점차 비대해져 코드 파악이 어렵거나, 다단계 동시성 요구사항을 JS 순수 명세(Microtask, Promise)로 우아하게 해결하고 싶은 시니어 개발자에게 실무적인 통찰을 제공합니다.
The Problem
당근 동네걷기 서비스에서는 모달, 바텀시트, 네이티브 권한 팝업 등 다수의 UI 오버레이가 독립적인 조건 하에서 무분별하게 동시에 호출되어 겹쳐 뜨는 사용자 경험 저해 문제가 존재했습니다. 이전에는 컴포넌트 간에 onClose 핸들러를 체이닝하여 억지로 순서를 맞추었으나, 이는 결합도를 높이고 신규 오버레이 추가 시 모든 분기를 다시 이어야 해 유지보수 생산성을 심각하게 떨어뜨렸습니다.
The Solution
문제를 UI 렌더링이 아닌 '비동기 발화의 동시성 제어'로 재정의하고, 오버레이 노출 완료 상태를 Promise의 settled 상태에 대응시킨 우선순위 큐를 개발했습니다. ES2024의 Promise.withResolvers 명세를 기반으로 외부에서 Promise의 완료(resolve) 권한을 제어하도록 설계하고, queueMicrotask를 이용해 마운트 페이즈에서 연달아 들어오는 예약 요청들을 한 번에 모아 정렬한 뒤 안전하게 순차 실행하는 스케줄러를 도입했습니다.
The Result
웹뷰 내부 오버레이뿐만 아니라 제어할 수 없던 네이티브 브릿지 팝업의 pending 상태까지 단일 비동기 흐름으로 완벽히 병합했습니다. 다단계 비동기 시퀀스를 하나의 원자적 작업 단위로 묶어 처리함으로써 비동기 꼬임 현상을 제거하였으며, UI 렌더링 및 도메인 로직이 전역 레이어로 격상되지 않고 호출처 내부에 유지되어 코드의 결합도가 낮아지고 응집도가 유지되었습니다.
Trade-off
큐의 정상 작동이 호출처 비동기 함수의 Promise settle(완료/거부) 여부에 전적으로 의존하므로, 예기치 않은 예외 발생이나 컴포넌트의 비정상적 언마운트 시 큐가 영원히 pending 상태로 멈추는 데드락 위험이 있습니다. 보수적인 설계 관점 상 화면 이탈 처리나 중복 차단 시의 예외 케이스(cancelled 상태 분기 등)를 꼼꼼하게 정의하고 관리해주어야 하는 부가적인 개발 비용이 수반됩니다.