수식, 어떻게 그릴까? Desmos vs JSXGraph
안녕하세요~, 코드넛 프론트엔드 개발자 DEV.H 예요!
오늘은 최근 진행했던 수학 시각화 라이브러리 조사랑 실제 도입 테스트 과정을 공유해보려 해요 ㅎㅎ "사용자가 입력한 수식을 어떻게 하면 가장 역동적이고 정확하게 화면에 그려낼 수 있을까?"라는 질문에서 시작된 이야기에요.
후보는 딱 두 개였어요. 완성형 엔진의 대표주자 Desmos API, 그리고 무한한 자유도를 가진 JSXGraph. 각각의 특징을 살펴보고, 실제로 Math CANVAS에 붙여보는 프로토타입 테스트까지 해봤어요.
Desmos API, 수식만 던지면 끝
Desmos는 이미 미국 SAT 공식 계산기로 채택될 만큼 검증된 도구예요. LaTeX 수식을 넣어주면 내부 엔진이 알아서 그래프를 그려주는 선언형 구조라, 빠르게 구현해야 할 때는 정말 강력한 선택지예요.
다만 UI가 Desmos의 틀 안에 고정되어 있어서, '우리 서비스만의 인터랙션'을 넣으려면 한계가 생기더라고요. 규모가 커질수록 올라가는 비용과 외부 플랫폼 의존도도 장기적으로는 부담이 될 수 있는 부분이었어요.
JSXGraph, 백지에서 직접 그리는 느낌
JSXGraph는 반대로 개발자에게 완전한 자유를 주는 프레임워크예요. 점, 선, 원 같은 수학적 객체를 하나하나 직접 정의하고, 그 사이의 관계를 설계해 나가는 방식이에요.
오픈소스(LGPL/MIT)라 라이선스 비용이 없고, 우리가 원하는 방식으로 인터랙션을 100% 설계할 수 있다는 점이 매력적이었어요. 기술을 직접 쌓아갈 수 있다는 것도 큰 장점이고요.
실제로 붙여봤어요 — Math CANVAS 도입 테스트기
이론 비교만 하고 끝내긴 좀 아쉽잖아요? 그래서 Math CANVAS에 JSXGraph를 연동하는 프로토타입을 만들어봤어요.
테스트한 시나리오는 이런 식이에요. 이차함수 f(x) = ax² + bx + c에서 학생이 a, b, c 슬라이더를 움직이면, 그래프가 실시간으로 반응하는 구조예요. 단순히 그래프를 보여주는 게 아니라, 변수를 직접 조작하며 함수의 변화를 눈으로 확인하는 학습 경험을 만든 거예요.
수식 입력 방식도 두 가지를 지원해봤어요. input 상자에 직접 타이핑하는 방식과, 키보드 아이콘을 눌러 수식 입력 툴을 띄워 입력하는 방식인데요, 수학 기호나 그리스 문자처럼 키보드로 치기 어려운 표현들은 수식 입력 툴이 훨씬 편하더라고요.
실제 구현하며 마주한 고민들
JSXGraph로 그래프를 그리는 것 자체는 어렵지 않았지만, 사용자 경험을 고려하면 수식 처리에서 고민이 많았습니다.
특히 LaTeX와 JSXGraph 사이의 변환 문제가 핵심이었어요. JSXGraph는 x^2 같은 기본 수식은 처리하지만, 분수나 루트 같은 LaTeX 표현은 직접 해석하지 못합니다.
이를 해결하기 위해 Cortex JS Compute Engine을 활용해 LaTeX 수식을 파싱하고, 변수 추출 및 계산 가능한 형태로 변환했습니다. 단순 문자열 치환으로는 한계가 있었고, 복잡한 수식은 수학 구조를 이해하는 엔진이 필요했습니다
JSXGraph 사용 팁
그래서 우리의 선택은?
빠른 기능 구현이 우선이라면 Desmos가 여전히 강력한 선택이에요. 하지만 저희처럼 서비스 고유의 인터랙션과 장기적인 확장성을 중요하게 본다면, JSXGraph로 기술을 내재화하는 방향이 더 맞는다는 결론을 내렸어요.
수학적 개념을 화면에서 살아 움직이게 만드는 일은 언제나 흥미로운 도전인 것 같아요. 이번 테스트 결과를 바탕으로, 앞으로 사용자에게 더 직관적인 수학 학습 경험을 만들어가겠습니다.
같은 고민을 하고 계신 분들께 조금이나마 도움이 되면 좋겠어요! 궁금한 점은 댓글로 언제든 이야기해요. 😄
