팝업
팝업(popup)은 특정 웹사이트가 어떠한 내용을 표시하기 위해 생성되는 새 창을 말한다.
 .jpg) |
개요[편집]
팝업은 웹사이트에서 특정 영역의 위치에 원하는 사이즈의 별도 레이어를 만들어 기존 페이지를 전환하지 않고 새로운 웹 창을 하나 더 추가시켜 방문자들에게 원하는 시점에 보여 주는 것이다. 주 용도는 광고 또는 새로운 정보를 갱신하거나 알리는 것으로 사용한다. 팝업을 이용한 광고는 웹사이트를 열 때뿐 아니라 종료할 때 표시되기도 하며, 활성화된 창 뒤에서 팝업이 숨어 있기도 해 메모리를 쓸데없이 메모리를 사용하기 때문에 웹브라우저는 팝업창 차단 기능을 지원한다. 최근에는 새 창을 띄우지 않는 모달창을 주로 사용한다.[1][2][3]
종류[편집]
팝업창[편집]
팝업창은 가장 일반적인 팝업으로 보통 자바스크립트를 이용해 새로운 창을 띄우는 기능을 말한다. 새 창을 표시하기 위해 기존 페이지를 전환하는 방식이 아닌, 새로운 웹 창을 하나 더 추가시키는 기능이다. 사이트 접속 직후 또는 종료 후 나타나며, 메모리를 사용하기 팝업이 많으면 웹사이트 로딩이 느려져 사용자들에게 불편함을 준다. 그 때문에 대부분의 웹브라우저가 팝업 차단 기능을 지원해 반드시 노출해야 하는 부분은 모달창을 더 많이 쓴다.[3]
모달창[편집]
모달창(Modal Window) 또는 레이어 팝업(Layer popup)은 같은 웹사이트 내부에서 상위 레이어를 띄우는 방식으로 사용하는 창을 의미한다. 모달창을 종료하지 않고서는 원래 웹사이트에는 접근이 불가능하므로 주로 강제성의 의미가 부여되어 사용자의 이목을 집중시킨다. 앱 권한 동의나, 개인정보 동의 등 명확한 행동이 필요한 경우 사용하면 좋다. 팝업창 대신 무분별하게 사용된다면 내용을 보지도 않고 닫기 버튼을 누르는 경우가 많다. 일반적으로 모달창 바깥 부분을 조금 어둡게 보이도록 반투명한 검은색 박스를 덮는 방법을 사용한다.[3]
토스트[편집]
토스트(Toast)는 동작에 대한 간단한 피드백을 텍스트 형태로 제공하는 작은 팝업 형태의 사용자 인터페이스이다. 토스트는 다이얼로그와 달리 사용자를 방해하지 않고, 메시지를 표시하고 시간이 지나면 자동으로 사라진다. 그리고 토스트는 사용하기 쉽지만, 할 수 있는 일이 제한적이기 때문에 간단하고 단순한 정보를 보여 주는 데 적합하다. 보통 기본적으로 제공하는 시간인 3.5초, 2초를 이용한다.[4]
레이어 팝업[편집]
레이어 팝업은 DIV 태그를 이용한 방법으로 사용자가 팝업 수행을 요청하면 DIV 영역을 제외한 부분의 명암의 어두워지면서 팝업이 띄어지는 형태이다. 대표적으로 아마존 같은 쇼핑 사이트에서 이미지를 표시할 때 많이 사용한다.[5]
기타[편집]
Alert, Confirm, Prompt는 자바스크립트를 이용해 사용자에게 주의를 주거나 또는 확인을 받거나 입력값을 받는 브라우저 메시지 창이다. 이들은 직관적으로 구분이 가능해서, 버튼의 개수 또는 입력창의 여부로 확인할 수 있다. Alert은 확인 버튼이 하나이다. 주로 사용자에게 주의를 주거나 알림을 일방적으로 주는 경우에 사용한다. 상단의 페이지의 도메인이 노출되는 영역은 없앨 수 없다. '아이디 또는 이메일 주소를 입력해주세요.' 와 '확인'의 문구 변경은 가능하지만 줄바꿈은 불가하다. Confirm은 true 혹은 false로 사용자의 행위에 대해서 true와 false의 사용자 선택 값에 따라서 다음 행동을 결정해야 할 때 사용한다. 예를 들어, 닫기 버튼을 누른 사용자에게 '지금 페이지를 이탈하면 작성한 내용이 모두 사라집니다. 나가시겠습니까?'라고 알려주는 것이다. Prompt는 브라우저 메시지 창 내에서 입력값을 받는 자바스크립트이다.[3]
팝업 차단[편집]
팝업창이 무분별하게 사용되고, 팝업창으로 인해 피해를 보는 사례가 증가하다 보니 웹브라우저에서는 팝업 차단 기능을 기본으로 넣어 두는 경우가 대부분이다. 그 때문에 웹사이트의 중요한 팝업이 뜨지 않는 경우가 많아져 최근에는 모달창이나 레이어 팝업을 통해 정보를 전달하는 경우가 많아졌다. 또한 광고주들은 팝업창 차단 도구들 때문에 팝업창을 이용한 광고를 마음대로 생성할 수 없게 되자 팝업 차단을 우회할 수 있는 방법을 찾아내고 있다. 팝업창 차단 도구들이 자바스크립트를 이용한 팝업창 생성만 막았기 때문에 어도비 플래시를 사용하여 생성되거나, 배너 광고와 팝업창 광고를 결합하여 자바스크립트와 함께 DHTML을 이용해 브라우저 화면에 떠다니도록 하는 떠다니는 광고가 등장했다. 하지만 이러한 광고들도 파이어폭스에서 사용 가능한 애드블록플러스(Adblock Plus)와 같은 다른 광고 차단 도구나 사용자가 정의한 스타일 시트를 이용해서 차단할 수 있다.[2]
피해 사례[편집]
- 금융감독원 사칭 팝업
2013년 인터넷 익스플로러 팝업창을 통한 피싱 사이트로 인한 피해가 등장했다. 자신의 컴퓨터를 통해 인터넷을 실행한 후 포털사이트에 접속하자 화면에서는 금융감독원을 사칭한 보안 인증 팝업창이 떠 개인 금융 거래 정보를 입력하라는 내용을 보고 사기임을 의심치 않고 관련된 정보를 입력했다가 피해를 본 것이다. 다음날 오전에도 동일한 팝업창을 통해 접속해 본인 소유의 타 계좌 정보도 입력했다. 피싱 사기범은 약 이틀간 총 15회에 걸쳐 3,000만 원 상당의 돈을 가로챘다.[6]
- 트럼프 대통령 후원 팝업
도널드 트럼프(Donald Trump) 전 미국 대통령이 온라인에서 후원금을 모금할 때 매주 자동으로 후원금이 빠져나간다는 내용의 팝업창을 이용자의 동의가 표시가 된 채 띄워 놓아 매주 후원을 원치 않을 경우 동의를 해제해야 빠져나가지 않았지만 나이가 많아 디지털에 익숙지 않거나 팝업창을 신경 써서 읽지 않은 사람들은 자신도 모르게 매주 후원금이 빠져나가고 있었던 사례이다.[7]
각주[편집]
- ↑ 〈팝업〉, 《나무위키》
- ↑ 2.0 2.1 〈팝업창〉, 《위키백과》
- ↑ 3.0 3.1 3.2 3.3 liufeier, 〈modal, layer popup, parallax〉, 《티스토리》, 2016-03-24
- ↑ 이승현, 〈Dialog, Toast, Snackbar〉, 《브런치》, 2017-08-21
- ↑ 꼬부기, 〈Jquery 레이어 팝업 예제〉, 《네이버 블로그》, 2015-02-17
- ↑ 김재현, 〈팝업창 피싱주의보, 당신의 돈을 노리고 있다〉, 《데일리안 오피니언》, 2013-07-21
- ↑ 유재동, 〈트럼프, 지지자들 “사기 당했다” 항의에 후원금 147억 원 돌려줘〉, 《동아닷컴》, 2021-08-10
참고 자료[편집]
- 〈팝업〉, 《나무위키》
- 〈팝업창〉, 《위키백과》
- liufeier, 〈modal, layer popup, parallax〉, 《티스토리》, 2016-03-24
- 김재현, 〈팝업창 피싱주의보, 당신의 돈을 노리고 있다〉, 《데일리안 오피니언》, 2013-07-21
- 유재동, 〈트럼프, 지지자들 “사기 당했다” 항의에 후원금 147억 원 돌려줘〉, 《동아닷컴》, 2021-08-10
- 이승현, 〈Dialog, Toast, Snackbar〉, 《브런치》, 2017-08-21
- 꼬부기, 〈Jquery 레이어 팝업 예제〉, 《네이버 블로그》, 2015-02-17
