맨 위로 스크롤 버튼

페이지 맨 위로 돌아가기 위해 끝없이 스크롤하는 것에 지치셨나요? Scroll to Top Button은 모든 웹사이트에 세련된 플로팅 버튼을 추가합니다. 한 번만 탭하면 부드러운 스크롤 애니메이션과 함께 페이지 맨 위로 돌아갈 수 있습니다. 가볍고, 개인정보를 보호하며, 사용자가 완벽하게 제어할 수 있습니다.

✨ 주요 기능

⬆️ 플로팅 맨 위로 스크롤 버튼 — 아래로 스크롤하면 쉐브론 아이콘이 있는 깔끔한 원형 버튼이 나타납니다. 클릭하면 페이지 맨 위로 부드럽게 스크롤됩니다. 간단하고, 빠르며, 효과적입니다.

🎯 사이트별 활성화/비활성화 — 이 버튼은 기본적으로 모든 사이트에서 비활성화되어 있습니다. 사용자가 버튼이 나타날 위치를 직접 선택합니다. 팝업을 열고 현재 사이트의 토글을 클릭하면 됩니다. 필요 없는 사이트에서는 화면을 깔끔하게 유지할 수 있습니다.

📐 9개 위치 배치 그리드 — 시각적인 3x3 그리드를 사용하여 화면 어디에나 버튼을 배치할 수 있습니다: 상단, 중앙, 하단과 왼쪽, 중앙, 오른쪽을 조합하여 총 9개의 위치가 가능합니다. 각 페이지 레이아웃에 가장 적합한 위치를 선택하세요.

📌 사이트별 위치 기억 — 사이트마다 레이아웃이 다릅니다. 한 사이트에서는 버튼을 오른쪽 하단에, 다른 사이트에서는 왼쪽 상단에 설정할 수 있습니다. Scroll to Top Button은 각 사이트의 버튼 위치를 개별적으로 기억하므로 사용자의 설정이 항상 유지됩니다.

🛡️ Shadow DOM 격리 — 버튼은 호스트 페이지의 CSS와 완벽하게 격리된 Shadow DOM 컨테이너 안에서 실행됩니다. 이는 스타일 충돌이 전혀 없음을 의미합니다. 페이지 스타일이 아무리 복잡하더라도 모든 웹사이트에서 버튼이 완벽하게 보이고 작동합니다.

🌙 다크 모드 지원 — 시스템의 색상 구성표에 자동으로 적응합니다. 라이트 모드에서는 밝은 배경, 다크 모드에서는 반투명 유리 효과가 적용됩니다. 또한 많은 웹사이트에서 수동 다크 모드 전환에 사용하는 html[dark] 속성도 감지합니다.

🌍 55개 언어 지원 — 확장 프로그램 팝업과 모든 인터페이스 텍스트는 한국어, 영어, 스페인어, 프랑스어, 독일어, 일본어, 중국어(간체 및 번체), 아랍어, 힌디어, 러시아어, 포르투갈어 등을 포함한 55개 언어로 완벽하게 현지화되었습니다.

♿ 키보드 접근성 — 맨 위로 스크롤 버튼은 키보드 탐색을 지원합니다. Tab 키로 포커스를 이동하고, Enter 또는 스페이스바를 눌러 활성화할 수 있습니다. 스크린 리더를 위한 적절한 ARIA 역할과 레이블을 포함합니다.

🎯 작동 방식

1. 설치 — 'Chrome에 추가'를 클릭하면 확장 프로그램이 준비됩니다. 계정, 회원가입, 설정 마법사가 필요 없습니다.

2. 원하는 웹사이트 방문 — 맨 위로 스크롤 버튼을 표시하고 싶은 페이지로 이동합니다.

3. 사이트 활성화 — 툴바에서 Scroll to Top Button 아이콘을 클릭합니다. 토글을 눌러 현재 사이트에서 버튼을 활성화하세요. 플로팅 버튼이 즉시 나타납니다.

4. 위치 선택 — 팝업의 3x3 그리드를 사용하여 화면에서 원하는 위치에 정확하게 버튼을 배치하세요. 이 선택은 해당 사이트에만 저장됩니다.

5. 스크롤하고 클릭 — 페이지를 아래로 스크롤하세요. 특정 스크롤 지점을 지나면 버튼이 부드러운 애니메이션과 함께 나타납니다. 버튼을 클릭하면 맨 위로 부드럽게 이동합니다. 이게 전부입니다.

🔒 개인정보 보호 및 보안

Scroll to Top Button은 개인정보 보호를 핵심 원칙으로 삼아 제작되었습니다. 이 확장 프로그램이 수행하는 작업과 수행하지 않는 작업은 다음과 같습니다:

🚫 추적 없음 — 분석 코드, 원격 측정, 사용 통계가 전혀 없습니다. 어떠한 정보도 측정되거나 보고되지 않습니다.

🚫 데이터 수집 없음 — 사용자의 검색 기록, 활성화된 사이트 목록, 위치 설정은 절대로 브라우저를 벗어나지 않습니다. 모든 정보는 Chrome 동기화 스토리지를 통해 로컬에 저장됩니다.

🚫 외부 요청 없음 — 이 확장 프로그램은 어떠한 네트워크 요청도 하지 않습니다. 원격 서버, CDN, 타사 스크립트가 없습니다. 폰트, 아이콘, 스타일 등 모든 자산이 확장 프로그램 내에 직접 포함되어 있습니다.

🚫 광고 없음 — 광고, 스폰서 콘텐츠, 어떠한 종류의 수익 창출 활동도 없습니다.

📋 권한 설명:
• storage — 활성화된 사이트 목록과 버튼 위치 설정을 저장하는 데 사용됩니다. 이 데이터는 Chrome의 내장 동기화 기능을 통해 여러 Chrome 인스턴스 간에 동기화되지만, 외부 서버로는 절대 전송되지 않습니다.
• activeTab — 현재 탭의 호스트 이름을 감지하여 팝업에 해당 사이트의 활성화 여부를 표시하고 토글할 수 있도록 하는 데 사용됩니다. 이 권한은 페이지 콘텐츠에 대한 접근을 허용하지 않습니다.

이것이 전부입니다. 필수적이면서도 최소한의 두 가지 권한만 사용합니다.

💡 사용 사례

📰 뉴스와 기사 사이트 — Medium, 뉴스 포털, 블로그와 같은 사이트의 긴 글은 종종 많은 스크롤을 필요로 합니다. 즐겨 읽는 사이트에서 버튼을 활성화하여 내비게이션 메뉴나 헤드라인으로 즉시 돌아가세요.

🛒 쇼핑 및 이커머스 — Amazon, eBay, Etsy 및 기타 마켓플레이스의 상품 목록 페이지는 끝없이 이어질 수 있습니다. 맨 위로 스크롤 버튼을 사용하면 수동으로 스크롤하지 않고도 필터, 검색창, 카테고리 내비게이션으로 빠르게 돌아갈 수 있습니다.

📱 소셜 미디어 피드 — Reddit, Twitter/X, Hacker News 및 포럼의 무한 스크롤 피드에서 수십 개의 게시물을 스크롤한 후, 한 번의 클릭으로 맨 위로 돌아가 새로고침하거나 다른 메뉴로 이동할 수 있습니다.

📚 문서 및 참고 자료 — 내용이 긴 기술 문서, API 참조, Wikipedia 기사, 연구 논문 등에서 편리한 곳에 버튼을 배치하여 섹션 간을 효율적으로 이동하세요.

💬 포럼 및 댓글 스레드 — Stack Overflow, GitHub 이슈, 커뮤니티 포럼의 긴 토론 스레드에서 답변과 댓글을 스크롤한 후, 즉시 원래 질문이나 게시물로 돌아갈 수 있습니다.

⭐ SCROLL TO TOP BUTTON을 선택해야 하는 이유

🎛️ 옵트아웃이 아닌 옵트인 방식 — 대부분의 맨 위로 스크롤 확장 프로그램은 모든 페이지에 버튼을 삽입합니다. Scroll to Top Button은 정반대의 접근 방식을 취합니다: 기본적으로 비활성화되어 있고, 사용자가 원하는 곳에서만 활성화됩니다. 브라우저를 깔끔하게 유지할 수 있습니다.

🧩 진정한 CSS 격리 — Shadow DOM은 단순한 유행어가 아닙니다. 버튼은 닫힌 섀도우 루트 내에서 렌더링되므로, 호스트 페이지의 어떤 CSS도 버튼에 영향을 줄 수 없으며 버튼의 스타일이 외부로 유출되지도 않습니다. 이것이 올바른 엔지니어링 접근 방식이지만, 대부분의 경쟁 확장 프로그램은 이 단계를 완전히 생략합니다.

📐 유연한 위치 지정 — 일반적인 한두 개가 아닌 아홉 개의 위치를 제공합니다. 오른쪽 하단이 항상 최적의 위치는 아닙니다. 어떤 사이트에는 해당 위치에 채팅 위젯, 쿠키 배너 또는 플로팅 요소가 있기 때문입니다. 버튼을 가장 적합한 곳으로 옮기세요.

🧠 사이트별 지능형 설정 — 이 확장 프로그램은 어떤 사이트가 활성화되었는지 뿐만 아니라, 각 개별 사이트의 버튼 위치까지 기억합니다. 한 번 설정하면 더 이상 신경 쓸 필요가 없습니다.

⚡ 성능 저하 없음 — 실행 중인 백그라운드 스크립트, 지속적인 연결, 폴링 타이머가 없습니다. 콘텐츠 스크립트는 수동적인 스크롤 리스너를 사용하며, 활성화된 목록에 있는 페이지에서만 작동합니다. 사이트가 활성화되지 않은 경우, 버튼은 숨겨지고 스크립트는 사실상 휴면 상태가 됩니다.

🔄 실시간 업데이트 — 팝업에서 설정을 변경하면 페이지의 버튼이 즉시 업데이트됩니다. 탭을 새로고침할 필요가 없습니다.

📋 기술적 세부 정보

• Manifest V3 — 향상된 보안과 성능을 위해 Chrome의 최신 확장 프로그램 플랫폼을 기반으로 구축되었습니다.
• 지원 브라우저 — Google Chrome, Chromium 기반 브라우저(Edge, Brave, Opera, Vivaldi, Arc).
• 콘텐츠 스크립트 삽입 — 페이지 로드 시간에 영향을 주지 않기 위해 document_idle 시점에 실행됩니다.
• 스크롤 임계값 — 300픽셀을 스크롤한 후에 버튼이 나타나므로, 짧은 페이지에서는 표시되지 않습니다.
• 애니메이션 — translateY 전환을 사용한 부드러운 페이드인 효과. 스크롤 동작은 네이티브 smooth scroll API를 사용합니다.
• 저장소 — Chrome 동기화 저장소를 사용하여 Chrome에 로그인된 모든 기기에서 사용자의 설정이 유지됩니다.
• 빌드 단계 없음 — 순수한 바닐라 자바스크립트로 작성되었습니다. 프레임워크, 번들러, 종속성이 없습니다.
• 경량 — 55개의 모든 언어 파일과 번들된 폰트를 포함하여 전체 확장 프로그램의 크기는 500KB 미만입니다.

🚀 시작하기

'Chrome에 추가'를 클릭하여 Scroll to Top Button을 설치하세요. 미리 설정할 것은 아무것도 없습니다. 평소처럼 웹 서핑을 하세요. 버튼을 사용하고 싶은 페이지에 접속하면, 확장 프로그램 아이콘을 클릭하여 해당 사이트에서 활성화하세요. 원하는 위치를 선택하면 모든 설정이 완료됩니다. 확장 프로그램은 사용자의 선택을 기억하고, 방문할 때마다 버튼이 그 자리에 있을 것입니다.

PYROCTAL이 정성껏 만들었습니다.