👨‍🏫

9.5 마크다운으로 프레젠테이션 만들기

마크다운으로 프레젠테이션을 빠르고 쉽게 만드는 방법은 Wunderpresentation이라는 솔루션을 사용하는 것입니다. 무료입니다.
두번째로 가장 깔끔하고 전문적으로 만드는 방법은 두레이라는 툴에 가입하고 발표 기능을 사용하는 것입니다.
세번째로 아래 툴 중 선택을 하셔서 사용하는 대안이 있습니다. 상세 리뷰를 다음 챕터에 기술합니다.
 
  1. Marp - 개발자를 위한 마크다운 프레젠테이션 도구 : 해당 도구는 VS Code에서도 작동합니다.
  1. Mac User를 위한 유료 마크다운 프레젠테이션 도구
 
네번째로 Notion에서 table of contents블록을 사용하여 프레젠테이션을 사용하는 방법은 마지막에 간단하게 기술해두도록 하겠습니다.

1. Wunderpresentation을 사용한 프레젠테이션 제작

Wunderpresentation는 Notion과 연동하거나 마크다운을 빠르게 프레젠테이션으로 변환시켜주는 솔루션입니다.
 
 
위 사이트에서 접속이 가능합니다.
notion imagenotion image
 
 
홈페이지에서 Create 버튼을 눌러 Notion 링크 또는 마크다운으로 프레젠테이션을 제작할 수 있습니다.
 
notion imagenotion image
 
더 설명이 필요 없을 만큼 깔끔한 서비스입니다. 사용해보시면서 보다 상세한 설명이 필요하시다면 아래 영상을 참고해주세요.(https://bit.ly/3jFQ9Ou) '제주코딩베이스캠프' 채널에서 찾을 수 있는 영상입니다.
Video preview

2. 두레이로 마크다운 프레젠테이션 만들기

두레이(Dooray)는 국내에서 가장 강력한 협업 툴입니다. 프로젝트 관리, 메일 관리, 일정 관리, 메신저까지 사용이 가능한 통합 솔루션입니다. 우선 Google에서 Dooray를 검색하세요.
 
notion imagenotion image
 
간단한 시험을 위해 무료 체험으로 시작해보도록 하겠습니다.
notion imagenotion image
 
그러면 회원 가입하라는 창이 뜨고 회원가입을 진행해 주세요.
notion imagenotion image
 
회원 가입이 완료되셨다면 다시 두레이로 접속하셔서 무료 체험을 클릭해주세요.
notion imagenotion image
 
개인정보와 도메인 정보, 친구 초대하는 창이 뜨고 아래와 같은 화면이 나옵니다.
notion imagenotion image
 
저는 Web을 클릭했으며 기본 편집기를 MarkDown으로 사용했습니다.
notion imagenotion image
 
작성하시면 아래의 창에서 프로젝트를 클릭하시고 새로운 프로젝트를 만드셔도 되고 기존에 등록되어 있던 프로젝트를 클릭하셔도 됩니다.
notion imagenotion image
 
그럼 아래와 같이 우측에 해당 프로젝트 상세가 뜹니다.
notion imagenotion image
 
여기서 편집하기를 눌러보겠습니다.
notion imagenotion image
 
모든 문구들이 마크다운으로 바뀐것을 알 수 있습니다. 여기서 아래 3개의 Heading 글귀를 Notion에서 그대로 복사하셔서 Dooray에 붙여넣어보세요.
 
notion imagenotion image
 
그러면 아래와 같이 마크다운으로 복사되어 붙여넣어지는 것을 볼 수 있습니다.
notion imagenotion image
 
이제 이 안에 Code 부분을 넣어보겠습니다. '인공지능을 활용한 업무자동화 With Google Developers Group JEJU'의 한 글귀를 복사하여 안에 넣어보겠습니다.
notion imagenotion image
 
위와 같이 되어 있는 내용을 복사하였고 이를 아래처럼 Dooray에 복사했습니다.
notion imagenotion image
 
미리보기를 누르시면 Code 부분도 잘 반영이 되어 있는 것을 확인할 수 있습니다. 이것을 프레젠테이션으로 보기 위해 저는 몇 가지 내용을 추가해서 넣어놓겠습니다.
 
notion imagenotion image
 
저장을 누르시면 아래와 같이 바뀐 것을 확인할 수 있습니다.
notion imagenotion image
 
여기서 코드 하이라이팅을 원하시면 아래처럼 ```python [Code] ```키 조합으로(작은 따옴표 아니고 1 옆에 있는 특수문자(백틱) 입니다.) 아래처럼 Python 하이라이팅이 가능합니다.
notion imagenotion image
 
여기서 우측 상단에 보시면 모니터 모양이 있는데 이것을 클릭하시고 발표모드를 누르세요.
notion imagenotion image
 
그러면 아래와 같이 테마를 선택하는 창이 뜹니다.
notion imagenotion image
 
저는 가장 기본적인 Modern White을 선택하고 시작 버튼을 눌렀습니다.
 
notion imagenotion image
 
notion imagenotion image
 
위와 같이 프레젠테이션 모드로 시작이 됩니다. 위와 같이 프레젠테이션 내 확대 및 강조가 가능하며 심지어 URL 공유를 하면 사용자 모두 동일한 화면을 볼 수 있습니다.

3. Marp를 이용한 마크다운 프레젠테이션 만들기

 
해당 솔루션을 사용하기 위해서는 VS Code가 필요합니다. 설치 방법은 아래 영상(https://bit.ly/3aR30cp)을 참고해주세요. 역시 '제주코딩베이스캠프' 채널에서 시청이 가능하십니다.
Video preview
 
  1. 폴더 하나를 만들어서 거기에서 VS Code를 열어주세요.
    1. notion imagenotion image
       
  1. Ctrl + N을 눌러 새로운 파일을 생성하시고 아래와 같이 내용을 작성한 다음 test.md로 저장하도록 하겠습니다.
    1. notion imagenotion image
       
      notion imagenotion image
      • 아래와 같은 도구를 사용하면 마크다운 프리뷰가 가능합니다.
       
  1. 해당 Extension을 설치해주세요.
    1. notion imagenotion image
       
  1. 해당 파일 우측 상단에 아래와 같은 모양이 생기게 되고, PDF로 뽑아낼 수 있습니다. 그런데 무언가 부자연스럽죠?
    1. notion imagenotion image
       
  1. PDF를 뽑아내보시면 예쁘지 않게 뽑혀져 나온 것을 볼 수 있습니다. 구분선을(---) 기준으로 PDF가 변경되게 되니 구분선을 추가해서 다시 Export 해보세요.
    1. notion imagenotion image
      notion imagenotion image

4. Table of contents 블록을 사용한 프레젠테이션 방법

아래와 같은 블록배치를 통해 마치 프레젠테이션 처럼 매끄러운 진행이 가능합니다. 오른쪽에 보이는 링크가 Table of contents 블록입니다. 진행하실 때에는 Page lock 기능을 꼭 활성화 시켜주세요.
notion imagenotion image