브라우저 팝업이 사장된 이유 🦷

먼 옛날....

웹을 처음 접했을 때를 떠올려보면, 사이트에 들어가자마자 수많은 창이 “툭툭” 튀어나오던 시절이 있었다.

window.open('https://example.com', '_blank', 'width=500,height=500');

당시엔 이게 꽤 자연스러운 UX였다.

 

공지사항, 광고, 로그인, 이벤트… 뭐든 팝업으로 해결했다.

 

그런데 지금은?

“팝업? 거의 안 쓰는데요?”

왜 이렇게 됐을까.

 

1. 사용자 경험(UX)을 완전히 망가뜨렸기 때문

팝업은 기본적으로 사용자의 흐름을 강제로 끊는다.

• 페이지 진입 → 갑자기 새 창 등장
• 뒤로가기 → 안 됨 (새 창이라서)
• 모바일 → 더 최악

특히 광고 팝업은 거의 테러 수준이었다.

한 페이지에 팝업 3~5개 뜨는 사이트도 있었다

이 시점에서 브라우저 벤더들은 판단한다.

“이건 기능이 아니라, 스팸이다”

그래서 기본 정책이 바뀐다.

👉 “팝업은 기본적으로 차단한다”

실제로 대부분 브라우저는 팝업을 기본 차단 상태로 제공한다.

 

2. 보안 문제 (이게 사실 제일 큼)

팝업은 단순 UI 문제가 아니라,
보안 취약점의 주요 통로였다.

대표적인 사례:

• 피싱 로그인 창
• 가짜 경고창 (“바이러스 감염됨”)
• 악성코드 다운로드 유도

팝업은 별도 창이기 때문에
사용자는 “다른 사이트인지” 구분하기 어렵다.

그래서 브라우저는 점점 강하게 제한하기 시작한다.

신뢰되지 않는 사이트의 팝업은 보안 위협으로 간주됨

 

3. “사용자 액션 기반” 정책 등장

요즘 팝업이 잘 안 뜨는 가장 현실적인 이유이다

👉 사용자 이벤트 없이 실행하면 차단됨

 

예를 들어 이런 코드가 있다.

const handleClick = async () => {
  await fetch('/api');   // 비동기
  window.open('/popup'); // 팝업
};

이게 왜 막힐까?

 

브라우저는 이렇게 해석한다

클릭 → (비동기 발생) → 사용자 이벤트 종료 → 팝업 호출

즉,

❌ “이건 사용자 의도가 아니다”

그래서 차단한다.

 

특히 Safari는 이 정책이 매우 엄격하다.

(쉽게 말해서, 팝업은 클릭하자마자 바로 실행돼야 정상 동작한다)

4. SPA + 모달의 등장

프론트엔드 개발 흐름도 큰 영향을 줬다.

 

예전에는....

• 페이지 이동 중심
• 팝업으로 기능 분리

지금은??

• SPA (React, Vue 등)
• 모달 / 드로어 / 인라인 UI

{isOpen && <Modal />}

굳이 새 창을 띄울 필요가 없어졌다.

 

어째서일까??

• 상태 관리 가능
• UX 자연스러움
• 모바일 대응 쉬움
• 브라우저 정책 영향 없음

👉 팝업은 “기술적으로도” 필요 없어졌다.

 

5. 브라우저가 기능을 죽여버림

과거에는 팝업 창을 꽤 자유롭게 제어할 수 있었다.

window.open(url, '', 'toolbar=no, location=no');

하지만 지금은?

• 주소창 숨기기 제한
• 창 크기/위치 제한
• 탭으로 강제 변환

즉,

“팝업을 써도 팝업처럼 동작하지 않음”

브라우저가 의도적으로 기능을 무력화한 것이다.

 

6. 그래도 팝업이 살아있는 영역

완전히 사라진 건 아니다.

아직도 쓰이는 케이스는 ?

1) OAuth 로그인

window.open('/auth/google', 'login', 'width=500,height=600');

• 구글 / 카카오 로그인
• 인증 완료 후 window.opener로 통신

👉 이건 팝업이 가장 자연스러운 UX

 

2) 결제 / 외부 서비스 연동

• PG사 결제창
• 인증서 처리

👉 보안 + 분리된 컨텍스트 필요

 

3) 일부 레거시 시스템

• 금융권
• 공공기관

👉 아직도 팝업 천국…

 

요약하자면 !!!

1. UX 파괴 (사용자 흐름 끊김)
2. 보안 문제 (피싱, 악성코드)
3. 브라우저 정책 변화 (사용자 액션 강제)
4. SPA 등장으로 대체 가능

결론적으로는 다음과 같이 말할 수 있지 않을까??

팝업은 “나쁜 기술”이 아니라
“시대에 맞지 않는 기술”이 됐다

 

 

 

 

요즘 팝업을 써야 한다면 기준은 하나인 것 같다.

👉 “이게 새 창이어야만 하는가?”

• 아니면 → 모달 써라
• 맞다면 → 사용자 클릭 안에서 실행해라

 

요렇게 하면 되지 않을까??

 

참고자료

• https://developer.mozilla.org/en-US/docs/Web/API/Window/open
• https://support.microsoft.com/ko-kr/microsoft-edge/microsoft-edge%EC%97%90%EC%84%9C-%ED%8C%9D%EC%97%85-%EC%B0%A8%EB%8B%A8-1d8ba4f8-f385-9a0b-e944-aa47339b6bb5 (Microsoft Support)
• https://germmen.tistory.com/entry/%ED%8C%9D%EC%97%85-%EC%B0%A8%EB%8B%A8 (언제나 행복한 미래를 위해서)
• https://ainochi.tistory.com/97 (Nochi's Identity)