Smolts: 프로그래밍 언어 교육을 위한 교육용 통합 개발 환경(IDE)
1. 이게 뭔가요?
이 글은 프로그래밍 언어를 교육하는 목적으로 개발된 도구인 '스몰츠(smolts)'를 소개합니다. 여기서 통합 개발 환경(IDE)이란 프로그래밍 언어로 컴퓨터에 내릴 명령문(코드)을 작성하고, 오류를 검사하며, 실행까지 한곳에서 할 수 있도록 만든 작업 프로그램을 말합니다. 스몰츠는 웹 브라우저에서 바로 접속해 쓸 수 있는 도구로, 슈리람 크리슈나무르티 교수 연구진의 교육용 언어 체계인 '에스몰(SMoL, Standard Model of Languages)'을 바탕으로 작성된 프로그램을 한 단계씩 실행해 볼 수 있도록 지원합니다.
이 도구의 핵심은 프로그램이 실행되는 동안 컴퓨터 내부에서 일어나는 과정을 눈으로 직접 볼 수 있게 시각화해 준다는 점입니다. 컴퓨터는 명령을 처리할 때 어떤 값을 저장소에 보관하고, 이름과 값을 어떻게 연결하며, 다음에 어떤 계산을 이어갈지 끊임없이 추적합니다. 스몰츠는 실행 중인 프로그램의 현재 저장소(store), 변수와 값이 연결된 환경(environment), 앞으로 실행할 남은 계산 흐름(continuation)을 화면에 그래픽으로 나타내 줍니다. 아울러 코드 편집창 내부에도 각 변수와 계산식의 결과값을 직접 표시해 주며, 앞으로 진행하는 것뿐만 아니라 뒤로 되감는 기능과 커서가 놓인 위치까지 한 번에 실행하는 기능도 제공합니다.
2. 왜 화제인가요?
프로그래밍 언어의 기본 원리를 배울 때는 컴퓨터 내부의 메모리 상태나 계산 순서가 눈에 직접 보이지 않아 초보자가 실행 흐름을 머릿속으로만 상상해야 하는 어려움이 있습니다. 스몰츠는 브라우저 안에서 에스몰 언어 프로그램을 단계별로 실행하면서 컴퓨터 내부 상태를 곧바로 확인할 수 있도록 고안되었습니다. 개발자는 2년 전 프로그래밍 언어 강의에 활용할 목적으로 이 도구를 만들었으며, 쾅천 루와 슈리람 크리슈나무르티가 개발한 스태커(Stacker) 프로젝트에서 직접적인 영감을 받았다고 밝힙니다.
다만 개발자는 이 도구를 아직 실제 강의 현장에서 직접 활용해보지는 못했다고 설명합니다. 또한 웹 브라우저 안에서 깃(Git, 코드 변경 이력을 관리하는 시스템) 기반으로 프로젝트를 다루는 기능이 아직 반쯤 완성된 상태라 다소 불안정하고 매끄럽지 못하며, 화면 상태를 제어하는 기술인 스벨트(Svelte)와 관련된 오류도 남아 있는 등 아직 완전히 다듬어지지 않은 시험 단계라는 한계가 있습니다.
3. 핵심 내용
Smolts(스몰츠): 프로그래밍 언어 교육을 위해 만든 교육용 통합 개발 환경(IDE)
여기서 통합 개발 환경(IDE, Integrated Development Environment)이란, 컴퓨터 프로그래밍에 필요한 코드 작성기, 실행 도구, 오류 점검 기능 등을 프로그램 하나로 편리하게 모아 둔 작업 소프트웨어를 뜻합니다.
작성 일시: 2026년 9월 4일 금요일 08:37 (중앙유럽 표준시 CEST)
작성자: 토니 가녹-존스 (Tony Garnock-Jones)
핵심 주제 태그: #교육 #타입스크립트(TypeScript, 웹 개발에 쓰이는 프로그래밍 언어) #스벨트(Svelte, 화면을 만들기 위한 웹 개발 도구) #출시소식 #기술 #웹
영구 링크(해당 글로 언제든 바로 접속할 수 있는 고유 인터넷 주소)
화면 예시 이미지: object1.smol 파일의 실행 모습을 보여주는 Smolts 화면 갈무리 object1.smol 파일이 실행되는 Smolts의 화면 갈무리입니다. 클릭하면 큰 이미지로 확대해 보실 수 있습니다.
직접 체험해 볼 수 있는 웹사이트 주소: https://smol.leastfixedpoint.com/
2년 전, 저는 슈리람 크리슈나무르티(Shriram Krishnamurthi) 교수 연구진이 프로그래밍 언어 교육 교재인 PLAI(Programming Languages: Application and Interpretation)의 일환으로 연구한 'SMoL(표준 언어 모델, Standard Model of Languages)' 교육 방식을 토대로, 교육용 언어를 위한 통합 개발 환경(IDE)을 직접 개발했습니다. 이 프로젝트는 쿠앙첸 루(Kuang-Chen Lu)와 슈리람 교수가 프로그램 실행 과정을 시각적으로 보여주기 위해 훌륭하게 만들어낸 시각화 도구 '스태커(Stacker)'에서 직접적으로 큰 영감을 받아 시작되었습니다.
다음 주소에 접속하시면 프로그램을 웹 브라우저에서 바로 사용해 보실 수 있습니다: https://smol.leastfixedpoint.com/
프로그램이 어떤 구조와 코드로 만들어졌는지 깃(Git, 소프트웨어의 설계도인 소스 코드 변경 기록을 관리하는 시스템) 저장소에서 원본 코드를 확인해 보실 수 있습니다.
위에서 보여드린 화면 갈무리 이미지의 원본 고화질 버전을 자세히 살펴보실 수 있습니다.
이 글의 맨 아래로 내려가시면 프로그램이 실제로 어떻게 작동하는지 보여주는 짧은 시연 영상도 감상하실 수 있습니다.
이 도구를 처음 기획한 목적은 대학 등의 강의실에서 학생들에게 '프로그래밍 언어론'을 가르칠 때 활용하기 위함이었습니다. 아직 실제 강의에서 사용해 보지는 못했지만, 다른 사람들도 유용하게 쓸 수 있도록 세상에 이러한 도구가 존재한다는 사실을 널리 알리는 것이 좋겠다고 생각했습니다.
Smolts를 사용하면 괄호 기반의 표현 방식(S-expression, 데이터를 괄호 구조로 알기 쉽게 묶어 쓰는 표기법)으로 작성된 SMoL 방언 코드를 입력하고, 프로그램이 실행되는 단계를 한 걸음씩 차례대로 밟아가며 살펴볼 수 있습니다. 프로그램이 돌아가는 동안, 이 개발 환경은 컴퓨터가 다음에 실행할 작업이 무엇인지(연속체, Continuation), 현재 어떤 이름들이 정의되어 있는지(환경, Environment), 그리고 컴퓨터 메모리 저장소에 실제 어떤 값들이 저장되어 있는지(저장소, Store)를 화면에 알기 쉽게 그려서 보여줍니다. 또한 코드 편집기 본문 위에도 변수와 계산식에 어떤 결괏값이 들어있는지 직접 표시해 주어 한눈에 파악할 수 있게 돕습니다.
버튼을 너무 빠르게 눌러서 방금 일어난 세부 동작을 미처 확인하지 못하고 지나쳤다면, 이전 실행 단계로 되돌아가는 '뒤로 가기(Step backwards)' 기능을 쓸 수 있습니다. 또한 원하는 특정 코드 위치까지 단번에 실행을 건너뛰는 '커서 위치까지 실행(Run to cursor)' 기능도 함께 제공합니다.
저는 이 프로젝트에 아직 완전히 꽃피우지 못한 훌륭한 가능성이 아주 많이 담겨 있다고 생각합니다. 별도의 프로그램 설치 없이 크롬이나 사파리 같은 웹 브라우저 안에서 깃(Git, 코드 버전 관리 도구)을 기반으로 프로젝트를 관리한다는 발상은 매우 멋진 시도입니다. 비록 지금의 구현 상태는 다소 매끄럽지 못하고 절반 정도만 완성된 수준이지만, 그 기본 개념이 가진 잠재력을 충분히 생생하게 보여준다고 봅니다. 다만 화면을 처리하는 프레임워크인 스벨트(Svelte)에서 데이터의 최신 상태를 관리하는 부분과 관련해 여전히 고쳐야 할 몇 가지 오류(버그)들이 남아 있기는 합니다.
어쨌든 편하게 한번 사용해 보시기 바랍니다. 도구에 대한 의견이나 개선 제안, 혹은 코드를 직접 고쳐서 보내주시는 기여(풀 리퀘스트, Pull Request) 모두 언제나 환영합니다. 제게 이메일을 보내주시거나, 탈중앙형 소셜 미디어인 페디버스(fedi)에서 저를 태그하여 의견을 남겨주셔도 좋습니다.
시연 영상
이 영상은 2024년 7월에 녹화된 것으로 지금보다 약간 이전 버전의 시스템을 보여주고 있지만, 프로그램을 조작하고 확인하는 핵심 동작 원리는 현재 최신 버전과 완전히 동일합니다.
4. 나에게 어떤 영향이 있나요?
일반 인터넷 이용자의 일상생활에 곧바로 직접적인 영향을 주는 도구는 아닙니다. 널리 쓰이는 상용 소프트웨어나 일반인을 위한 완성형 서비스가 아니라, 프로그래밍 언어의 이론과 동작 체계를 가르치고 배우기 위한 특수 목적의 교육용 도구이기 때문입니다.
반면 프로그래밍 언어의 내부 원리를 공부하는 학생이나 이를 시각적으로 설명해야 하는 컴퓨터 과학 교육자에게는 유용한 참고 자료가 될 수 있습니다. 복잡한 계산 흐름과 메모리 변화 과정을 한 단계씩 되감아가며 확인할 수 있어 언어의 기본 원리를 이해하는 보조 도구로 살펴볼 가치가 있습니다.