Soft Alarm Timer

소개

심플하고 귀여운 타이머 Chrome 확장 프로그램입니다.
탭을 이동해도 타이머가 유지되고, 시간이 다 되면 아이콘이 반짝이며 부드러운 벨소리가 납니다.

주요 기능

기능명	설명
⏱️ 타이머 설정	분/초 단위로 원하는 시간 설정 (0-60 순환)
▶️ 시작/정지/리셋	간단한 3버튼 컨트롤
🔄 탭 이동 유지	팝업을 닫거나 다른 탭으로 이동해도 타이머 계속 실행
🩷 완료 알림	시간이 다 되면 아이콘에 ♡ 뱃지가 파스텔 색상으로 깜빡임
🔔 알람 사운드	타이머 완료 시 부드러운 벨소리 자동 재생 (Web Audio API)

기술 스택

개발 환경

• Windows 11 Pro
• Claude Code
  • 코딩: Claude Sonnet 4.6 (thinking: medium)
  • 문서 작성: Claude Sonnet 4.6 (thinking: medium)
  • 문서 리뷰: GPT-5.3-Codex-Spark
    • effort(thinking)는 불명.
    • 'Codex에게 리뷰시켜 보자' 요청하니, codex:rescue 스킬이 자율 선택함.

프론트엔드

• HTML
• CSS (아늑하면서 심플한(cozy minimal) 디자인)
• JavaScript

Chrome Extension API

※규격: Chrome Extension Manifest V3 (MV3)

• chrome.storage.local
• chrome.alarms
• chrome.runtime
• chrome.offscreen

설치 및 사용 방법

전제 조건

• Chrome 브라우저가 설치되어 있어야 합니다.

설치

1. Chrome 브라우저에서 chrome://extensions/ 접속
2. 우측 상단 "개발자 모드" 활성화
3. "압축해제된 확장 프로그램을 로드합니다" 클릭
4. 이 프로젝트 폴더 선택

사용 방법

1. Chrome 툴바에서 확장 프로그램 아이콘 클릭
2. 분/초 입력 (화살표로 0↔60 순환 가능)
3. Start 버튼 클릭
4. 팝업 닫고 다른 작업 해도 OK
5. 시간 되면 아이콘에 ♡ 깜빡이며, 부드러운 벨소리가 남
6. 아이콘 클릭 → Restart 또는 Dismiss 선택

디자인 콘셉트

아늑하면서 심플한(cozy minimal)을 담았습니다:

• 크림색 배경 #f9f6f1
• 부드러운 파스텔 색상
• Outfit 폰트 (둥글고 현대적)
• 소문자 버튼 텍스트
• 자연스러운 float 애니메이션

동작 화면

참고사항

• chrome.alarms는 정확한 시간에 알람을 발생시킵니다.
• 브라우저를 완전히 종료하면 타이머가 유지되지 않습니다.
• 기본값은 15분으로 설정되어 있습니다.

License

MIT License