[Web] 🍭웹 팝업의 종류와 구현 방법(레이어 팝업, 모달리스 팝업, 모달팝업)

 

웹 팝업은 사용자의 경험과 상호작용에 큰 영향을 미치는 중요한 UI 요소이다. 최근에 프로젝트를 하면서 메인 페이지에 몰아져 있는 팝업 코드들이 코드가 길어짐에 따라 정리가 안되는 것 같아서 팝업에 대한 내용을 한번 정리하고 따로 파일로 구분해보려고 한다.

이번에는 레이어 팝업, 모달리스 팝업, 모달 팝업의 개념, 특징, 장단점, 사용 사례, 구현 방법을 자세히 설명하고, 비교해보려고 한다.

 

1. 레이어 팝업 (Layer Popup)

개념

• 레이어 팝업은 웹 페이지 내부에서 특정 위치에 고정된 팝업
• 페이지 레이아웃의 일부처럼 보이며, 배경과 상호작용이 가능

특징

• 페이지 흐름을 방해하지 않음
• 특정 위치에 고정되거나 페이지 스크롤에 따라 움직이지 않음
• 사용자가 배경과 자유롭게 상호작용 가능

장점

• 사용자 흐름을 크게 방해하지 않음
• 간단한 정보 제공에 적합
• 구현이 비교적 간단함

단점

• 중요한 메시지를 사용자에게 전달하기 어려움
• 지나치게 작거나 페이지 디자인과 어울리지 않으면 눈에 띄지 않을 수 있음

사용 사례

• 쇼핑몰: '장바구니에 추가되었습니다" 알림
• 블로그: 구독 유도 배너

구현 방법

HTML

<div id="layer-popup" class="hidden">
  장바구니에 추가되었습니다.
</div>

CSS

#layer-popup {
  position: fixed;
  top: 10px;
  right: 10px;
  background: #ffcc00;
  padding: 10px 20px;
  border-radius: 5px;
  display: none;
}
.hidden {
  display: none;
}

JavaScript

function showLayerPopup() {
  const popup = document.getElementById('layer-popup');
  popup.style.display = 'block';
  setTimeout(() => popup.style.display = 'none', 3000);
}
showLayerPopup();

 

 

2. 모달리스 팝업 (Modal-less Popup)

개념

• 모달리스 팝업은 화면 위에 떠 있는 팝업이지만, 배경과의 상호작용은 가능
• 보통 임시적이거나 비중이 낮은 정보를 제공할 때 사용

특징

• 팝업이 떠 있어도 배경 작업 가능
• 크기가 작고 보통 특정 위치에 고정

장점

• 작업 흐름을 방해하지 않음
• 백그라운드와 상호작용 가능해 유연함

단점

• 눈에 잘 띄지 않을 수 있음
• 중요한 작업 안내에는 부적합

사용 사례

• Google Docs: 단어 위에 뜻을 보여주는 툴팁
• 파입 얼로드 진행 상태 창

구현 방법

HTML

<div id="modal-less-popup" class="hidden">
  업로드 중... 45%
</div>

CSS

#modal-less-popup {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #007bff;
  color: white;
  padding: 10px;
  border-radius: 5px;
  display: none;
}
.hidden {
  display: none;
}

JavaScript

function showModalLessPopup() {
  const popup = document.getElementById('modal-less-popup');
  popup.style.display = 'block';
  setTimeout(() => popup.style.display = 'none', 5000);
}
showModalLessPopup();

 

 

 

3. 모달 팝업 (Modal Popup)

모달의 종류

출처: 닐슨 노먼 그룹

위의 그림을 보면 모달과 논모달로 구분 되는데 모달은 유저가 기존의 페이지를 작동할 수 없고 모달 창의 이벤트를 완료 해야 기존 페이지를 작동할 수 있다. 반면, 논모달은 유저가 기존 페이지를 계속해서 작동할 수 있다.

 

개념

• 모달 팝업은 화면 중앙에 표시되며, 배경과의 상호작용을 차단하는 팝업
• 중요한 작업이나 결정을 강제할 때 사용

특징

• 배경을 어둡게 처리(디밍 효과)
• 팝업 외의 요소와 상호작용 불가
• 사용자 초점을 강제로 팝업에 맞춤

장점

• 중요한 정보 전달과 결정 요청에 효과적
• 사용자의 주의를 강제로 끌 수 있음

단점

• 사용자 경험을 방해할 가능성이 있음
• 너무 자주 사용하면 사용자에게 피로감을 줄 수 있음

사용 사례

• 삭제 확인창: "정말 삭제하시겠습니까?"
• 로그인/회원가입 창

구현 방법

HTML

<div id="modal-overlay" class="hidden"></div>
<div id="modal-popup" class="hidden">
  <p>정말 삭제하시겠습니까?</p>
  <button onclick="closeModal()">취소</button>
  <button onclick="confirmDelete()">확인</button>
</div>

CSS

#modal-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: none;
}
#modal-popup {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 20px;
  border-radius: 10px;
  z-index: 1100;
  display: none;
}
.hidden {
  display: none;
}

JavaScript

function showModal() {
  document.getElementById('modal-overlay').style.display = 'block';
  document.getElementById('modal-popup').style.display = 'block';
}
function closeModal() {
  document.getElementById('modal-overlay').style.display = 'none';
  document.getElementById('modal-popup').style.display = 'none';
}
function confirmDelete() {
  alert('삭제되었습니다!');
  closeModal();
}
showModal();

 

 

 

4. 팝업 비교 테이블

특징	레이어 팝업	모달리스 팝업	모달 팝업
배경 상호작용	가능	가능	불가능
위치	페이지 내부 고정	화면 위에 떠 있음	화면 중앙 고정
사용 목적	가벼운 알림, 정보 제공	임시 작업 상태, 도구 창	중요한 작업, 사용자 초점
장점	사용 흐름 방해 없음	유연하고 자연스러움	중요한 정보에 집중 가능
단점	중요도가 낮게 느껴짐	눈에 띄지 않을 수 있음	사용자 경험 방해 가능

 

 

5. 언제 어떻게 구분해서 써?

google material design의 항목들을 Modal과 Non-modal(Modaless)로 구분한 다이어그램

 

참고사이트

https://brunch.co.kr/@bcc5736f7b26444/1

02. 팝업과 모달, 페이지 이동의 구분

https://brunch.co.kr/@minakoro/158

모달인데, 모달이 아닙니다.

https://tech.toktokhan.dev/2021/07/21/about-modal/

이거도 모달, 저거도 모달, 이게 모람