워드프레스에서 수식 입력하는 방법

작성일자 글쓴이

블로그에 글을 쓰다 보면 종종 수식을 입력할 필요가 있습니다. 텍스트 모드에서 수식을 입력해 보겠다고 온갖 용을 써보지만 결국은 실망을 하고 멋진 수식을 표현해 줄 방법을 찾게 됩니다. 이 글에서는 워드프레스에서 수식 입력을 어떻게 하는지에 대해 자세히 알려드리겠습니다.


서론

워드프레스에서 수식 입력의 필요성을 느껴본적이 있나요? 여러분들 중에는 과학, 기술, 엔지니어링, 수학 등 수식이 필수적인 콘텐츠를 다루는 블로거가 아니어도, 가끔 블로그 포스트에 예쁜 수학적 표현이 필요했던 적이 있을 것입니다. 그런데 어떻게 해야 하나 하고 고민만 했던 분이라면 정확한 곳에 오신 것입니다.

워드프레스에서 수식 입력 방법을 설명하기위해 각종 수식을 형상화한 이미지

이 글에서는 워드프레스에서 수식 입력이라는 주제로, 워드프레스 사용자가 자신의 웹사이트에 수학적 수식을 쉽게 추가할 수 있는 방법을 자세히 안내하겠습니다.

워드프레스는 세계에서 가장 인기 있는 콘텐츠 관리 시스템 중 하나로, 그 유연성과 사용자 친화적인 인터페이스로 많은 사랑을 받고 있습니다. 그러나, 텍스트와 이미지 위주의 콘텐츠는 쉽게 처리할 수 있지만, 복잡한 수학적 표현이나 공식을 포함시키려고 할 때는 약간의 도전이 될 수 있습니다. 이러한 도전에도 불구하고, 몇 가지 간단한 방법과 도구를 통해 워드프레스에서 수식 입력을 손쉽게 할 수 있습니다.

그럼, 워드프레스에서 수식을 입력하는 방법을 살펴보며, 이 과정을 통해 웹사이트의 전문성과 가독성을 높여보도록 하겠습니다.


웹 수식 입력을 가능하게 해주는 라이브러리들

Mathjax

MathJax는 웹 페이지에서 복잡한 수학적 표현을 아름답게 렌더링하기 위해 설계된 오픈 소스 JavaScript 라이브러리입니다. 전 세계의 교육자, 연구자, 그리고 웹 개발자들에게 널리 사용되며, 웹 상에서 수학과 과학 콘텐츠의 접근성과 상호작용성을 크게 향상시킵니다.

KaTeX

KaTeX는 Khan Academy에서 개발한 빠른 수식 렌더링을 위한 JavaScript 라이브러리입니다. MathJax에 비해 렌더링 속도가 훨씬 빠르다는 것이 큰 장점으로 꼽힙니다. KaTeX는 LaTeX 수식을 웹 페이지에서 빠르게 렌더링할 수 있도록 설계되었으며, MathJax보다 가벼운 대신 모든 LaTeX 기능을 지원하지는 않습니다.

MathML

MathML(Mathematical Markup Language)은 수학적 표현을 기술하기 위한 XML 기반의 마크업 언어입니다. 일부 브라우저는 네이티브 MathML 지원을 제공하여, 별도의 JavaScript 라이브러리 없이도 수식을 웹 페이지에 직접 렌더링할 수 있습니다. 그러나 모든 브라우저에서 광범위하게 지원되지 않는다는 점과 복잡한 수식을 표현하기 위한 높은 학습 노력 필요가 단점으로 꼽힙니다.

ASCIIMath

ASCIIMath는 수학적 표현을 간단한 ASCII 문자로 작성할 수 있게 해주는 문법입니다. 이후 ASCIIMathML 스크립트를 사용하여 이러한 표현을 MathML로 변환하고, 웹 페이지에서 렌더링할 수 있습니다. 사용하기 쉽고 가볍지만, MathML의 브라우저 지원 한계를 그대로 가지고 있습니다.

LaTeX.js

LaTeX.js는 웹 페이지에서 LaTeX 문서를 HTML로 변환해주는 JavaScript 라이브러리입니다. LaTeX를 사용해 문서를 작성하는 사용자에게 친숙한 환경을 제공하며, 복잡한 수식을 포함한 문서를 웹에서 직접 렌더링할 수 있도록 돕습니다. 하지만, 이 라이브러리는 변환 과정에서 모든 LaTeX 기능을 완벽하게 지원하지 않을 수 있습니다.

종합해 보면, 각각의 라이브러리와 방법은 특정 상황과 요구 사항에 따라 장단점을 가집니다. MathJax는 광범위한 LaTeX 지원과 접근성이 강점이지만, 렌더링 속도가 느릴 수 있습니다. 반면, KaTeX는 빠른 렌더링 속도를 제공하지만, 지원하는 LaTeX 기능이 제한적일 수 있습니다. MathML은 네이티브 지원을 통한 표준 기반 접근을 제공하지만, 모든 브라우저에서 일관된 지원을 받지 못합니다. 따라서 웹 프로젝트의 특성, 대상 브라우저, 필요한 수식의 복잡성 등을 고려하여 가장 적합한 도구를 선택하는 것이 중요합니다.

이 글에서는 제가 사용하고 있는 Mathjax 라이브러리를 기준으로 설명해 나갈 예정임을 미리 말씀드립니다.


워드프레스에서 수식 입력 방법

워드프레스에서 수식을 사용할 수 있는 방법은 크게 두 가지로 나눌 수 있습니다. 이 두 방법은 각각의 특성과 활용도가 다르므로, 웹사이트의 목적과 콘텐츠의 성격에 따라 적합한 방법을 선택하는 것이 중요합니다. 이제 워드프레스에서 수식 입력을 위한 두 가지 주요 방법, 즉 플러그인 사용과 직접 스크립트 삽입 방법에 대해 자세히 알아보겠습니다.

플러그인 사용

워드프레스의 가장 큰 장점 중 하나는 강력한 플러그인 시스템을 통해 다양한 기능을 손쉽게 추가할 수 있다는 점입니다. 수학적 수식을 웹사이트에 포함시키고자 할 때, MathJax-latex 또는 Simple Mathjax와 같은 플러그인을 사용하는 것이 매우 편리한 방법입니다.

  • 설치 방법: 워드프레스 관리자 대시보드에서 “플러그인” 섹션으로 이동한 뒤, “새로 추가하기”를 클릭합니다. 검색 창에 “MathJax-latex” 또는 “Simple Mathjax” 를 입력하여 원하는 플러그인을 찾고, “지금 설치하기” 버튼을 클릭한 후 활성화합니다.
  • 기본 사용법: 대부분의 수식 플러그인은 포스트 편집기에서 직접 LaTeX 코드를 입력할 수 있게 해줍니다. 예를 들어, $$수식$$이나 $수식$ 같은 형태로 수식을 작성하면, 플러그인이 이를 자동으로 렌더링합니다.
  • 장단점: 플러그인을 사용하는 가장 큰 장점은 설치와 사용이 매우 간단하다는 점입니다. 사용자는 복잡한 코드나 설정 없이도 쉽게 수식을 웹사이트에 추가할 수 있습니다. 그러나 플러그인에 따라 추가되는 스크립트가 웹사이트의 로딩 시간에 영향을 줄 수 있으며, 때때로 호환성 문제가 발생할 수도 있습니다.

직접 스크립트 삽입

보다 직접적인 제어를 원하거나 특정 플러그인의 사용이 원치 않는 경우, MathJax CDN 스크립트를 웹사이트에 직접 추가하는 방법을 고려할 수 있습니다.

제가 지금 사용하고 있는 mathjax cdn 스크립트는 <script src=”//cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js”></script>입니다.

  • 스크립트 삽입 위치: 스크립트는 <head> 태그 내에 또는 </body> 태그 직전에 삽입할 수 있습니다. <head>에 삽입하면 페이지 로딩 시 스크립트가 먼저 로드되며, </body> 직전에 삽입하면 페이지의 나머지 콘텐츠가 우선적으로 로드된 후 스크립트가 로드됩니다.
  • 중요성: 스크립트 삽입 위치는 웹사이트의 로딩 시간과 사용자 경험에 큰 영향을 줄 수 있습니다. 일반적으로, 사용자에게 콘텐츠를 가능한 빨리 보여주고자 한다면 </body> 태그 직전에 스크립트를 삽입하는 것이 권장됩니다.

“워드프레스에서 수식 입력”을 위한 이 두 가지 방법은 각각의 장단점을 가지고 있으므로, 웹사이트의 필요와 사용자의 기술 수준에 따라 적합한 방법을 선택하는 것이 중요합니다. 플러그인은 사용이 간편하며, 직접 스크립트 삽입은 보다 세밀한 제어가 가능합니다. 어느 쪽을 선택하든, 워드프레스에서 수식을 효과적으로 사용하여 웹사이트의 전문성과 가독성을 높일 수 있을 것입니다.


Mathjax의 기본 사용법

워드프레스에서 수학적 표현의 미학과 정확성을 더하고 싶은 우리의 욕망을 담아, MathJax를 사용해 복잡한 수식을 쉽고 아름답게 표현하는 방법을 소개합니다. 이 섹션에서는 MathJax의 기본 사용법인 수식 작성, 수식 렌더링, 수식 번호 부여 등 기초 중의 기초만 언급하도록 하겠습니다.

Mathjax에 대한 심도 있는 공부를 하고자 하시면 mathjax documentation을 참조하기 바랍니다.

수식 작성하기

MathJax를 사용해 워드프레스에서 수식을 입력하는 첫 걸음은 LaTeX 문법에 익숙해지는 것입니다. LaTeX는 과학자, 수학자, 엔지니어들 사이에서 널리 사용되는 문서 준비 시스템 및 마크업 언어로, 복잡한 수학적 공식을 정확하게 표현할 수 있습니다.

기본 예제: 다음은 간단한 LaTeX 수식의 예시입니다.

\[ e^{i\pi} + 1 = 0 \]

이 코드를 워드프레스 포스트나 페이지에 입력하면, MathJax가 이를 아름다운 수식으로 렌더링합니다. 위 방법 말고도 수식을 표현하기 위한 여러가지 방법이 있으나 몇 가지만 더 소개하겠습니다.

\begin{equation} e^{i\pi} + 1 = 0 \end{equation}
$$  e^{i\pi} + 1 = 0 $$

포스트 글 중간에 위와 같은 LaTeX 표현식을 삽입하면 다음과 같은 수식이 화면에 표시됩니다.

$$ e^{i\pi} + 1 = 0 $$

이 수식은 오일러의 정리를 나타내며, 수학적 아름다움으로 유명한 수식입니다.

인라인 수식 삽입하기

우리가 수식을 쓰다 보면 위의 오일러 정리와 같이 한 라인의 중앙에 수식을 쓰는 경우가 있는가 하면 글이 진행되는 중간에 인라인 형태의 수식이 쓰이는 경우도 많습니다. 예를 들면 “오일러 정리는 $ e^{i\pi} + 1 = 0 $ 와 같이 표현되며 수학 역사상 가장 아름다운 수식이라고 일컬어지고 있습니다.”

이와 같은 인라인 수식을 표시하기 위해서는 다음과 같은 표현식을 사용하게 됩니다.

오일러 정리는 $  e^{i\pi} + 1 = 0 $ 와 같이 표현되며 수학 역사상 가장 아름다운 수식이라고 일컬어지고 있습니다.

인라인 수식 삽입시 주의해야 할 사항은 mathjax 관련 플러그 인을 설치해 사용할 경우, 달러 기호 사이에 수식을 쓰는 방식이 대부분 디폴트로 설정되어 있습니다. 그러므로 문제 없이 사용하면 됩니다.

하지만 위에서 언급한 cdn 스크립트를 삽입해서 사용하는 경우는 달러 기호를 인라인 수식에 사용하는 것을 별도로 정해줘야 하므로 다음과 같은 스크립트를 cdn 스크립트 앞에 추가해 주어야 합니다.

<script>
  window.MathJax = {
    tex: {
      inlineMath: [['$', '$'], ['\\(', '\\)']]
    }
  };
</script>
<script src="//cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>

이 스크립트의 의미는 인라인 수식을 삽입할 경우 달러 기호나 백슬래시 기호를 사용하겠다는 의미입니다.

수식 렌더링 이해하기

수식을 작성한 후, 웹사이트에서 이 수식이 어떻게 렌더링되는지 이해하는 것이 중요합니다. MathJax는 브라우저 상에서 동적으로 수식을 해석하고 렌더링하여, 수식을 고품질의 시각적 형태로 변환합니다. 이 과정은 사용자의 장치나 브라우저에 상관없이 일관된 결과를 제공합니다.

수식 번호 부여하기

일반 문서나 연구 문서에서 수식이 여러 개일 경우 각 수식에 번호를 부여하는 것은 일반적인 관행입니다. MathJax를 사용하면 LaTeX 문법을 활용해 수식에 번호를 자동으로 또는 수동으로 부여할 수 있습니다.

자동 번호 부여: MathJax 설정에서 수식에 자동으로 번호를 부여하도록 설정할 수 있습니다. 자동 넘버링을 필요로 하는 수식은 반드시 다음과 같은 방식으로 수식을 구현해야 합니다.

\begin{equation} 수식 \end{equation}

이 경우도 위의 인라인 수식 삽입의 경우와 마찬가지로 mathjax 관련 플러그 인을 설치해 사용할 때는 대부분 디폴트 설정으로 자동 사용이 가능하지만, cdn 스크립트를 삽입해 mathjax를 사용하는 경우는 다음과 같은 스크립트를 </body> 바로 앞에 추가해 주어야 합니다.

<script>
  window.MathJax = {
    tex: {
      inlineMath: [['$', '$'], ['\\(', '\\)']],
      tags: 'ams'
    }
  };
</script>
<script src="//cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>

수동 번호 부여: 특정 수식에만 번호를 부여하고 싶다면, LaTeX의 \tag{} 명령을 사용할 수 있습니다. 예를 들어, \tag{1}은 해당 수식에 “1”이라는 번호를 붙입니다. 예를 들어 다음과 같이 쓰면 

\[ e^{i\pi} + 1 = 0 \tag{1} \]

다음과 같이 번호 1 이 붙여진 수식을 화면에서 보게 됩니다.

\[ e^{i\pi} + 1 = 0 \tag{1} \]

이렇게 MathJax와 LaTeX 문법을 활용하면, 워드프레스에서도 과학적 글쓰기나 학술적 작업에 필요한 복잡한 수학적 표현을 정확하고 아름답게 제공할 수 있습니다. “워드프레스에서 수식 입력”하는 방법을 마스터함으로써, 콘텐츠의 전문성과 독자의 이해도를 한층 높일 수 있을 것입니다.


데체 CDN 서비스

웹 개발의 세계에서 콘텐츠 전송 네트워크(CDN)는 리소스를 빠르고 효율적으로 배포하는 중요한 도구입니다. 특히 “워드프레스에서 수식 입력”과 같은 기능을 구현할 때 MathJax와 같은 라이브러리를 사용하는 경우, CDN은 이러한 라이브러리의 로딩 속도를 크게 개선할 수 있습니다. 그럼에도 불구하고, 사용 중인 CDN 서비스에 문제가 발생하거나 서비스가 중단되는 경우를 대비해 백업 계획을 갖는 것이 중요합니다.

jsDelivr와 같은 대체 CDN

본 블로그에서는 포스트에 수식이 필요한 경우 jsDelivr의 CDN을 사용하고 있습니다.

jsDelivr는 오픈 소스 프로젝트를 위한 무료 CDN 서비스로, 전 세계 여러 지역에 걸쳐 분산된 서버를 통해 빠르고 신뢰성 있는 콘텐츠 배포를 지원합니다. MathJax와 같은 자바스크립트 라이브러리를 호스팅하며, 웹 개발자들이 전 세계 어디서나 접근 가능한 고속의 리소스 로딩을 보장받을 수 있게 해줍니다.

신뢰성: jsDelivr는 고가용성을 목표로 하는 설계 덕분에 매우 높은 신뢰성을 제공합니다. 하지만 어떤 온라인 서비스든 100% 가동 시간을 보장할 수 없기 때문에, 만약을 대비해 백업 CDN을 고려하는 것이 현명합니다.

대체 CDN 서비스 소개

UNPKG

UNPKG는 npm 패키지에 대한 빠르고 글로벌 CDN을 제공합니다. npm에 호스팅된 거의 모든 패키지를 브라우저에서 직접 사용할 수 있도록 해주며, 이는 MathJax 같은 라이브러리를 포함합니다. UNPKG를 통해 필요한 자바스크립트 라이브러리를 쉽게 링크하고 사용할 수 있습니다.

<script src=”https://unpkg.com/mathjax@3/es5/tex-chtml.js”></script>

Cloudflare

Cloudflare는 보안, 성능 및 신뢰성에 중점을 둔 또 다른 인기 있는 CDN 서비스입니다. 자체적으로 오픈 소스 프로젝트를 지원하는 데에도 적극적이며, 많은 라이브러리와 웹 자원들을 빠른 속도로 제공합니다. Cloudflare는 특히 웹사이트 보안 기능과 함께 CDN 서비스를 제공하는 것으로 잘 알려져 있습니다.

백업 계획

웹사이트나 애플리케이션에 핵심적인 외부 리소스를 사용할 때는, 주 CDN 서비스에 문제가 발생했을 경우를 대비해 백업 CDN을 설정하는 것이 좋습니다. 이를 위해 HTML 스크립트 태그 내에 백업 CDN 링크를 추가하고, 주 CDN 로딩에 실패했을 때 자동으로 백업 CDN에서 리소스를 로드하도록 하는 자바스크립트 로직을 구현할 수 있습니다.

<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js" onerror="backupCDN()"></script>
<script>
function backupCDN() {
  var script = document.createElement('script');
  script.src = "https://백업CDN주소/mathjax@3/es5/tex-chtml.js";
  document.head.appendChild(script);
}
</script>

결론적으로, 워드프레스에서 수식 입력을 위해 MathJax와 같은 라이브러리를 사용할 때, CDN은 리소스 로딩 속도와 웹사이트의 전반적인 성능을 크게 향상시키는 역할을 합니다. 그러나 서비스 중단이나 네트워크 문제에 대비하여 다양한 대체 CDN 서비스를 파악하고, 필요시 적절히 전환할 수 있는 백업 계획을 마련하는 것이 중요합니다.


결론

워드프레스에서 수식 입력하는 방법을 살펴보며, 수학적 표현을 웹사이트에 쉽고 정확하게 추가하는 다양한 방법들을 제가 사용해 본 경험 범위 내에셔 알아봤습니다. 플러그인을 사용하는 방법과 직접 스크립트를 삽입하는 방법, 그리고 이들의 장단점을 살펴봤습니다.

워드프레스에서 수식 입력 방법을 이해하는 것은 단순히 수식을 표현하는 것 이상의 의미를 가진다고 생각합니다. 교육 콘텐츠 제작자, 연구자, 기술 블로거 등 다양한 분야의 사람들이 자신의 지식과 발견을 공유하고, 이를 통해 독자들의 이해를 돕고 커뮤니티 내에서 지식을 확산시키는 중요한 수단이 될 수 있습니다.

웹사이트의 성능을 유지하면서도, 고도의 수학적 표현을 효과적으로 제공할 수 있는 방법을 선택하는 것은 각 웹사이트 관리자와 콘텐츠 제작자의 몫입니다. 이 글에서 제공된 정보와 조언이 여러분이 워드프레스에서 수식을 더 효율적으로 활용하는 데 도움이 되기를 바랍니다.

최종적으로, 수학적 표현의 정확한 사용은 웹사이트의 전문성을 높이고, 복잡한 개념을 명확하게 전달하는 데 있어 필수적입니다. 워드프레스에서 수식 입력 방법을 마스터함으로써, 여러분의 웹사이트가 지식의 전당으로서 더욱 충실한 역할을 수행할 수 있기를 기대합니다.

워드프레스에서 수식 입력 방법 이외에 다른 정보를 원하신다면 다음을 클릭하세요.