Show GN: 귀찮음이 만든 게시판 변경사항 추적기
요약
본 글은 수많은 웹사이트 게시판의 변경 사항을 자동으로 추적하는 크롬 확장 프로그램 개발 과정을 공유합니다. 작성자는 DOM 구조 분석, Shadow DOM 처리 등 기술적인 난관을 겪었으며, 이 도구가 취미 생활에 필요한 정보 습득 시간을 절약해 줄 것이라 기대하며 개발 경험과 완성본을 공개했습니다.
핵심 포인트
- 수많은 웹사이트의 변경 사항을 자동으로 추적하는 크롬 확장 프로그램 제작기입니다.
- DOM 구조 분석 및 Shadow DOM 처리 등 복잡한 웹 기술 지식이 필요했습니다.
- 웹 콘텐츠를 파악하기 위해 광고 차단기의 요소 지정 기능을 활용했습니다.
저는 오타쿠에요, 그래서 매우 바쁘게 살아야해요.
좋아하는 아티스트나 즐겨하고 있는 게임에 새로운 정보가 뜨면 전부 받아봐야해요.
다행히, 요즘에는 디스코드 피드 봇들이 많아져서 이런 것들을 하나의 디스코드 채널에 연동해두면 한 곳에서 받아볼 수 있어서 좋더라구요.
문제는 게시판이나 웹사이트들 아니면 3D 팬 애니메이션 동영상 사이트들이었어요.
게인 창작 웹게시판이나 각종 독립 게시판 사이트들.
이런데는 네이버블로그 같이 RSS를 지원해주면 그나마 어떻게 할 수 있는데
아카아이브나 그런데는 어떻게 받아와야하는지도 모르고
그래서 지금까지는 그냥 북마크에 등록해두고 매일 일일이 들어갔어요.
최애의 뉴짤이 떴나 일일이 확인하는 식으로요.
그런 사이트가 한 140개쯤 되니까 이제 취미는 노동이 되어버렸어요.
매일 게시판들을 다 돌아다니는 것만으로도 30분은 족히 써야하는 거에요.
이 시간이면 애니를 한 편 더 보거니 미연시를 조금 진행할 수 있는 소중한 시간인데, 이대로 매일 낭비하고 싶진 않았어요.
그래서 웹사이트의 변경을 자동으로 추적해주는 크롬 확장프로그램을 만들었어요.
만드는 건 쉽지 않았어요.
어디부터 어디까지가 글인지를 파악해야 했거든요.
다행히 저는 평소에 광고 차단 프로그램을 쓰는데, 광고 차단 프로그램에는 특정 요소를 DOM구조로 지정해서 차단할 수 있는 기능이 있어요.
이걸 이용하면 게시글이 올라오는 영역을 DOM구조로 파악만 할 수 있다면 될 거라고 생각했어요.
여기서 두번째 난관이 있었어요. DOM 선택자가 너무 길어지고 정교해져서, 새 글이 올라와도 아예 기존의 DOM 구조랑 주소 체계가 달라져버린 거죠.
긴 DOM 중에서 의미가 있는 부분과 의미가 없는 부분을 명확히 구별할 능력이 필요했어요.
그 외에도 Shadow DOM이라던가 CSS에서 쓰이는 스타일 이름을 잘못 인식하는 등 수많은 문제가 있었고 고치느라 아주그냥 진땀을 뺐어요
무려 며칠에 걸친 삽질 끝에 완성본으로 내놨어요.
만들고 보니, 굳이 오타쿠가 아니어도 수백개의 웹사이트의 변경 추적을 받아봐야할 사람이 저 말고도 긱늇에도 많을 것 같아서 공유합니다.
현재 크롬 웹 스토어에도 배포 신청을 걸어놨는데 어떻게 될진 모르겠어요. 나름 챗gpt시켜서 납득가능한 근거를 잘 부탁해보긴 했는데(?)
뭐 안 되면 개발자모드로 쓰면 되죠!
많은 Star과 피드백 부탁드립니다.
AI 자동 생성 콘텐츠
본 콘텐츠는 GeekNews의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기