알림 안오는게 불편해서 직접 만든 ZEP 크롬 익스텐션 개발기 (+✅ 업데이트 노트)

03.06 ver 0.2.2 update

- chrome permission 추가 
- zep 환경에서 알림이 오도록 권한을 수정했습니다. 

 

 

 

 

 

 

1. 사건의 발단 

2월 중순부터 스파르타클럽의 PM 부트캠프 (사전캠프) 를 듣고 있다. 메인 학습 공간으로 ZEP을 이용하고 있는데 UI도 너무 귀엽고 소소한 재미거리들이 많아서 잘 이용하고 있었다. 그치만 무시할 수 없는 불편한 점이 있었는데.. 바로 

채팅 알림이 오지 않는다는 것 !! 

 

ZEP에서는 이렇게 All (전체 채팅) 과 Private (같은 공간에 있는 사람들끼리 채팅) 이 나눠져있다. 팀 별 과제를 할 때 팀원들이랑 채팅으로 이야기할 때가 있는데 ZEP을 보지 않으면 팀원들의 알림을 볼 수 없었다. 듀얼 모니터로 한 쪽에 켜두지 않는 이상 팀원들이 채팅을 보냈는지 사이트에 들어가서 확인해야한다는 점이 불편했다. 

 

같은 불편함을 느꼈던 팀원 분이랑 서칭을 해봤는데 이 문제를 해결한 크롬 익스텐션이 존재했다. 그 익스텐션은 채팅이 올 때 알림음으로 채팅이 왔음을 알려주는 방식이었다. 하지만 나는.. 슬랙처럼 알림이 왔으면 좋겠다는 생각을 했다. 

 

https://coffee4m.com/%EC%8A%AC%EB%9E%99-%EC%95%8C%EB%A6%BC%EB%B4%87-%EB%A7%A4%EC%8B%9C%EA%B0%84%EB%A7%88%EB%8B%A4-%EB%B9%84%ED%8A%B8%EC%BD%94%EC%9D%B8-%EA%B0%80%EA%B2%A9-%EC%95%8C%EB%A6%BC/

 

슬랙은 알림이 오면 이렇게 앱에서 알림을 띄워준다. 굳이 슬랙 앱으로 들어가지 않더라도, 소리를 켜놓지 않더라도 배너로 알림을 확인할 수 있다는 것이 편한 점이었다. ZEP의 채팅도 이렇게 알림이 오면 좋지 않을까? 라는 생각을 하게 되었다. 아무도 만들지 않았다면 내가 만들겠다!는 마음으로 시작했다. 

 

2. 개발 과정

ZEP은 크롬 환경에서 돌아가는 일종의 웹사이트다. 따로 앱이 있는 것은 아니라서 크롬의 익스텐션으로 개발해야겠다는 생각을 했다. 일단 개발이 가능한지 여부를 확인해보려고 했다.

 

태어나서 크롬 익스텐션을 개발해본 적이 없으나 나에겐 chatGPT라는 든든한 동반자가 있다. chatGPT가 이야기해준 개발 아이디어는 간단했다.

새 메세지가 들어온다 -> DOM의 변화를 감지해서 메세지이면 파싱한다 -> 크롬 알림으로 띄운다 

 

이번에 익스텐션을 개발하면서 명확히 알게된 개념이 있는데 바로 DOM(Document Object Model) 에 대한 개념이었다. 

한 때 리액트로 개발을 해보려고 했지만 DOM이라는 개념 자체가 너무 낯설어서 번번히 실패했는데 이번에 얼핏 감을 잡은 것 같다.

 

내가 이해한 내용은 다음과 같다.

하나의 웹페이지에서 변화가 일어난다는 것은 그 때마다 코드를 새로 짠다는 것이 아니고 변화하는 부분만 코드 블럭으로 추가되고 빠지는 것과 같다. ZEP에서 A라는 사람이 채팅을 치면 새로 화면을 불러오는게 아니라 기존 화면에서 'A 채팅'이라는 블록이 추가가 되는 것이다. 만약 B라는 사람이 또 채팅을 쳤다면 A라는 사람이 친 채팅 블록 밑에 또 B 채팅 블록이 쌓이는 것이다. 이게 마치 트리의 형태로 구성이 되어있고 이것을 DOM tree라고도 한다. 매번 화면을 새로 코딩하는게 아니고 필요한 부분만 추가하고 빼는 방식인거다. 따라서, 내가 개발할 익스텐션은 이 DOM의 변화를 감지하고 그 변화가 메세지에 의한 변화인지 판단하고 메세지라면 내용을 파싱해서 알림을 전달해주는 방식이다. 

 

 

개발은 Javascript로 진행했다. Javascript는 초면이지만 그동안의 개발 짬으로 이해해보려고 노력했다. 

앞서 말했던 개발 아이디어를 코드로 구현했다. 가장 기본적인 틀은 Observer (ZEP 페이지의 변화 감지하는 역할) 가 ZEP 페이지의 변화를 감지하면 변화된 내용만 전달해준다, 안에 메세지를 DOM 태그 별로 나눠서 파싱한다. Chrome의 notification을 호출해서 메세지를 보낸다. 

 

이렇게 개발하니까 몇 가지 수정할 사항들이 생겼다. 

1. 내가 보낸 메세지도 알림을 보낸다.

2. ZEP에 접속할 때마다 어제, 엊그제 메세지도 알림을 보낸다.

 

 

2-1. 내가 보낸 메세지는 제외하고 알림보내기 

이 문제를 해결하기 위해서는 일단 내가 누군지 먼저 확인을 해야한다. 내가 만든 알림 앱은 내가 누군지 모르기 때문에 내가 누군지를 명시해야하는 작업이 필요했다. 

 

ZEP에서 공간에 접속하려면 맨처음 프로필을 만들어야한다. (내 컴퓨터만 그런건진 모르겠지만) 매번 접속할 때마다 프로필을 입력하는 창이 뜬다. 여기서 아이디어를 얻어서 맨처음 프로필에 입력하는 닉네임을 나라고 인지하도록 만들었다. 다른 컴퓨터에서는 한 번만 프로필을 입력하고 만다면... 코드를 수정해야한다. 

 

2-2. 어제, 엊그제 메세지는 제외하기 

이 문제를 해결하기 위해서는 접속한 시점 이후의 메세지만 받도록 로직을 변경했다. ZEP에 접속했을 때 이미 떠있는 메세지창의 경우 이미 본 것이라고 처리했다. 추가로 채팅을 계속 칠 때마다 계속 알림이 오지 않고 모아서 보낼 수 있도록 쿨다운도 추가했다. 

 

 

이렇게 개발한 내 익스텐션의 기능은 다음과 같다. 

1. private 탭에서 나눈 대화들을 chrome 알림으로 받을 수 있음

2. 접속 이후에 들어온 메세지들만 알림으로 받을 수 있음

3. 알림을 탭하면 ZEP 탭으로 넘어감 

4. (중요) 개인 정보는 외부로 전송되지 않음 

 

3. Chrome 에 배포하기 

1. Chrome Web Store Developer 에 가입한다 (가입비 5달러!) 

2. 만든 앱을 zip의 형태로 올린다. 

3. 각종 권한에 대한 설명을 작성한다.

4. 심사를 받는다 

5. 통과하면 앱스토어에 게시! 

 

 

4. 여담

회사 다닐 때 구내식당 슬랙 앱을 만든 것 이후로 오랜만에 실생활의 문제를 해결해보았다. 내가 불편하다고 생각한 문제들을 기술로 푸는 것은 언제나 재밌는 것 같다. 난생 처음 앱을 배포해보는건데 오랜만에 몰입할 수 있는 무언가를 찾아서 즐거웠다. 처음에 사전캠프 팀원 분들한테 슬쩍 공유드렸는데 다들 필요할 것 같다고 하셨다. 일단 배포해보고 팀원 분들이 만족하고 사용하신다면 부트캠프 수강생 분들께도 공유드려보려고 한다. 부트캠프를 진행하는 동안만이라도 업데이트도 꾸준히 해봐야지. 더 만족스러운 알림앱이 되길 바라며 

챗지피티가 코드를 짜주긴 했지만 코드가 궁금하시다면 깃허브 참고 부탁드립니다. 많관부 

https://github.com/jjimini98/zep_notifier

GitHub - jjimini98/zep_notifier

 

 

사용 시 불편사항 및 문의사항은 owen.sday.official@gmail.com 으로 언제든지 보내주세요!