03. 배치 GUI구현해보자 (Fabric JS, Konva JS)

728x90

이제부터 정말 힘들어지는 것 같다. 오늘도 4시간 삽질했는데 해낸 게 없다.

 

우리가 원하는 웹서비스.

batch GUI 컨셉

 

요런 거 만들어서 이제 그룹장은 저 네모 객체들을 움직여서 자리를 배치하고.

 

그룹 원들은 배치되어 있는 자리를 클릭해서 사용할 수 있게 만들어야 한다.

 

그러서 저 GUI를 구현하기 위해 이 방법 저 방법 찾아봤다.

 

처음엔 바닐라 JS로 구현해보려고 했는데 이건 미친 생각이었다.

 

Chat gpt만 믿었다가는 코드가 점점 꼬이는 것 같았다..

 

그래서 찾은 대안

Fabric JS!

Fabric JS 홈페이지

http://fabricjs.com/

Fabric.js Javascript Canvas Library

 

자바스크립트 GUI라이브러리를 알아보던 중 찾은 라이브러리다.

 

처음엔 정말 우리가 원하는 기능들만 쏙쏙 있는 그런 라이브러리라 정말 만족하면서 공부해 봤다.

 

이게 어떤 라이브러리냐 하면

 

Fabric JS로 만든 객체 drag and drop

 

이런 거 해주는 라이브러리다.

 

이 라이브러리에서는 객체 크기 조절, 드래그 해서 여러 객체 선택 등이 기본으로 지원된다.

 

하지만 객체들을 배치해 뒀을 때 알아서 줄 맞춰주는 기능이 제대로 지원되는 기능은 아닌 것 같았다. github에는 올라가 있었지만 정식으로 배포되는 버전에는 포함이 안되어있는 느낌. 그리고 자동 줄 맞춰주는 게 조금씩 맞지가 않는다.

 

그래도 어느 정도 만족스러워서 이 라이브러리를 사용할까 싶었지만 더 좋은 라이브러리를 찾고 말았다.

 

Konva JS!

https://konvajs.org/

Konva.js - JavaScript 2d canvas library

Konva JS로 만든 객체 drag and drop

 

이건 똑같은걸 Konva JS로 만든 거다.

 

너무 완벽하다.

 

필요한 기능들을 전부 Docs에서 찾아볼 수 있었다.

 

심지어 이걸로 만든 서비스들을 봤는데 완성도가 정말 높았다.

 

https://polotno.com/?utm_source=konvajs 

Design Editor JS SDK Polotno for canvas | Polotno

이 사이트가 Konva로 만든 예시들을 잘 보여주고 있다.

 

그리고 polotno 역시 라이브러리로 설치하면 좋은 기능들을 쉽게 사용할 수 있는 것 같았다.

 

하지만 우리가 사용하지 않는 이유는 React라이브러리기 때문이다..

 

정말 탐나는 라이브러리인데, React까지 하게 된다면 너무 오래 걸리고 지금 하고 있는 프로젝트에서 React까지 어떻게 연동해야 할지 감도 안 잡힌다. 그래서 나중에 프로젝트 완성 후에 React로 다시 한번 더 퀄리티 높게 똑같은 프로젝트를 개발해 보려 한다.

 

 

Fabric JS로 만든 객체 drag and drop 에제

이것도 Konva로 다른 사람이 만든 건데 너무 괜찮았던 거다.

https://medium.com/@pierrebleroux/snap-to-grid-with-konvajs-c41eae97c13f

Snap to grid with KonvaJS

 

하지만 저건 연산할게 많아서 그런지 너무 느리다. 그래서 두 번째 방법을 더 공부해서 저걸로 우리 Openseats프로젝트를 만들 것 같다.

 

---

문제점

문제점이라기 보단 해결해야 할 과제 같은 느낌이다.

 

두 번째 영상을 보면 알겠지만 여러 객체가 선택되었을 땐 가이드라인이 생기지 않는다.

 

이건 내가 막아둬서 그런데, 여러 객체가 선택되었을 때 드레그를 해서 가이드라인이 생기게 되면 선택된 여러 객체들을 하나의 객체로 해서 가이드라인이 만들어져야 하는데.. 선택된 객체들 중에 하나의 객체를 기준으로 가이드라인이 생긴다.

 

이거 때문에 오늘 4시간을 삽질했는데도 해결하지 못했다. 방법은 어느 정도 생각했는데 구현을 못하겠다. 조금 더 공부하다 보면 할 수 있을지도?

 

추가로 구현해야 할 기능

https://polotno.com/?utm_source=konvajs 

Design Editor JS SDK Polotno for canvas | Polotno

이 사이트를 보면 Ctrl + c, Ctrl + x, Ctrl + z 등 우리가 OS환경에서 쓰는 단축키들이 먹는다. 이런 기능을 우리 프로젝트에도 구현하고 싶어졌다.

 

근데 이것까지 하면 하루 종일 이것만 붙잡고 있어야 할 것 같으니 이 기능은 차차 하도록 하자