[기타] 블로그에 Jupyter notebook 올리기

그동안 Jupyter notebook으로 작업을 하면서 다양한 Jupyter notebook 파일들을 티스토리 블로그에 올려야 했다.

인터넷을 통해 여러 가지 방법들을 찾았지만 , 뭔가 다들 내 블로그에 적용하기에는 2% 부족했었다.

지금까지 시도한 방법을 정리해 소개하고 혹시 다른 사람들도 나와 같은 문제점이 있다면 이 글을 읽고 해결하기 바라면서 글을 올린다.

 

 

방법 1

 

가장 기본적이고 찾아보면 첫 번째로 등장하는 방법이다.

 

Jupyter notebook에서 File -> Print Preview -> Ctrl+U로 전체 html 소스코드 열기 -> Ctrl+A와 Ctrl+C로 전체를 복사해 내 티스토리 블로그 html 편집창에 그대로 붙여 넣기

 

위의 방법이 Jupyter notebook의 html 자체를 가져오는 방식이다.

여기에 자신의 블로그에 알맞게 width와 다른 폰트 사이즈를 컨트롤하는 방식이 곁들여진다.

일단 굉장히 간단한 방법이다.

 

하지만 내가 위의 방법을 적용했을 때 , 2가지 정도의 문제점이 발생했다.

 

일단 , Jupyter notebook의 느낌을 살릴 수 없이 적용되었다는 게 첫 번째 문제였다.

위의 방식을 적용한 다른 사람들의 경우를 보면 붙여넣기한 Jupyter notebook html이 Jupyter notebook 스럽게 잘 보이는데 꼭 내 블로그에 적용하면 Jupyter notebook이 아니라 그냥 내가 손으로 글을 쓴 것처럼 변했다.

 

pandas로 표를 표현하면 , 그냥 내가 손으로 표를 만든 것처럼 나오고 , Jupyter notebook의 핵심인 회색 칸 같은 것이 다 사라져 버렸다.

 

두 번째 문제는 Jupyter notebook html이 블로그의 다른 부분을 침범하였다.

옆의 카테고리 부분까지 Jupyter notebook html이 겹쳐서 나왔고 , 이를 사용하기엔 문제가 있다고 판단하였다.

또한 이는 아래의 두번째 방법에서도 이야기할 문제다.

 

 

 

방법 2

 

다른 방법을 찾기 위해 구글링을 하던 도중 iframe에 대한 글을 보았다.

나도 보자마자 이거구나 생각했다.

 

왜냐면 Jupyter notebook에서 html로 쉽게 변환이 가능하고 , 그 html 파일을 iframe으로 보여주기만 하면 된다고 생각했기 때문이다.

 

일단 그럼 여기서 생각해야 될 부분이 , Jupyter notebook html 파일을 어디에 두고 불러와서 볼 것인가? 였다.

 

일단 생각나는 곳은 구글 드라이브 , 티스토리 저장소 , 깃헙 정도였다.

 

티스토리 저장소는 확인해본 결과 용량이 너무 적어서 패스

구글 드라이브와 깃헙인데 , 깃헙은 깃헙을 이용해서 블로그를 만드시는 분들이 있을 정도로 html에 대한 컨트롤이 쉽겠다고 판단 , 깃헙에 Jupyter notebook html 파일을 저장하고 iframe으로 블로그에 불러오자고 생각했다.

 

위의 방식대로 내 깃헙에 블로그 포스팅용 레포를 하나 파고 , 거기에 html 파일들을 저장 , 깃헙 블로그를 만들 때 사용하는 방식처럼 html 파일을 내 블로그의 iframe 안에 불러오도록 했다.

 

뭔가 잘 되는 것 같긴 한데 문제가 또 발생했다.

 

바로 위에서 이야기한 블로그의 다른 부분 침범 문제였다.

 

iframe의 옵션으로 width는 내 블로그 div 사이즈로 잘해주어서 왼쪽 오른쪽 영역을 침범하지는 않는데 이 Jupyter notebook html 길이만큼 높이를 정해주니까 맨 아래 다른 글 보기와 댓글 부분을 침범하였다.

 

여기서 내가 문제를 처리한 방법은 그냥 iframe 높이만큼 엔터를 쳐준 것이다 ㅋㅋ

 

그때 당시의 내 생각은 Jupyter notebook html 파일의 길이가 5000px면 엔터를 5000px 보다 많이 쳐주면 그 엔터 부분에는 iframe 안의 Jupyter notebook html이 나올 거고 그러면 딱 거기까지만 나오니까 세로 부분도 침범 안 하겠네? 였다.

 

실제로 해보니 세로 구간도 침범하지 않았고 , 이렇게 문제를 해결했다고 생각했다.

 

하지만 위의 방법도 문제가 있었는데 , 내 노트북 화면 사이즈에서는 영역 침범이 이루어지지 않았지만 , 다른 사이즈의 화면이나 창을 작게 만들면 해당 iframe이 변형되어 다시 세로 영역을 침범하였다.

 

이걸 발견한 건 꽤 오래되었지만 , 내 화면에서는 잘 나오기도 하고 귀찮아서 바꾸지 않고 있다가 이번에 제대로 한번 블로그 정비를 해야겠다 싶어 방법을 강구해 보았다.

 

 

 

방법 3

 

그럼 iframe이 왜 세로 부분을 넘어가냐에 대해서 생각해보았다.

iframe안의 Jupyter notebook html의 길이가 너무 길다는 문제가 있고 , 그 길이를 블로그 안에서 표현하기 위해 임의로 엔터를 쳤다는 문제가 있었다.

 

그러면 엔터가 아니라 다른 부분으로 먼저 Jupyter notebook html iframe이 들어갈 위치를 만들어주고 , 그 안에 딱 맞게 넣어준다면? 엔터가 아니니까 화면 크기 별로도 따로따로 작동하지 않을 거고 일관되게 적용될 거라 생각했다.

 

이 아이디어는 iframe에 대한 옵션을 찾아보다가 어떤 분이 iframe을 활용해 광고 잘림 현상을 해결하시는 것을 보고 떠올린 아이디어다.

 

그래서 내가 생각하는 iframe Jupyter notebook html의 개선 방법은 다음과 같다.

 

1. Jupyter notebook html 파일이 블로그 안에 들어갈 수 있을 정도로 높이를 먼저 찾는다.

2. div로 Jupyter notebook html이 들어갈 공간을 먼저 할당한다.

3. 그 div 안에 iframe으로 Jupyter notebook html 파일을 넣어준다.

 

즉 과거 엔터로 iframe의 자리를 마련한 것과 달리 div 안에 iframe 자리를 마련한 것이다.

 

이 방법으로는 현재 , 창 크기를 줄이면 iframe에 스크롤 바가 나오긴 하지만 , 예전처럼 블로그의 가로 세로 부분을 침범하지는 않는다. ( 사실 이 스크롤바 안 나오게 하려고 방법 2에서 엔터를 친 거긴 하다. 스크롤바가 있는 게 괜찮다면 진작 생각 안 해도 되는 문제긴 했다. 왜냐면 그냥 작은 iframe 안에 쑤셔 박고 그냥 iframe의 스크롤 내리면서 보면 되기 때문이다. )

 

아무튼 내가 사용하는 방법 3을 소개하자면 다음과 같다.

 

 

<div style="border: none; width: 블로그 글 너비; height: html 파일 높이px; overflow-x: hidden; overflow-y: hidden;">
  <iframe src="깃헙 html 파일 링크" style="height:html 파일 높이px; witdth:html 파일 너비; border: none;"></iframe>
</div>

 

 

위의 코드에서 블로그 글 너비와 html 파일 너비를 내 블로그 글 너비만큼 해주고 ( 100%로 해도 되긴 할듯 해보진 않았지만 ) html 파일이 iframe상에서 스크롤이 생기지 않을 만큼 px로 높이를 정해주고 이를 div에 같게 적용한다. 이후 ifame의 src에 내가 깃헙에 저장한 html 파일 링크를 붙여 넣어주면 된다. 

 

내 노트북 환경과 티스토리 미리 보기 ( 다양한 디바이스 환경에서의 미리보기 )에서는 아직 괜찮은 것 같긴 한데 , 어디서 또 문제가 발생할지는 모르겠다.

 

일단 괜찮아 보이긴 하니까 , 나중에 다른 문제를 발견하기 전까지는 이렇게 사용할 듯싶다.

 

혹시 제 블로그 글을 읽다가 또 어느 글에서 Jupyter notebook html 영역 침범 문제가 발생하거나 다른 이상한 현상이 보이면 댓글 남겨주세요.