글에 수식을 어떻게 넣을 수 있는가?

들어가기 앞서

지식을 나누고자하는 좋은 마음으로 칼럼을 쓰고자 한 당신, 글을 쓰기 시작하고 얼마 지나지 않아 난관에 부딪히게 됩니다. 글자 크기는 본문 , 제목 6가지뿐이고, 글자 색상이나 배경색을 바꾸는 기능이 보이지 않습니다. 이러한 자잘한 것은 너그럽게 넘겼지만 수식을 쓰려니 눈앞이 어두워집니다. 네이버 카페 플랫폼이 제공해주던 편리한 글쓰기 기능을 떠나 야생의 HTML 방식을 접한 당신께 미약하지만 약간의 도움이 될만한 정보를 드리고자합니다.

1. 수식을 쉽고 간편하게 - 이미지 삽입

2. 수식을 깔끔하고 멋있게 - HTML 방식

3. 배경지식

후술할 두 방법의 근본적인 원리는 사실 동일합니다. 물론 이렇게 글을 쓰는 이유는 글이 작성되었을 때 글 전체적인 외관이 달라지는 디테일함의 차이가 있기 때문이고, 이왕이면 내가 정성들여 쓴 글이 내용적으로도 훌륭하지만 겉으로 봤을 때도 깔끔하고 멋있기를 원하시는 분이라면 충분히 고려해볼 가치가 있다고 생각합니다.

# 1. 수식을 쉽고 간편하게 - 이미지 삽입

사실 이 방식은 매우 익숙한 방식입니다. 우리가 원하던 수식을 캡처하여 이미지 파일 첨부 혹은 드래그 앤 드랍으로 글 내에서 내가 원하는 위치에 수식 이미지를 적절히 배치해주면 됩니다. 주의할 점은 사진이 삽입되면 글자처럼 취급되기 때문에 드래그 앤 드롭으로 삽입하는 경우에 클릭으로 이동시키기 힘드니 미리 엔터를 쳐서 공백을 입력해 둔 후 삽입하는게 좋습니다.

첨부된 사진을 클릭하면 몇가지 기능이 있는 팝업창이 뜨는데 이것을 통해 간편하게 사진의 크기를 100%, 50%, 25%로 줄일 수 있습니다.

여기서 한 발 더 나아가서 두개의 사진을 나란히 배치하고 싶은 경우에는 두 사진의 크기를 모두 50%로 설정하면 됩니다.

그러면 수식을 삽입해봅시다.

먼저 한글과 같이 익숙한 환경에서 수식을 썼다면, 이를 먼저 pdf 파일로 내보내기를 한 후 pdf 파일을 열어서 수식을 캡처하고 위와 같은 방식으로 삽입해주면 됩니다.

혹시 두 수식의 차이점이 보이시나요?

동일한 수식인데 왼쪽보다 오른쪽 수식이 더 선명하고 깔끔하게 보이실 것이라 생각합니다. 이것이 이미지로 삽입할 때 좀 더 신경써야할 부분입니다. 아래와 같이 왼쪽 수식은 우리가 앞서 만든 수식 pdf 파일을 켜자마자 캡처를 한 것이고, 오른쪽 수식은 화면에 꽉차도록 확대를 해서 캡처한 것입니다.

내용을 더 중요하시한다면 따로 위와 같이 번거롭게 작업하실 필욘 없지만, 조금이라도 깔끔함을 원하신다면 약간의 시간만 들이면 글이 한층 깔끔해집니다.

이 방식은 약간의 수고로움이 더해지더라도 상당히 간편하지만 그에 따른 단점도 있습니다.

[예시 1]

[예시 2]

[예시 3]

참고 : (https://genus.co.kr/catalog/2/10/228 [수능수학] 181130(가) 찬찬히 풀기 )

어떤게 문제인지 보이시나요?

동일한 글 내에서 나타나는 다양한 수식들의 크기가 모두 제각각으로 나타나는데 이것이 바로 간편한 방식에서 나타나는 단점입니다.

수식 자체가 아니라 수식을 캡처한 하나의 사각형이 이미지가 되기 때문에 위와 같이 동일한 50%로 이미지 크기를 설정하더라도 내가 캡처한 수식의 길이가 길면 길수록 작아집니다.

이 방식이 나쁘다는 것이 아니라 하나의 통일성있는 글을 쓰고자 하시는 분께는 이러한 것들이 꽤나 신경쓰이실 것입니다. 물론 각각의 사진의 크기를 다르게 설정할 수 있겠지만, 단순히 캡처하는 것보다 훨씬 부담스러운 작업이 될 것이구요. 그래서 이러한 문제점을 해결하는 것이 두 번째 방식입니다.

# 2. 수식을 깔끔하고 멋있게 - HTML 방식

공학에서는 trade off를 상당히 중요시합니다. 제한된 자원들을 어떻게 희생해서 원하는 결과물을 만들 것인지인데, 마침 이 글쓰기도 물론 내용 전달만을 생각해서 글의 외관을 희생할 수 도 있고, 내용과 외관까지 고려해서 약간의 시간을 좀 더 희생시킬 것인지와 같이 시간과 미적요소간의 trade off 관계가 있습니다. 사실 효율성을 중요시 하는 분은 너무 당연하게도 후자를 포기할 수 있지만, 독자에게 잘 읽히는 글들을 보면 어떻게 보이는가도 무시할 수 없는 요소입니다. 후술할 방식은 이와 비슷한 경험이 없는 글쓴이에게는 꽤 복잡하고 머리아픈 방식일지도 모릅니다. 하지만 조금만 익숙해진다면 나름 편리한 방법이 될 것이라 생각합니다.

0. 다시보기

먼저 앞서 우리가 이미지로 삽입했던 글의 여러 서식 기능 중에서 </> 를 눌러봅시다.

클릭만 했을 뿐인데 벌써 머리가 아파집니다. 이 코드를 조금만 보기 편하게 구분해봅시다.

우리가 지금 관심있는 것은 이미지 파일이므로 img가 붙어있는 코드를 해석해보면

<img 이것은 이미지이고

style : 이 이미지의 스타일은 다음과 같은데

"width :50%" 사진의 가로 너비는 50%입니다.

; 이미지 스타일 설명 끝

src 이미지의 소스는

"..." 입니다.

> 하나의 이미지 파일 끝

으로 해석할 수 있습니다.

즉, 우리가 삽입한 이미지는 <img> 라는 이미지 태그로 브라우저가 인식하는 HTML 파일에 들어가게 됩니다.

구체적인 요소들 하나하나는 지금 당장 무시하셔도 됩니다. 어차피 우리는 수식을 넣는 것이 목적이기 때문에 이 구조만 먼저 이해를 하면 됩니다.

1. 수식 만들기

이제부터 수식은 한글이나 워드로 작성하지 않고 LaTex 라는 어마무시하게 귀찮은 방식으로 작성할 것입니다.

먼저 아래 링크된 Codecogs에 접속합니다. (MathJax도 상관없습니다만 온라인으로 작업하실 분은 Codecogs가 편하실겁니다.)

https://www.codecogs.com/eqnedit.php

Codecogs에 접속하면 다음과 같은 화면이 나타납니다.

여기서 수식을 입력하는 영역에 클릭을 통해 수식을 입력해도 좋고, LaTex 문법을 아시는 분은 바로 수식을 입력하시면 됩니다.

참고할만한 LaTex 기호 정리 - https://jjycjnmath.tistory.com/117

수식을 입력하고 나면, 방금 작성한 수식의 미리보기가 나타나고 아래 여러가지 옵션과 url이 나옵니다.

두 번째 옵션을 클릭해서 HTML로 바꿔주시면 노란색 박스안에 좀전에 봤던 이미지 태그가 나오는데 이것을 Ctrl+c로 복사를 하고 다시 쓰던 글로 돌아와서 코드를 열고 원하는 위치에 Ctrl+v로 붙여넣기를 합니다.

다시 코드를 눌러 원래 글쓰기로 돌아가면 우리가 쓰던 수식이 나타납니다.

앞서 두 방식이 근본적으로 차이가 없다고 한 이유가 이 방식 또한 수식이 이미지 파일로 들어가기 때문입니다.

이렇게 하면 어떤 수식을 넣든 일관성 있는 크기와 해상도를 유지할 수 있고, 여기서 더 나아가 스타일도 우리가 마음대로 넣을 수 있기 때문에 내가 원하는 글을 만들 수 있다는 장점이 있습니다.

2. 문제점

문제는 글이 길어질 때 발생합니다.

열심히 글을 쓰고 마지막으로 수식만 다듬고 글을 저장하면 되는데! 코드를 눌러보니 모든 코드가 하나로 붙어있습니다.

내가 도대체 어디에 수식을 넣으려 했는지 찾기가 막막해지는데 이를 해결할 두가지 방법이 있습니다.

방법 1. 글 자체에 수식 넣을 위치를 미리 적어두기

그림과 같이 글 원문에 내가 알아보기 쉬운 문구를 적어두고, 코드에서 Ctrl + f 로 해당 문구를 찾습니다.

그리고 해당 문구 영역을 지우고 내가 알아보기 쉽게 코드를 벌린 뒤, 수식 코드를 집어넣으면 됩니다.

물론 어디부터 어디까지 지워야할지 난감하실겁니다.

모든 문장뿐만 아니라 글의 구성 요소들은 하나의 <> </> 으로 둘러싸여있습니다. 그러므로 내가 찾은 문구와 가장 가까운 두개의 <> </> 쌍을 찾아 지우고, 그 영역에 아까 복사해온 <img> 코드를 넣으시면 됩니다.

방법 2. 티스토리 글쓰기 이용

티스토리는 지금 우리가 글쓰는 방식과 동일하고, 코드를 우리가 알기 쉽게 구분해줍니다.

그래서 미리 티스토리에서 글을 쓴 후, html 보기를 눌러서 나타난 코드 전체를 복사해서 붙여넣기 하시면 됩니다. 주의할 점은 이미지 파일은 따로 제누스 글쓰기 자체에서 다시 넣어줘야 한다는 점 입니다. 이 글 또한 티스토리에서 미리 쓰고 복사해오는 것이긴 합니다.(하하..)

물론 지금 글하나 쓰자고 수식 html 코드를 따오고, 티스토리까지 가는거면 파리잡는데 핵폭탄을 쏘는게 아닌가라는 생각이 드시겠지만, 역시나 내 칼럼이 깔끔하고 이쁘게 보이고싶으시다 하면 충분히 고려해볼만합니다.

매우 좋은 예시

( https://genus.co.kr/catalog/2/10/152 [지구과학] 행성의 이심률에 따른 공전 주기 동안 입사하는 총 복사 에너지양의 변화)

# 3. 배경지식

물론 이거 외에도 더 많은 기능들이 있습니다. 그런 것들은 차후 글을 수정해서 더 추가하든지 새로 글을 쓰든 하도록 하겠습니다.

뭐 여튼.. 그러합니다.

일단 임시로 먼저 글을 써두고 내용은 계속 수정할 예정입니다.