부트스트랩 모달 만들기 (예: 광고 허용 메시지)

게시일: 24. 10. 15. 수정일: 24. 12. 24.

소요 시간: 5분 조회수: 46

오늘은 부트스트랩(Bootstrap)을 이용해 광고 추적 허용 여부를 묻는 모달을 만들어 보았다. 웹 개발에서 사용자 인터페이스(UI)를 개선하는 방법을 배우는 것은 언제나 흥미롭고 도전적이다. 모달을 구현하면서 각 요소가 어떤 역할을 하는지 자세히 알아보았다. 이제 그 과정을 차근차근 정리해 보겠다.

HTML 구조 만들기

부트스트랩을 사용하기 위해 먼저 HTML 문서를 설정했다. 기본 HTML5 구조를 만들고, 부트스트랩의 CSS 파일을 CDN을 통해 링크했다. 문자 인코딩은 UTF-8로 설정하고, 반응형 웹 디자인을 위한 뷰포트 메타 태그도 추가했다. 이렇게 기본 구조를 설정한 후, 모달을 추가할 준비가 되었다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>광고 추적 허용 모달</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>

스크립트 추가하기

모달이 제대로 작동하기 위해 jQuery와 Bootstrap의 JavaScript 파일을 추가했다. 이를 통해 모달의 애니메이션과 상호작용이 원활해졌다. 이 단계에서 Popper.js도 함께 추가하여 툴팁과 같은 기능이 정상 작동할 수 있도록 했다.

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

모달 버튼 추가하기

이제 모달을 여는 버튼을 추가했다. 이 버튼은 "광고 추적 허용 여부"라는 문구를 가지고 있으며, 클릭 시 모달이 열리도록 설정했다. 부트스트랩의 btn 클래스를 사용하여 버튼을 꾸미고, data-toggle과 data-target 속성으로 모달과 연결시켰다.

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#trackingModal">
    광고 추적 허용 여부
</button>

data-toggle과 data-target들이 없었다면 버튼 클릭 시 모달을 여는 기능이 작동하지 않는다.

모달 구조 설계하기

이제 본격적으로 모달 구조를 설계하기 시작했다. 모달은 modal 클래스를 사용하여 생성했다. 내부 구조로는 modal-dialog, modal-content, modal-header, modal-body, modal-footer가 포함된다.

<div class="modal fade" id="trackingModal" tabindex="-1" aria-labelledby="trackingModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
        </div>
    </div>
</div>

modal 클래스는 모달의 전체적인 구조를 감싸고, fade 클래스는 모달이 부드럽게 나타나고 사라지게 해준다. 이런 세심한 디자인이 사용자 경험을 얼마나 향상시키는지 알게 되었다.

모달 헤더 만들기

모달의 헤더 부분을 만들었다. 여기에는 제목과 닫기 버튼이 있었다. 제목은 "광고 추적 허용"으로 설정하고, 닫기 버튼을 추가하여 사용자가 모달을 쉽게 닫을 수 있도록 했다.

            <div class="modal-header">
                <h5 class="modal-title" id="trackingModalLabel">광고 추적 허용</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span>&times;</span>
                </button>
            </div>

모달 헤더를 만들면서, 사용자에게 필요한 정보를 명확하게 전달하는 것이 얼마나 중요한지 느꼈다. 닫기 버튼은 사용자의 편의를 위해 꼭 필요하다는 생각이 들었다.

모달 본문 만들기

모달 본문에서는 사용자가 광고 추적을 허용할 것인지에 대한 메시지를 넣었다.

            <div class="modal-body">
                웹사이트에서 제공하는 맞춤형 광고를 위해 광고 추적을 허용하시겠습니까?
            </div>

본문을 작성하면서, 사용자에게 직접적으로 다가가는 메시지를 만드는 것이 중요하다는 생각이 들었다. 이 간단한 질문이 사용자의 행동에 큰 영향을 미칠 수 있으니까.

모달 바닥글 만들기

모달 바닥글에는 "거부"와 "허용" 버튼을 추가했다. 각 버튼에는 부트스트랩 클래스를 사용하여 스타일링하였다.

            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">거부</button>
                <button type="button" class="btn btn-primary">허용</button>
            </div>

바닥글을 디자인하면서, 사용자가 선택할 수 있는 명확한 옵션을 제공하는 것이 얼마나 중요한지 깨달았다. "거부"와 "허용" 버튼은 사용자에게 명확한 선택지를 주어야 한다.

결과 확인하기

모든 코드를 마친 후, HTML 파일로 저장하고 웹 브라우저에서 실행해 보았다. 버튼을 클릭하면 모달이 멋지게 열리며, 사용자에게 광고 추적을 허용할 것인지 물어보는 메시지가 표시됐다. "거부" 버튼을 클릭하면 모달이 닫히고, "허용" 버튼은 아직 기능을 추가해야 하는 부분이었다.

결과를 확인하면서 모달이 작동하는 것을 보니 정말 뿌듯했다. 사용자가 광고 추적 허용 여부를 쉽게 선택할 수 있도록 하는 기능이 잘 구현되었다는 생각이 들었다.

이 경험을 통해 부트스트랩 모달이 얼마나 유용한 도구인지 깨닫게 되었다. 사용자의 선택을 유도하고, 필요한 정보를 효과적으로 전달할 수 있는 좋은 방법이라고 생각한다.

앞으로는 "허용" 버튼을 클릭했을 때의 동작을 추가하여, 사용자의 선택을 저장하는 기능도 구현해 보고 싶다. 이렇게 실습하면서 배우는 것이 정말 즐거웠다.

부트스트랩 모달 만들기 (예: 광고 허용 메시지)

인기글