개발 노트2026년 7월 31일

카드 수십 개, 선 수십 개를 어지럽지 않게

복잡한 작업을 단순하게 만드는 UI

안녕하세요, Toonkit 팀입니다.

이번 업데이트에서는 애니메이션 제작 과정을 더욱 직관적으로 관리할 수 있는 노드 캔버스를 새롭게 선보였습니다.

오늘은 노드 캔버스를 디자인하며 어떤 고민을 했고, 그 고민을 UI에 어떻게 담았는지 이야기해 보려고 합니다.

노드 캔버스는 애니메이션을 만드는 모든 작업이 시작되는 공간입니다.

시나리오를 쓰고, 이미지를 생성하고, 영상과 오디오를 연결하다 보면 캔버스에는 어느새 수십 개의 노드와 수많은 연결선이 생깁니다.

작업이 쌓일수록 화면은 자연스럽게 복잡해집니다.

그래서 노드 캔버스를 디자인하면서 가장 먼저 세운 기준은 단 하나였습니다.

"정보는 많아져도 화면은 복잡해 보이지 않게."

2. 캔버스뷰.png

한눈에 읽히는 카드 구조

노드 하나에는 제목, 프롬프트, 상태, 다양한 설정까지 많은 정보가 담깁니다.

하지만 이 모든 요소를 하나의 카드 안에 넣으면 시선이 분산되고, 무엇부터 봐야 할지 알기 어려웠습니다.

image.png

그래서 카드를 역할에 따라 세 영역으로 나눴습니다.

image.png

특히 모델 선택, 화면 비율, 영상 길이, 이미지 장수(최대 4장)처럼 자주 사용하는 설정은 모두 툴바로 모으고, 카드 본문은 결과물에만 집중할 수 있도록 구성했습니다.

콘텐츠와 조작 영역을 분리하니 정보가 많은 카드도 훨씬 안정적으로 읽히고, 필요한 기능도 빠르게 찾을 수 있었습니다.

캔버스에서 연결선은 단순한 장식이 아니라 작업의 흐름을 보여주는 중요한 UI입니다.

그래서 모든 연결선을 같은 스타일로 사용하지 않았습니다.

텍스트는 노란색, 이미지는 파란색, 비디오는 초록색, 오디오는 보라색으로 구분해 데이터의 종류를 색만으로도 이해할 수 있도록 했습니다.

Frame 1000004743.png

연결 포인트 역시 같은 색을 적용하고, 단순한 점 대신 각 데이터 타입을 나타내는 아이콘을 사용했습니다.

덕분에 선을 끝까지 따라가지 않아도 어떤 데이터가 오가는지 자연스럽게 읽을 수 있습니다.

색은 장식이 아니라 정보를 전달하는 요소가 되도록 설계했습니다.

노드에는 연결 포인트, 추가 버튼, 메뉴 버튼 등 다양한 인터랙션 요소가 있습니다.

하지만 이 요소들이 항상 표시되면 캔버스는 금세 버튼과 아이콘으로 가득 차 보입니다.

그래서 평소에는 숨겨두고, 노드를 선택하거나 마우스를 올렸을 때만 자연스럽게 나타나도록 했습니다.

필요한 순간에만 인터페이스가 드러나도록 하니 화면은 한결 여유로워졌고, 사용자는 콘텐츠에 더욱 집중할 수 있게 되었습니다.

노드가 많아질수록 현재 어떤 흐름을 수정하고 있는지 파악하기 어려워집니다.

그래서 노드를 선택하면 연결된 노드와 연결선만 선명하게 강조하고, 나머지는 자연스럽게 흐려지도록 구성했습니다.

image.png

굳이 연결선을 하나씩 따라가지 않아도 현재 작업 중인 흐름을 한눈에 확인할 수 있습니다.

복잡한 캔버스일수록 모든 정보를 보여주는 것보다, 지금 필요한 정보에 집중할 수 있도록 만드는 것이 더 중요하다고 생각했습니다.

노드 캔버스는 앞으로도 계속 새로운 기능이 추가될 화면입니다.

하지만 기능이 늘어날수록 더 중요한 것은 얼마나 많이 넣느냐보다, 얼마나 잘 덜어내느냐였습니다.

정보는 많아도 한눈에 읽히고, 필요한 순간에만 인터랙션이 나타나며, 지금 작업하는 흐름은 또렷하게 보이는 것.

이것이 이번 노드 캔버스를 디자인하면서 가장 중요하게 생각한 방향입니다.

아직도 계속 발전하고 있는 작업 공간인 만큼, 사용하시면서 불편했던 점이나 아쉬운 점, 추가되었으면 하는 기능이 있다면 언제든 의견을 들려주세요.

여러분의 피드백을 바탕으로 더 편하고 직관적인 노드 캔버스를 만들어가겠습니다.

#design#AI animation#AI generate image#ToonXL