최근 'Annotate.js'라는 MIT 라이선스의 오픈소스 자바스크립트 플러그인이 공개되어 웹 개발 및 디자인 리뷰 방식에 새로운 가능성을 제시하고 있습니다. 이 도구는 단 하나의 `<script>` 태그를 웹사이트에 추가하는 것만으로 라이브 웹페이지를 피그마(Figma) 스타일의 협업 리뷰 보드로 변환시켜 줍니다. 사용자들은 특정 텍스트를 하이라이트하거나, 영역을 그리거나, 특정 지점에 핀을 고정하고 댓글을 달 수 있으며, 이 모든 피드백은 브라우저에 로컬로 저장된 후 JSON 파일로 내보내져 원본 작성자와 공유할 수 있습니다.
Annotate.js는 백엔드 서버나 데이터베이스가 필요 없다는 점이 가장 큰 특징입니다. 모든 주석 데이터는 리뷰어의 브라우저 로컬 스토리지(localStorage)에 저장되며, 이를 JSON 파일로 내보내 이메일, 슬랙(Slack), 클라우드 스토리지 등을 통해 공유하는 방식입니다. 이 파일은 페이지 소유자가 다시 해당 페이지에서 불러와 모든 피드백을 원래 위치에 정확히 재현할 수 있습니다. 특히, 텍스트 주석의 경우 원본 텍스트와 주변 맥락을 함께 저장하여 페이지 내용이 수정되더라도 주석이 유효하게 유지되는 '스마트 재앵커링(smart re-anchoring)' 기능을 제공하여 피드백의 유효성을 높였습니다. 약 40KB의 가벼운 바닐라 자바스크립트로 구현되어 리액트(React), 뷰(Vue), 워드프레스(WordPress), 쇼피파이(Shopify) 등 다양한 환경에서 작동합니다.
이러한 접근 방식은 기존의 유료 SaaS 기반 시각적 피드백 도구들과 차별화됩니다. 버그허드(BugHerd), 마커아이오(Marker.io)와 같은 서비스들은 리뷰어가 로그인하고 확장 프로그램을 설치해야 하며, 피드백 데이터가 벤더 클라우드에 저장되는 반면, Annotate.js는 완전한 로컬 우선(local-first) 방식으로 개인 정보 보호와 데이터 소유권을 강조합니다. 이는 실시간 협업이나 지라(Jira)/아사나(Asana) 연동 같은 클라우드 기반 기능은 제공하지 않지만, 가볍고 사적인 피드백 레이어를 선호하는 팀이나 개인에게 매력적인 대안이 될 수 있습니다. 특히 디자인 QA, 콘텐츠 검토, 웹사이트 버그 보고 등 '이것, 바로 여기'라고 지적해야 하는 다양한 상황에서 유용하게 활용될 것으로 기대됩니다.