Wiki and Jupyter

위키

  • 여러가지 위키를 상당기간 검토하거나 사용해 봤다.
  • 미디어위키. 일단 가장 표준적인 시스템이라는 점에서 보증할 수 있고, 기능이 풍부하며, 확장성 역시 좋다. 그러나 미디어위키 문법은 아주 지저분하고, APM 시스템 기반이라 포터블 하지는 못하다.
  • 깃허브 골룸. DB 의존적이지 않은 대신 Git을 통해 버전관리가 이루어진다. 어차피 DB가 필요한 만큼의 대규모 위키를 운영할 것도 아니므로 이것은 전혀 문제되지 않는다. 또 깃허브 향 마크다운 문법 역시 매력적이다. 설치 방법도 크게 까다롭지는 않다. 그럼에도 불구하고 뭔가 부족하다는 느낌이 든다. 하지만 기본 개념 자체는 아주 좋다.
  • 징고(Jingo). 골룸 비스무레한 것을 node.js와 자바스크립트로 만들어 놓은 것이다. 역시 상당히 좋지만 아직 완성도가 너무 낮다. 겨우 구색만 갖춘 느낌. 그러나 역시 node.js 기반의 소프트웨어는 항상 나를 기쁘게 한다.
  • 티들리위키. 단순무식한게 아주 좋고, 달랑 하나의 파일만으로 포터블성이 극대화된게 아주 천재적이다. 다만 기본 UI가 위키라기 보다는 블로그에 가깝다. 아쉬운 점은, 티들리위키 문법을 사용하고 싶지는 않기 때문에 마크다운 플러그인을 넣어 봤는데 지나치게 허접하다는 점이다.
  • 기타 서비스형 위키로, Torchpad를 사용하고 있는데... 골룸처럼 깃허브향 마크다운 문법 기반이라 너무 좋고, 필요한 확장이 모두 기본적으로 셋팅되어 있을 뿐만 아니라, 그림 삽입 같은 것은 그냥 마우스 드래그만 해 주면 자동적으로 업로드 및 태깅이 되기 때문에 너무 편하다. 단점은 한글 입력시 끝글자가 사라져 버리는 버그가 있고, 깃허브 연동 기능이 아직 제공되지 않는다. 그리고 커뮤니티가 거의 죽어있는 것을 봐서는 곧 망할 것 같은 느낌이 들어 불안하다. 서비스형 위키는 아무래도 내가 통제할 수 없다는 점 때문에 심리적인 불안감을 떨치기 어렵다.

Jupyter

  • 그런데, iPython notebook 즉 Jupyter를 보면, 기본적으로 훌륭하게 마크다운 문법이 지원되는 점을 볼 수 있다.
  • 게다가 한큐에 서버 셋팅까지 되고...
  • 각종 언어 커널만 심어주면 인라인으로 코딩 및 결과까지 보여준다.
  • 그리고 이 모든 걸 전부 다 .ipynb 파일 하나에 싹 다 저장할 수 있다.
  • 게다가 온라인, 오프라인 어느쪽으로든 이건 .html로 렌더링을 쉽게 해 줄 수 있다.
  • 심지어 깃허브에서는 직접 렌더링해서 볼 수 있다.
  • 아무튼 킹왕짱이다.

아이디어

  • 아이디어는 간단하다.
  • Jupyter를 뜯어고쳐서(?) 골룸 위키 처럼 만들어보면 어떨까?
  • 즉 위키 문서 파일 역할을 .ipynb 파일이 하도록 시스템을 구성해 주고, Jupyter 프론트엔드 쪽에 문서 검색기능 같은 추가 요소를 더 주는 것이다.
  • 그리고 화면 좌측에 트리 같은걸 자동 생성해서 브라우징 할 수 있도록 해 주면 더 좋겠다.
  • 그리고 열람 모드에서는 Jekill 같은 느낌으로 그냥 열람만 할 수 있도록 하고, 편집 모드에서는 Jupyter 네이티브로 편집 가능하도록 해 준다.
  • 그러면 코딩과 문서의 환상적인 조합이 이루어질 뿐만 아니라, 퍼블리싱까지 되는 셈이다.

좀 더 아이디어를 구체화해서 추가해 본다...

Wiki = Jupyter + Github

아이디어

  • Jupyter와 Github를 잘 조합해서 Wiki 역할을 할 수 있는 정적인(Static) 웹사이트를 만들 수 있을 것 같다.
  • 이렇게 구성하면 별도의 웹개발 과정이 필요없을 수도 있다. (JavaScript 따위를 구사하지 않아도...ㅎㅎ)
  • 또한 Github를 서버로 삼게 되므로, 별도의 서버를 구성하지 않아도 될 것이다.
  • 또한 Jupyter는 아주 훌륭한 Markdown 편집기이기도 하다.
  • Markdown으로 작성한 문서는 nbconvert 유틸리티 명령을 사용해서 간단히 html로 전환될 수 있다.
  • 굳이 전환하지 않아도 Github 자체적으로 .ipynb 파일을 자동으로 html 렌더링해주기도 한다. (다만 이때는 속도가 좀 느려질 것임)
  • 그림파일은 Github의 Issue 메뉴에 Drag&Drop으로 간단히 업로드하면 될 것이다.
  • 기타 다른 파일들은 Google Drive 따위를 이용해도 좋지 않을까.

예상되는 장점

  • 별도의 전용 웹서버를 호스팅할 필요가 없다. 그냥 Github 서버를 공짜로 쓸 수 있으니까.
  • Markdown 문법의 장점을 극대화할 수 있다. 문서작성 생산성이 크게 올라간다.
  • 기존의 Wiki 소프트웨어들은, Code를 Highlight해 주는 기능만 있었을 뿐이다. 그러나 Jupyter를 사용하게 되면 그에 더하여 Code를 실행한 결과까지 그대로 수월하게 보여줄 수 있다.
  • Git을 이용해서 로컬과 Github 사이에 싱크하기가 좋다. 로컬에 간단히 싱크 스크립트를 만들어놓고, 터미널 명령을 집어넣어주면 간단히 이루어질 것이다. 물론 Git이기 때문에 문서의 버전관리도 자동으로 이루어진다.
  • 문서의 퀄리티를 최대한 끌어올릴 수 있다. Markdown 및 CodeHilight, 그리고 Code 실행결과까지 아름답게 간단히 구성된다.
  • Mathjax 수식입력기능이 기본으로 지원되므로, 그냥 그대로 사용하면 된다.
  • Jupyter의 기본적인 특성인 멀티커널을 활용해서 여러 언어들에 쉽게 대응이 된다.

단점

  • Jupyter의 Markdown 문서 안에서, 웬만한 html 태그들은 잘 먹는데, 유독 iframe 태그를 직접 넣으면 작동을 안하는 단점이 있다. 물론 극복 방법은 있으며, 아래의 팁에서 기술해 둔다.
  • 동적인 웹페이지를 구성하기는 어렵다. 하지만 웹에 게시되는 문서작성이 목적이라면 굳이 동적으로 개발할 이유가 없다. 굳이 하려면, 외부의 다른 동적인 웹페이지를 iframe을 이용해서 삽입해 넣으면 되지 않을까?
  • 그림이나 파일을 간단하게 업로드하면서 첨부해주는 방법이 없다. 별도로 다른 곳에 업로드한 다음, 그것을 링크해 줄 수 있을 뿐이다. 이점이 좀 번거롭다.
  • 문서작성 및 업로드는 현실적으로 볼 때 오로지 Jupyter가 작동되는 컴퓨터에서만 가능할 것이다. 따라서 모바일 디바이스에서 문서를 작성해서 올리거나 하기는 어렵다. 뭐 굳이 방법을 찾으면 되긴 하겠지만서도...

구성방법

  • 로컬PC에는 Jupyter 환경을 구성한다.
  • Github에 프로젝트를 생성한다.
  • 로컬PC의 작업 디렉토리를 Github와 싱크시킨다.
  • Git 싱크 명령 스크립트를 짜 둔다.
  • 필요하다면 새로운 문서를 작성할 때 마다 index.html 파일에 자동으로 추가해서 갱신해주는 스크립트도 짜 놓으면 편할 것 같다.
  • 이제 문서를 하나씩 작성해서 내용을 만들어간다.

Jupyter에서 문서작성시 몇가지 팁

.ipynb 파일을 .html로 전환

ipython nbconvert ex.ipynb

Jupyter에서 쉘커맨드 사용

  • Julia 커널 상태일 때 : ;를 앞에 붙여서 명령을 쓰면 된다. 예를 들면,
;ls
  • Python 커널 상태일 때 : !를 앞에 붙여서 명령을 쓰면 된다. 예를 들면,
!ls

iframe 태그를 먹이는 방법 (1)

# Import the IPython display module
from IPython.display import IFrame

# Use the IFrame display fuction to display a certain URL
IFrame('https://www.google.com/calendar/embed?title=%EA%B9%80%EB%8F%99%ED%98%B8%20%EC%BA%98%EB%A6%B0%EB%8D%94&showTitle=0&height=600&wkst=2&bgcolor=%23FFFFFF&src=sj3a4mt66hncf9rma8cd6depq0%40group.calendar.google.com&color=%2329527A&src=avct45uopkadsos47ma6ahip04%40group.calendar.google.com&color=%23182C57&src=ht3jlfaac5lfd6263ulfh4tql8%40group.calendar.google.com&color=%232F6309&src=p%23weather%40group.v.calendar.google.com&color=%232F6309&src=ko.south_korea%23holiday%40group.v.calendar.google.com&color=%23711616&ctz=Asia%2FSeoul', width=800, height=600)

iframe 태그를 먹이는 방법 (2)

%%html
<iframe src="http://en.wikipedia.org/wiki/Markdown" width="100%" height="400px" frameborder="0">
</iframe>
  • 구글 캘린더를 집어넣는 예시
%%html
<iframe src="https://www.google.com/calendar/embed?title=%EA%B9%80%EB%8F%99%ED%98%B8%20%EC%BA%98%EB%A6%B0%EB%8D%94&amp;showTitle=0&amp;height=600&amp;wkst=2&amp;bgcolor=%23FFFFFF&amp;src=sj3a4mt66hncf9rma8cd6depq0%40group.calendar.google.com&amp;color=%2329527A&amp;src=avct45uopkadsos47ma6ahip04%40group.calendar.google.com&amp;color=%23182C57&amp;src=ht3jlfaac5lfd6263ulfh4tql8%40group.calendar.google.com&amp;color=%232F6309&amp;src=p%23weather%40group.v.calendar.google.com&amp;color=%232F6309&amp;src=ko.south_korea%23holiday%40group.v.calendar.google.com&amp;color=%23711616&amp;ctz=Asia%2FSeoul" style=" border:solid 1px #777 " width="800" height="600" frameborder="0" scrolling="no"></iframe>