본문 바로가기
카테고리 없음

모달 팝업의 뜻과 용도

by Life Level up 2024. 11. 20.
반응형

모달 팝업이란?

**모달 팝업(Modal Popup)**은 웹 페이지 위에 나타나는 작은 창으로, 사용자가 팝업과 상호작용할 때까지 메인 콘텐츠를 사용할 수 없게 만드는 팝업입니다.

  • **"모달"**의 의미:
    • "Modal"은 모드(Mode)에서 나온 말로, 특정 작업에 집중해야 하는 상태를 뜻합니다.
    • 모달 팝업이 활성화되면 배경을 흐리게 처리하거나 클릭 불가능하게 만들어, 사용자가 팝업을 먼저 처리하도록 유도합니다.

특징

  1. 강제성: 팝업이 닫히기 전에는 메인 페이지와 상호작용할 수 없음.
  2. 사용 목적:
    • 중요한 메시지 전달 (예: 경고창, 확인 요청).
    • 추가 정보 표시 (예: 사진 확대 보기, 폼 입력).
  3. 디자인적 요소:
    • 보통 페이지 중앙에 뜸.
    • 배경을 어둡게(투명하게) 처리하여 팝업이 돋보이게 함.

모달 팝업의 예

  1. 경고 메시지
  2. "정말 삭제하시겠습니까?"
    확인 / 취소 버튼 제공.
  3. 로그인 창
  4. 로그인 폼이 화면 중앙에 팝업으로 표시됨.
  5. 이미지 갤러리
  6. 사진을 클릭하면 확대된 이미지가 모달 창으로 열림.

왜 모달 팝업을 사용할까?

  • 집중 유도: 사용자가 특정 작업을 우선 처리하도록 돕기 위해.
  • UX 향상: 화면 전환 없이도 정보를 표시하거나 기능을 제공 가능.

모달 팝업의 구조

  1. HTML로 팝업 영역을 정의.
  2. CSS로 팝업 창과 배경을 꾸미고, 배경을 비활성화 처리.
  3. JavaScript로 팝업 열기/닫기 기능 추가.

비모달 팝업과의 차이

  • 모달 팝업: 배경 클릭 불가, 팝업 닫아야 다른 작업 가능.
  • 비모달 팝업: 팝업이 떠도 배경과 상호작용 가능.

쉽게 말해, 모달 팝업은 '잠깐 멈추고 이거 먼저 처리해!'라고 말하는 팝업입니다. 

 
 
 
 
반응형