EcoTrack — 지구를 위한 습관 트래커 🌍
Source: Dev.to
이는 Weekend Challenge: Earth Day Edition 에 대한 제출물입니다.
내가 만든 것
EcoTrack은 제로‑디펜던시 친환경 습관 트래커로, 일상 사람들이 작은 행동 하나씩으로도 지구에 친화적인 습관을 만들고 지속하도록 도와줍니다.
아이디어는 간단합니다: 대부분의 사람들은 더 지속 가능한 삶을 원하지만, 가볍고 마찰 없는 책임 추적 방법이 없습니다. EcoTrack은 마치 할 일 목록을 체크하는 것처럼—하지만 지구를 위한 체크리스트 🌍—쉽게 만들었습니다.
주요 기능
- 습관별 연속 기록을 포함한 일일 원터치 체크인
- 오늘의 완료 상황을 한눈에 보여주는 진행 링
- 일관성을 시각화하는 7일 주간 히트맵
- 누적 영향 대시보드 — 절감된 CO₂, 피한 플라스틱, 절약된 에너지와 물
- 선택한 시간에 브라우저 푸시 알림 리마인더
- 기본 습관 외에 사용자 정의 습관 추가
- 완전 오프라인 — 모든 데이터가
localStorage에 저장되며 계정이 필요 없음
기본 습관에는 다음이 포함됩니다: 재사용 가능한 가방 사용, 대중교통 이용, 식물성 식단 섭취, 사용하지 않는 조명 끄기, 재사용 가능한 물병 휴대.
데모
🔗 실시간 앱: EcoTrack — 에코 습관 추적기
Code
🐙 GitHub Repository: github.com/makendrang/ecotrack
전체 앱은 단일 index.html 파일에 포함되어 있습니다 — 빌드 단계 없이, 의존성 없이, 프레임워크 없이. 복제한 뒤 브라우저에서 바로 열어 보세요.
ecotrack/
├── index.html # Complete app — HTML + CSS + JS in one file
└── README.md어떻게 만들었는가
EcoTrack은 순수 바닐라 HTML, CSS, JavaScript만으로 구축되었습니다 — 의도적으로 프레임워크나 의존성을 사용하지 않았습니다. 목표는 앱을 가능한 한 가볍고 접근하기 쉽게 유지하는 것이었으며, 누구나 몇 분 안에 포크하고 수정하고 호스팅할 수 있도록 했습니다.
기술 하이라이트
- **
localStorage**가 모든 영속성을 담당합니다 — 습관, 일일 로그, 연속 기록, 알림 설정이 백엔드 없이 페이지 새로고침 후에도 유지됩니다. - Streak 알고리즘은 오늘부터 로그를 역순으로 순회하여 개별 습관 및 전체 연속 기록을 계산합니다.
- Impact 계산은 각 습관을 환경 카테고리(탄소, 플라스틱, 에너지, 물)와 매핑하고 모든 기록된 일수에 대한 누적 합계를 계산합니다.
- Web Notifications API가 알림 시스템을 처리합니다 — 앱이 권한을 요청하고, 사용자가 선택한 일일 시간에 브라우저 알림을 발생시키기 위해
setTimeout을 예약합니다. - CSS‑only 애니메이션이 진행 링(SVG
stroke-dashoffset전환)과 임팩트 바 표시를 구동합니다 — JS 애니메이션 라이브러리가 필요 없습니다.
GitHub Copilot이 어떻게 도움이 되었는가
GitHub Copilot은 촉박한 주말 기간 동안 빌드 진행을 원활하게 하는 데 핵심적인 역할을 했습니다. 구체적인 성과는 다음과 같습니다:
- 순수 영어 주석만으로 몇 초 안에 연속 계산 로직을 생성했습니다.
- 반복적인
localStorageget/set 패턴을 자동 완성하여 수동 보일러플레이트 코드를 없앴습니다. - 원하는 효과를 설명했을 때 진행 링을 위한 SVG
stroke-dashoffset애니메이션 방식을 제안했습니다. - Web Notifications API 스케줄링 로직을 작성했습니다 — “사용자가 선택한 시간에 매일 알림을 발생시키기”라고 설명하면 Copilot이
setTimeout과Notification생성자 코드를 채워 넣었습니다. - CSS 점‑그리드 배경 텍스처와 방사형 그라디언트 레이어링을 도와주었습니다.
보일러플레이트와 MDN 검색에 하루가 걸렸을 작업이 몇 시간 안에 집중적으로 완료되어 UI와 지구의 날 테마를 다듬는 데 더 많은 시간을 할애할 수 있었습니다.
상금 카테고리
✅ GitHub Copilot 최고의 활용
GitHub Copilot은 여기서 단순한 편리함을 넘어—주말 안에 이 빌드를 가능하게 만든 핵심 요소였습니다. 연속 기록 로직, 알림 스케줄링, SVG 애니메이션까지, Copilot은 프로젝트의 거의 모든 기술적 결정을 가속화했습니다. 나는 코드베이스 전반에 걸쳐 인라인 제안을 사용했고, Copilot Chat을 활용해 localStorage 데이터 모델을 한 줄도 작성하기 전에 논리화했습니다.