아카이브사이트맵
© 2026 Rayon. All rights reserved.
DevDay
아티클랭킹스페이스채용
우아한형제들 favicon우아한형제들

웹과 네이티브, 플로팅웹뷰로 팝업 문제를 해결하다!

by DD
2025-11-18
8개월 전
조회수 4

플로팅웹뷰 도입으로 웹과 네이티브 영역의 팝업 문제를 해결함

디커플링을 통해 팝업 컴포넌트를 분리하고 재사용성을 확보함

라이브러리화를 통해 여러 커머스 서비스에 일관된 아키텍처 적용

플로팅웹뷰 아키텍처: 팝업 디커플링

플로팅웹뷰는 네이티브 영역 위에 팝업을 띄우기 위한 핵심 기술이다. 디커플링을 통해 팝업 컴포넌트를 분리하고, Caller/Callee 컴포넌트를 도입하여 팝업 호출 및 데이터 교환을 처리한다. 따라서, 코드 중복 감소와 유지보수성 향상을 달성했다.

플로팅웹뷰의 트레이드오프: 성능 vs 유연성

플로팅웹뷰는 팝업 로딩 시간 증가라는 단점을 가진다. 성능 저하를 막기 위해, API 응답 값을 팝업에 직접 전달하고, 미리 로딩하는 방법을 사용한다. 반면, 네이티브 영역의 변화에 유연하게 대응할 수 있는 확장성을 확보했다.

플로팅웹뷰 적용 가이드: 디커플링 프로세스

디커플링은 팝업 컴포넌트 분리, 이벤트 기반 로직 재구성, Caller/Callee 컴포넌트 적용 순으로 진행된다. API 응답 값을 팝업에 전달하고, 앱 스토리지를 사용하여 데이터 통신한다. 결과적으로, 코드 재사용성을 높이고 유지보수성을 개선한다.

웹과 네이티브, 조화로운 공존은 가능한가? 플로팅웹뷰 도입으로 찾은 희망
중급
아키텍처
JavaScript
HTML
CSS
Frontend
우아한형제들 favicon우아한형제들
중급
아키텍처
JavaScript
HTML
CSS
Frontend

관련 추천 글

HTML 페이지 기반 웹 개발, 다시 주목받는 이유?

레딧 로고

HTML과 CSS만으로 웹사이트를? 과거로의 회귀?

랍스타즈 로고

텍스트 기반 브라우저, 최신 HTML 기능과의 어긋난 만남

랍스타즈 로고
원문 읽기
원문 읽기

관련 추천 글

HTML 페이지 기반 웹 개발, 다시 주목받는 이유?

레딧 로고

HTML과 CSS만으로 웹사이트를? 과거로의 회귀?

랍스타즈 로고

텍스트 기반 브라우저, 최신 HTML 기능과의 어긋난 만남

랍스타즈 로고

HTML, 나만의 태그를 만들 수 있다고?

해커뉴스 로고

HTML 태그, 나만의 스타일로 만들어 써도 괜찮을까?

랍스타즈 로고

바이브 코딩, 아이디어를 현실로 만드는 비법 공개!

데브투 로고

댓글 0

첫 번째 댓글을 남겨보세요!