이번 포스팅에서는 모바일웹 환경을 위한 모달창, 토스트알림 에 대해 만들어보는 시간을 가져보겠습니다.
모달 창은 UI 의 중요한 요소로, 사용자의 주의를 필요로 하는 정보를 표시하기 위해 현재 페이지 위에 오버레이되는 방식으로 나타납니다. 다양한 목적과 상황에 맞게 여러 종류의 모달 창을 사용할 수 있습니다.
모달의 종류에는 팝업모달(Popup Modal), 바텀시트(Bottom Sheet ) , 다이얼로그 (Dialog) , 드로어 (Drawer) 로 크게
나눠볼 수 있는데 이번 만들기 시리즈에서는 토스트알림 을 제공합니다.
원하는 토스트알림 위치 로 지정할 수 있도록 다양한 위치를 적용했습니다.
추후 포스팅 에 드로어뿐 아니라 다양한 만들기 시리즈를 제공하도록 하겠습니다.
모바일 환경에서 만들기 시리즈 다른 글
[개발 같이해요/HTML&CSS] - [ CSS ] 모바일 환경을 위한 CSS 햄버거 메뉴 만들기
[ CSS ] 모바일 환경을 위한 CSS 햄버거 메뉴 만들기
햄버거 메뉴는 모바일 환경에서 주로 사용되는 네비게이션 메뉴입니다. 이 글에서는 간단한 CSS만을 사용하여 햄버거 메뉴를 만드는 방법을 알아보겠습니다. HTML 코드 작성 햄버거 메뉴와 네비
it-ability.tistory.com
[개발 같이해요/HTML&CSS] - [ CSS ] 모바일 환경을 위한 스크롤애니메이션 만들기
[ CSS ] 모바일 환경을 위한 스크롤애니메이션 만들기
스마트폰으로 화면을 내릴때 글자가 밑에서부터 부드럽게 생기는 효과를 본적 있으신가요? 이런 애니메이션 효과가 바로 스크롤애니메이션 입니다. 저번 포스팅에서는 모바일 환경을 위한 햄
it-ability.tistory.com
[개발 같이해요/HTML&CSS] - [ CSS ] 모바일 환경을 위한 다크모드 토글 만들기
[ CSS ] 모바일 환경을 위한 다크모드 토글 만들기
스마트폰 사용이 일상화된 오늘날, 사용자들은 다양한 조명 환경에서 장시간 디바이스를 사용합니다. 이에 따라, 앱과 웹사이트의 다크모드 지원은 더 이상 선택이 아닌 필수가 되었습니다. 다
it-ability.tistory.com
[개발 같이해요/HTML&CSS] - [ CSS ] 모바일 환경을 위한 모달창 만들기 - 팝업모달
[ CSS ] 모바일 환경을 위한 모달창 만들기 - 팝업모달
이번 포스팅에서는 모바일웹 환경을 위한 모달창을 만들어 보도록 하겠습니다. 모달 창은 UI 의 중요한 요소로, 사용자의 주의를 필요로 하는 정보를 표시하기 위해 현재 페이지 위에 오버레이
it-ability.tistory.com
[개발 같이해요/HTML&CSS] - [ CSS ] 모바일 환경을 위한 모달창 만들기 - 바텀시트
[ CSS ] 모바일 환경을 위한 모달창 만들기 - 바텀시트
이번 포스팅에서는 모바일웹 환경을 위한 밑에서 위로 올라오는 모달창인 바텀시트 팝업에 대해 만들어보는 시간을 가져보겠습니다. 모달 창은 UI 의 중요한 요소로, 사용자의 주의를 필요로 하
it-ability.tistory.com
[개발 같이해요/HTML&CSS] - [ CSS ] 모바일 환경을 위한 모달창 만들기 - 다이얼로그
[ CSS ] 모바일 환경을 위한 모달창 만들기 - 다이얼로그
이번 포스팅에서는 모바일웹 환경을 위한 모달창, 다이얼로그 에 대해 만들어보는 시간을 가져보겠습니다.모달 창은 UI 의 중요한 요소로, 사용자의 주의를 필요로 하는 정보를 표시하기 위해
it-ability.tistory.com
# 1. 완성된 토스트알림 화면
# 2.기본 폴더 구조
toast_modal 폴더 구조 입니다.
├── index.html
├── css/
│ └── style.css
└── js/
└── script.js
# 3.HTML 소스 구조
index.html 에서 기본적인 화면 레이아웃 및 화면구조를 작성하도록 하겠습니다.
index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Toast Notification</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="button-container">
<button class="toastBtn" data-position="center">중앙 Toast</button>
<button class="toastBtn" data-position="top-center">중앙 위 Toast</button>
<button class="toastBtn" data-position="bottom-center">하단 중앙 Toast</button>
<button class="toastBtn" data-position="bottom-left">좌측 하단 Toast</button>
<button class="toastBtn" data-position="bottom-right">우측 하단 Toast</button>
<button class="toastBtn" data-position="top-right">우측 상단 Toast</button>
<button class="toastBtn" data-position="top-left">좌측 상단 Toast</button>
</div>
<div id="toast" class="toast">토스트 알림 메시지 입니다</div>
<script src="js/script.js"></script>
</body>
</html>
# 4.CSS 소스 구조
toast 모달 을 불러오고, 버튼의 스타일 등 전체적인 스타일에 대해 CSS 에서 처리합니다.
주석을 참고해주세요.
style.css
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.button-container {
display: grid;
grid-template-columns: repeat(2, auto);
gap: 10px;
margin-bottom: 20px;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
.toast {
visibility: hidden; /* 기본적으로 숨김 */
min-width: 250px;
background-color: #333;
color: #fff;
text-align: center;
border-radius: 30px;
padding: 16px;
position: fixed;
z-index: 1;
font-size: 17px;
transition: visibility 0s, opacity 0.5s linear;
opacity: 0;
display: flex;
align-items: center;
justify-content: center;
}
.toast.show {
visibility: visible;
opacity: 1;
}
.checkmark {
display: inline-block;
color: #4CAF50;
font-size: 20px;
margin-right: 10px;
}
/* 중앙 */
.toast.center {
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
/* 중앙 위 */
.toast.top-center {
left: 50%;
top: 30px;
transform: translateX(-50%);
}
/* 중앙 밑 */
.toast.bottom-center {
left: 50%;
bottom: 30px;
transform: translateX(-50%);
}
/* 왼쪽 밑 */
.toast.bottom-left {
left: 30px;
bottom: 30px;
}
/* 오른쪽 밑 */
.toast.bottom-right {
right: 30px;
bottom: 30px;
}
/* 오른쪽 상단 */
.toast.top-right {
right: 30px;
top: 30px;
}
/* 왼쪽 상단 */
.toast.top-left {
left: 30px;
top: 30px;
}
/* 반응형 디자인 */
@media (max-width: 600px) {
.toast {
min-width: 200px;
font-size: 14px;
}
.checkmark {
font-size: 16px;
}
}
# 5.JavaScript 소스 구조
Javascript 파일에는 모달의 이벤트 처리 를 하는 코드가 구현되어 있습니다.
또한 toast 알림창이 3초후에 닫히도록 타이머 설정이 되어있습니다.
script.js
let toastTimeout;
document.querySelectorAll('.toastBtn').forEach(button => {
button.addEventListener('click', function() {
var position = this.getAttribute('data-position');
var toast = document.getElementById('toast');
// 기존 위치 클래스를 제거
toast.className = 'toast';
// 새로운 위치 클래스 추가 및 "show" 클래스 추가하여 표시
toast.classList.add(position);
toast.classList.add('show');
// 기존 타이머가 있다면 취소
if (toastTimeout) {
clearTimeout(toastTimeout);
}
// 3초 후에 토스트 알림 숨기기
toastTimeout = setTimeout(function() {
toast.classList.remove('show');
}, 3000);
});
});
# 6.마무리
이번 포스팅에서는 모바일환경에서 필수적인 토스트 toast 알림 을 구현해보았습니다.
모바일 환경에서의 웹 개발은 사용자 경험(UX)을 최우선으로 고려해야 합니다.
오늘 구현한 toast 알림 은 사용자에게 간결하고 빠르게 정보를 제공할 때 유용합니다.
토스트 알림을 사용하는 일반적인 상황들을 알려드리면서 글 마무리 하도록 하겠습니다.
다음 포스팅에서도 모바일 환경을 위한 다양한 효과를 만드는 작업을 해보도록 하겠습니다.
| 사용되는 알림메시지 상황 | 메시지 예시 |
| 성공 메시지 | 사용자가 폼을 제출하거나 작업을 완료했을 때 "성공적으로 저장되었습니다." |
| 에러 메시지 | 사용자가 잘못된 입력을 했거나 작업이 실패했을 때 "저장에 실패했습니다. 다시 시도하세요." |
| 정보 메시지 | 사용자가 특정 작업을 수행했을 때 "새로운 업데이트가 있습니다." |
| 경고 메시지 | 사용자가 중요한 결정을 해야 하거나 주의가 필요할 때 "계정 비밀번호가 곧 만료됩니다." |
| 연결 상태 | 네트워크 연결 상태가 변할 때 "인터넷 연결이 끊어졌습니다." "인터넷 연결이 복원되었습니다." |
| 상태 업데이트 | 작업 진행 상태를 표시할 때 "파일이 업로드 중입니다." |
| 알림 메시지 | 배경에서 발생한 이벤트를 사용자에게 알릴 때 "새로운 메시지가 도착했습니다." |