개발자 99% 커뮤니티에서 수다 떨어요!
(1) 자기소개
안녕하세요? 오랜만에 인사드리네요!
노마드코더에서 개발 공부 1년차 거니입니다. 🫡
(2) 서비스 소개
드로잉팟(Drawing Pod) 은 Canvas API 를 이용하여 만든 드로잉 어플리케이션으로
웹 화면 상에서 손쉽게 그림을 그리거나 도형을 만들고 사진을 편집할 수 있습니다.
부가적으로 작업물을 클라우드 서버에 저장하거나 이미지 파일을 카카오톡으로 공유할 수 있는 기능을 제공합니다.
(3) 시작하게된 계기
https://excalidraw.com/ 을 사용해보다가 Canvas API 에 흥미를 느껴 공부 삼아 직접 만들어보기로 했습니다.
(4) 개발
SvelteKit 프레임워크와 Fabric.JS 라이브러리를 이용하였구요.
짬을 내서 틈틈히 만들다 보니 개발 기간은 약 2주 정도 소요되었던 것 같습니다.
다음과 같은 기능들이 있습니다.
- 객체 이동 / 크기 수정 / 회전
- 텍스트 삽입 및 수정
- 파렛트를 이용한 객체의 채우기 / 선 색상 변경
- 객체 정렬 (열 정렬, 행 정렬)
- 객체의 모서리를 인식하여 달라붙는 선
- 이미지 업로드 및 수정
- 캔버스 이미지 svg 파일로 다운로드
- 로컬 스트리지에 자동 저장 (일정 시간이 되면 자동 저장 타이머 - 우측 상단 녹색 게이지)
- 클라우드 스토리지에 저장 및 불러오기
- 소셜 로그인 (구글 / 깃허브)
- 카카오톡에 캔버스 이미지 공유 기능 (png 파일)
(5) 바라는 것은?
아직 미숙한 부분이 많아 버그가 많습니다. 최대한으로 해결해보고 싶구요.
최종 목표는 2D 그래픽을 3D로 실시간 랜더링하는 드로잉앱을 만들어 보는 것입니다.
이번 기회로 CanvasAPI 과 WebGL 을 더 깊이 공부해볼 수 있는 기회를 많이 가졌으면 좋겠습니다.
감사합니다.