마크다운으로 만드는 PPT
MARP VSCode 확장자를 사용하면 빠르고 간단하게 PPT를 만들 수 있습니다.
배경
저는 이번에 면접 준비하면서 급하게 발표준비하면서 MARP을 활용해서 PPT를 만들었습니다.
물론 실제로 이렇게 PPT를 만들면 너무 대충 만들어서 성의없어 보입니다. 아마 성의없어 보였을 것 같습니다.
사실 PPT 슬라이드마다 성의를 보이는게 중요하지만 중요하지 않습니다. 또 어른들의 사정이란... 스타트업 혹은 회사 내부 직급 아래로 PPT로 동료들에게 진행을 공유할 때 활용하기 바랍니다.
위 영상을 보고 PPT 만들 때 적용했습니다.
설치
marp-team.marp-vscode
위 익스텐션 아이디로 검색하기 바랍니다.
슬라이드 구분
---
marp: true
---
# 첫 페이지
---
# 다음 페이지---으로 다음 페이지를 만들 수 있습니다. 마크다운 구분선은 ppt 구분선이 됩니다.
쪽번호 추가
paginate: true으로 설정하면 됩니다.
---
marp: true
paginate: true
---header와 footer
---
marp: true
paginate: true
header: '해더'
footer: '풋터'
---위처럼 입력하면 ppt 전체에 적용됩니다. 하지만 header와 footer는 가끔 갱신이 필요하거나 ppt 중간에만 적용이 필요할 때가 있습니다.
---
marp: true
paginate: true
header: '해더'
footer: '풋터'
---
# 첫 페이지
---
<!--
header: "해더 갱신"
footer: "풋터 갱신"
-->
# 다음 페이지
---
# 다다음도 적용된 페이지
---
<!--
_header: "해더 여기만 적용"
_footer: "풋터 여기만 적용"
-->
# 여기만 header, footer 적용
---
# 원래 header, footer<!-- header: -->는 뒤부터 덮어쓰기로 header, footer를 적용할 수 있습니다.
colum 쪼개기
https://github.com/orgs/marp-team/discussions/192#discussioncomment-1517399
위처럼 먼저 설정해야 합니다.
---
marp: true
style: |
.columns {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
}
---
# Multi columns in Marp slide
<div class="columns">
<div>
## Column 1
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas eveniet, corporis commodi vitae accusamus obcaecati dolor corrupti eaque id numquam officia velit sapiente incidunt dolores provident laboriosam praesentium nobis culpa.
</div>
<div>
## Column 2
Tempore ad exercitationem necessitatibus nulla, optio distinctio illo non similique? Laborum dolor odio, ipsam incidunt corrupti quia nemo quo exercitationem adipisci quidem nesciunt deserunt repellendus inventore deleniti reprehenderit at earum.
</div>
</div>https://github.com/marp-team/marpit/issues/205
git 레포가 privet인데 public으로 전환하면 이슈에 저장했던 이미지가 사라집니다.
flex
flex로 여러개 나열하기도 비슷합니다.
---
marp: true
style: |
.columns {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
}
.flex {
display: flex;
gap: 1rem;
}
---
<div class="flex">
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
</div>내보내기
알아서 PDF, PPT, html 형식을 고르기 바랍니다.
그래도 명색이 개발자인데 html로 내보내고 웹이 제공하는 모든 혜택을 받기바랍니다.
PPT 배포하기
vercel에 배포했습니다. 왜 Vercel인가? 무료이고 배포가 쉬워서입니다. 더 깊은 생각은 안 했습니다.
주의할 점이 있습니다. index.html 파일이 배포됩니다. 그래서 내보내기 할때 온라인으로 ppt를 공유할 경우라면 index.html로 export하기 바랍니다.