당근, 동네걷기 서비스의 다중 오버레이 충돌 문제를 우아하게 제어한 방법

주요 내용

• 당근 동네걷기 홈은 OS 신체활동 권한 팝업, 권한 안내, 앱 알림 설정 유도, 온보딩 가이드, 걸음 수 알림 모달, 연속 방문 모달, 프로모션 오버레이 등 다수의 오버레이가 존재함
• 각 오버레이는 유저 액션 없이 앱 버전·네이티브 권한 상태·서버 응답·정책 조건 등에 따라 스스로 발화하는 구조
• 기존 방식은 컴포넌트끼리 직접 연결(onClose, onAnimateEnd prop 체이닝)하여 순서를 관리했으나, 오버레이 추가 시 체인 전체를 수정해야 하고 도메인 로직에 분기 조건이 혼재하는 문제가 있었음
• 한시적 프로모션 오버레이가 추가될 때마다 전체 분기와 prop 핸들러를 수정해야 했으며, 발화 조건 조합의 경우의 수만큼 순서가 깨질 수 있는 QA 사각지대가 발생함
• 해결 과정에서 문제 재정의, 추상화 단위(데이터 vs 함수), Promise deferred 패턴, ES2024 Promise.withResolvers, 실행 컨텍스트와 렉시컬 환경, queueMicrotask 등의 개념을 활용함

큐레이터 노트

오버레이 간 의존성을 제거하고 중앙화된 제어 방식을 도입하려는 시도로, 복잡한 웹뷰-네이티브 혼합 환경에서 UI 순서 제어 문제를 구조적으로 해결한 실무 사례를 공유했다는 점에서 의의가 있다.