🎯 Snab

Snab은 수백 개의 탭 / 윈도우를 효율적으로 관리할 수 있는 브라우저 탭 관리 워크스페이스 시스템입니다.

업무, 연구, 취미 등 다양한 탭들을 취향대로 워크스페이스로 분리하여 관리하세요.

📥 다운로드 · 💡 기능 소개

---

✨ 주요 기능

• 🗂️ 워크스페이스: 자신만의 기준으로 탭을 그룹화하여 관리
• 🖱️ 드래그 앤 드롭: 브라우저의 탭 순서변경, 브라우저의 탭을 워크스페이스 그룹에 추가
• 📸 스냅샷: 현재 열려있는 모든 브라우저 상태를 워크스페이스로 저장
• 📄 JSON: 현재 저장한 워크스페이스 데이터들을 JSON으로 저장 / 업로드 가능
• 🌙 다크모드: 테마를 토글하여 원하는대로 테마 지정 가능
• 한/영 토글: 한국어 버전 및 영어 버전 지원

---

👨‍💻 왜 만들었나요?

"메모리 잡아먹어서 브라우저 좀 잠시 껐다 켜야하는데, 열어둔 탭들을 모두 기억할 수도 없고... > 일일이 스크린샷으로 캡쳐하거나 메모해두기도 애매하고..." 😫

이런 불편함을 해결하고자 만들었습니다! 사실 제가 쓰려고 만들었습니다. 😊

---

🚀 설치

방법 1: Chrome 웹 스토어

Snab - Tab Management

방법 2: 개발자 모드 설치

1단계: 프로젝트 다운로드

git clone https://github.com/kwgon0212/snab.git
cd snab

2단계: 의존성 설치

npm install

3단계: 빌드

npm run build

4단계: Chrome에 로드

1. Chrome 브라우저 실행
2. 주소창에 chrome://extensions/ 입력
3. 우측 상단 개발자 모드 토글 ON
4. 압축해제된 확장 프로그램을 로드합니다 클릭
5. snab/dist 폴더 선택

✅ 완료! 이제 새 탭을 열어 Snab을 사용할 수 있습니다.

🛠️ 개발자 가이드

기술 스택

📦 상세 기술 정보

Frontend

• React 19
• TypeScript
• Tailwind CSS
• Zustand

Build & Tools

• Vite 7
• CRXJS

Libraries

• @dnd-kit: 드래그 앤 드롭
• react-i18next: 다국어 지원
• driver.js: 온보딩(튜토리얼) 지원

개발 환경

# 개발 서버 시작 (HMR 지원)
npm run dev

# 프로덕션 빌드
npm run build

# 빌드 미리보기
npm run preview

---

💬 지원 및 문의

• 🐛 버그 리포트: GitHub Issues
• 💡 기능 제안: GitHub Discussions
• 📧 이메일: kwgon0102@gmail.com

---

버전 관리

v1.0.1

• 윈도우 내의 탭이 여러개일 시 스크롤 되지 않는 버그 수정
• 탭을 클릭해도 이동 및 추가되지 않는 버그 수정

v1.1.0

• 튜토리얼 추가
• i18n(영문) 추가
• 다크모드 추가

Snab으로 더 효율적인 브라우징을 경험하세요.