Glot - 구글 번역기를 나만의 스마트 단어장으로

Glot은 구글 번역기와 직접 연동되어 언어 학습 효율을 극대화해주는 크롬 확장 프로그램입니다. 번역한 단어나 문장을 즉시 저장하고, 스마트한 간격 반복 시스템(SRS)을 통해 완벽하게 암기할 수 있도록 도와줍니다.

주요 기능 (Key Features)

• 원클릭 저장 (One-Click Save): 구글 번역기 화면에 "Glot Save" 버튼이 생성되어, 번역 결과를 즉시 저장할 수 있습니다.
• 스마트 SRS 알고리즘: 에빙하우스의 망각 곡선 이론을 적용하여, 최적의 타이밍에 복습 알림을 제공합니다.
• 인터랙티브 대시보드: 일일 학습 현황, 연속 학습일(Streak), 복습이 필요한 단어 수를 한눈에 확인할 수 있습니다.
• 플래시카드 학습 모드: 3D 카드 뒤집기 애니메이션과 함께 "암기함(Remember)" vs "잊음(Forgot)" 버튼으로 효율적인 복습이 가능합니다.
• Excel 내보내기 (Export): 저장된 단어 목록을 엑셀(.xlsx) 파일로 내보내어 자유롭게 활용할 수 있습니다.
• 단어장 관리 (Manage):
  • 수정/삭제: 저장된 단어의 뜻을 수정하거나 불필요한 단어를 삭제할 수 있습니다.
  • 필터링: '전체(All)', '복습 필요(To Review)', '학습 완료(Learned)' 탭으로 단어를 분류하여 볼 수 있습니다.
  • 초기화 (Reset): 모든 데이터를 삭제하고 처음부터 다시 시작할 수 있는 초기화 기능이 제공됩니다.

설치 방법 (Installation)

1. 저장소 클론 (Clone the repository)

   git clone <repository-url>
   cd Glot

2. 의존성 패키지 설치 (Install Dependencies)

   npm install

3. 개발 모드로 빌드/실행 (Build/Run in Development Mode)

   npm run dev

4. 크롬에 확장 프로그램 로드 (Load into Chrome)

   • 크롬 브라우저를 열고 chrome://extensions/ 주소로 이동합니다.
   • 우측 상단의 **개발자 모드 (Developer mode)**를 켭니다.
   • 압축 해제된 확장 프로그램을 로드합니다 (Load unpacked) 버튼을 클릭합니다.
   • 프로젝트 폴더 내의 dist 폴더를 선택합니다.
   • 구글 번역기(Google Translate)로 이동하여 학습을 시작하세요!

기술 스택 (Tech Stack)

• 프레임워크: React + TypeScript
• 빌드 도구: Vite
• 확장 프로그램 번들러: CRXJS Vite Plugin
• 스타일링: Pure CSS (커스텀 대시보드 및 플래시카드 UI)

사용 방법 (Usage)

1. 단어 저장하기:

   • 구글 번역기 웹사이트에 접속합니다.
   • 원하는 텍스트를 번역합니다.
   • 하단(기록/저장 버튼 옆)에 생성된 파란색 Glot Save 버튼을 클릭합니다.

2. 복습하기:

   • 크롬 툴바에서 Glot 아이콘을 클릭하여 팝업을 엽니다.
   • "Ready for review" (복습 대기) 숫자를 확인합니다.
   • Start Glot 버튼을 눌러 플래시카드 학습을 시작합니다.

3. 단어 관리 및 내보내기:

   • 수정/삭제: 단어 카드 우측의 연필(✏️) 아이콘으로 내용을 수정하거나 휴지통(🗑️) 아이콘으로 삭제할 수 있습니다.
   • 엑셀 내보내기: 상단의 Export (📥) 버튼을 눌러 단어 목록을 엑셀 파일로 다운로드합니다.
   • 데이터 초기화: 상단의 Reset (⚠️) 버튼을 눌러 저장된 모든 단어를 삭제할 수 있습니다. (주의: 복구 불가능)

4. 연속 학습 (Streak):

   • 매일 최소 하나의 단어를 복습하여 Streak(연속 학습일) 불꽃을 유지하세요!

프로젝트 구조 (Project Structure)

• src/content: 구글 번역기 페이지에 삽입되는 스크립트 (버튼 UI 및 데이터 스크래핑)
• src/popup: 확장 프로그램 팝업 React 앱 (대시보드, 학습 모드, 단어 목록)

Privacy Policy

Glot은 사용자의 개인정보 보호를 최우선으로 합니다.

데이터 수집 및 사용

• 사용자가 저장한 단어, 뜻, 예문은 사용자의 Chrome Storage에만 저장됩니다
• 서버로 전송되지 않습니다
• 제3자와 공유하지 않습니다
• src/background: 백그라운드 서비스 워커 (알람, 뱃지 업데이트)
• src/utils: 유틸리티 함수 (SRS 알고리즘, 스토리지 관리)