Bionic-Reading NPM module

Introduce

Bionic-Reading이란 가독성을 향상시키는 기법 중 하나로, Fixation Point와 Saccade 라는 것을 이용해 단어의 일부분에 Highlight 하는 방식이다.

https://tinyurl.com/yckchzky

차이점이 느껴지는가?

며칠 전 나는 HN에서 이에 대한 게시글을 보고 NPM 모듈로도 제공되면 좋을 것이라 생각했었고, 기존의 몇몇 패키지들이 이를 제대로 지원하지 못하고 있다는 판단이 들자마자 바로 작업을 시작했다.

Text-Vide

GitHub

NPM

Sandbox

Runkit (NodeJS Sandbox)

그것이 바로 Text-Vide.

참고로 이름은 특허 이슈로 인해 Bionic-Reading에서 Text-Vide 라는 이름으로 한 차례 변경된 것이다.

홍보는 레딧과 해커뉴스를 이용했다.

레딧 글

해커뉴스 글

해커뉴스에서는 딱히 좋은 반응을 이끌어내지 못했으나… 레딧에서는 의외로 반응이 많아서 놀랐다. 피드백도 적잖이 들어와서 한동안 번역기와 그래머리의 도움이 많이 필요했었다.

개발 관련

이전에 잠깐 배워뒀던 Turborepo를 이용해 모노리포(Monorepo)로 프로젝트를 구성해 진행해봤다. Yarn2 Workspaces나 Lerna 때와는 달리 프로젝트 구성이 매우 간결해 좋았다. 덕분에 빠르게 프로젝트를 시작할 수 있었다. (모노리포가 무엇인지 궁금하다면 이 링크 참고)

Standard-Version 패키지를 이용해 버전 및 변경 사항 문서를 관리했기에 이쪽에 크게 신경쓰지 않아도 됐었다. 정말 편했다.

이슈

`actions/cache@v3` Caching Issue

fix: fix actions/cache key

원래는 아래와 같이 actions/cache Step을 구성했었다.


- uses: actions/cache@v3
  id: pnpm-cache
  with:
    path: node_modules
    key: # ...
    restore-keys: # ...

그런데 실제로 action을 돌려보니 failed가 발생되는 것 아닌가?

잠시 현재 프로젝트의 구조를 보자면… 아래와 같다.


.
└── node_modules/
└── packages/
    ├── utils/
    │   └── node_modules/
    ├── tsconfig/
    │   └── node_modules/
    └── text-vide/
        └── node_modules/


flowchart LR
	package/tsconfig --> TV[package/text-vide]
  package/utils --> TV
	TV --> NPM{{"Deploying package to NPM"}}

여기서 package/tsconfig 패키지가 설치되어 있지 않았다는 말.

생각해보니 root의 node_modules 디렉터리만 path만 포함했을 뿐, 하위의 node_modules 는 전혀 생각하지 못하고 있었다. 그래서 아래와 같이 수정해주었고… 지금은 잘 동작한다.


- uses: actions/cache@v3
  id: pnpm-cache
  with:
    # path: node_modules <-- 이게 문제
    path: |
			**/node_modules
    key: # ...
    restore-keys: # ...

모노리포 프로젝트를 처음 진행해봐서 생겼던 이슈라고 생각된다.

Bionic-Reading Legal Issue

Bionic Reading® Legal Stuff

Updated Jun 4, 2022

chore: rename package bionic-reading to text-vide (#31)

Bionic-Reading 이라는 이름은 사실 특허가 이미 등록되어 있었다. 물론 이를 사전에 인지하고는 있었으나… 너무 안이하게 있었던 것 같았다.

저런 메일이 특정 사용자에게 전달되었다는 것을 이슈를 통해 전달받게 되었고, 나를 포함한 대부분의 오픈소스 프로젝트들이 Bionic-Reading 이라는 이름을 자신의 프로젝트에서 제거했다.

NPM 다운로드 숫자가 아쉬웠지만 만에 하나라도 법적인 문제에 휘말리고 싶지는 않아 바로 이름을 바꾸어줬다.

Inefficient Algorithms

Feature/26 (#30)

기존에는 Bionic-Reading API를 완벽하게 구현하기 위해 조금 많이 비효율적인 알고리즘을 채택했었다.

한 번에 RegExp로 나누지 않고 들어온 텍스트를 일일이 단어로 분리한 다음, 분리된 모든 단어에 대해 일일이 Regexing을 수행하는… 듣기만 해도 정말 비효율적인 알고리즘이었다.

이후… 피드백을 받다보니 굳이 그럴 필요가 없었다는 생각이 들었고, 한 번에 Regexing을 수행하도록 로직을 좀 바꿨다. 덕분에 작성해뒀던 “How was this made” 문서를 좀 수정해줘야 하긴 했지만 결과적으로 더 나은 방식이 된 것이라 생각한다. 번들 크기도 줄어들었고.

그 외

첫 해외 홍보

오픈소스 프로젝트를 많이 한 것은 아니지만… 영어라는 장벽으로 인해서일까? 어쩌다보니 지금까지는 국내만을 타깃으로 프로젝트를 진행했었다. 홍보도 국내를 대상으로만 수행했었고.

그래서 이번엔 해외를 타깃으로 프로젝트와 홍보를 진행해봤다. 역시 사람이 더 많아서일까 그만큼 바이럴이 더 일었던 것 같다. 피드백도 많았고. 영어는 뭐… 번역기와 그래머리로도 충분히 커버가 가능한 것 같다. 계속 해외를 타깃으로 홍보를 해봐야겠다.

(소중한) 부정적 피드백들

프로젝트 구조가 너무 복잡하다는 피드백이 있었다. 충분히 쉽게 구현할 수 있는데 멀리 돌아가기에 다른 사람이 프로젝트에 기여할 수 없다는 댓글. 아마 모노리포 구조로 인해 그럴 것이라 생각한다. 이는 다음 홍보 전 CONTRIBUTING 문서를 하나 작성해서라도 해결해야 할 것 같다.

Bionic-Reading의 효용을 느끼지 못하겠다는 댓글도 있었다. 물론 이건 내가 만든게 아니라서… 한계가 있다는 답변을 해주긴 했는데 이에 대한 답을 일일이 홍보 시마다 해주기가 어렵기에 README 한 켠에 적어둬야겠다는 생각이 들었다.

Bionic-Reading과 유사한 기법들

나는 이번에 Bionic-Reading과 같은 기법으로 가독성을 향상시킬 수 있다는 것을 처음 알았다. 그 전 까지는 단순히 문장의 구조나 문단을 언제 나누는지와 같은 방식을 이용해야 한다고만 생각했는데, 전혀 다른 기법이 있었던 것이다.

다만 이런게 Bionic-Reading이 첫 번째는 아니라고 한다. 아래 관련 링크를 남긴다.

BeeLine Reader

Ehri, L.C. (2014). Orthographic Mapping in the Acquisition of Sight Word Reading, Spelling Memory, and Vocabulary Learning. Scientific Studies of Reading, 18, 21 - 5.

Rayner, K., Schotter, E. R., Masson, M. E. J., Potter, M. C., & Treiman, R. (2016). So Much to Read, So Little Time: How Do We Read, and Can Speed Reading Help? Psychological Science in the Public Interest, 17(1), 4–34.

타이포그래피… 디자인의 세계는 정말 신기한 것 같다.