웹사이트 공유하기 버튼 만들기 - 모바일과 PC 모두를 위한 floating 공유 버튼
웹사이트를 운영하다 보면 사용자들이 콘텐츠를 쉽게 공유할 수 있게 하는 것이 중요합니다. 특히 모바일 환경에서는 네이티브 공유 기능을, PC에서는 간편한 URL 복사 기능을 제공하는 것이 사용자 경험을 크게 향상시킬 수 있습니다.
이 글에서는 화면 우측에 항상 떠있는 floating 공유 버튼을 구현하는 방법을 소개합니다. 부트스트랩 아이콘을 활용한 모던한 디자인과 함께, 모바일/PC 환경을 자동으로 감지하여 최적화된 공유 기능을 제공하는 방법을 다루겠습니다.
Table of Contents | 목차
장점과 특징
- 화면 우측 중앙에 고정된 플로팅 버튼
- 모바일/PC 환경 자동 감지
- 모바일에서는 기본 공유 기능 활용
- PC에서는 원클릭 URL 복사
- 심플하고 모던한 디자인
- 반응형 호버 효과
구현 방법
부트스트랩 아이콘 추가
script
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
HTML 버튼 구현
html
<button class="share-button" onclick="shareApp()">
<i class="bi bi-share-fill"></i>
</button>
CSS 스타일링
css
.share-button {
position: fixed;
top: 50%;
right: 2rem;
transform: translateY(-50%);
background: #6366f1;
color: white;
width: 3.5rem;
height: 3.5rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
transition: all 0.2s ease;
border: none;
}.share-button:hover {
transform: translateY(-50%) translateY(-2px);
box-shadow: 0 6px 8px rgba(0,0,0,0.15);
background: #4f46e5;
}
JavaScript 기능 구현
script
function shareApp() {
if (navigator.share) {
navigator.share({
title: '웹사이트 제목',
text: '웹사이트 설명',
url: window.location.href
})
.catch((error) => console.log('공유 실패:', error));
} else {
const url = window.location.href;
navigator.clipboard.writeText(url)
.then(() => alert('URL이 클립보드에 복사되었습니다!'))
.catch(() => alert('URL 복사에 실패했습니다.'));
}
}
활용 사례
- 블로그 포스트 공유
- 상품 페이지 공유
- 이벤트 페이지 홍보
- 뉴스 기사 공유
- 포트폴리오 작품 공유
커스터마이징 방법
- 버튼 위치 조정: CSS의 right, top 값 수정
- 색상 변경: background 속성 수정
- 크기 조정: width, height 값 수정
- 아이콘 변경: bi-share-fill 클래스를 다른 부트스트랩 아이콘으로 변경
주의사항
- 모바일 공유 기능은 HTTPS 환경에서만 작동
- 화면을 가리지 않도록 적절한 위치 선정 필요
- z-index 값 조정으로 다른 요소와의 겹침 방지
마무리
간단한 코드로 구현할 수 있는 공유 버튼이지만, 사용자 경험을 크게 향상시킬 수 있는 요소입니다. 모바일과 PC 환경 모두를 고려한 이 구현 방식은 다양한 웹사이트에서 활용될 수 있습니다.