🤔 Palette 메뉴 육각형 구현체에 대한 간단한 고민

🐝 Palette UI 구현체 고민

Palette는 노드를 생성하기 전에, 노드의 타입을 결정하기 위해 표시되는 메뉴를 의미한다. Palette에 대한 요구사항은 다음과 같다.

• 캔버스로 그린 노드가 “드롭”했을 때 표시되어야 함.
• 펼쳐지는 애니메이션을 적용할 수 있어야 함.
• 옵션들이 매번 달라질 수 있음. (개수가 변해도 옵션들의 위치가 자연스럽게 배치될 수 있어야 함)

일단 육각형 모양에 대해 3가지 방법을 떠올렸다.

• CSS로 스타일링
• SVG
• Canvas로 그리기

→ Canvas가 필요할까? 오버엔지니어링이 될 수도 있을 것 같다.

• 육각형을 그리는 로직이 필요 이상으로 복잡하게 느껴졌다.
• Lucide React icon을 사용하려면 svg를 data url로 변환하거나 이미지처럼 사용해야 한다. 또는 Canvas 위가 아니라 절대 위치로 계산하여 배치해야 하는데 (아이콘이) 이후 육각형 (틀)과 결합된 형태로의 조작이 번거로울 것 같다.
• Canvas의 성능은 많은 수의 요소를 그려야 할 때 고려해볼 수 있는데, 단순한 육각형 버튼 6개니까 부담이 없을 것이라고 생각했다.
• 이벤트 핸들링이 어려워진다. (버튼을 각각 그려주고, 클릭했을 때의 위치가 어떤 버튼 안에 있는지 식별해야 함, 타입에 따른 동적인 아이콘 처리가 어려움)

→ CSS VS SVG?

• CSS를 활용할 경우, clip-path를 사용해야 하는데 일부 브라우저 버전에서 제한적일 수 있다. (tailwind로는 바로 적용을 못하고 별도의 클래스 정의가 필요함)

• 비율 유지의 방식이 다른데, SVG는 viewbox를 통한 가상 좌표 시스템으로 조정이 되며, CSS는 유지가 안될 수도 있다 (또는 육각형 크기가 변경될 때 값들을 다시 계산해줘야 하거나)

따라서 SVG를 활용하여 편리하게 구현하였다!

<svg viewBox="0 0 100 100">
    <polygon
      points="50 0, 93.3 25, 93.3 75, 50 100, 6.7 75, 6.7 25"
      className={color}
    />
</svg>

🐝 돌아보기

• 팔레트 UI 등장 애니메이션을 넣을 때, 우리는 [드래그하여 복사된 노드 → 흐리멍텅한(?) 육각형 → 완성된 벌집 육각형]로 가져가기로 했었다. 그런데 노드는 Canvas에서 그려진 것이고, 팔레트는 돔 엘리먼트여서 그 사이의 전환을 매끄럽게 구현하는 것이 어려워졌다.
• 그럼 Canvas로 구현해야 했을까? 다시 돌아봐도 팔레트 등장 “애니메이션”보다는, 팔레트에서 노드의 타입을 클릭하여 노드를 생성하는 것이 핵심 로직이다. 따라서 이벤트 핸들링과 구현 복잡도가 낮아지는 svg 선택이 더 적절했다고 생각한다.