블로그에 보다 다양한 형태의 컨텐츠를 담으려고 생각하니 당장 생각나는 건, 펜으로 그린 그림 또는 간단한 필기를 블로그 본문에 그대로 노출시키는 것이었다.
필기 그림을 블로그에 쉽게 추가할 수 있도록 하기 위해 다음과 같은 도구를 생각했다.
- canvas를 이용하여 간단한 필기를 할 수 있는 페이지를 만든다.
(예, pennote.ogu45.com) - 해당 페이지에서 캔버스의 크기를 지정하고 펜/마우스/터치 등으로 드로잉을 할 수 있는 간단한 도구를 제공한다.
- 펜
- 펜 두께
- 지우개
- 해당 페이지에서 그리는 그림은 드로잉 히스토리를 저장하여 해당 정보를 url 끝자락에 붙인다(bse64등의 인코딩)
- 드로잉이 끝나면 해당 url만 복사하여 블로그에 붙인다.
- 블로그에 별도 스크립트를 작성하여, 드로잉 url이 작성된 텍스트 영역을 canvas 기반의 이미지로 원복한다.
- 다크모드와 화면 폭 등을 고려하여 적절히 보이도록 그림을 그릴 수 있도록 한다.
- 혹은 공유용 url을 별도로 제공하여 png파일로 응답을 주는 api도 만든다.