수식 표현

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

수식 표현

에 대한 글을 쓰다 불현 듯 "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)[1]http://www.forkosh.com/mathtex.cgi로 바꿔 주어야 잘 동작[2]했다.

근의 공식

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

의 일반해 구하기

일반적으로 근의 공식은 와 같은 완전 제곱의 형태로 바꿔 일반 해를 구하는 방법이다. 위의 식은 으로 바꾸면 해를 구할 수 있다.

  1. 일단 각항을 로 나눈다. 로 나누기 위해서 이어야 한다.

  2. 1차항의 계수()를 2로 나누어 제곱한 값()을 더하고 뺀다.

    더하고 뺏기 때문에 수식의 변화는 없다. 이렇게 하는 이유는 앞에서 설명했듯이 에 대한 완전 제곱꼴로 바꾸기 위해서다.

  3. 완전 제곱으로 바꾸기 위해 필요한 항()을 빼고 나머지는 우변으로 넘긴다.

  4. 이제 에 대한 완전 제곱 꼴로 바꾸고 우변을 정리한다.

  5. 왼쪽 수식에서 제곱을 없애면 우변은 형태로 바뀐다. 또 로 바뀌기 때문에 최종적으로 우변은 다음처럼 된다.

  6. 다시 상수를 우변으로 넘겨 에 대해 정리하면 다음과 같이 된다.

그래프

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


플러그인 코드: <texgp>cos(pi*x)/(-LN2*x)</texgp>

플러그인

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

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

관련 글타래


  1. 글을 쓸 당시에는 동작하지 않았지만 최근 확인해 보니 잘 동작했다. 
  2. 요즘은 다른 도메인에서 mathTex 서버를 사용하는 것을 허용하지 않는다.