Show HN: 브라이노트(braiNOTES), 브라우저 탭에서 강의 PDF에 필기하는 기능

braiNOTES는 OneNote나 GoodNotes처럼 손으로 필기할 수 있는 오픈 소스 앱이지만, 브라우저 탭에서 작동합니다. 강의를 위해 제작되었으며, 슬라이드가 노트 옆에 열리거나 작성하는 페이지가 됩니다. 계정이나 서버가 필요 없으며, 모든 것이 브라우저에 저장됩니다.

기능 (Features)

• 필압을 지원하는 볼펜, 만년필, 마커, 연필 및 형광펜
• 빈 종이, 줄 노트, 그리드 또는 점선 용지에서의 노트 작성, 그리고 테두리가 없는 화이트보드
• PDF에 직접 필기하거나, PDF를 옆에서 읽으며 일부 내용을 노트로 잘라내기(snip)
• 사진, 도형, 텍스트, 라쏘(lasso), 지우개 및 레이저 포인터
• 원본 페이지와 벡터 잉크가 포함된 PDF 또는 PNG 형식으로 내보내기(Export)
• 노트북을 백업하거나 공유하기 위한 .brainotes 파일
• 자체 저장 기능이 있으며, 한 번 열면 오프라인에서도 작동합니다.

점선 용지 위의 만년필과 형광펜 사용 예시:

옆에 배치된 강의 PDF와 노트로 잘라낸 슬라이드 일부, 해당 페이지 배지가 슬라이드로 돌아가는 기능:

어두운 종이 위의 화이트보드, 펜을 멈추면 달라붙는 원들, 레이저 포인터:

단축키 (Shortcuts)

브릿지 (Bridge)

브릿지는 braiNOTES를 컴퓨터의 작은 서버인 brainBRIDGE에 연결하여 코딩 에이전트가 사용자의 페이지를 읽고, 그 위에 글을 쓰고, 최종적으로 TeXbrain으로 정리할 수 있게 합니다.

• notes.swimmingbrain.dev/?bridge를 열거나, 환경 설정(Preferences)의 일반(General)에서 브릿지를 켜세요. 브라우저가 요청할 때 로컬 연결을 허용하고 상태 표시줄의 Bridge 부분이 초록색으로 변해야 합니다.
• 명령 팔레트(command palette)에서 Bridge: connect와 Bridge: disconnect를 실행하면 동일한 기능을 수행합니다.
• 팔레트에서 'Link TeXbrain project'를 사용하면 노트북이 TeXbrain 프로젝트에 연결되며, 상단 바의 TeXbrain 버튼을 누르면 해당 프로젝트가 열립니다.
• 브릿지를 통해 들어오는 모든 편집 내용은 한 번 되돌리기(undo) 단계입니다.
• 소켓은 127.0.0.1로만 전송되므로 컴퓨터 외부로는 아무것도 나가지 않습니다.

로컬 실행 (Running locally)

pnpm install
pnpm dev

Open http://localhost:5173. pnpm test는 테스트를 실행하고, pnpm check는 타입 검사를 하며, pnpm build는 정적 사이트를 build/에 작성합니다. 도움을 주고 싶다면 docs/CONTRIBUTING.md를 참고하세요.

작동 방식 (How it works)

• 잉크(Ink)는 캐시된 캔버스 타일(cached canvas tiles)에 그려지며, 변경된 타일에만 다시 그립니다.
• 스트로크(stroke)는 포인트와 펜 압력으로 만들어진 완벽한 자유 필기 형태의 윤곽선입니다.
• 펜이 움직이는 순간 선이 그려집니다. 유로 필터(one euro filter)는 글을 쓰는 동안 떨리는 손을 진정시키고, 펜을 들 때 가벼운 재조정(light refit)이 실행됩니다.
• PDF는 워커(worker) 내에서 pdf.js에 의해 그려지며, 사용자가 보고 확대하는 페이지와 비율의 내용만 그립니다.
• 노트북, 페이지 및 파일은 IndexedDB에 저장되며 변경 사항 발생 직후에 저장됩니다.
• .brainotes 파일은 노트북을 포함하며, 페이지별 JSON 파일과 PDF 및 이미지를 담고 있는 zip 압축 파일입니다.
• PDF 내보내기(export)는 원본 PDF 페이지를 파일에 넣고 그 위에 잉크를 벡터 형태로 올립니다.

기술 스택 (Tech stack)

라이선스 (License)

MIT이며, LICENSE를 참고하세요. 각 라이브러리는 자체 라이선스를 유지하며, THIRD_PARTY_LICENSES에 목록이 있습니다.