[기획] 내.맘.다 웹사이트

한줄로 줄이면 내 마음대로 다이어리/플래너 등을 만들 수 있는 웹사이트를 만들고자 한다.

만들어보고 싶은 목록에도 적었었다. 벌써 만들게 된다니 두근두근...

 

+ 220217 업데이트 한 내용을 부트캠프에서 공유받은 노션 템플릿에 정리했다.

노션 링크

개인 프로젝트

 

---

 

Idea

- 태블릿pc의 필기앱(ex.굿노트)에서 사용가능한 다이어리, 달력, 플래너 등의 서식을 원하는 대로 쉽게 제작하여 공유 및 다운(pdf)이 가능한 사이트

 

-는 필수, +는 추가 항목(필수부터 구현을 목표로)

 

제작 섹션

-드래그 앤 드랍으로 요소들을 배치 가능한 형태

-폰트, 색상 모두 선택할 수 있고 자유롭게 요소를 넣고 뺄 수 있는 형태

+ 사용자의 컴퓨터에 있는 이미지나 온라인에 있는 이미지(저작권 free 사이트만)도 붙여넣을 수 있으면 좋겠다

+ undo redo (되돌리기/되돌리기 취소) 추가

+ 템플릿 불러오기처럼 해서 다른 사람이 만든 것들을 수정해 쓸 수 있음(커뮤니티에 올리려면 [2차 제작]같이 말머리 붙이고 원본 명시 필요)

 

커뮤니티 섹션

이용하는 사람들이 자신의 서식을 올리고 공유할 수 있는 형태

- 좋아요 처럼 추천 기능

- 어떤 형태로 할 것인가 - 인터랙티브?

+ 최신순 · 추천순 정렬 기능 추가

+ 키워드 검색 가능(테마별(ex 깔끔, 포근 등...원하는 키워드를 등록할 수 있으면 좋을듯 해시태그처럼?)

+ 팔로워, 팔로잉 기능으로 창작자 구독/인기있는 창작자 확인 가능

 

 

How

다 구현하고 싶은 마음은 굴뚝 같은데 일단 무리라고 판단되는 기능에 대해선 보류할 것

초기엔 기본 기능부터 오픈하고 추가 기능을 추가하는 방식을 따르자!

처음엔 그대로 쓰되 아쉬운 점을 목적에 맞게 직접 수정하고 기록하자

 

Tool

vuejs, nodejs 사용

 

제작 섹션

 

써볼만한 드로잉 라이브러리

 

Zwibbler

https://zwibbler.com/tutorial/

- pdf로 expert도 가능

 

 

 

 

커뮤니티 섹션

백엔드는 nodejs 책의 sns 기능 참고하여 구현할 수 있을 듯

vuejs - WYSIWYG Editor 중 tiptap 에디터가 유명해보임 소개 링크1 링크2

 

 

 

쓸 수 있을 지도?

drag and drop

Copy or Drag and Drop Multiple Images

TipTap Examples

TipTap 공식문서

vuedraggableresizable

18 vue drag and drop libraries

드래그 앤 드랍 기능 참고 unlayer - vue email editor

이미지 드래그해서 업로드하는 기능 Uploadr

 

- js

8가지 무료 오픈소스 드로잉 라이브러리

Fabric.js 

28 best JavaScript drawing libraries

 

image editor in vue js

TOAST UI

 

html to pdf

자바스크립트 html화면을 pdf로 내보내기

html to pdf with html2canvas 샘플 소스

freehtmltopdf

web.html 화면을 pdf로 저장하기

browserhot : convert canva to pdf

PDFKit

 

vue

madewithvuejs.com 뷰로 만든 다양한 기능 확인 가능

 

pdf to jpg(커뮤니티 섹션용)

ImageMagick

 

Inspiration

Canva 링크

내가 구현하고 싶은 '요소들의 드래그 앤 드랍 + pdf 저장(인쇄) 및 공유' 기능 있음