목차
갑자기 이걸 왜?
요즘 수학/물리 공부 그리고 이를 기반으로 한 인공지능과 기계학습 공부, 더 나아가 이를 선물/옵션 공부를 학문적으로 다시 해보고 싶어졌는데요. 최근에 시간이 조금 생겼기에, 길지는 않은 시간이지만 한 번 조금이라도 해보자! 하는 마음을 가지고 블로그에도 공부하며 정리한 내용을 올려가면서 꾸준히라도 해보자고 마음을 먹었습니다.
그러려면 제일 중요한 것, 수식의 입력이겠죠?
갑자기 무슨 뜬금없는 얘기냐 하실 수 있지만, 수학은 물론이고 물리, 인공지능, 기계학습, 선물/옵션 모두 수학이 사용되는 양이 굉장히 방대한 분야들입니다. 수식을 쓰지 않고 말로 하자면 엄청나게 진부한 내용이 될 수밖에 없는데요. 그런 의미에서 수식을 입력할 수 있는 것은 무지무지 중요한 것이죠🤔
이번 글에서는 지루한 서론은 여기까지 하고!
수식을 블로그에 넣는 여러가지 방법들
사실 여러가지 방법을 생각해볼 수 있을 것 같아요.
워드프로세서에서 작성해서 캡쳐하거나 복사해서 붙여넣기
워드프로세서라면 한글이나 마이크로소프트 워드, 이외에도 폴라리스 오피스, 애플 페이지 등 많은 것들이 있죠. 이 모든 프로그램들이 수식 입력을 지원하기는 합니다. 그리고 글씨체도 크게 나쁘지 않아요! 여기서 작성해서 붙여넣기 해도 괜찮을 거라고 생각해요.
제가 위에서 한 것처럼 한컴 한글이나 마이크로소프트 워드 등에서 수식을 작성한 다음, 그것을 캡쳐하든지 하면 됩니다.
장점은,
- 수식 작성을 위해 코드를 외우거나 할 것도 없고, 버튼을 눌러가면서 쉽게 작성할 수 있다
- 여러 줄을 한 번에 작성해서 복사하는 것도 가능은 하다
- 요즘은 세상이 좋아져서 LaTeX를 지원하는 워드프로세서 (대표적으로 마이크로소프트 워드)도 있다
- 이미 작성해놓은 그림이나 다름없으므로 로딩 속도가 빠르다
단점은
- 아무래도 프로그램을 여기저기 왔다갔다 하면서 써야 하다보니 귀찮다
- 글씨체가 워드프로그램에 다라 달라질 수 있어서. 위에서도 한컴 한글, 마이크로소프트 워드, 그리고 LaTeX가 글씨체가 모두 다르죠?
그러면 여기서 뜬금없이 튀어나온 LaTeX이 뭔지 간단히 알아볼까요?
LaTeX란?
LaTeX는 레이텍이라고 읽는데, 수식 등 과학적인 문서를 작성할 때에 자주 사용되는 소프트웨어 시스템을 말합니다. 거의 모든 수학/과학 서적, 논문 등에서 수식을 표현할 때에는 이 시스템을 이용한다고 해도 과언이 아닌데요.
우리가 사용하는 워드나 한글의 경우에는 WYSIWYG (what you see is what you get), 즉, 보여지는 대로의 문서를 얻는다는 형식의 워드프로세서인데요. LaTeX의 경우에는 '어디가 인테그랄이고 어디가 시그마이고 어디가 벡터이고'와 같은 세부사항을 코딩하듯이 정해야 하는 방식입니다. 조금 더 자세히 보여드리면,
| H\psi = E \psi | $H\psi = E\psi$ |
와 같이 어느 부분이 그냥 기울어진 글자이고 (H, E) 어느 부분이 그리스 문자(\psi)인지를 지정해야 합니다. 처음 사용하면 아주 귀찮을 수 있고 오히려 생산성이 떨어지기도 하겠죠? 저걸 외우느라 시간이 더 오래 걸릴 거고 코드를 찾느라 시간이 더 오래 걸리고. 실제로 어디서 봤는 지 기억이 안 나는데 TeX 기반의 논문을 작성하는 쪽이 워드프로세서 등으로 논문을 작성하는 경우보다 논문 작성에 걸리는 시간이 유의미하게 길었다고 했던 것 같아요. 물론 TeX 프로그램들 중에서도 WYSIWYG 방식도 있기는 하지만, 대체로는 코드를 작성하는 방식으로 많이 하기 때문인가 봅니다.
그래도 저 수식의 스타일링의 매력이 있기 때문에, 포기하지 못하죠! LaTeX로 쓴 수식과 글은 정말로 멋지니까!
MathJax에 대해 알아보기
MathJax는 미국 수학회에서 웹브라우저(크롬, 엣지, 사파리 등)에서 수식을 예쁘게 볼 수 있도록 자바스크립트를 통해 LaTeX를 쓸 수 있도록 제작한 라이브러리입니다. 즉, 우리가 기본적으로 HTML코드 등으로 수식을 예쁘게 쓸 수 없는 반면, 간단한 설정을 통해서 블로그 포스팅 등에서도 수식을 쓸 수 있도록 도와주는 도구라는 건데요. MathJax 홈페이지에 들어가서 설명서를 보시면, 블로그 포스팅이나 블로그 세팅에,
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>이 코드만 추가해주면 사용할 수 있다고 합니다.
MathJax
Beautiful math in all browsers.
www.mathjax.org
워드프레스와 같은 사이트에는 플러그인의 형태로 MathJax를 사용할 수 있게 되어 있다고 되어 있지만 티스토리 플러그인에는 없어요. 수식 작성을 위해 외부에 있는 그렇다면, 티스토리 블로그에서 MathJax를 쓰는 방법은 2가지로 요약해볼 수 있겠습니다.
- 블로그관리 > 스킨편집에서 HTML 소스코드에 <head> ~ </head> 사이에 위의 코드를 추가하여 수정해 한번에 정리
- 서식을 작성하여 각 포스팅을 작성할 때에 맨 위에 서식을 붙여서나 포스팅 작성 시 HTML 모드로 들어가서 위의 코드를 입력
MathJax 설정하기
개인적으로는 2번의 방안이 좋아보이는데, 그 이유는 제 블로그의 경우에는 경제 관련된 것도 많이 다루기 때문이에요. 이게 뭔 말이냐면, 달러 표시가 들어갈 일이 많은데 스킨편집의 HTML 소스코드를 수정해 버리면 인라인(inline), 즉 따로 줄을 띄우지 않고 줄글 형태로 수식만 추가하고자 할 때에 보통 달러 기호를 사용해서 표시하게 되는 경우가 많은데요.
만약 스킨편집에서 수정을 해버리면 여태 작성한 모든 글에 이것이 적용되죠? 이걸 MathJax에서는 달러의 의미로 쓴 달러기호인지, 인라인 수식입력을 위한 달러기호인지를 인식하지 못 한다는 것이죠. 그래서 달러 기호가 적힌 모든 글에서 오류가 나타날 수밖에 없어요. 이 부분에 대해서는 저도 MathJax의 공식문서(documentation)에 나와 있는 것을 보고 알게 되었어요. 예를 들면,
| \$450\$ (450이라는 숫자를 수식처럼 입력) | '$450' (450달러라는 표시) |
| $450$ | $450 |
그러니까, 다음과 같은 문장(대충 적어본 겁니다)이 다른 글에 있었다면, 그리고 스킨편집을 건드렸다면 이렇게 되어버리는 것이죠.
| \$450 달러를 가지고 \$500달러를 벌어보겠다는 마음을 가지고 있다면, 그것은 100% 이상의 수익률을 원한다고 볼 수 있다. |
| $450 달러를 가지고 $500달러를 벌어보겠다는 마음을 가지고 있다면, 그것은 100% 이상의 수익률을 원한다고 볼 수 있다. |
저는 수학, 물리, 혹은 수식을 다뤄야 할 일이 있는 경제 글에 대해서만 수식을 적용하고 싶습니다. 그럴 때에는 각 포스팅마다 HTML 모드에서 위의 코드를 추가해야 하는 번거로움이 있죠. 그래서 서식 관리에서 수식인라인입력이라는 코드를 HTML 모드에서 넣고 서식작성을 해두었습니다. 이렇게 되면 원할 때에 \$ 를 사용하여 인라인 입력도 할 수 있고 수식을 아예 넣을 계획이 없으면 서식 로딩을 안 하면 되거든요!! 수식을 입력하고자 하는 포스팅에서는 글을 작성하시기 전 맨 처음부분이 좋은데요! 거기서 아래의 D처럼 글꼴 고르시는 줄 맨 끝쯤에 있는 '...'에서 입력해둔 서식을 입력하시면 됩니다.
 |
 |
 |
 |
| A | B | C | D |
혹시나 하는 마음에 인라인입력 코드도 같이 적어두도록 하겠습니다.
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<script>
MathJax = {
tex: {
inlineMath: [['$', '$'], ['\\(', '\\)']]
}
};
</script>
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js">
</script>이외의 자질구레한 MathJax의 설정이나 트윅 등은 필요하거나 도움이 될 만한 것이 있으면 추후 포스팅에서 올려보도록 할게요.
간단한 수식 작성 예
LaTeX 코드에 대해서는 추후 포스팅에서 자세히 다루겠습니다. 우선은 이미 알고 계시다는 가정 하에 작성했다는 점 양해 부탁드릴게요
인라인 수식의 경우에는 \$, \$ 사이에 수식 코드를 입력하시면 되고(무슨 이유에서인지 코드에서 같이 선언했던 '\\(' delimiter는 작동을 안 하네요) 한 줄 띄워서 정중앙에 수식을 두고 싶으시면(가장 일반적인 방법) \$\$, \$\$ 사이에 두시면 됩니다. 예를 들면,
피타고라스 정리는 $a^{2} + b^{2} = c^{2}$로 표현되는 것은 잘 알 것이고, $\pi$를 양변에 곱한다면, $$a^{2}\pi + b^{2}\pi = c^{2}\pi$$가 되므로 직각삼각형의 각 변의 길이와 이와 관련된 원들의 면적과의 연관성도 유추해볼 수 있다.
앞의 두 식은 \$ 쌍만 사용했고, 마지막 식은 \$\$를 사용했습니다. 수식이 훨씬 멋있고 편하게 그려져서 마음이 편안하네요
한 줄 요약
수식입력은 조금 느릴 수는 있어도 LaTeX를 사용하는 것이 깔끔하고, MathJax를 블로그에 로드해주면 가능
'다른 공부들 > 수학' 카테고리의 다른 글
| [Kreyszig 공업수학][선형대수] 7장 (3) 선형독립/종속, rank (0) | 2023.09.05 |
|---|---|
| [Kreyszig 공업수학][선형대수] 7장 (2) 연립방정식 기본, 행사다리꼴 (0) | 2023.09.04 |
| [Kreyszig 공업수학][선형대수] 7장 (1) 행렬의 기본연산, 종류에 대해 (1) | 2023.09.03 |
| [Kreyszig 공업수학] 시리즈에 들어가며 (0) | 2023.09.02 |
| 책에 나오는 것처럼 수학 그래프를 멋지고 쉽게 그리는 방법 (0) | 2023.08.22 |
댓글