HTML, CSS로 구성하는 어플리케이션이면 프레임워크를 사용해도 상관 없지만,,
canvas 라이브러리들..(three.js도 있겠고, paper.js 같은 것도 있습니다 이하 라이브러리라고 쓰겠습니다)과 프론트엔드 프레임워크를 사용하여 앱을 만들때는 어떻게 해야 하나 언제나 고민이 됩니다.
그래서 나름대로 장고(?) 를 해봤습니다.
일단 현실적인 조건 입니다.
1. 시간이 없다
2. 1번의 이유로 제로 베이스에서 다 만들 수 없다.
3. 결국 구현에 치중한다.
해결 방법을 찾아야만 합니다.. 어쩌면 좋을까요 .. vue 를 사용한다고 하면
1. vue component style로 포팅된 오픈 소스를 이용한다.
라이브러리를 mixin과 slot을 이용해 라이브러리의 구현 구조를 흡사하게 vue component로 옮겨놓은 오픈소스가 있습니다. 대부분 있습니다. (https://www.npmjs.com/package/vue-threejs) 금방 찾을 수 있습니다. 대부분 일반적인 상황을 가정해 만들어 졌습니다.(3D 요소가 포함된 웹 사이트 라던가.. 등등)
데이터는 vue component에, 그 안에 wrapping된 라이브러리 객체를 통해 화면을 컨트롤 합니다.
하지만 3D 에디터라고 생각 한다면(회사에서 에디터를 유지/보수하고 있습니다.),
이걸 사용하는게 최선인지 의문이 듭니다.
에디터 어플리케이션은 특성 상 다른 쪽 UI(타 부모 겟네요) 에서 접근해 그 놈의 색을 바꾼다던지, 위치같은 여러가지 바꾼다던지 합니다.
이럴때는 vue 안에서 어떻게 해결하면 좋을까요?
가장 먼저 생각 나는건 event bus를 통해서 엮어 보는 거겠네요 어찌저찌 하면 될 것 같습니다.
그럼 라이브러리의 요소에 접근해서 실질적은 값을 바꾸는건 포팅된 vue component를 통해서 겠네요.
보통 canvas 라이브러리들은 requestAnimationFrame으로 렌더링을 돌립니다. 계속 도는거죠,
우리는 아시다시피 vue는 data나 prop이나 모두 reactiveGetter, reactiveSetter가 달리게 되어서. 값이 바뀌면 vue에서 알아차리고 다시 템플릿 생성 함수를 가동 시키고, 어디가 바뀌었나 판단 후에 최소의 업데이트로 화면을 갱신 합니다. (vue2에선 defineproperty로 구현이 되었었는데 vue3에서는 Proxy를 도입 했다는거 같네요)
몇개 안올리면 상관 없지만, 에디터 처럼 개수가 정해지지 않았다면 사실 고민해볼 문제 입니다.
만약에 props에 행렬 같은게 넘어가기라도 한다면(실수로!) canvas 라이브러리는 행렬 렌더링에서 필수로 쓰기 때문에. reactive getter, setter 호출이 렌더링 과정에 덕지덕지 끼어서 브라우저 리렌더링을 유발하기 때문에(이놈이 무거운 작업입니다! recalculation style이나 html 렌더링 파이프라인이 전반적으로 무거운 프로세스 입니다) 느려지게 됩니다. 그것도 매 프레임마다요
그래서 솔직히 이 방법은 맘에 들지 않습니다. 일관성은 있어 보여서 좋습니다.
2. vuex로 action을 통해 라이브러리의 변형을 컨트롤 한다.
이번에 다른 형태의 에디터를 회사에서 만들라고 3개월의 시간을 줬는데, 마침 저는 1번 방식이 별로 좋은 것 같지 않아서. 실험을 했습니다. (회사에겐 죄송하게 생각 합니다. 하지만 일정 안에 다 했구 회사에서도 딱히 저한테 불만은 없어보이네요)
에디터의 기능 따라 라이브러리에 접근하는 것을 오직 vuex의 action을 통해서 하도록 말이죠.
에디터 UI에 필요한 데이터는 action과 싱크를 맞춰서 같이 생산하도록 해 봤습니다.
예를 들어 canvas에 있는 것 중 어떤 요소 A를 선택 했을 때 우측에 이름, 색깔, 좌표를 편집해야 하고, B를 선택 했을때는 좌표, 회전 을 속성으로 표현 해야 한다고 하면, 선택되는 action을 만들고 이 액션 안에서 타입에 따라 다른 속성을 추출하여 다른 store에 update하는 식으로 말이죠. 그럼 속성 store는 업데이트가 되었으니 UI에 알아서 반영이 되는 겁니다ㅎ
스토어에 데이터가 있으니 reactive getter/setter 걱정도 안해도 되고, 나름 라이브러리를 앱의 기능에 맞게 컨트롤 하는 API를 vuex로 포팅을 하니 훨씬 깔끔하다는 생각이 들었습니다.
선택에 대한 액션이라고 하면, 해당 라이브러리 요소 uuid를 넘겨주면 그 uuid로 라이브러리 내의 함수를 이용해 요소를 탐색하고 선택 속성을 부여 하는 것입니다. 나름의 라이브러리 접근 프로토콜이랄까요
하나 슬픈건 라이브러이에서 주어진 요소들을 커스텀 없이 그대로 사용해서 구현 했습니다.(그룹이라면 CustomGroup같이 상속으로 기능을 확장하거나 재정의하는..) 이런 방법은 라이브러리 자체에서 허용하지 않는 것이기도 했고, (보통 canvas 라이브러리는 import, export가 있는데 이 기능을 온전히 쓰고 싶으면 기본 요소들을 커스텀하면 대부분 export가 온전하게 안되는 경우도 있습니다. 이게 싫다면 아예 export/import를 커스텀 한 객체들의 구조를 기준으로 기능을 재정의하여야 합니다. 저는 시간없어서 이렇게 할 수가 없었습니다.)
그렇죠.. 다른 라이브러리를 더 알아보고 좋은 놈을 사용했어야 했는데 저의 불찰 입니다 ..
이러니 구조적으로는 제 맘에 드는데, store 정리가 필요 하겠네요 하다보면 되겠죠 뭐
3번째 방법은 무엇이 있을까 고민을 많이 해봅니다만.. 2번이 맞는건지는 아직도 모르겠지만.. 지금으로써는 2번째 방법이 경험상 버그도 많이 줄고 제일 좋았습니다.
여러분들 의견은 어떠신가요 ...
연휴 시작 밤에 주절주절 했습니다.. 편안한 밤 되세요 (_ _)
