[24] modal에 대해

Modal이란?

Modal(모달)은 현재 화면 위에 겹쳐서 나타나는 창으로, 사용자의 주의를 특정 작업이나 정보에 집중시키기 위해 사용됩니다. 모달은 사용자가 창을 닫거나 작업을 완료하기 전까지는 다른 작업을 할 수 없도록 제한합니다.

 

Modal의 특징

1. 중앙에 표시됨:
   • 화면의 중앙에 고정되어 나타나며, 사용자 주의를 끌기 위해 시각적으로 강조.
2. 배경 흐림 효과 (Overlay):
   • 모달 뒤의 배경을 흐리게 처리하거나 클릭하지 못하도록 막음.
3. 작업 완료 유도:
   • 사용자가 명확한 행동(확인, 취소 등)을 취하도록 유도.
4. 종류:
   • 경고 모달: 확인이나 취소 버튼 제공.
   • 폼 모달: 사용자 입력(로그인, 등록 등) 처리.
   • 정보 모달: 간단한 정보를 표시.

 

Modal 구현 방법

1. HTML + CSS로 간단한 Modal

• HTML

<div id="modal" class="modal">
  <div class="modal-content">
    <span class="close-button">&times;</span>
    <h2>Modal 제목</h2>
    <p>이곳에 내용을 입력하세요.</p>
  </div>
</div>
<button id="openModalButton">모달 열기</button>

 

• CSS

/* 모달 배경 (보이지 않도록 기본 숨김 처리) */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 배경 흐림 효과 */
}

/* 모달 내용 */
.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  width: 400px;
  text-align: center;
}

/* 닫기 버튼 스타일 */
.close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 20px;
  cursor: pointer;
}

 

• Javascript

const modal = document.getElementById("modal");
const openModalButton = document.getElementById("openModalButton");
const closeButton = document.querySelector(".close-button");

// 모달 열기
openModalButton.addEventListener("click", () => {
  modal.style.display = "block";
});

// 모달 닫기
closeButton.addEventListener("click", () => {
  modal.style.display = "none";
});

// 배경 클릭으로 닫기
window.addEventListener("click", (event) => {
  if (event.target === modal) {
    modal.style.display = "none";
  }
});

 

---

2. React로 Modal 구현

React 모달 예제

import React, { useState } from "react";
import "./Modal.css"; // 스타일은 위 CSS 참고

function Modal({ isOpen, onClose }) {
  if (!isOpen) return null; // 모달이 열리지 않으면 렌더링하지 않음

  return (
    <div className="modal" onClick={onClose}>
      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
        <span className="close-button" onClick={onClose}>&times;</span>
        <h2>Modal 제목</h2>
        <p>이곳에 내용을 입력하세요.</p>
      </div>
    </div>
  );
}

function App() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setIsModalOpen(true)}>모달 열기</button>
      <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)} />
    </div>
  );
}

export default App;

 

3. 라이브러리를 활용한 Modal

React 또는 일반 웹 애플리케이션에서 Modal 라이브러리를 사용하면 더 쉽고 강력한 기능을 사용할 수 있습니다.

React Modal 라이브러리: react-modal

npm install react-modal

 

사용 예제:

import React, { useState } from "react";
import ReactModal from "react-modal";

ReactModal.setAppElement("#root");

function App() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>모달 열기</button>
      <ReactModal
        isOpen={isOpen}
        onRequestClose={() => setIsOpen(false)}
        style={{
          content: {
            top: "50%",
            left: "50%",
            right: "auto",
            bottom: "auto",
            marginRight: "-50%",
            transform: "translate(-50%, -50%)",
          },
        }}
      >
        <h2>React Modal</h2>
        <button onClick={() => setIsOpen(false)}>닫기</button>
      </ReactModal>
    </div>
  );
}

export default App;

 

---

4. 모달 사용 시 고려 사항

1. 접근성 (Accessibility):
   • 포커스 트랩(Focus Trap): 모달이 열렸을 때 키보드 포커스가 모달 안에서만 이동해야 함.
   • aria-* 속성 추가: 예를 들어 aria-labelledby와 aria-describedby를 사용하여 모달 제목과 내용을 스크린 리더에 전달.
2. 애니메이션:
   • CSS 트랜지션이나 라이브러리를 사용해 모달의 열기/닫기 애니메이션을 추가.
   • 예: react-transition-group, framer-motion.
3. 모달 닫기:
   • ESC 키, 닫기 버튼, 배경 클릭 등으로 닫을 수 있도록 처리.
4. 반응형 디자인:
   • 작은 화면에서도 적절히 표시되도록 CSS 조정.

 

---

요약

항목	설명
기능	화면 위에 겹쳐서 중요한 정보를 강조.
주요 속성	중앙 배치, 배경 흐림, 닫기 버튼.
기술 스택	HTML/CSS/JS, React, Modal 라이브러리.
사용 사례	로그인, 경고, 입력 폼, 이미지 뷰어.
접근성 및 애니메이션	포커스 관리, ESC 키 지원, 부드러운 열기/닫기 효과.

모달은 사용자 경험(UX)을 향상시키는 중요한 UI 요소입니다. 간단한 방법부터 라이브러리까지 다양한 접근법으로 구현할 수 있습니다.