웹사이트를 운영하다 보면 사용자 경험(UX)을 더욱 향상시키기 위해 다양한 작은 기능들이 필요해집니다. 특히 긴 콘텐츠를 포함한 웹사이트에서는 사용자가 원하는 정보를 보다 편리하게 탐색할 수 있도록 도와주는 기능이 필수적입니다. 예를 들어, 페이지를 스크롤한 후 빠르게 최상단으로 돌아갈 수 있는 버튼이나, 특정 콘텐츠를 간편하게 공유할 수 있는 기능이 있다면 사용자 편의성이 크게 증대됩니다. 이에 따라, 이 글에서는 웹사이트에 간단하면서도 효과적으로 적용할 수 있는 플로팅 버튼을 직접 구현하는 방법을 자세히 살펴보겠습니다.
updated: 웹페이지 환경에 따라 안되는 곳이 있어 다른 방식으로 업데이트 함(2025/02/09)
Table of Contents | 목차
구현 기능 소개
- 화면 우측 중앙에 고정된 플로팅 버튼
- 페이지 최상단으로 부드럽게 스크롤하는 기능
- 모바일에서는 네이티브 공유, PC에서는 URL 복사 기능
- 부트스트랩 아이콘을 활용한 모던한 디자인
필요한 리소스
html
<!-- 부트스트랩 아이콘 CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
HTML 구조
html
<!-- 플로팅 버튼 -->
<div class="floating-buttons">
<button class="floating-button scroll-top-button" onclick="scrollToTop()" aria-label="맨 위로 이동">
<i class="bi bi-arrow-up"></i>
</button>
<button class="floating-button share-button" onclick="shareApp()" aria-label="공유하기">
<i class="bi bi-share"></i>
</button>
</div>
CSS 스타일링
css
.floating-buttons {
position: fixed;
top: 50%;
right: 20px;
transform: translateY(-50%);
display: flex;
flex-direction: column;
gap: 10px;
z-index: 100;
}
.floating-button {
width: 45px;
height: 45px;
border: none;
border-radius: 50%;
background-color: rgba(33, 37, 41, 0.8);
color: white;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform 0.3s ease;
}
.scroll-top-button {
background-color: #4b5563;
}
.share-button {
background-color: #6366f1;
}
.floating-button:hover {
transform: translateX(-5px);
}
@media (max-width: 768px) {
.floating-buttons {
right: 10px;
}
.floating-button {
width: 40px;
height: 40px;
}
}
JavaScript 기능 구현
script
<script>
// 스크롤 탑 기능
function scrollToTop() {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
}
// 공유 기능
function shareApp() {
if (navigator.share) {
navigator.share({
title: '로또당첨번호 조합기',
text: '무료 로또 번호 생성기/추출기로 행운의 번호를 만들어보세요!',
url: window.location.href
}).catch(() => fallbackShare());
} else {
fallbackShare();
}
}
// 공유 폴백 기능
function fallbackShare() {
navigator.clipboard.writeText(window.location.href)
.then(() => alert('URL이 복사되었습니다!'))
.catch(() => alert('URL 복사에 실패했습니다.'));
}
// 스크롤 이벤트 최적화
const floatingButtons = document.querySelector('.floating-buttons');
let lastScrollY = window.scrollY;
let ticking = false;
window.addEventListener('scroll', () => {
if (!ticking) {
window.requestAnimationFrame(() => {
floatingButtons.style.display = window.scrollY > 200 ? 'flex' : 'none';
ticking = false;
});
ticking = true;
}
});
</script>
스크립트와 html 플로팅 버튼 코드를 body 바로 앞에 위치시키면 좋다고 합니다.
활용 방법
- 필요한 리소스를 HTML <head> 태그에 추가
- HTML 코드를 원하는 위치에 삽입
- CSS 스타일을 스타일시트에 추가
- JavaScript 코드를 스크립트 파일에 추가
커스터마이징 옵션
- 버튼 위치: .floating-buttons의 right 값 조정
- 버튼 크기: .floating-button의 width, height 값 조정
- 버튼 색상: 각 버튼의 background 값 변경
- 아이콘 변경: 부트스트랩 아이콘 클래스 변경
마무리
이 플로팅 버튼 구현 방식은 비교적 간단하면서도 사용자 경험(UX)을 효과적으로 향상시킬 수 있는 방법입니다. 모바일과 PC 환경을 모두 고려한 반응형 디자인을 적용하면 다양한 디바이스에서 일관된 사용자 경험을 제공할 수 있으며, 직관적인 UI 덕분에 누구나 쉽게 사용할 수 있습니다. 특히 블로그, 포트폴리오, 쇼핑몰과 같이 긴 스크롤이 필요한 웹사이트에서는 더욱 유용하게 활용될 수 있으며, 사용자가 원하는 정보를 빠르게 탐색할 수 있도록 도와줍니다. 이러한 기능을 웹사이트에 추가하면 편의성이 높아지고, 사용자 만족도 또한 크게 향상될 것입니다.