octxxiii

Tab Timer

웹사이트 사용 시간 관리 Chrome 확장 프로그램

Tab Timer는 사용자가 웹 브라우저에서 각 사이트에 얼마나 많은 시간을 쓰는지 확인하고 관리할 수 있도록 만든 Chrome 확장 프로그램입니다.

브라우저를 사용하다 보면 특정 사이트에 예상보다 오래 머무는 경우가 많습니다. Tab Timer는 이런 사용 패턴을 자동으로 기록하고, 도메인별 사용 시간과 세션 정보를 보여줌으로써 사용자가 자신의 웹 사용 습관을 더 명확하게 인식할 수 있도록 돕는 도구입니다.

저장소 https://github.com/octxxiii/Tab-Timer

⸻

프로젝트 소개

Tab Timer는 생산성 관리와 디지털 웰빙을 목표로 만든 브라우저 확장 프로그램입니다.

단순히 “몇 분 사용했는지”를 보여주는 수준을 넘어서, 사이트별 체류 시간, 방문 세션, 일간 사용량, 시간 제한 알림 등을 제공하는 구조로 설계했습니다.

사용자는 브라우저 툴바의 팝업 화면에서 현재 사용 현황을 바로 확인할 수 있고, 더 자세한 통계는 대시보드 화면에서 확인할 수 있습니다.

⸻

핵심 목표

Tab Timer의 목표는 다음과 같습니다.

사용자가 자신의 웹 사용 시간을 인식하고, 불필요한 시간 소모를 줄일 수 있도록 돕는 것.

특정 사이트를 차단하는 강압적인 방식보다는, 사용자가 스스로 사용 패턴을 확인하고 조절할 수 있는 도구에 가깝게 설계했습니다.

⸻

주요 기능

사이트별 사용 시간 추적

사용자가 방문한 웹사이트의 체류 시간을 자동으로 기록합니다. 도메인 단위로 사용 시간을 분류하여 어떤 사이트에 가장 많은 시간을 쓰는지 확인할 수 있습니다.

세션 기반 기록

각 방문을 하나의 세션으로 기록하여 단순 누적 시간뿐 아니라 사용 흐름을 확인할 수 있도록 했습니다. 이를 통해 하루 동안 어떤 사이트를 얼마나 자주, 얼마나 오래 사용했는지 파악할 수 있습니다.

팝업 통계 화면

브라우저 확장 프로그램 아이콘을 클릭하면 오늘의 사용 시간, 방문한 사이트 수, 세션 수 등을 간단히 확인할 수 있습니다. 복잡한 대시보드에 들어가지 않아도 핵심 정보를 바로 볼 수 있도록 구성했습니다.

시간 제한 알림

사용자가 특정 사이트에 사용할 시간을 설정하면, 제한 시간을 초과했을 때 알림을 표시합니다. 강제 차단보다는 사용자가 스스로 인지하고 조절할 수 있도록 돕는 방식입니다.

대시보드

웹 기반 대시보드를 통해 최근 사용 패턴을 더 자세히 확인할 수 있습니다. 도메인별 사용 시간, 일간 사용량, 사이트별 비중 등을 시각적으로 확인하는 구조를 목표로 했습니다.

다크 모드

장시간 브라우저를 사용하는 환경을 고려하여 다크 모드를 지원합니다. 팝업과 대시보드 모두 눈의 피로를 줄이는 방향으로 UI를 구성했습니다.

데이터 내보내기

사용 기록을 JSON 형식으로 내보낼 수 있도록 구성했습니다. 사용자가 자신의 데이터를 직접 확인하고 백업할 수 있는 구조를 고려했습니다.

⸻

기술 스택

Vanilla JavaScript
HTML5
CSS3
Chrome Extension API
Chrome Storage API
Material Design Icons
Jest
Puppeteer

⸻

구현 과정에서 중점적으로 본 부분

Tab Timer는 단순한 타이머 앱이 아니라, 브라우저 사용 흐름 안에서 자연스럽게 동작해야 하는 확장 프로그램입니다.

따라서 다음 부분을 중요하게 다뤘습니다.

현재 활성 탭 감지
도메인별 시간 기록
탭 전환 시 시간 계산
브라우저 종료 및 재시작 시 데이터 유지
Chrome Storage 기반 데이터 관리
팝업 UI의 정보 밀도 조절
사용 시간 통계의 가독성
과도한 저장 작업을 줄이기 위한 성능 고려
다크 모드 대응
데이터 내보내기 구조

⸻

아키텍처 개요

Tab Timer는 Chrome 확장 프로그램 구조를 기반으로 동작합니다.

Tab Timer ├── manifest.json # 확장 프로그램 설정 ├── background.js # 탭 감지 및 시간 추적 로직 ├── popup.html # 확장 프로그램 팝업 UI ├── popup.js # 팝업 데이터 표시 및 사용자 조작 ├── dashboard.html # 상세 통계 대시보드 ├── dashboard.js # 통계 시각화 및 데이터 처리 ├── styles/ # UI 스타일 └── tests/ # 테스트 코드

주요 구조는 다음과 같습니다.

Background Script 탭 활성화, URL 변경, 브라우저 상태 변화를 감지하고 사용 시간을 기록합니다.
Popup UI 사용자가 가장 자주 확인하는 정보를 간단하게 보여줍니다.
Dashboard 누적 데이터를 기반으로 사용 패턴을 더 자세히 확인할 수 있는 화면입니다.
Chrome Storage 사이트별 사용 시간, 세션 정보, 제한 시간 설정 등을 저장합니다.

⸻

프로젝트를 통해 다룬 기술적 주제

이 프로젝트를 진행하면서 다음과 같은 기술적 주제를 다뤘습니다.

Chrome Extension Manifest 구조
Background Script 기반 이벤트 처리
탭 활성 상태 추적
도메인 파싱 및 데이터 분류
Chrome Storage API 활용
팝업 UI와 백그라운드 로직 간 데이터 연결
브라우저 확장 프로그램의 상태 관리
사용 시간 통계 계산
JSON 데이터 내보내기
Jest/Puppeteer 기반 테스트 구성

⸻

현재 상태

Tab Timer는 웹사이트 사용 시간을 도메인 단위로 기록하고, 팝업과 대시보드를 통해 사용 현황을 확인할 수 있는 구조로 구현되어 있습니다.

현재는 개인 프로젝트 형태로 관리하고 있으며, 브라우저 확장 프로그램의 기본 구조, 시간 추적 로직, 통계 UI, 데이터 저장 방식을 실험하고 정리한 프로젝트입니다.

⸻

향후 개선 방향

통계 대시보드 개선
사이트별 목표 시간 설정 기능 강화
주간/월간 리포트 추가
Firefox 확장 프로그램 대응 검토
데이터 동기화 구조 검토
React 기반 대시보드 전환 검토
사용 패턴 기반 인사이트 기능 고도화

⸻

한 줄 소개

Tab Timer는 사용자가 웹사이트별 사용 시간을 확인하고, 자신의 브라우징 습관을 관리할 수 있도록 돕는 Chrome 확장 프로그램입니다.

Tab Timer - 웹 사이트 사용 시간 관리 확장 프로그램