[논문 리뷰] Chalktalk : A Visualization and Communication Language -- As a Tool in the Domain of Computer Science Education

Ken Perlin, Zhenyi He외 1명|arXiv (Cornell University)|2018. 09. 19.

Augmented Reality Applications참고 문헌 4인용 수 15

한 줄 요약

Chalktalk는 컴퓨터 과학 개념을 가르치기 위한 실시간, 상호작용 가능한 스케치를 가능하게 하는 오픈소스 시각화 및 커뮤니케이션 도구이다. 마우스로 그린 제스처를 프로그래밍 가능한 애니메이션 스케치로 인식함으로써, 이중 탐색 트리나 LIFO 스택과 같은 변화하는 데이터 구조를 실시간으로 시각화할 수 있다. 스케치 간 실시간 상호작용을 통해 재귀나 순회와 같은 복잡한 동작을 모델링할 수 있다.

ABSTRACT

In the context of a classroom lesson, concepts must be visualized and organized in many ways depending on the needs of the teacher and students. Traditional presentation media such as the blackboard or electronic whiteboard allow for static hand-drawn images, and slideshow software may be used to generate linear sequences of text and pre-animated images. However, none of these media support the creation of dynamic visualizations that can be manipulated, combined, or re-animated in real-time, and so demonstrating new concepts or adapting to changes in the requirements of a presentation is a challenge. Thus, we propose Chalktalk as a solution. Chalktalk is an open-source presentation and visualization tool in which the user's drawings are recognized as animated and interactive "sketches," which the user controls via mouse gestures. Sketches help users demonstrate and experiment with complex ideas (e.g. computer graphics, procedural animation, logic) during a live presentation without needing to create and structure all content ahead of time. Because sketches can interoperate and be programmed to represent underlying data in multiple ways, Chalktalk presents the opportunity to visualize key concepts in computer science: especially data structures, whose data and form change over time due to the variety of interactions within a computer system. To show Chalktalk's capabilities, we have prototyped sketch implementations for binary search tree (BST) and stack (LIFO) data structures, which take advantage of sketches' ability to interact and change at run-time. We discuss these prototypes and conclude with considerations for future research using the Chalktalk platform.

연구 동기 및 목표

• 데이터 구조나 알고리즘과 같은 동적 컴퓨터 과학 개념을 가르치는 데 있어 정적 프레젠테이션 도구의 한계를 해결하기 위해.
• 실시간으로 스케치를 조작하고 조합할 수 있는 유연하고 상호작용 가능한 시각화 환경을 개발하기 위해.
• 기본적인 데이터 구조—이중 탐색 트리와 LIFO 스택—를 위한 도메인 전용 스케치 프로토타입을 개발하여, 실시간 상호작용을 통해 그들의 동적 행동을 시각화하기 위해.
• 실시간 제스처 기반 시각화가 컴퓨터 과학 교육에서 개념적 이해를 향상시키는 데 어떻게 기여할 수 있는지 탐색하기 위해.
• 컴퓨터 과학 교육을 위한 보다 넓은 스케치 라이브러리의 기반을 마련하기 위해.

제안 방법

• Chalktalk는 사용자가 그린 입력을 실시간으로 반응하는 애니메이션 가능한 스케치로 변환하기 위해 제스처 인식을 사용한다.
• 스케치는 JavaScript 생성자와 'yield' 키워드를 사용하여 애니메이션 프레임 간 상태를 관리함으로써, 트리 순회와 같은 연산의 단계별 실행을 가능하게 한다.
• 데이터는 숫자, 문자열, 함수 기반 데이터를 전송할 수 있는 타입이 지정된 링크를 통해 스케치 간 흐름을 이루며, 스케치 유형에 대한 지식 없이도 상호운용성을 제공한다.
• 이중 탐색 트리와 스택의 프로토타입은 내부 데이터 구조(예: JavaScript 배열)를 사용하며, 드래그 앤 드롭으로 푸시, 스와이프로 팝을 구현하는 직관적인 제스처를 통해 기능을 노출한다.
• 시스템은 너비 우선 순회나 재귀 호출 스택 시뮬레이션과 같은 알고리즘 과정의 동적 시각화를 지원하며, 스케치 출력과 시각 피드백을 동기화함으로써 가능하게 한다.
• 스케치는 복잡한 상호작용 시스템을 형성할 수 있으며, 예를 들어 진자로 그래프를 제어하거나 트리의 연산 기록을 스택에 표시함으로써 추상 개념을 실시간으로 탐색할 수 있다.

실험 결과

연구 질문

• RQ1 실시간 제스처 기반 시각화는 데이터 구조나 알고리즘과 같은 동적 컴퓨터 과학 개념을 가르치는 데 어떻게 향상시킬 수 있는가?
• RQ2 상호작용 가능한 스케치가 실시간 사용자 제어를 통해 데이터 구조의 복잡한 행동(예: 재귀나 순회)을 얼마나 잘 모델링할 수 있는가?
• RQ3 어떻게 설계된 스케치는 임의의 데이터(함수 포함)를 전송하면서도 탄력적이고 조합 가능하며 확장 가능하게 상호운용성을 유지할 수 있는가?
• RQ4 교사가 수업 중에 실시간으로 시각화를 만들고 수정할 수 있도록 하는 데 가장 효과적인 설계 패턴과 상호작용 패러다임은 무엇인가?
• RQ5 이중 탐색 트리와 스택과 같은 스케치의 통합은 알고리즘 실행과 호출 스택 행동 간의 관계를 어떻게 시각화할 수 있는가?

주요 결과

• Chalktalk는 제스처 기반 입력과 실시간 애니메이션을 통해 이중 탐색 트리나 LIFO 스택과 같은 동적 데이터 구조를 실시간으로 상호작용 가능한 시각화할 수 있다.
• JavaScript 생성자와 'yield'의 사용은 트리 순회와 같은 연산의 단계별 실행을 가능하게 하며, 애니메이션 프레임 간 상태 유지 기능을 제공한다.
• 모든 호환 가능한 데이터(함수 콜백 포함)를 전송할 수 있는 데이터 링크를 통해 스케치 간 상호운용성이 가능하며, 강한 결합 없이도 복잡한 시스템 조합이 가능하다.
• 프로토타입 BST 스케치는 사용자가 그린 제스처로 시작하고 제어하는 순서에 따라 노드를 순차적으로 강조하여 순회 연산을 시각화한다.
• 스택 스케치는 드래그 앤 드롭과 스와이프 제스처를 통해 푸시 및 팝 기능을 지원하며, 중복 데이터는 무시되어 중복 작업을 방지한다.
• 연결된 BST와 스택 스케치는 재귀 알고리즘 실행과 호출 스택 행동 간의 관계를 시뮬레이션할 수 있으며, BST는 연산 기록을 출력하고 스택은 이를 기록으로서 표시한다.