선형 대수를 활용한 인터랙티브 다이어그램 편집기 개발 사례
(medium.com/@ivan.ishubin)- 행렬은 학교에서 배운 중요한 선형 대수 개념 중 하나이며, 다양한 문제를 해결하는 데 유용함. 이 글에서는 Schemio라는 인터랙티브 다이어그램 편집기를 개발하면서 행렬을 어떻게 활용했는지를 설명함.
Schemio의 초기 개발 단계
- 초기 Schemio는 간단한 형태로, 사용자가 도형을 만들고 이동, 크기 조정, 회전할 수 있었음.
- 도형은 위치, 크기, 회전 각도로 정의된 간단한 영역으로 표현되었음.
- 데이터 구조는 도형을 평면 배열로 나타냈음.
계층 구조의 문제
- 도형을 서로 연결하고 복잡한 상호작용을 만들기 위해 아이템 계층 구조를 도입함.
- SVG를 사용하면 계층 구조를 쉽게 렌더링할 수 있지만, Schemio는 렌더링 이상의 기능을 제공해야 했음.
- 로컬 좌표와 세계 좌표 간의 변환이 필요했음.
스케일링과 피벗 포인트
- 스케일링은 객체의 크기를 동적으로 조정할 수 있게 해주며, 피벗 포인트는 회전의 중심을 정의함.
- 스케일링과 피벗 포인트를 추가하면서 변환 관리가 복잡해졌고, 행렬을 사용하여 문제를 해결함.
행렬 변환 기초
- 변환은 행렬을 사용하여 표현할 수 있음. 예를 들어, 공간의 한 점은 3x1 행렬로 표현됨.
- 변환 행렬과 점 행렬을 곱하여 변환된 점을 얻을 수 있음.
- 변환 행렬을 조합하여 다양한 변환을 수행할 수 있음.
세계 좌표와 로컬 좌표
- 로컬 좌표를 세계 좌표로 변환하는 것은 간단하지만, 반대의 경우는 복잡함.
- 행렬의 역행렬을 사용하여 세계 좌표를 로컬 좌표로 변환할 수 있음.
객체의 장착 및 분리: 계층적 변환의 도전
- 객체를 다른 객체에 드래그 앤 드롭하거나 계층 구조를 변경할 때, 새로운 위치와 회전을 재계산해야 함.
- 드래그된 객체의 위치와 회전을 조정하여 화면에서 자연스럽게 이동하도록 함.
마무리
- Schemio 개발 과정에서 수학적 개념을 활용하여 복잡한 문제를 해결함.
- 프로젝트에 관심이 있다면 GitHub에서 소스 코드를 확인할 수 있으며, Schemio 웹사이트에서 직접 사용해볼 수 있음.
Hacker News 의견
-
Schemio라는 새로운 오픈 소스 소프트웨어를 발견한 것에 대한 흥미로움
- Schemio의 디자인과 느낌이 매우 세련됨
- 오픈 소스임에도 불구하고 이를 자랑하지 않음
-
Adobe PostScript가 1980년대에 변환 행렬을 대중화했음
- SVG가 PostScript의 이미지 모델을 많이 차용함
- PostScript의 2D 행렬 사용에 대한 링크 제공
-
WebGLFundamentals.org의 자료가 변환 계층 구조에 대한 훌륭한 입문서임
- 웹GL 장면 그래프에 대한 링크 제공
-
저자가 동차 좌표에 대해 조사해볼 것을 제안함
- 동차 좌표에 대한 Wikipedia 링크 제공
-
QGraphicsView 프레임워크가 매우 강력한 그래픽 프레임워크임
- 장면-객체 변환 및 객체 계층 구조를 포함한 강력한 도구 제공
- 웹에서 QGVF만큼 잘 작동하는 대안을 찾지 못했음
-
3x3 동차 행렬을 사용하여 2D에서 변환하는 멋진 측면
- 2D 변환이 실제로 z = 1 평면을 따라 3D에서 전단임
- 관련 YouTube 링크 제공
-
Schemio가 멋져 보임
- Claude를 사용하여 많은 흐름 다이어그램을 만들고 있음
- Schemio를 사용하여 유사한 작업을 하고 싶음
-
흥미로운 기사와 소프트웨어
- 다이어그램을 위한 강력한 오픈 소스 소프트웨어를 찾고 있었음
- Schemio가 레이더에 나타나지 않았던 것이 이상함
- 변환과 애니메이션에 기하학적 대수를 사용하는 것이 더 직관적일 것 같음
- 기하학적 대수에 대한 링크 제공
-
객체를 이동할 때 많은 자식 객체가 있는 경우, 모든 자식의 A(i-1) 항을 업데이트해야 함
- 이 과정이 비용이 많이 드는지 궁금함
- 적당한 크기의 도형에서는 괜찮을 수도 있음
-
Schemio가 매우 아름답고 실제로 사용할 가치가 있을 것 같음