프론트엔드
클릭했는데 새 창이 안 열려요? – 실전 팝업 차단 이슈 해결기
두줄요약
iOS Safari에서 일부 새 창 열기 동작이 팝업 차단 정책으로 막힌 원인을 분석하고 해결했습니다. 빈 창을 먼저 열고 이후 URL을 지정하는 방식으로 기능과 사용자 경험을 개선했습니다.
문제 상황
- iOS Safari의 일부 기기와 특정 페이지에서 window.open() 새 창 열기 실패
- Android, 데스크탑, 다른 iOS 기기에서는 정상 동작하는 한정적 재현 이슈
원인 분석
- Safari의 팝업 차단 정책에 따른 사용자 상호작용과 팝업 생성 시점의 엄격한 판단
- 버튼 클릭 후 API 응답을 기다린 뒤 새 창을 여는 구조가 차단 조건에 해당
해결 방법
- 클릭 시점에 빈 새 창을 먼저 열고 API 응답 후 location.href로 목적지 지정
- 직접 클릭이 아닌 히든 버튼 트리거 시도는 동일하게 차단
주의할 점
- 팝업 차단 정책 우회가 아니라 정책을 만족하는 흐름으로 설계 필요
- 빈 창 노출을 줄이기 위한 로딩 페이지 보완 필요
적용해볼 점
- 사용자 기기와 브라우저별 예외 정책을 고려한 플로우 설계
- 비동기 처리와 새 창 열기 사이의 타이밍 검증