화면 구석에 둥둥 떠 있는 그 버튼.
뭔지, 언제 쓰는지, CSS·JS로 직접 만드는 법까지 — 복붙 한 번에 내 사이트에 바로 적용해요.
스크롤해도 항상 화면 위에 떠 있는 버튼 — Floating Action Button(FAB)의 모든 것
웹사이트를 스크롤할 때 화면 오른쪽 아래에 둥실 떠 있는 버튼 본 적 있죠?
그게 플로팅 버튼(Floating Action Button, FAB)이에요.
CSS position: fixed를 이용해 뷰포트에 고정시키기 때문에,
사용자가 아무리 스크롤해도 항상 같은 자리에 보여요.
대표적인 예가 맨 위로 가기 버튼이에요. 긴 글을 읽다가 한 번에 맨 위로 올라가고 싶을 때, 오른쪽 하단에 떠 있는 ↑ 버튼을 누르면 바로 이동하죠. 카카오톡 상담, 공유하기, AI 채팅 버튼도 모두 이 플로팅 버튼 패턴이에요.
스크롤 위치와 관계없이 항상 화면에 고정돼요. 사용자가 핵심 기능을 놓치지 않도록 도와줘요.
엄지손가락이 닿는 화면 하단 코너에 배치하면, 모바일에서 한 손으로 편하게 누를 수 있어요.
상담 버튼, CTA 버튼을 플로팅으로 올리면 페이지 어디서든 클릭 가능해 전환율이 올라가요.
HTML 한 줄 + CSS 10줄이면 완성이에요. 디자인 라이브러리 없이도 충분히 예쁘게 만들 수 있어요.
position: fixed 란? 화면(뷰포트)을 기준으로 위치가 고정되는 CSS 속성이에요. 스크롤해도 요소가 움직이지 않고 항상 같은 자리에 있어요. bottom: 24px; right: 24px;처럼 지정하면 항상 우측 하단에 떠 있어요.
| 상황 | 추천 플로팅 버튼 | 효과 |
|---|---|---|
| 긴 블로그 글 · 문서 페이지 | ↑ 맨 위로 버튼 | UX 향상 |
| 서비스 · 쇼핑몰 사이트 | 💬 카카오톡 상담 / 문의하기 | 전환율 ↑ |
| 포트폴리오 · 소개 페이지 | 📩 연락하기 / GitHub 링크 | 노출 강화 |
| 콘텐츠 사이트 | 🔗 공유하기 / 소셜 링크 | 바이럴 ↑ |
| SaaS · 웹앱 | ✨ AI 도우미 / 고객지원 채팅 | 지원 효율화 |
주의: 플로팅 버튼이 너무 많으면 오히려 불편해요. 한 페이지에 1~2개까지만 사용하고, 콘텐츠를 가리지 않는 위치에 배치하세요.
클릭하면 해당 유형의 코드가 아래 에디터에 자동으로 채워져요
플로팅 버튼을 만드는 데 꼭 필요한 CSS 속성 4가지
display:none 대신 이 둘을 조합하면 부드러운 페이드 효과가 가능해요.<!-- HTML: </body> 바로 위에 추가 --> <button id="scrollTopBtn" aria-label="맨 위로">↑</button> <!-- CSS: <style> 안에 추가 --> <style> #scrollTopBtn { position: fixed; bottom: 24px; right: 24px; width: 48px; height: 48px; border-radius: 50%; background: #4f46e5; color: #fff; border: none; font-size: 1.2rem; cursor: pointer; box-shadow: 0 4px 16px rgba(79,70,229,.4); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s, transform .2s; z-index: 9999; } #scrollTopBtn.show { opacity: 1; visibility: visible; } #scrollTopBtn:hover { transform: scale(1.1) translateY(-2px); } </style> <!-- JS: </body> 바로 위에 추가 --> <script> const btn = document.getElementById('scrollTopBtn'); window.addEventListener('scroll', () => { btn.classList.toggle('show', window.scrollY > 200); }); btn.addEventListener('click', () => { window.scrollTo({ top: 0, behavior: 'smooth' }); }); </script>
AI에게 이렇게 물어보세요 👇
"내 HTML 페이지에 스크롤하면 나타나는 '맨 위로 가기' 플로팅 버튼을 추가해줘. - 인디고 색상 원형 버튼 - 스크롤 200px 이상이면 나타나고, 위로면 사라짐 - 클릭하면 부드럽게 맨 위로 스크롤 - 모바일에서는 오른쪽 하단, 기존 footer와 겹치지 않도록"
위치, 색상, 스크롤 기준값(200px)을 구체적으로 말해주면 훨씬 정확한 코드가 나와요!
갤러리에서 유형을 선택하거나, 아래 옵션으로 버튼을 커스터마이즈해보세요
플로팅 버튼 구현 시 가장 많이 헷갈리는 것들
스크롤 위치에 따라 동적으로 버튼을 보이고 숨기려면 JavaScript가 필요해요. window.scrollY로 현재 스크롤 위치를 감지하고, 기준값(예: 200px)을 넘으면 클래스를 추가해 버튼을 보이게 하는 방식이에요.
반면, 항상 표시되는 플로팅 버튼(스크롤 감지 없이)은 position: fixed CSS만으로도 만들 수 있어요. 카카오톡 상담 버튼, SNS 링크처럼 페이지 어디서든 항상 보여야 하는 버튼에 적합해요.
초보자라면 먼저 JS 없이 항상 표시되는 버튼으로 시작하고, 익숙해지면 스크롤 감지 기능을 추가하는 순서를 추천해요. 이 페이지 ④ 만들어보기 에디터의 코드를 그대로 복붙하면 JS까지 한 번에 적용돼요.
iOS Safari는 화면 아래쪽에 홈 인디케이터(홈 바) 영역이 있어요. 이 영역을 고려해 bottom 값에 env(safe-area-inset-bottom)을 더해주면 겹치지 않아요.
bottom: calc(24px + env(safe-area-inset-bottom));
Android Chrome은 기기마다 하단 UI 높이가 달라요. 보통 bottom: 72px 정도로 넉넉히 주면 대부분의 기기에서 안전해요. 사이트 하단에 자체 네비게이션 바가 있다면 그 높이만큼 추가로 더해주세요.
가장 확실한 방법은 실제 기기에서 직접 테스트하는 거예요. Chrome DevTools 모바일 에뮬레이터보다 실기기 확인이 훨씬 정확해요.
z-index가 낮거나, 부모 요소에 position: relative와 낮은 z-index가 함께 설정되어 있으면 플로팅 버튼이 다른 요소에 가려질 수 있어요.
가장 확실한 해결책은 플로팅 버튼을 <body>의 직접 자식으로 배치하는 거예요. 다른 컨테이너 안에 넣지 말고 </body> 바로 위에 두세요.
z-index: 9999를 지정해주세요. 모달 팝업은 보통 z-index 1000~5000 수준이라, 9999면 거의 모든 요소 위에 표시돼요. 그래도 안 된다면 z-index: 99999로 올려보세요.
Chrome DevTools에서 해당 버튼 요소를 선택하고 Computed 탭에서 실제로 적용된 z-index 값을 확인하면 원인을 빠르게 찾을 수 있어요.
아이콘만 있는 버튼(↑, 💬 등)은 스크린 리더가 "버튼"이라고만 읽어서, 시각 장애가 있는 사용자는 이 버튼이 무엇인지 알 수 없어요. 반드시 aria-label 속성을 추가해주세요.
<button aria-label="맨 위로 이동">↑</button>
키보드로 사이트를 탐색하는 사용자를 위해 :focus-visible 스타일도 지정해주세요. outline: none만 쓰면 키보드 접근성이 사라지기 때문에, 포커스 시 테두리가 보이도록 꼭 별도 스타일을 적용해야 해요.
버튼이 스크롤에 따라 나타나고 사라질 때 aria-hidden="true"/"false"를 함께 토글하면, 숨겨진 상태일 때 스크린 리더가 버튼을 읽지 않아요. 작은 배려지만 사용자 경험에 큰 차이를 만들어줘요.
Google 애드센스 정책상 광고 유닛 위에 다른 요소가 겹쳐 의도치 않은 클릭을 유발하면 정책 위반으로 계정이 정지될 수 있어요. 플로팅 버튼 위치를 신중하게 잡아야 해요.
가장 흔한 충돌 위치는 우측 하단이에요. 이 위치에 사각형 광고 유닛을 배치하면 플로팅 버튼과 겹칠 수 있어요. 광고는 콘텐츠 중간이나 상단에 배치하고, 플로팅 버튼 주변 100px 이내에는 광고를 두지 않는 게 안전해요.
플로팅 버튼을 왼쪽 하단(left: 24px; bottom: 24px)으로 옮기는 것도 좋은 방법이에요. 대부분의 사이트가 우측 하단을 사용하기 때문에, 왼쪽이 오히려 더 눈에 잘 띄는 경우도 있어요.
PC와 모바일 화면 크기별로 실제 렌더링에서 광고와 버튼이 겹치는지 반드시 테스트해보세요. Chrome DevTools의 반응형 모드에서 확인할 수 있어요.
카카오톡 채널(구 카카오 플러스친구)은 카카오 비즈니스에서 무료로 개설할 수 있어요. 사업자 등록증 없이 개인도 만들 수 있고, 개설 후 즉시 채널 링크가 발급돼요.
링크 형식: https://pf.kakao.com/_채널ID/chat
이 링크를 플로팅 버튼의 href 속성에 넣고 target="_blank"를 추가하면, 클릭 시 카카오톡 채널 채팅창이 새 탭으로 열려요. 모바일에서는 카카오톡 앱이 직접 실행돼요.
카카오톡 채널이 없다면 href="tel:010-0000-0000"(전화 연결)이나 href="mailto:이메일주소"(메일 연결)로 대체할 수 있어요. 별도 계정 없이 바로 쓸 수 있어서 간단해요.
window.scrollTo({ top: 0, behavior: 'smooth' })를 사용하면 부드러운 스크롤이 적용돼요. 하지만 일부 구형 브라우저(Safari 구버전 등)는 behavior: 'smooth'를 지원하지 않을 수 있어요.
CSS에 html { scroll-behavior: smooth; }를 추가하면 앵커 링크(<a href="#top">) 방식에서도 부드러운 스크롤이 작동해요. JS 없이 CSS만으로도 동작해서 가장 간단한 방법이에요.
크로스 브라우저 호환성이 중요하다면 CSS와 JS를 함께 써도 돼요. CSS로 기본 동작을 정의하고, JS로 정밀하게 제어하는 방식이에요. 이 페이지 에디터의 코드는 두 방식 모두 작동하도록 작성되어 있어요.
플로팅 버튼을 마스터했다면 이 도구들도 도전해보세요