Crosscut, 그림으로 계산하는 도구는 어디서 써볼까?
그림 속 점 하나를 옮겼더니 다른 점도 같은 가로 위치를 따라 움직인다. 선과 도형에 계산 규칙을 붙인 Crosscut은 지금 어디서 직접 만져 볼 수 있을까?
- Crosscut은 그림 안에 계산과 움직임을 붙이는 Ink & Switch의 연구 도구다.
- 공식 설명글의 내장 데모는 마우스로 조작할 수 있으며, 가로 960px 이상의 화면을 안내한다.
- 직접 다이어그램을 제작할 브라우저 편집기를 찾는다면 별도 도구 Apparatus도 살펴볼 만하다.
설치 파일보다 공식 글의 데모부터 연다
Crosscut을 경험하려면 공식 연구 글을 큰 화면에서 열면 된다. 본문 곳곳의 데모에서 점을 드래그해 도형의 관계가 유지되는 모습을 볼 수 있다. 페이지는 가로 960px 이상의 브라우저 창을 안내한다.
원래 태블릿과 펜을 위해 설계한 도구를 설명글 안에서는 마우스로 조작하도록 단순화했다. 이 체험 경로를 완전한 작도 앱의 배포와 혼동하면 안 된다. 설명글은 2022년 3월에 공개된 연구 자료다.
그린 대상과 계산 규칙을 같은 공간에서 바꾼다
Crosscut 프로젝트는 스케치를 먼저 그리고 그 안에 동작을 더하는 방식을 제안한다. 작은 스케치를 다른 스케치 안에 넣어 재사용할 수 있어, 간단한 부품을 조합해 모델을 키우는 것이 목표다.
검은 점과 선이 눈에 보이는 도형이라면 노란 연결은 그 도형에 계산 관계를 붙인다. 두 점의 가로 좌표를 같게 연결한 데모에서는 한 점을 옮기면 다른 점도 가로 위치를 맞춘다. 핵심은 별도의 코드 화면에서 결과를 상상하는 대신, 눈앞의 대상과 그 관계를 함께 움직여 보는 데 있다.
예쁜 그림을 완성하는 일보다 ‘이 값을 바꾸면 무엇이 함께 바뀌는가’를 탐색하는 데 관심이 있다면 이 차이가 중요하다. 정적인 도표는 이미 내린 결론을 전달하지만, 조작 가능한 모델은 가정을 바꾸며 결과를 살피는 데 쓸 수 있다.
직접 제작할 편집기가 필요하다면 Apparatus와 구별한다
Apparatus는 그래픽 편집과 프로그래밍을 결합한 별도 도구다. 공식 사이트에 브라우저 편집기 실행 링크와 도형·차트 예제가 있고, 속성 계산에는 JavaScript 표현식을 사용한다. 시각적인 다이어그램을 만들되 필요한 수식을 직접 입력하려는 독자에게 더 구체적인 제작 출발점을 제공한다.
같은 연구소의 Inkbase는 손으로 그린 스케치를 스프레드시트처럼 프로그래밍할 수 있는지 탐색했다. 그림의 객체와 속성, 반응형 계산을 결합하며 스크립트도 사용한다. 손그림 기반이라는 이유만으로 코드를 전혀 쓰지 않는 도구라고 보면 차이를 놓친다.
| 관심사 | 열어 볼 자료 |
|---|---|
| 점을 움직이며 계산 관계를 직접 느껴 보고 싶다 | Crosscut의 본문 내장 데모 |
| 그래픽과 수식을 조합해 다이어그램을 만들고 싶다 | Apparatus의 편집기·표현식 문서 |
| 손그림에 반응형 계산을 붙이는 설계가 궁금하다 | Inkbase의 연구 설명과 예제 |
Crosscut 데모를 볼 때는 점이 움직이는 모습뿐 아니라 무엇과 연결돼 함께 바뀌는지 살펴보면 된다. 완성 그림보다 관계가 먼저 보이기 시작하면, 이 연구가 말하는 ‘계산하는 스케치’의 의미도 분명해진다.