블로그 포스팅에 설명 자료로서 도식화를 위한 툴

# 블로그 포스팅 자료 도식화 툴

## 개요

블로그 포스팅에 사용되는 이미지성 자료를 대체하기 위해 기획하게 되었다.

## 기획 사유

포스팅에 사용되는 이미지는 국내 또는 해외 사이트의 이미지를 가져와 출처를 남기는 방식으로 사용하고 있지만 모든 이미지가 그렇게 자유롭게 가져다 써도 되는 것이 아닌 경우 저작권에 대한 이해가 잘 되어 있지 않다면 불이익을 당할 경우가 생길 수 있다.

또한, 이미지를 찾아도 본인이 사용하기에 약간의 부분이 다른 내용이 있다면 다시 찾게 되는 시간이 허비된다.

블로그 포스팅에 이미지를 사용하는데 단점을 간추려보자면 아래와 같다.

1. 저작권에 이해가 없을 때 발생하는 문제
2. 이미지 수정 또는 다른 이미지를 찾기 위해 시간이 허비되는 문제
3. 이미지가 많을 때 지연되는 로딩 문제
4. 이미지 화질, 퀄리티의 문제

이러한 이유로 포스팅 시 도식화에 대한 툴을 만들어 테스트 페이지에서 작업하고 소스코드로 파싱하여 블로그에 코드를 넣으면 테스트 페이지에서 만든 결과물이 그대로 출력 되도록 하려고 한다.

## 계획

### 기본 UI

1. Right-side bar : 도형의 크기, 굵기, 그림자, 색상, 패딩 등의 정보 설정
2. Bottom bar : 도형 모양 선택, 선 모양 선택
3. Main window : 픽셀 단위에 맞게 그림
4. Top bar : 파일 내보내기, 저장
* 새 창 열기로 데이터 통신 가능한지 테스트하여 Right-side bar를 따로 뺄지 생각 중

### 데이터 관리

정적 웹 사이트에서 할 예정이므로 데이터 베이스를 사용 하기에 무리가 있어 로컬 스토리지에 데이터를 저장, 데이터를 강제로 삭제 되는 것을 방지하기 위해 암호화된 내용을 세션스토리지에 임시 저장

1. LocalStorage 또는 SessionStorage 둘 중 하나가 삭제되면 감지하여 복구하는 방식
2. 둘 다 동시에 지워져도 변수에 저장을 해두어 다시 복구 시키는 방식
3. 데이터를 비우는 기능 구현 예정

* sessionStorage, localStorage 둘 다 프로토타입 오버라이드가 가능하다면 해당 툴만의 암호를 인자로 섞어 삭제 하지 못하도록 할 예정

### 디자인 패턴

모듈 패턴을 사용해서 Controller, Model, View 단으로 구성 예정, 에러 처리는 테스트코드 작성하면서 구현

### Style

1. Penli.css 사용
2. ion icon 사용 ( icon )
3. Router.js 사용 ( 페이지 만들 시 )
4. 색상은 color space 참고 ( 녹색 계통 ) * main: green, point : magenta

## 진행

약 2주 작업으로 예정

## 라이선스

MIT License