html 팝업창 띄우는 방법 및 고려할 사항들

Last Modified : 2018-07-25 / Created : 2016-01-19

101,366
View Count

주소 복사하기

안녕하세요! 팝업창을 띄우고 사용하는 방법과 기타 정보들을 모아 모아서 적어보도록 하겠습니다. 가장 먼저 팝업창은 무엇이고 언제사용하는지 간단히 적어보겠습니다.

# 팝업창(Pop_up window)이란?팝업창이란 현재의 브라우저에서 추가적으로 웹페이지를 브라우저로 여는 것을 말합니다. 즉, 처음 열린 웹페이지 이외의 다른 내용을 가진 페이지를 열 수 있게합니다.

팝업창을 열기위해서는 자바스크립트를 사용하며 사용자가 팝업창을 여는 액션이 사용자의 요청으로 여는 것이 아닌 사이트 운영자가 의도를 통해 열기 때문에 브라우저에는 팝업창을 강제로 열지 못하도록 막는 선택옵션 사항을 가지고 있습니다.

# 팝업창은 언제 사용하나요?

팝업창을 여는 가장 큰 이유는 특정 콘텐츠가 일정기간에만 해당하는 사항이거나 전략적으로 강조할 이유가 있는 경우 이를 더욱 효과적으로 노출시키기 위한 목적으로 사용됩니다.

일반적으로 다음과 같은 상황이 팝업창이 필요한 경우입니다.

1. 새로운 제품, 웹사이트를 런칭한 경우
2. 홍보, 판촉 이벤트를 일정기간 진행하는 경우
3. 고객 감사, 인사, 신년, 기념일등에 문구를 나타낼 경우

그럼 아래는 실제로 팝업을 구현하기 위한 방법을 자세히 알아보겠습니다.

# 자바스크립트를 사용하여 팝업창 만들기

앞에도 언급했지만 팝업창을 띄우려면 자바스크립트를 사용합니다. 자바스크립트의 window객체는 팝업을 콘트롤 할 수 있는 몇가지 메소드(함수)를 가지고 있습니다.

! 팝업창 띄우기팝업창을 열기 위해서 open()을 사용합니다.

window.open("파일명", "팝업이름", "옵션설정");

위의 코드는 가장 기본적인 사용방법으로 파일명, 팝업창 이름, 기타 설정에 필요한 값들을 인자로 받아 사용할 수 있습니다. 각각의 인자값에 대한 설명은 아래를 참고하세요.

i. 파일명 : 파일명은 팝업을 열기위해 불러올 파일이름을 말함
ii. 팝업이름 : 팝업이름을 설정할 수 있음. 팝업이름은 없어도 가능하나 설정할 경우 팝업을 선택하여 닫는 등의 액션이 가능함
iii. 옵션설정 : 팝업창의 크기, 위치, 스크롤등 다양한 선택옵션의 결정

아래는 옵션설정에 사용가능한 속성들입니다. 속성의 값은 yes, no 또는 0, 1을 사용하여 설정이 가능합니다.

left : 좌측부터 팝업의 위치를 지정
top : 상단에서부터 팝업의 위치를 지정
width : 팝업창 너비 width 값 정하기
height : 팝업창 길이 height 값 정하기
status : 상태 표시바 보이거나 숨기기
toolbar : 툴바를 보이거나 숨기기
location : 주소표시줄 보이거나 숨기기
menubar : 메뉴바를 보이거나 숨기기
scrollbars : 스크롤바를 보이거나 숨기기
fullscreen : 풀스크린으로 화면 출력
channelmode : 채널모드로 화면 출력

아래는 옵션값을 사용하여 코드를 만들면 아래와 같이 될 것입니다.

// 팝업을 띄우기, width 300, height 400, 스크롤바, 툴바, 메뉴바를 모두 숨기는 경우
window.open('popup.html', 'popup01', 'width=300, height=400, scrollbars= 0, toolbar=0, menubar=no');

# 팝업창 띄우기 예제소스 코드보기

이제 새롭게 팝업창을 만들어 실행시켜보겠습니다. 페이지가 열리면 자동으로 나타나는 팝업창 예제입니다.

@ popup.js

window.onload =function () {
window.open("popup. html", "popupNo1", "width=300, height=360");
}

위 방법처럼 스크립트로 바로 띄우거나 함수를 만든 후 body 태그에 onload 이벤트 속성을 사용해 호출하여 사용하기도 합니다.

<body onload="doPopupopen();">
...
</body>

<script type="text/javascript">
function doPopupopen() {
window. open("popup. html", "popup01", "width=300, height=360");
}
</script>

! 참고사항 크롬(Chrome)에서 스크롤바 제거등의 옵션이 정상적으로 동작 안할 수 있습니다. 이 경우 간단한 해결방법은 팝업창 내부에서 overflow: hidden; 속성과 값을 사용하는 방법이 있습니다.

html, body { overflow: hidden; }
// 스크롤바 제거

# 팝업창 만들때 고려할 사항들 몇 가지 팝업창을 사용할때 생각할 부분들을 알아봅니다.

1. 잦은 팝업창은 사용성을 저하시킨다.
; 팝업의 목적이 특정 콘텐츠를 강조하여 노출할 수 있다는 점이나 전략적으로 사용하지 않고 남발하는 경우... 즉, 굳이 팝업창을 뛰울 필요가 없는 부분까지 팝업을 사용하게되면 팝업창에 대한 기대효과가 점점 감소하게 특정부분의 노출이 늘어나는 대신에 팝업뒤에 표시될 내용은 노출이 감소하게됩니다.

또한, 팝업은 닫기 위한 추가적인 사용자 행위의 단계를 추가시키기 때문에 웹사이트 사용성을 전체적으로 저하시킬수도 있습니다.

2. 한 화면에 팝업창을 너무 많이 띄우지 말 것.
앞에도 언급한 것처럼 팝업창을 지나치게 많이 띄우면 팝업에 대한 주목도가 떨어져 읽는 주의깊게 관찰하는 사용자가 줄어들고 웹사이트의 다른 콘텐츠에 관심을 갖는 사람에게 거부반응을 줄 수 있습니다.

# 팝업창과 모달창(Modal window)과의 차이점

하이라이트 영역에 대하여 팝업창과 모달창을 사용할 경우 서로 비교하게되는데 각각의 장단점이 존재합니다. 팝업창을 기준으로 장단점을 비교하면 아래와 같습니다.

[ 팝업창 사용시 장점 ]
1. 노출효과가 더 효과적이다.
2. 랜딩페이지와 별도로 수기거나 자유로운 이동이 가능하다(상품을 비교하거나 채팅처럼 상시 띄울 경우 이점)
3. 완전히 분리된 웹서비스가 가능하다.
4. 페이지 이동이 가능하다.
5. 코딩과정이 비교적 간단하다.

[ 팝업창 사용시 단점]
1. 팝업창 차단을 해둔 경우 노출이 어렵다.
2. 페이지 오픈시간을 지연시킨다.
3. 사용성이 저하된다.

여기까지 팝업창에 대하여 알아봤습니다. 혹시 궁금하시거나 기타사항이 있다면 댓글주시기바랍니다 :)

팝업 모달 popup modal window 자바스크립트

아래의 글도 찾고 계시지 않나요?

[jQuery] 제이쿼리를 이용해 요소를 상대 또는 절대좌표 서서히 이동, animate()

[자바스크립트] 클로저를 활용하여 setTimeout을 실행하는 방법