TL;DR
Bionic-Reading은 Fixation Point와 Saccade를 이용해 가독성을 향상시키는 기법 중 하나이다.
Text-Vide는 Bionic-Reading API를 ESM, CommonJS, IIFE(CDN)를 통해 사용할 수 있도록 하고, 모든 언어 지원, 커스텀 Separator 지원, HTML 태그 무시 여부 지원 등의 기능을 제공한다.
Text-Vide는 레딧과 해커뉴스를 통해 해외 홍보를 시도하였고, 레딧에서 반응이 좋았다.
Bionic-Reading과 유사한 기법으로 BeeLine Reader, Orthographic Mapping, Speed Reading 등이 있다.
서론
Bionic-Reading이란 가독성을 향상시키는 기법 중 하나로, Fixation Point와 Saccade 라는 것을 이용해 단어의 일부분에 Highlight 하는 방식이다.
며칠 전 나는 HN에서 Bionic-Reading에 대한 게시글을 보고 NPM 모듈로도 제공되면 좋을 것이라 생각했었고, 기존의 몇몇 패키지들이 이를 제대로 지원하지 못하고 있다는 판단이 들자마자 바로 작업을 시작했다. 이름은 "Text-Vide".
Text-Vide
Bionic-Reading의 핵심 API인 Fixation-Points를 ESM, CommonJS, 그리고 CDN(IIFE)을 통해 사용할 수 있도록 하고 있으며, 추가로 아래의 기능을 함께 제공하고 있다:
모든 언어 지원
커스텀 Separator 지원
HTML 태그 무시 여부 지원
이슈
Bionic-Reading Legal Issues
사실 이 모듈의 처음 이름은 Bionic-Reading 이었다(NPM에 그 흔적이 남아있다). 하지만 Bionic-Reading의 저작권 문제가 있을 수 있다는 이슈를 받았고, 이를 해결하기 위해 이름을 바꾸기로 했다. 마침 이름에 대한 좋은 피드백을 받았고, 이를 토대로 "Text-Vide"라는 이름을 선택했다.
비효율적인 알고리즘
초기에는 Bionic-Reading API를 완벽하게 구현하기 위해 비효율적인 알고리즘을 사용했다.
텍스트를 단어로 분리
분리된 단어 각각에 대해 Regex를 수행해 Fixation-Point를 찾음
Fixation-Point를 찾은 단어에 대해 Highlight
이후 피드백을 통해 굳이 이렇게까지 할 필요가 없다는 것을 깨달았고, 아래와 같이 개선했다.
텍스트 전체에 대해 Regex를 수행해 Fixation-Point를 찾음
Fixation-Point를 찾은 단어에 대해 Highlight
작성했던 "How was this made" 문서를 조금 수정해야 했지만, 이렇게 개선한 것이 더 좋은 선택이었다. 번들 크기 또한 개선되었다.
그 외
첫 해외 홍보
해커뉴스와 레딧을 통해 첫 해외 홍보를 시도해봤다. 국내보다 사람이 더 많아서일까 바이럴이 더 잘 퍼졌던 느낌이 들었다. 생각보다 좋은 피드백들을 받았고, 이를 토대로 개선할 수 있었다.
다만 간혹 해외 커뮤니티의 문화를 잘 몰랐기에 조금 어설펐던 것도 있었다. 예를 들어, 댓글 내용을 잘못 이해한 것도 있었고, 정말 피드백인지 아닌지도 잘 몰랐다. 이런 부분들은 조금 더 경험을 쌓아야 할 것 같다. 그래도 정말 좋은 경험이었다. 앞으로도 해외 커뮤니티에 더 많이 참여해야겠다.
(소중한)부정적 피드백
프로젝트 구조가 너무 복잡하다는 피드백이 있었다. 충분히 쉽고 간결하게 구현할 수 있는데, 그렇지 않기에 다른 사람이 코드를 이해하기 어렵다는 것이다. 이는 아마 모노리포를 사용하면서 생긴 문제라고 생각되는데, 사실 Text-Vide는 모노리포를 이해하기 위해 만든 프로젝트이기도 해서 이런 문제가 생긴 것 같다. 이는 컨트리뷰팅 문서를 통해 개선할 수 있었다.
Bionic-Reading의 효용을 느끼지 못했다는 피드백도 있었다. 다만 내가 만든 것은 Bionic-Reading API를 구현한 것이기에, 이에 대한 답변을 주기에는 한계가 있었다. 그래도 뭐 이런 피드백을 받아서 나쁘지 않았다. 이 내용 역시 문서에 추가해 다른 사람들이 더 쉽게 이해할 수 있도록 해두었다.
Bionic-Reading과 유사한 기법들
나는 이번에 Bionic-Reading과 같은 기법으로 가독성을 향상시킬 수 있다는 것을 처음 알았다. 그 전 까지는 단순히 문장의 구조나 문단을 언제 나누는지와 같은 방식을 이용해야 한다고만 생각했는데, 완전히 새로운 시각을 얻게 되었다.
다만 이런게 Bionic-Reading이 첫 번째는 아니라고 한다. 아래 관련 링크를 남긴다.
타이포그래피... 디자인의 세계는 정말 신기한 것 같다.
마치며
이번 프로젝트는 정말 재밌었다. Bionic-Reading에 대해 알게 되었고, 이를 구현해보면서 새로운 시각을 얻을 수 있었다. 또한 해외 커뮤니티에도 참여해보면서 다른 사람들의 생각을 들을 수 있었다. 이런 경험들은 정말 소중하다고 생각한다. 앞으로도 이런 경험들을 더 많이 쌓아야겠다.