모달창(Model Window) | 모달에 대한 모든 것..

 

 

🥐 모달창(Model)

👉 현재 화면 위에 겹쳐서 뜨는 창이고

👉 사용자가 이 창을 닫기 전까지, 뒤의 화면은 조작할 수 없다

       즉, 이거 먼저 처리해라 라고 강제하는 창

 

🥐 일반 창과 모달창의 차이

구분	일반 페이지 이동	모달창
화면 전환	O (페이지 이동)	❌ (현재 화면 유지)
뒤 화면 조작	가능	❌ (막힘)
사용자 흐름	끊김	유지
용도	큰 작업	짧고 중요한 작업

 

 

🥐 모달창이 필요한 이유

모달 없을 때 

장바구니 클릭

➡ 페이지 이동

➡ 확인

➡ 다시 이전 페이지 이동

👉 사용자 피로도 ↑

 

모달 있을 때

장바구니 클릭

➡ 현재 화면 그대로

➡ "장바구니에 담겼습니다" 모달

➡  확인 or 계속 쇼핑

👉 UX(사용자 경험) ↑↑↑

 

 

 

🥐 모달창 동작 구조!!!

모달은 페이지가 아니다

❌ /confirm.jsp 이런 게 아님
✅ HTML 요소 하나

<div class="modal">
  <div class="modal-content">
    모달 내용
  </div>
</div>

➡ 기본적으로는 숨겨져 있음

 

 

열고 닫는 원리

1️⃣ 처음 상태

.modal {
  display: none;
}

 

 

2️⃣ 버튼 클릭 시

.modal {
  display: block;
}

 

👉 즉, CSS + JS로 제어

 

 

 

🥐 가장 기본적인 모달 예제

📌 이게 모달의 뼈대 구조

 

HTML

<button id="openBtn">모달 열기</button>

<div id="modal" class="modal">
  <div class="modal-content">
    <p>장바구니에 담겼습니다</p>
    <button id="closeBtn">닫기</button>
  </div>
</div>

 

 

 

CSS

.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
}

.modal-content {
  background: white;
  width: 300px;
  margin: 150px auto;
  padding: 20px;
}

 

 

 

JS

document.getElementById("openBtn").onclick = function() {
  document.getElementById("modal").style.display = "block";
};

document.getElementById("closeBtn").onclick = function() {
  document.getElementById("modal").style.display = "none";
};

 

 

 

 

🥐 Servlet / JSP 프로젝트에서 모달은 언제 쓰냐?

❌ 이런 건 모달 X

▪ 상품 목록 페이지

▪ 게시글 상세 페이지

▪ 메인 페이지

➡ 페이지 이동 필요

 

✅ 이런 건 모달 O

▪ 비밀번호 재확인

▪ 삭제 확인

▪ 로그인 유도

▪ 재고 부족 알림

 

 

 

🥐 내 프로젝트 기준 예시
장바구니 버튼 클릭 시

1. AJAX로 /AddToCartServlet 호출

2. 서버 응답 :

    - 성공 ➡ 모달 띄움

    - 실패(재고 부족) ➡ 모달 띄움

👉 페이지 이동 ❌

👉 사용자 흐름 유지 ✅

 

 

 

 

🥐 모달 + AJAX 조합 (실무 핵심)

fetch("/AddToCartServlet", {
  method: "POST",
  body: formData
})
.then(res => res.text())
.then(result => {
  if(result === "success") {
    showModal("장바구니에 담겼습니다");
  } else {
    showModal("재고가 부족합니다");
  }
});

 

📌 서버는 결과만 주고
📌 화면 제어는 JS + 모달

 

 

 

 

 

🥐 모달창의 장점/단점

✅ 장점

UX 매우 좋음

페이지 이동 없음
즉각적인 피드백

 

❌ 단점

남발하면 짜증남

모바일에서 잘 못 쓰면 불편

접근성(키보드, 스크린리더) 신경 써야 함

 

 

🥐 모달 VS alert() 차이

항목	alert()	모달
디자인	❌ 못 바꿈	⭕ 자유
버튼 구성	1개	여러 개
UX	나쁨	좋음
실무 사용	❌	⭕

 

 

 

 

🥐 모달에 대하여.. 요약

모달창이란

현재 화면 위에 뜨는 작은 창

사용자의 즉각적인 선택을 요구

페이지 이동 없이 처리

JS + CSS로 제어

AJAX와 함께 쓰면 최고