아이디어: URL로 공유가 가능한 간단한 펜노트

작성: 2023-10-19 15:44:32
수정: 2023-10-19 15:44:32
오구사십오

블로그에 보다 다양한 형태의 컨텐츠를 담으려고 생각하니 당장 생각나는 건, 펜으로 그린 그림 또는 간단한 필기를 블로그 본문에 그대로 노출시키는 것이었다.

필기 그림을 블로그에 쉽게 추가할 수 있도록 하기 위해 다음과 같은 도구를 생각했다.

  1. canvas를 이용하여 간단한 필기를 할 수 있는 페이지를 만든다.
    (예, pennote.ogu45.com)
  2. 해당 페이지에서 캔버스의 크기를 지정하고 펜/마우스/터치 등으로 드로잉을 할 수 있는 간단한 도구를 제공한다.
    1. 펜 두께
    2. 지우개
  3. 해당 페이지에서 그리는 그림은 드로잉 히스토리를 저장하여 해당 정보를 url 끝자락에 붙인다(bse64등의 인코딩)
  4. 드로잉이 끝나면 해당 url만 복사하여 블로그에 붙인다.
  5. 블로그에 별도 스크립트를 작성하여, 드로잉 url이 작성된 텍스트 영역을 canvas 기반의 이미지로 원복한다.
    1. 다크모드와 화면 폭 등을 고려하여 적절히 보이도록 그림을 그릴 수 있도록 한다.
    2. 혹은 공유용 url을 별도로 제공하여 png파일로 응답을 주는 api도 만든다.

유익했다면 후원해 주세요