Show GN: 집중 향상용으로 문장 단위 하이라이트 효과를 주는 크롬 확장 프로그램을 개발했습니다.

(github.com/hamsteak1488)

웹페이지 읽기 편하도록 문장 단위 하이라이트, 자동 스크롤을 해주는 크롬 확장 프로그램을 개발했습니다. 시연 이미지는 GitHub에 있습니다.

[Features]

문장 단위 하이라이트
- 밑줄, 윤곽선, 형광펜, 스포트라이트 등 다양한 효과.
- 마우스 클릭으로 원하는 문장 포커스 가능.
- 키보드 화살표로 이전 문장, 다음 문장으로 포커스 이동 가능.
자동 스크롤
- 포커스된 문장으로 자동 스크롤 이동.
- 중첩 스크롤 컨테이너에서도 정확하게 동작.
- 스크롤 후 문장이 화면 내 놓이게 할 높이를 사용자가 설정 가능.
범용성
- Google, GitHub, ChatGPT, Notion, Youtube, GeekNews, HackerNews, BOJ, Naver, LinkedIn, Tistory, Velog, SamsungSDS 등 다양한 환경에서 잘 동작하는 모습 확인.
- 현재까지 실시간으로 DOM 트리가 변하는 경우를 제외한 모든 웹페이지에서 동작 성공.

[개발 배경]

면접 준비를 하면서 기업 관련 뉴스를 많이 읽어야 했는데 간혹 집중이 산만해져 읽기 속도가 아주 느려질 때가 있었습니다. 어떻게든 집중력을 유지하려고 마우스로 한 문장 읽을 때마다 첫 번째 글자를 드래그해 가며 읽고 있는 문장이 어딘지 계속 표시했습니다.

하지만 문장을 읽을 때마다 매번 마우스를 조작해야 하니 손목이 아팠습니다. 또한 책상에 발을 올리고 의자를 뒤로 젖힌 편한 자세로는 마우스를 정확하게 움직이는 것이 매우 어려웠습니다.

문장 단위로 읽고 있는 위치를 표시할 수 있는 크롬 확장프로그램을 검색해 보았지만, 인기 항목 중에는 그런 것이 없었습니다. 웹스토어를 계속 뒤지다 보니 딱 두 개 찾아내긴 했지만, 많은 웹페이지에서 동작이 되지 않았고, 웹페이지를 변형시켰고, 문장 단위 구분이 정확하지 않았으며, 하이라이트 스타일을 원하는 대로 조정할 수 없다는 점이 마음에 들지 않았습니다.

그래서 혼자 써볼 심산으로 직접 만들어보기 시작했는데, 이후로 개선을 이어오다 보니 꽤 괜찮은 결과물이 나왔고, 누군가 유용하게 쓸 수 있지 않을까 하여 웹스토어에까지 올려봤습니다.

[개발 과정]

핵심인 문장 분리 로직에는 DOM 트리를 전위순회하며 텍스트 조각들로부터 문장의 시작과 끝 위치를 찾아두는 방식을 적용했습니다. “대충 온점이랑 물음표로 문장 사이 구분만 하면 끝나겠지?”라고 안일하게 생각했지만 <a>, <span> 등의 태그가 문장 사이에 끼어있으면 하나의 텍스트 노드에 문장 전체가 담기지 않아 알고리즘을 꽤 복잡하게 구성해야 했습니다.

자동 스크롤 기능은 원래 계획에 없었는데, 문장 분리 로직을 완성하고 나니 이번엔 스크롤을 내리기 위해 또다시 마우스를 잡아야 한다는 사실을 깨달으면서 구현을 시작했습니다. 자동 스크롤 기능은 대충 scrollTo 메서드 가져다 쓰면 바로 되겠거니 했는데 ChatGPT를 포함한 여러 웹페이지에서 단순 scrollTo만으로는 동작하지 않는 경우가 꽤 많았습니다. 또한 scrollTo는 문장이 아닌 노드가 단위로 사용되기 때문에, 하나의 텍스트 노드 내에 여러 문장이 있을 경우 다음 문장으로 포커스를 이동해도 스크롤이 움직이지 않는 문제를 해결해야 했습니다.

[피드백 구걸]

이런 구걸이 적절치 않다는 것을 알지만, 혹시 흥미가 생겨 한 번 써보셨다면 피드백 좀 부탁드리겠습니다. 지금까지 여러 곳에 홍보를 해온 덕인지 사용자 수는 조금씩 늘고 있지만 아직까지 리뷰를 남긴 사람은 단 한 명도 없습니다.

무플이 악플보다 무섭단 것을 몸소 느끼고 있는 저에게 비평, 개선 방안, 버그 제보, 그 외 아주 사소한 것이라도 괜찮으니 의견을 남겨주신다면 정말 감사드리겠습니다.

GitHub: https://github.com/hamsteak1488/focus-anchor

Chrome Webstore: https://chromewebstore.google.com/detail/focus-anchor/…