웹에서도 형광펜을 쓸 수 있다면
학습연구년제를 하며 교육부 고시, 연구 보고서, 각종 웹 문서를 읽는 시간이 많아졌습니다. 종이라면 형광펜으로 밑줄을 긋고 메모를 남기겠지만, 브라우저에서는 그게 되지 않았습니다. 기존 확장프로그램들은 광고가 많거나, 로그인을 요구하거나, 정작 필요한 기능이 빠져 있었습니다.
그래서 직접 만들었습니다. Highlighter는 웹페이지 위에 컬러 하이라이트 박스를 그리고 개인 메모를 남길 수 있는 Chrome 확장프로그램입니다. 나만 볼 수 있고, 브라우저를 닫아도 유지됩니다.
이 프로젝트를 만들게 된 과정이 궁금하시다면 이전 글 — 필요가 만든 첫 코딩을 읽어보세요.
이런 분들에게 유용합니다
- 아티클이나 문서의 특정 구간을 시각적으로 북마크하고 싶을 때
- 페이지 위에 나만의 메모를 남기고 싶을 때 — 리마인더, 할 일, 참고사항 등
- 긴 문서를 읽으며 읽은 곳과 안 읽은 곳을 구분하고 싶을 때
- 여러 섹션의 정보를 비교하며 색상으로 구분하고 싶을 때
- 웹 개발이나 QA 테스트 중 특정 UI 요소를 표시하고 싶을 때
주요 기능
하이라이트 박스
그리기 모드를 켠 뒤 Ctrl을 누른 채 마우스를 드래그하면 반투명 컬러 사각형이 그려집니다. Ctrl을 누르고 있을 때만 커서가 십자 모양으로 바뀌므로, 평소에는 링크 클릭이나 텍스트 선택 등을 정상적으로 할 수 있습니다.
개인 메모
사이드바에서 각 하이라이트 박스에 메모를 작성할 수 있습니다. 리마인더, 참고사항, 할 일 등을 자유롭게 적어두면 포커스가 벗어날 때 자동으로 저장됩니다.
색상과 투명도
컬러 피커로 원하는 색상을 선택하고, 투명도 슬라이더(5%~100%)로 농도를 조절할 수 있습니다. 설정은 다음 세션에도 유지됩니다.
박스 번호와 Go to
박스는 생성 순서대로 번호가 매겨지고, 삭제하면 자동으로 재정렬됩니다. 사이드바의 "Go to" 버튼을 누르면 해당 박스 위치로 부드럽게 스크롤됩니다 — 하이라이트가 많은 긴 페이지에서 유용합니다.
자동 저장과 SPA 지원
모든 하이라이트는 URL별로 Chrome 로컬 저장소에 저장됩니다. 탭을 닫거나 브라우저를 재시작해도 같은 페이지를 다시 방문하면 그대로 남아있습니다. React, Vue, Angular 등 싱글페이지 앱에서의 페이지 이동도 감지하여 새 URL에 맞는 하이라이트를 자동으로 불러옵니다.
시작하기
사용법은 간단합니다. 세 단계면 됩니다.
- Chrome 툴바에서 Highlighter 아이콘을 클릭하여 사이드바 열기
- "Start Drawing" 클릭 (또는
Alt+D) Ctrl을 누른 채 마우스를 드래그하여 하이라이트 박스 그리기
단축키도 지원합니다. 사이드바 하단의 Shortcuts 섹션에서 기본 단축키를 원하는 키 조합으로 변경할 수 있습니다.
개인정보 보호
모든 데이터는 사용자의 기기에만 저장됩니다. Highlighter는 어떠한 정보도 수집, 전송, 공유하지 않습니다. 외부 서버와의 통신이 전혀 없으므로 안심하고 사용할 수 있습니다.