# 선형 대수를 활용한 인터랙티브 다이어그램 편집기 개발 사례

> Clean Markdown view of GeekNews topic #18334. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=18334](https://news.hada.io/topic?id=18334)
- GeekNews Markdown: [https://news.hada.io/topic/18334.md](https://news.hada.io/topic/18334.md)
- Type: GN+
- Author: [neo](https://news.hada.io/@neo)
- Published: 2024-12-19T09:53:06+09:00
- Updated: 2024-12-19T09:53:06+09:00
- Original source: [medium.com/@ivan.ishubin](https://medium.com/@ivan.ishubin/how-i-used-linear-algebra-to-build-an-interactive-diagramming-editor-and-why-matrix-math-is-d5bd552f2e8d)
- Points: 2
- Comments: 1

## Topic Body

- 행렬은 학교에서 배운 중요한 선형 대수 개념 중 하나이며, 다양한 문제를 해결하는 데 유용함. 이 글에서는 **Schemio**라는 인터랙티브 다이어그램 편집기를 개발하면서 행렬을 어떻게 활용했는지를 설명함.

### Schemio의 초기 개발 단계
- 초기 Schemio는 간단한 형태로, 사용자가 도형을 만들고 이동, 크기 조정, 회전할 수 있었음.
- 도형은 위치, 크기, 회전 각도로 정의된 간단한 영역으로 표현되었음.
- 데이터 구조는 도형을 평면 배열로 나타냈음.

### 계층 구조의 문제
- 도형을 서로 연결하고 복잡한 상호작용을 만들기 위해 **아이템 계층 구조**를 도입함.
- SVG를 사용하면 계층 구조를 쉽게 렌더링할 수 있지만, Schemio는 렌더링 이상의 기능을 제공해야 했음.
- 로컬 좌표와 세계 좌표 간의 변환이 필요했음.

### 스케일링과 피벗 포인트
- 스케일링은 객체의 크기를 동적으로 조정할 수 있게 해주며, 피벗 포인트는 회전의 중심을 정의함.
- 스케일링과 피벗 포인트를 추가하면서 변환 관리가 복잡해졌고, 행렬을 사용하여 문제를 해결함.

### 행렬 변환 기초
- 변환은 행렬을 사용하여 표현할 수 있음. 예를 들어, 공간의 한 점은 3x1 행렬로 표현됨.
- 변환 행렬과 점 행렬을 곱하여 변환된 점을 얻을 수 있음.
- 변환 행렬을 조합하여 다양한 변환을 수행할 수 있음.

### 세계 좌표와 로컬 좌표
- 로컬 좌표를 세계 좌표로 변환하는 것은 간단하지만, 반대의 경우는 복잡함.
- 행렬의 역행렬을 사용하여 세계 좌표를 로컬 좌표로 변환할 수 있음.

### 객체의 장착 및 분리: 계층적 변환의 도전
- 객체를 다른 객체에 드래그 앤 드롭하거나 계층 구조를 변경할 때, 새로운 위치와 회전을 재계산해야 함.
- 드래그된 객체의 위치와 회전을 조정하여 화면에서 자연스럽게 이동하도록 함.

### 마무리
- Schemio 개발 과정에서 수학적 개념을 활용하여 복잡한 문제를 해결함.
- 프로젝트에 관심이 있다면 GitHub에서 소스 코드를 확인할 수 있으며, Schemio 웹사이트에서 직접 사용해볼 수 있음.

## Comments



### Comment 32520

- Author: neo
- Created: 2024-12-19T09:53:06+09:00
- Points: 1

###### [Hacker News 의견](https://news.ycombinator.com/item?id=42438767) 
- 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가 매우 아름답고 실제로 사용할 가치가 있을 것 같음