웹사이트를 운영하다 보면 사용자 경험(UX)을 더욱 향상시키기 위해 다양한 작은 기능들이 필요해집니다. 특히 긴 콘텐츠를 포함한 웹사이트에서는 사용자가 원하는 정보를 보다 편리하게 탐색할 수 있도록 도와주는 기능이 필수적입니다. 예를 들어, 페이지를 스크롤한 후 빠르게 최상단으로 돌아갈 수 있는 버튼이나, 특정 콘텐츠를 간편하게 공유할 수 있는 기능이 있다면 사용자 편의성이 크게 증대됩니다. 이에 따라, 이 글에서는 웹사이트에 간단하면서도 효과적으로 적용할 수 있는 플로팅 버튼을 직접 구현하는 방법을 자세히 살펴보겠습니다.
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()">
<i class="bi bi-arrow-up"></i>
</button>
<!-- 공유 버튼 -->
<button class="floating-button share-button" onclick="shareApp()">
<i class="bi bi-share-fill"></i>
</button>
</div>
CSS 스타일링
css
/* 플로팅 버튼 컨테이너 */
.floating-buttons {
position: fixed;
top: 50%;
right: 2rem;
transform: translateY(-50%);
display: flex;
flex-direction: column;
gap: 1px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
border-radius: 8px;
}/* 공통 버튼 스타일 */
.floating-button {
width: 3.5rem;
height: 3.5rem;
border: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
color: white;
}/* 스크롤 탑 버튼 */
.scroll-top-button {
background: #4b5563;
border-radius: 8px 8px 0 0;
}.scroll-top-button:hover {
background: #374151;
}/* 공유 버튼 */
.share-button {
background: #6366f1;
border-radius: 0 0 8px 8px;
}.share-button:hover {
background: #4f46e5;
}/* 호버 효과 */
.floating-button:hover {
transform: translateX(-2px);
}/* 모바일 대응 */
@media (max-width: 768px) {
.floating-buttons {
right: 1rem;
}
}
JavaScript 기능 구현
script
// 페이지 최상단 스크롤 기능
function scrollToTop() {
window.scrollTo({
top: 0,
behavior: 'smooth' // 부드러운 스크롤 효과
});
}// 공유 기능
function shareApp() {
if (navigator.share) {
// 모바일 네이티브 공유
navigator.share({
title: '웹사이트 제목',
text: '웹사이트 설명',
url: window.location.href
})
.catch((error) => console.log('공유 실패:', error));
} else {
// PC 환경에서는 URL 복사
const url = window.location.href;
navigator.clipboard.writeText(url)
.then(() => alert('URL이 클립보드에 복사되었습니다!'))
.catch(() => alert('URL 복사에 실패했습니다.'));
}
}
활용 방법
- 필요한 리소스를 HTML <head> 태그에 추가
- HTML 코드를 원하는 위치에 삽입
- CSS 스타일을 스타일시트에 추가
- JavaScript 코드를 스크립트 파일에 추가
커스터마이징 옵션
- 버튼 위치: .floating-buttons의 right 값 조정
- 버튼 크기: .floating-button의 width, height 값 조정
- 버튼 색상: 각 버튼의 background 값 변경
- 아이콘 변경: 부트스트랩 아이콘 클래스 변경
마무리
이 플로팅 버튼 구현 방식은 비교적 간단하면서도 사용자 경험(UX)을 효과적으로 향상시킬 수 있는 방법입니다. 모바일과 PC 환경을 모두 고려한 반응형 디자인을 적용하면 다양한 디바이스에서 일관된 사용자 경험을 제공할 수 있으며, 직관적인 UI 덕분에 누구나 쉽게 사용할 수 있습니다. 특히 블로그, 포트폴리오, 쇼핑몰과 같이 긴 스크롤이 필요한 웹사이트에서는 더욱 유용하게 활용될 수 있으며, 사용자가 원하는 정보를 빠르게 탐색할 수 있도록 도와줍니다. 이러한 기능을 웹사이트에 추가하면 편의성이 높아지고, 사용자 만족도 또한 크게 향상될 것입니다.