팝업(Popup) 학습

팝업은 현재 브라우저 페이지 위에 완전히 독립된 새 브라우저 창을 띄우는 방식입니다. 모달이 웹사이트 내부 레이어라면, 팝업은 브라우저가 관리하는 별개의 창입니다.

이미지

1. 핵심 개념: 독립성과 병렬성

팝업의 핵심은 부모 창과 자식 창이 동시에 상호작용 가능하다는 점입니다. 사용자는 팝업 정보를 보면서 원래 화면에서 입력/클릭을 병행할 수 있습니다.

2. UX 장점과 단점

장점
- 참조용 정보 제공(도움말/가이드)
- 외부 서비스 연동(PG 결제, 본인 인증, 소셜 로그인)
- 독립된 도구(실시간 채팅, 주식 차트)

단점
- 브라우저 자동 팝업 차단 가능성
- 모바일에서 새 탭으로 열려 흐름 단절
- 중복 팝업/창 관리 어려움

3. 설계 체크리스트

- 사용자 액션(버튼 클릭)으로만 실행
- 콘텐츠에 맞는 크기와 위치 사용
- 공지형은 "오늘 하루 보지 않기" 제공
- 팝업을 전면으로 올려 포커스 명확화

4. 실전 코드 예시

// 팝업 열기 함수
function openPopup() {
    window.open(
        'popup-notice.html',
        'popupName',
        'width=500,height=600,top=100,left=100,scrollbars=yes'
    );
}

// jQuery를 사용한 버튼 이벤트 연결
$('#btnPopup').on('click', function() {
    openPopup();
});