📌 시작하기에 앞서
내가 처음 konvaJS를 공부할 때, 외국에서는 많이 사용하지만 한국에서는 잘 사용하지 않아 한국어로 된 자료가 많지 않았다.
그렇게 공식문서의 예제를 보면서 공부를 하고 있었지만 '그래서 이걸 어떻게 응용해야 하는데?' 라는 생각이 지배적이였다.
그래도 꾸역꾸역 어떻게든 공부해서 회사 내 솔루션 기능에 적용할 수 있었고, 그 과정에서 많은 삽질(?)을 했다.
이때, 처음 하는 분들이 빠르게 적응할 수 있게 '간단한 실전 프로젝트가 있으면 좋겠다.' 라는 생각을 했다.
이 포스트 시리즈는 konva를 시작하는 모든 분들에게 도움이 되면 좋겠다는 바람으로 글을 쓰려 한다.
(정확히 말하자면 react-konva에 대한 실전 프로젝트를 진행하려 한다.)
🤔 Konva 소개
Konva는 HTML5 2D Context를 확장한 Canvas Javascript 프레임워크다.
Konva는 고성능 애니메이션, 전환, 노드 중첩, 계층화, 필터링 등 데스크톱 및 모바일 응용 프로그램에 대한 캔버스 상호 작용을 가능하게 한다.
⚡ Konva 구조
Stage
Stage는 실제로 그래픽 요소가 그려지는 영역을 나타낸다.
하나의 Stage에는 여러 개의 Layer를 포함할 수 있으며, Stage를 사용하여 Canvas 크기를 정의하고 각 Layer에 위치한 요소들을 관리할 수 있다.
Layer
Layer는 Stage 위에 위치하는 그래픽 요소들을 그룹화하는 컨테이너 역할을 한다. Layer는 Stage 내부에 배치되며, 각각의 Layer는 서로 다른 요소들을 포함할 수 있다.
이를 통해 Stage에 그래픽 요소를 구성하고 개별적으로 관리할 수 있다. Stage는 여러 개의 Layer를 가질 수 있으며, Layer는 z-index에 따라 그리기 순서가 결정된다. 즉, 가장 위에 있는 Layer에 위치한 요소가 가장 앞쪽에 그려지게 된다.
Shape
Shape는 캔버스 위에 그려지는 기본 그래픽 요소를 나타낸다.Circle, Rect, Line, Image등 다양한 형태의 요소를 Shape로 생성하여 Stage나 Layer에 추가할 수 있다.
Group
Group은 여러 개의 그래픽 요소를 묶어서 하나의 그룹으로 만드는 컨테이너 역할을 한다.
그룹으로 만들어진 요소들은 하나의 단위로 취급되며, 그룹 내부의 요소들과 함께 이동, 회전, 변형 등의 작업을 할 수 있다.
이를 통해 여러 개의 Shape를 논리적으로 묶어서 관리할 수 있다.
📝 정리하며
이 글에선 정말 기본적인 Konva의 개념과 구조를 알아봤습니다. Layer를 나누어서 그래픽 요소를 관리하는 건 엄청난 개념이고 활용 가능성이 무궁무진합니다(실습에서 볼 수 있다).
다음 글에서 react-konva를 활용해서 간단한 데이터 라벨링 실습 프로젝트를 진행해보겠습니다.
그럼 봐주셔서 감사합니다
