CaptureD2L v2

CaptureD2L이 돌아올 예정입니다!

CaptureD2L

CaptureD2L은 제가 개인적으로 느끼던 불편함을 해결해 보고자 시작한 사이드 프로젝트입니다. 평소에 제가 다크 모드로 캡쳐해 둔 터미널 화면, 소스 코드 등을 발표 자료 등을 제작할 때 그대로 넣으니 글씨가 잘 안 보이는 점이 문제라고 생각했고, 이를 해결하기 위한 프로젝트를 진행했습니다. (더 자세한 소개는 이전 글을 참고해주세요.)

한동안 다른 일로 바빠서 블로그 관리는 물론 CD2L 프로젝트를 더 진행하지 못했습니다. FE가 제가 주로 하는 분야가 아니기도 했고요. 그러다 드디어 업데이트가 가능할 것 같아서 소식을 전합니다.

이전 버전에서 수정할 점

• 빌드를 통한 프론트엔드 제공
  • 저는 도커 컴포즈로 컨테이너를 띄우는 것에 익숙하다 보니 기존 버전의 CD2L을 개발할 때도 node 이미지를 사용해 FE를 만들었습니다. 그런데 알고 보니 React는 빌드를 하면 js 파일로 생성이 된다더라고요??!
  • 그래서 이렇게 빌드를 한 후 GitHub Pages로 배포를 할 계획입니다.
  • Scavenger에 기여를 하면서 Vite를 처음 알게 되었습니다. Vite는 빌드 속도가 정말 빠르더라고요. 그래서 이거를 써보려 합니다.
• JS Client-Side Image Processing Library
  • 그러면 그냥 브라우저(Client-Side)에서 다 처리 가능하도록 만들면 되지 않을까?
  • 그래서 우선 JS에서 사용 가능한 + HSV(HSL) 색공간 관련 기능이 있어보이는 이미지 처리 라이브러리를 몇 가지 찾았습니다.
    • Sharp: https://sharp.pixelplumbing.com/api-colour#tocolourspace
    • CamanJS: http://camanjs.com/api/classes/Caman/Convert.html
    • Photon: https://docs.rs/photon-rs/latest/photon_rs/colour_spaces/index.html
    • GammaCV: https://gammacv.com/docs/hsv_color
    • Jimp: https://github.com/jimp-dev/jimp/tree/main
  • 그 다음은 이들 라이브러리를 비교해보고 적합한 라이브러리를 찾아서 쓰려고 합니다.
    • node 서버와 통신 없이 Client-Side에서 모든 동작이 가능한 라이브러리는 어떤건지?
    • 유지보수가 지속 되는 라이브러리인지?

CaptureD2L 프로젝트 소스코드는 깃허브에서 확인해 주세요.