오늘만 무료 어플에 대한 글을 쓰다 불현 듯 "HTML에서 수식을 표시하는 좋은 방법이 없을까?"하는 생각이 떠올랐다. 이런 생각을 한 이유는 예전에 HTML에서 수식을 표현하기 위한 프로젝트가 진행됐던 기억이 있기 때문이다. 그런데 막상 찾아 보니 HTML에서 수식을 표현하는 것은 모두 이미지 방식이었다. 다만 이런 이미지를 잡아 HTML에 올리는 것이 불편하기 때문에 텍스(TeX) 형태로 입력하면 이미지 링크를 알려 주는 사이트만 있었다.

먼저 발견한 사이트는 Online LaTeX Equation Editor    라는 사이트이다. 라텍스 형식으로 수식을 입력하면 본문에 삽입할 수 있는 링크를 알려 준다. 이 외에 LaTeX Equation Editor - SITMO    라는 유사한 사이트도 있었다. 두 사이트 모두 라텍스 형태로 수식을 입력하면 이미지로 수식을 표현해 주는 사이트였다.

요즘은 수식은 거의 사용하지 않는다. 따라서 HTML에서 수식을 표현하는 방법을 굳이 따로 찾을 필요는 없었다.그런데 수학을 좋아하고 또 대학원에서 통신을 전공했기 때문에 요즘 사용하지 않는 수식이지만 HTML에서 편하게 입력할 수 있는 방법을 찾게됐다. 그러다 똑 같은 방식은 아니지만 HTML에 텍스 형태로 수식을 입력하면 자동으로 이미지로 바꿔주는 방법    을 알 수 있었다.

Tistory에서 수식 표현하기    라는 글을 보면 mathTeX    를 이용해서 손쉽게 HTML내에 수식을 삽입하는 방법이 나온다. 티스토리    이기 때문에 스크립트를 직접 입력하는 방법을 택하고 있다. 이 것을 보니 텍스트큐브    의 플러그인으로 만들어도 괜찮겠다는 생각이 들어 텍스트큐브    의 플러그인으로 만들었다. 다만 Tistory에서 수식 표현하기    에서 mathtex_server의 값(http://www.problem-solving.be/cgi-bin/mathtex.cgi    )은 http://www.forkosh.dreamhost.com/mathtex.cgi    로 바꿔 주어야 잘 동작했다.

근의 공식

다음은 이 플러그인을 이용해서 근의 공식을 구해 본 것이다. 고등학교 때에는 껌씹는 기분으로 했던 증명인데 오늘 다시 증명해 보려고 하니 의외로 어렵다.

그래프

위에 표현된 수식을 보면 알 수 있지만 상당히 깔끔하다. 텍스 문법만 익숙하다면 웹 상에서 수학 교육을 해도 될 듯하다. 또 텍스 수식을 입력하면 그래프를 그려 주는 사이트나 플러그인이 있다면 정말 괜찮겠다는 생각이 들었다. 목마른 놈이 우물을 파고, 자빠진 김에 쉬어 간다고 이왕 시작된 일 플러그인에 그래프를 그리는 기능까지 추가했다. 물론 형식의 텍스의 형식이 아니라 WZGrapher    의 형식을 따른다. 다음 그래프는 다음 수식을 그래프로 그린 것이다.

<texgp>cos(pi*x)/(-LN2*x)</texgp>

플러그인

플러그인의 설정 부분을 만드는 것이 귀찮아 요즘 만드는 플러그인은 공개하지 않고 모두 혼자서 사용하고 있다. 이 플러그인은 따로 설정 부분을 만들 필요가 없기 때문에 공개한다. 사용법은 간다하다. 이 플러그인을 플러그인 폴더에 폴더째 복사한 뒤 플러그인 관리자에서 활성화하면 된다. 그리고 수식이 필요할 때에는 <tex>..</tex>, <texeq>..</texeq>를 사용하면 된다. <tex>..</tex>는 본문에 작은 수식을 삽입할 때 사용하며, <texeq>..</texeq>는 본문과 별도로 다른 줄에 큰 수식을 삽입할 때 사용한다. 또 그래프를 그리고 싶다면 위의 예처럼 <texgp>...</texgp>에 수식을 두면 된다.

또 텍스 문법을 모른다면 Online LaTeX Equation Editor    나 LaTeX Equation Editor - SITMO    와 같은 위지윅 편집기를 이용해서 수식을 만들고 만들어진 수식을 HTML내에 붙여 넣으면 된다. 다만 이 플러그인에 대한 지원은 없을 것이다. 또 플러그인의 설치나 동작에 대한 질문도 따로 받지 않겠다. 받아서 동작하면 사용하고 동작하지 않으면 삭제하기 바란다.

• 내려받기: vTeXGen.zip