팝업과의 대화

요즘 같은 시대에 팝업을 다루는 서비스가 흔하지는 않다. 웹사이트마다 공격적인 팝업들로 여러 개의 광고 배너와 공지사항을 띄우던 팝업 무법시기를 지나, 사용자에게 팝업을 띄울 것인지 허가를 받기 전에는 브라우저가 팝업을 보여주지 않는 팍스-팝업 시대가 도래했기 때문이다. 언제부터인가 팝업을 가진 서비스는 어뷰징이거나 촌스러운 서비스라는 인상이 강해진 것 같기도 하다. 모던한 서비스라면 유저에게 보여주어야 하는 배너나 모달을 당연히 서비스 내부 컴포넌트로 처리한다. 이를 위해 <dialog />라는 시맨틱한 html tag도 있다.

팝업이 필요성이 대두되는 경우는 주로 내부 기능이 아닌 외부 서비스를 사용해야 할 때다. 성인인증, 결제서비스와 같은 예시가 떠오른다. 하지만 이마저도 대다수 유저가 모바일 사용자인 서비스라면 새창없이 리다이렉트로 처리하는 경우가 대부분. 굳이 팝업(새창)을 띄우는 경우가 있기야 하지만 많은 수는 아닌 느낌이다.

하지만 세상에는 레거시 유물을 다루는 서비스도, 개발자도 많은 법. 이번에 케타포 장바구니 페이지를 개선하면서 성인인증 연동을 하게되어 처음으로 팝업을 다루는 경험을 하게 되었고, 그 과정에서 팝업이 부모창에 접근하는 법, 부모창이 팝업에 접근하는 법 두 가지를 배울 수 있었다.

메인에서 팝업 접근

1. 팝업 객체 만들기

   팝업을 열고, 해당 팝업 객체에 접근하기 위해서는 window 객체의 open 메서드를 활용한다.

const popup = window.open('', 'popup', 'width=500, height=550, top=100, left=100, fullscreen=no, menubar=no, status=no, toolbar=no, titlebar=yes, location=no, scrollbar=no');

1. 팝업에 데이터 보내기

   팝업 객체의 postMessage 메서드를 활용해 데이터를 전송할 수 있다.

popup.postMessage(message)

1. 팝업으로부터 메시지 받기

   이벤트 리스너를 통해 팝업으로부터 메시지를 수신할 수 있다.

window.addEventListener('message', function(event) {
	console.log('Received message:', event.data);
})

1. 팝업 내부 함수에 접근하기

   popup 객체에서 바로 팝업 내부 함수를 호출할 수 있다.

popup.someFunctionInPopup();

팝업에서 메인 접근

1. 메인에 데이터 보내기

   window.opener 객체를 통해 메인에 접근하고, postMessage 메서드를 활용해 데이터를 전송할 수 있다.

window.opener.postMessage(message); 

1. 메인에 메시지 보내기

   이벤트 리스너를 통해 메인으로부터 메시지를 수신할 수 있다.

window.addEventListener('message', function(event) {
	console.log('Received message:', event.data);
})

1. 메인 내부 함수에 접근하기

   window.opener 객체에서 바로 메인 내부 함수를 호출할 수 있다.

window.opener.someFunction();