2025-11-22

1일 1아티클

우아한기술블로그

플로팅웹뷰

배경

  • 대부분의 페이지는 웹 / 네이티브 단일 구현, 일부 웹 페이지의 상단 헤더에 네이티브 영역 있는 정도
  • 사용자 경험 개선을 위해 네이티브 영역 증가 → 웹과 네이티브 영역을 혼합 구현해야 하는 상황 도래
    • 네이티브 내비게이션 탭바 : 초기 웹 영역 → 네이티브 바 추가 → 플로팅 형태의 바로 개선
  • 플로팅웹뷰 : 웹과 네이티브가 혼재된 영역의 상위에 겹쳐서 띄우는 투명한 웹뷰

팝업 이슈

  • 팝업 : 커머스 서비스 페이지들은 주로 다이얼로그, 바텀시트 적극 활용, 이렇게 화면 최상단에 뜨는 컴포넌트
  • 기존 웹에서 팝업의 역할 : 최상위 레이어에 노출만 하면 되는 컴포넌트
  • 팝업이 네티이브 영역에 가려지거나, 전체화면을 덮지 못하는 등 네이티브 영역에 영향받기 시작

플로팅웹뷰의 등장

  • 네이티브 영역보다 더 상위 레이어에 팝업 노출하는 접근법 필요
  • 플로팅웹뷰 : 최상위에 뜨면서 배경이 투명하고 화면 전체를 가득 채우는 웹 페이지
  • 플로팅웹뷰에 팝업을 노출하는 방식 제안
  • 기술적 어려움
    • 성능 이슈 : 로딩 시간, 메모리 사용량 증가
    • 팝업 UX 저하 : 팝업 여닫을 때 애니메이션의 흐름 끊김으로 인한 UX 저하
    • 복잡한 설계 및 고난도 작업 : 별도 페이지의 팝업에서 받은 사용자 입력을, 팝업 호출 페이지가 전달받고 처리 가능해야 함 → 팝업 컴포넌트의 정교한 분리, 각 페이지에 나눠 배치 후 서로 통신하도록 설계해야 함

플로팅웹뷰 도입 과정

  1. 작업 대상 식별 및 최소화
  2. 성능 최적화, 고민은 넓게 실행은 최소한으로
    • 로딩 지연 요소 최소화 : API 응답 값을 바로 팝업 prop으로 전달 → 재호출 및 로딩 지연 방지
    • 미리 로딩 : 호출할 팝업 내용이 예측 가능할 경우 prefetch, 앱에서 팝업 페이지 자체를 미노출 상태로 preload
    • 네이티브 팝업 활용 : 이 방법은 해결 방법의 파편화 및 네이티브 요소 제어 불가라는 제약 존재
  3. 웹 페이지 간 가장 간단한 통신 루트 탐색
  4. 규칙 정하기
    • 다중 페이지(팝업마다 플로팅웹뷰 만들기) vs. 단일 페이지(한 페이지에 모든 팝업 처리)
    • 경로를 호출 페이지의 하위로 하기 vs. 경로를 최상위로 하기
    • 최상위에 경로를 두고 별도의 페이지 만들기 선택 → 플로팅웹뷰 구별 용이, 모니터링 및 디버깅 용이, 일관성 증가로 작업 효율 증가
  5. 중복 코드 축소 및 일관된 구조 확보
  6. 반복되는 부분을 라이브러리화
    • 디커플링 작업량 감소
    • 여러 커머스 서비스에서 일관된 아키텍처 적용

오늘 배운 것

내일 할 일

  1. 컨디션 관리하기..

참고자료

results matching ""

    No results matching ""