웹에 공유할 수 있는 슬라이드 만들기 근데 이제 html을 곁들인
이제 키노트 안써도 된다 !!!
아마 많은 사람들이 그러하듯 저 또한 (학교에서도) 회사에서 발표자료를 만들 일이 꽤 많습니다.
발표 자료에는 여러가지 형태가 있는데요.
아래 그림처럼 크게 3가지 정도로 나눠 볼 수 있고 각각의 특징은 이러합니다.
그리고 저는 전달 자체보다 그 준비에 시간을 많이 쏟는 것을 원치 않기에 상당히 많은 내용들을 키노트의 형태로 준비했습니다.
그리고 이러한 키노트의 또 다른 단점은
- 로컬에서 파일 형태로 관리 해야함.
- 뷰어(
.key,.ppt,.hwp등)가 설치 되어 있지 않으면 보기가 어려움 (그나마 pdf 변환으로 해결 가능) - 디자인, 템플릿 고민, 이미지 배치 폰트 설정 등에 쓰이는 시간 조차도 귀찮음.
등이 있다고 생각합니다.
새로운 형태의 발표자료
그런데 최근 (사실 최근은 아니고 조금 됨) 꽤 재미있는 형태의 발표 자료를 보았는데요.
github.io를 이용해서 웹에 발표 슬라이드를, 그것도 단순히 pdf 처럼 한 방향으로 넘기지도 않는 방법이 있었습니다.
방법 탐색
이를 어떻게 해낼 수 있을까 찾기 위해서 repository를 들여다 보니 발표자료는 index.html로 되어있고 이에 원본이 되는 노트북이 각 주차별로 디렉토리에 저장되어 있음을 알 수 있었습니다.
노트북은 ipynb 형태로 되어 있기 때문에.
colab에서 노트북을 만들고, html로 export 하면 되겠구나 라는 생각을 하게 됩니다.
그러나 아래 그림에서 보듯… colab은 html로 export를 지원하지 않았고….
아무리 봐도 슬라이드에 markdown이 들어간 것 같아서, github io, github action, markdown, slide , ipynb 등을 조합해가며 구글링을 해봤지만 결과가 없어서 결국 원작자 카일선생님에게 물어보게 됩니다.
사실 완전히는 이해하지 못했지만 쉽다고 하셔서… (시간도 늦었고 ㅋㅋ) 다시 노가다를 하게 됩니다.
이전에 강의에 쓰던 노트북(ipynb 파일)을 작업 할때 jupyter lab을 설치 했었기 때문에 이를 이용해서 할 수 있겠구나 라고 했는데… jupyter notebook 은 jupyter lab과 다르다는 걸 배웠습니다.
그래서 여전히 머리를 굴리던 중 메타몽님의 힌트 jupyter notebook nbconvert slides 으로 구글링을 하여 아래와 같은 좋은 레퍼런스를 찾았습니다.
핵심 요약
이를 통해 배운 내용을 요약하면 다음과 같습니다.
1. Jupyter notebook으로 (lab 은 안됨)
2. Slideshow 설정을 하고 (menu -> View -> Cell Toolbar)
3. ipynb를 만든 다음
4. nbconvert를 이용하여 html을 만들고 (이때 index.html로 만들어야 github page에서 확인 가능)
5. github repository에 올린 후
6. github page에 설정을 해주면
7. 짜잔 slideshow 기능이 들어간 발표자료가 html 형태로 공유가 됨여기서 3번과 6번을 제외한 다른 것들은 크게 어렵지 않아 생략하고 2개에 대한 추가 설명을 작성합니다.
ipynb 만들기
ipynb를 만들때 markdown block을 만들 수 있는데, 이때 가능한 설정은
- slide
- subslide
- fragment
3가지 입니다. note 와 skip 이 있긴 한데 각각 발표자용, 그리고 코드 실행을 위한 block 이라 사용하지 않았습니다. (저는 R을 더 잘 활용하다보니, 코드 실행이 필요하다면 Rmarkdown이나 Shiny를 사용합니다.)
아무튼 위 3개 헷갈리는 블록들을 잘 표현하기 위해 아래와 같이 이미지를 그려보았는데요.
사실 제일 좋은 방법은 아래 예시 markdown을 한번 html로 뽑아보는게 최고가 아닐까 생각합니다.( <-- , -->로 block을 구분함)
<-- [slides]# Hello World-->
<-- [fragment]- 두둥등장--><-- [fragment]- 얘네는- 한번에 다같이- 등장-->
<-- [subslide]## 불판 갈았습니다 --><-- [fragment]- 이제 이건 익숙하시죠--><-- [slide]# 다음 슬라이드-->
물론 fragment 가 너무 많아 화면을 넘어가거나, img태그의 사이즈 조절 등 더 디테일한 조정도 가능은 할 것 같은데 아직 익숙하지 않아서 그 부분은 더 연구해볼 필요가 있을 것 같습니다.
github page 설정
은 아래 이미지와 비슷하게 나오면 됩니다. 이러면 이제 https://[username].github.io/[reponame]/[directory]/ 을 통해 발표자료 (index.html)에 접근 할 수 있습니다.
outro
이 쯤 되면 이런 질문이 들 수도 있을 것 같은데요.
그래서 이 노가다를 한 결과물, 어떤 발표자료를 github에 올렸다는 거지??
아마 조만간 다음 글을 통해서 공유 될 수 있을 것 같습니다. 후후
- 카일스쿨 자료 많이 보세요. 꼭
Data Engineer가 아니어도 배울만한 점이 너무 많습니다. (광고 아님)
