👀 개발자가 건강을 챙기는 방법: "EYE CARE" 익스텐션 프로젝트 (1)

1. 프로젝트 개요 📝

• 프로젝트 이름: EYE CARE
• 간략한 설명: 눈 건강을 위해 20분마다 알림을 보내주는 크롬 익스텐션
• 개발 동기 및 목표: 개발자들은 하루의 대부분을 노트북 앞에서 보내기 때문에, 눈의 휴식이 중요하지만 잊기 쉽습니다. 이 프로젝트는 라섹 수술 후 눈 건강을 지키기 위한 개인적인 필요에서 출발했습니다.

💡 바른 자세와 눈의 휴식을 챙기기 위해 EYE CARE 시스템을 개발하게 되었습니다.

 

Eye Care - Chrome 웹 스토어

 

---

2. 아이디어 출발 💡

눈 건강을 위한 작은 도우미

이 프로젝트는 1월에 받은 라섹 수술 이후 노트북 사용이 필수였던 상황에서 시작되었습니다. 의사 선생님이 "눈을 자주 깜빡이거나, 20분마다 먼 곳을 보라"라고 조언하셨지만, 스스로 기억하기 힘들었습니다.

그래서 눈 건강을 챙겨줄 알림 시스템을 만들어야겠다고 결심했습니다. 이름하여 "EYE CARE"!

"EYE CARE, I CARE!" 🧑‍⚕️

 

20분마다 알림을 보내, 눈의 휴식을 도와주는 익스텐션입니다.

 

---

3. 기술 스택 선정 이유 ⚙️

크롬 익스텐션 선택 이유

개발자들은 주로 웹 브라우저를 통해 코딩 관련 자료를 찾거나, 다양한 툴을 사용하기 때문에, 이 환경에서 눈 건강을 챙길 수 있도록 알림을 주는 방법을 고민했습니다. 그중에서도 크롬 익스텐션은 웹 브라우저와 밀접하게 연동되고, 사용자가 현재 무엇을 하고 있든 상관없이 배경에서 동작하며 알림을 보낼 수 있는 특장점이 있습니다. 이러한 이유로 크롬 익스텐션을 최적의 솔루션으로 선택했습니다.

 

또한 기존에 우테코 크루가 발표한 테코톡 덕분에 익스텐션 개발에 관심도 있었습니다.

 

---

4. 기능 구현 과정 👨‍💻

이 기획의 핵심 기능은 크게 두 가지입니다.

핵심 기능 구현

1. 20분마다 확인하여
2. 눈 휴식 알림을 띄우는 기능

일정 시간 확인 기능 구현

크롬 익스텐션이 설치되면 20분마다 알림을 보내는 타이머를 설정했습니다.

chrome.runtime.onInstalled.addListener(() => {
  chrome.alarms.create('eyeCareAlarm', {
    delayInMinutes: 20,
    periodInMinutes: 20,
  });
});

 

휴식을 위한 알림 기능 구현

이벤트가 발생할 때마다 눈의 휴식을 권장하는 메시지를 표시합니다.

chrome.alarms.onAlarm.addListener((alarm) => {
  if (alarm.name === 'eyeCareAlarm') {
    chrome.notifications.create({
      type: 'basic',
      iconUrl: chrome.runtime.getURL('icons/icon.png'),
      title: '휴식할 시간!',
      message: '눈을 위해 20초간 눈을 감거나 멀리 있는 풍경을 바라봐보세요!',
      priority: 1,
    });
  }
});

 

+) 노티할 알림 타이머 시간 재설정 기능 구현

추가적으로 20분이 아니라 조금 더 시간을 두고 싶을 수 있으니 팝업창에서 재설정도 가능하게 작업해 봤습니다! 

 

예상치 못한 문제들 😅

분명 코드도 잘 작동했고 콘솔 로그도 성공적이었지만, 알림이 표시되지 않는 문제가 있었습니다. 😵‍💫

알고 보니, 제 노트북에서 크롬 알림을 차단하고 있었던 것! 문제를 해결하고 나니 알림이 정상적으로 뜨기 시작했습니다.

 

((혹시 이 익스텐션을 설치했지만 알람이 안오신다면 확인 부탁드립니다..!! ))

---

5. 배포 및 피드백 🚀

익스텐션 출시

최초 버전은 프로토타입으로 간단하게 제작했지만, 일단 출시를 했습니다. 그리고 우테코 크루들에게 자랑했죠. 🙌

 

 

몽골인 시력이 되기 위해 모두 설치 부탁드립니다

 

 

피드백 및 개선 사항

사용하면서 몇 가지 개선할 부분을 발견했고, 더 나은 버전 2를 준비 중입니다.

특히 UI 개선과 사용자 경험을 더 높이기 위한 피드백을 받았습니다. ((많관부)) 🛠️

---

6. 마무리 및 회고 🎯

이 프로젝트는 제가 필요해서 시작한 것이었지만, 생각보다 유용하고 재밌는 경험이었습니다.

다음 버전에서는 더 많은 기능을 추가해 눈 건강을 위한 완성도를 높일 계획입니다. 😎

기대해 주세용 ~~!!!