<aside> ⏰

HR 웹사이트에 자동 로그인 기능을 제공하는 Chrome Extension입니다. 팀원들의 출퇴근 기록 누락을 방지하기 위해 개인별 설정 시간에 자동으로 알림이 발생하고, 클릭 시 출퇴근 기록 페이지로 바로 이동합니다. 현재 프로덕트팀 23명이 사용 중입니다.

</aside>

프로젝트 개요

HR 웹사이트에 매일 로그인하는 것이 번거롭고, 팀원들이 출퇴근 기록을 누락하는 경우가 종종 있었습니다. 이 문제를 해결하기 위해 자동 로그인과 출퇴근 알림 기능을 갖춘 Chrome Extension을 개발했습니다.

기술 선택과 이유

React + webpack 선택

문제:

설정 UI(출근 시각, 퇴근 시각, 알림 활성화)와 상태 관리가 복잡합니다. Vanilla JS로 구현하면 DOM 조작과 상태 동기화 코드가 길어집니다.

고려한 옵션:

선택 이유:

React를 선택하면 컴포넌트 기반으로 UI를 구조화할 수 있고 상태 관리가 간편합니다. React 앱을 Chrome Extension으로 변환하기 위해 webpack으로 entry point를 popup, content, background로 분리했습니다.

// webpack.config.js
entry: {
  popup: path.join(__dirname, "src/popup.tsx"),      // 설정 UI
  content: path.join(__dirname, "src/content.ts"),    // 웹페이지 주입
  background: path.join(__dirname, "src/background.ts"), // 알림 관리
}

React 개발 생산성을 유지하면서 Chrome Extension 배포가 가능해졌습니다.

chrome.alarms API 선택

문제:

출퇴근 알림을 정확한 시간에 발생시켜야 합니다. setTimeout은 브라우저가 닫히면 동작하지 않고, Service Worker도 일정 시간 후 종료됩니다.

고려한 옵션: