바로 07 커서와 Marp로 프레젠테이션 작성해보기

박현규23 / 35절읽는 시간 약 5분

이제 마크다운으로 문서를 작성하고 이를 다른 형태로 확인할 수 있다는 걸 알았습니다. 그럼 여기서 조금 더 나아가 프레젠테이션을 작성하겠습니다. 이미 애플의 역사를 문서로 만들었으므로 이 문서 자체를 컨텍스트로 이용하면 쉽게 프레젠테이션을 만들 수 있습니다. 이때 커서에 확장 프로그램으로 Marp를 설치해야 합니다. Marp는 마크다운으로 작성한 프레젠테이션용 문서를 슬라이드 형태로 보여주는 확장 프로그램입니다.

장 프로그램 버튼 [ ]을 누릅니다.
검색 창에 Marp를 검색하고 ‘marp for VSCode’의 [Install]을 누르면 설치가 끝납니다. ‘Do you trust...’가 나오면 [Trust...]를 누르면 됩니다.
설치가 다 됐으면 다시 파일 탭으로 돌아갑니다. 에서 apple_history.md 파일을 드래그 앤 드롭하여 채팅 창에 컨텍스트로 추가하고 [Plan] 모드로 설정합니다. Marp로 PPT를 만들고 싶다고 이야기해봅시다. 어떻게 될까요?

프롬프트

Marp로 PPT를 만들고 싶어.

그러면 커서가 선택지를 주고 물어봅니다. 이 역시 상황에 따라 다를 수 있지만 잘 읽어보고 원하는 방향으로 PPT를 만들면 됩니다. 선택지를 선택하면 생성 계획을 말해줍니다. 미리 만들어질 슬라이드의 계획을 보고 받는 기분으로 살펴봅시다. 결과를 읽고 괜찮다면 [Build]를 눌러 슬라이드를 받아봅시다.

AI 답변

Marp 프레젠테이션 생성 계획 작업 개요 apple_history.md 파일의 내용을 Marp 형식의 프레젠테이션으로 변환하여 새 파일 apple_history_marp.md를 생성합니다. 구현 계획

Marp 프레젠테이션 파일 구조 생성 apple_history_marp.md 파일 생성 YAML 프론트매터에 marp: true와 theme: uncover 설정 추가 각 슬라이드는 ---로 구분

슬라이드 구성 기존 문서의 섹션을 기반으로 다음과 같이 슬라이드를 구성: 타이틀 슬라이드: “애플의 역사” 슬라이드 2: 설립과 초기 성장 (1976-1984) - 애플 I, 애플 II, IPO, 매킨토시 슬라이드 3: 어려운 시기와 재기 (1985-1997) - 잡스의 이탈과 복귀 슬라이드 4: 혁신의 시대 (1998-2011) - iMac, iPod, iTunes Store 슬라이드 5: 혁신의 시대 계속 - iPhone, iPad 슬라이드 6: 팀 쿡 시대 (2011-현재) - 잡스의 사임과 사망 슬라이드 7: 팀 쿡 시대 계속 - 주요 제품 출시 슬라이드 8: 현재 - 애플의 현재 상태

Marp 형식 적용 각 슬라이드에 적절한 제목과 내용 배치 중요 키워드는 굵게 표시 유지 읽기 쉬운 형식으로 내용 재구성

슬라이드 작성이 끝나면 아마 파일 탐색기에 새로운 마크다운 파일이 생길 겁니다. 그 파일을 클릭하여 활성화한 상태에서 Ctrl + Shift + P 또는 Cmd + Shift + P 를 누른 후 [Open Preview to the Side]를 누르면 프레젠테이션이 보입니다.
아마 프레젠테이션의 디자인이 다소 밋밋할 겁니다. 저는 Marp 설정 시 테마를 [Uncover] 로 선택했는데 해당 테마의 콘셉트가 그렇습니다. 테마를 변경해봅시다. 디자인을 애플스럽게 해달라고 해봅시다. 이때 애플의 사이트 디자인을 참고할 수 있도록 apple.co.kr 주소와 함께 디자인을 잘하는 Gemini 모델을 사용합니다. [Plan] 모드로 전환해서 디자인에 대한 고민을 하게 만듭시다.

프롬프트

프레젠테이션 디자인이 너무 밋밋한데 apple.co.kr 사이트의 디자인 철학이 보이도록 디자인을 최대한 수정하여 애플의 역사 슬라이드가 멋지게 보이면 좋겠어 계획부터 세워보자.

AI 답변

애플 스타일의 디자인을 적용하기 위해 몇 가지 구체적인 선호 사항을 여쭤보고 싶습니다. 애플 웹사이트의 디자인 철학은 보통 극도로 절제된 미니멀리즘, 세련된 타이포그래피, 그리고 여백의 미로 대 표됩니다. 어떤 분위기로 연출할지 선택해주면 더 정확한 계획을 세울 수 있습니다.

AI가 묻는 질문에 원하는 답을 클릭합니다. 이 과정에서 만들고자 하는 결과물을 조금 더 구체적으로 계획할 수 있습니다.

그러면 계획을 보여주는데 애플의 키노트 스타일과 사이트 디자인을 섞겠다고 합니다. [Build]를 눌러 진행을 시켜봅시다.

AI 답변

애플 스타일의 다크 모드(Dark Chic)와 여백 중심(Spacious) 디자인을 적용하기 위한 계획을 수립했습니다. 텍스트 양을 줄이고 슬라이드 수를 늘려, 마치 애플의 제품 발표 키노트처럼 몰입감 있는 프레젠테이션으로 재구성하겠습니다. ...생략...

슬라이드를 완성하고 다시 펼쳐보면 디자인이 완전히 바뀌어 있습니다. 실제로 현재 슬라이드를 만드는 대부분의 서비스가 이런 방식으로 슬라이드를 만들고 보여줍니다.
글을 수정하고 싶다면 스크롤바를 내려 수정하면 됩니다. 스크롤바를 내리면 해당 글과 슬라이드가 나란히 보입니다.

이 정도면 슬라이드는 여러분 혼자서도 수정하고 만들 수 있을 겁니다. 슬라이드에 관한 설명은 여기서 마치겠습니다. 나머지는 여러분의 창의력에 맡기겠습니다.