목록 보기
당근 동네걷기 위에서 동시에 쏟아지는 오버레이들을 우아하게 제어하기
프론트엔드

당근 동네걷기 위에서 동시에 쏟아지는 오버레이들을 우아하게 제어하기

당근마켓
당근마켓
2026년 9월 30일

두줄요약

독립적으로 발화하는 웹뷰·OS 오버레이를 Promise 기반 우선순위 큐로 직렬화했습니다. 큐와 로컬 시퀀서의 책임을 분리해 순서 변경과 검증 복잡도를 낮췄습니다.

문제 상황

  • 웹뷰·네이티브 환경에서 독립 조건으로 발화하는 모달, 바텀시트, OS 권한 팝업의 동시 노출
  • onClose 체이닝과 도메인 간 플래그 조합 증가에 따른 순서 정책 분산 및 QA 범위 확대

구조와 흐름

  • 오버레이 정보가 아닌 Promise를 반환하는 trigger 함수를 우선순위 큐 엔트리로 예약
  • await entry.fn()의 pending 기간을 active 기간으로 삼아 웹뷰 밖 OS 팝업과 웹뷰 UI를 단일 흐름으로 조율
  • queueMicrotask 이후 동일 태스크의 예약을 정렬하고, Zustand 스토어의 running 플래그로 process 재진입 방지

선택 이유

  • Promise.withResolvers 기반 deferred 패턴으로 사용자 close 이벤트와 Promise resolve 연결
  • 함수 단위 추상화로 권한 요청·후속 모달 같은 복합 비동기 흐름의 원자성 확보
  • 호출처에 UI 렌더링·도메인 로직·클로저를 유지하고 큐에는 우선순위와 trigger만 위임

트레이드오프

  • critical 선점은 활성 웹뷰 오버레이만 강제 종료 가능하며 OS 팝업 제어 불가
  • 독립 발화 오버레이는 큐, 이미 순서를 아는 보상 플로우는 로컬 async/await 시퀀서로 분리
  • 순서 정책을 카탈로그의 priority·subOrder로 집중하고 29개 테스트 케이스로 수동 QA 범위 축소

다음 읽기

#WebView 주제를 이어서 읽기

웹뷰 엔지니어를 위한 iOS Webview Input 경험 개선기

iOS 웹뷰에서 input focus 시 화면이 밀리는 문제를 여러 방식으로 개선한 과정을 정리했습니다. 최종적으로는 opacity 트릭으로 자동 스크롤을 막아 입력 경험을 안정화했습니다.

당근마켓
당근마켓
프론트엔드

댓글 0개

댓글을 작성하려면 로그인이 필요합니다.

댓글을 불러오는 중...