[.Net] Node Editor UI 프레임워크 소개 - NodeNetwork

Node Editor UI란?

혹시 블렌더(Blender)라는 3D CG 소프트웨어를 본 적이 있나요? 이 소프트웨어는 오픈 소스로 소스가 공개되어 있고, 무료로 사용 가능한 소프트웨어입니다. 그런데 Node Editor랑 무슨 연관이 있길래 블렌더 얘기를 꺼냈을까요?

블렌더의 Node Editor. 출처: Blender Manual

위 그림을 보면, 블렌더 내의 조작을 노드(Node) 단위 편집으로 가능합니다. Render Layers 노드와 Gamma 노드, Composite 노드의 입/출력을 서로 연결하여 데이터가 처리되는 것이죠. 이러한 편집 기능을 노드 에디터(Node editor)라고 합니다.

.Net 기반 노드 에디터

저도 이러한 기능을 .Net Form 기반에서 동작하는 프로그램을 만들고 싶었습니다. 처음부터 Node Editor를 만들기는 무리이므로 제공되는 프레임워크를 찾아봤는데요. 그중 그나마 접근하기 쉬운 프레임워크를 소개하려고 합니다.

WPF Node Network

Node Network 프레임워크는 .Net WinForm은 아니지만 WPF 기반으로 제공하는 노드 에디터입니다.

https://github.com/Wouterdek/NodeNetwork

GitHub - Wouterdek/NodeNetwork: A C# library with a WPF node editor component based on ReactiveUI

우선 어떻게 동작하는지 데모 애니메이션부터 보겠습니다.

계산기 데모

Shader 데모

노드를 추가하고 움직일 수 있으며, 파라미터 제어와 입/출력 연결을 할 수 있습니다. 이러한 동작은 일반적인 노드 에디터의 동작과 동일합니다.

그 외 주요 특징은 다음과 같습니다.

• .Net Framework 4.7.2와 .Net Core 3.1 이상
• WPF 기반
• MVVM 구조로 대화형 컨트롤 구축
• 패닝(panning), 확대/축소(zooming) 지원
• 레이아웃 자동 제어
• 커스터마이징 가능 (색상, 포트 모양, 컨트롤 추가, 그룹화 등)
• 아파치(Apache) 2.0 라이선스

Code Generator 예제. 출처: NodeNetwork Documentation

해당 프레임워크를 사용하기 위한 방법은 아래 페이지에 자세히 나와있습니다. 아래 문서를 참고하여 예제 프로그램을 작성하는 방법에 대해서는 추후 따로 다루기로 하겠습니다.

https://wouterdek.me/NodeNetwork/doc

NodeNetwork

몇 가지 사용해보며 느낀 아쉬운 점은 다음과 같습니다.

• 노드의 더블 클릭 이벤트 미지원
• WinForm 미지원

파라미터가 많은 노드의 경우, 노드를 더블 클릭하여 따로 파라미터 제어를 구현하려고 했습니다. 하지만 더블 클릭 이벤트는 지원하지 않더군요. 이 경우, 그룹 기능을 사용하여 파라미터를 추가해야 할 것으로 보입니다.

또한, Node Network는 WPF만 지원합니다. 좀 더 사용하기 쉬운 WinForm 환경에서 사용하고 싶었으나 그 점이 아쉬더군요.

그 외에, 당연하지만 라이브러리 학습에도 시간이 필요합니다. 사실, 다른 프레임워크에 비해 접근이 쉬워 쉽게 개발이 가능할 거라 생각했는데요. 생각보다 프레임워크에 대해 공부할 내용도 많고, 해당 GitHub 사이트 외에 예제 코드나 자료를 구하기가 쉽지 않아 독학하는데 애먹을 것으로 보입니다.