Community

개발자 99% 커뮤니티에서 수다 떨어요!

← Go back
Svelte로 만들어본 클라우드 기반 심플 드로잉보드
#side_projects
1 year ago
7,562
3
  • (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 을 더 깊이 공부해볼 수 있는 기회를 많이 가졌으면 좋겠습니다.
    감사합니다.


    https://drawingpod.vercel.app

3 comments