3부. Marp 프레젠테이션, theme, 이미지, Mermaid 활용해 보기
Marp 프레젠테이션 맞춤화 가이드
서론
Markdown 기반의 강력한 프레젠테이션 도구인 Marp는 사용자가 텍스트 기반 포맷을 통해 세련된 슬라이드를 쉽게 만들 수 있게 해줍니다. Marp는 기본 테마와 설정을 제공하지만, 사용자 맞춤화 기능을 통해 더 독창적이고 매력적인 프레젠테이션을 제작할 수 있습니다. 이 가이드에서는 Marp의 다양한 맞춤화 옵션을 활용하여 여러분만의 스타일을 반영한 독창적인 프레젠테이션을 만드는 방법을 안내합니다.
본론
1. 기본 테마 활용하기
Marp는 세 가지 기본 테마를 제공합니다: Default, Gaia, Uncover. 이 테마들은 프레젠테이션의 기본적인 구성을 설정하는 데 유용하며, 각 테마는 다음과 같은 frontmatter 구문으로 설정할 수 있습니다.
- Default 테마
---
marp: true
theme: default
---- Gaia 테마
---
marp: true
theme: gaia
---- Uncover 테마
---
marp: true
theme: uncover
---
기본 테마는 슬라이드의 색상 및 레이아웃을 설정하는 데 유용하며, 필요에 따라 ‘invert’, ‘lead’ 등의 옵션을 통해 색상 반전이나 스타일을 더욱 세밀하게 조정할 수 있습니다.
2. 맞춤형 테마 생성
기본 테마 외에도, Marp는 사용자 맞춤형 CSS 파일을 통해 더욱 세련된 테마를 제작할 수 있도록 지원합니다. 예를 들어, custom-default.css라는 파일을 만들어 배경색이나 글꼴을 변경할 수 있습니다.
/* custom-default.css */
/* @theme custom-default */
@import 'default';
section {
background: #fff;
}이 파일을 통해 Marp의 기본 스타일을 확장하거나 수정할 수 있으며, 프레젠테이션 파일의 frontmatter에 다음과 같이 theme: custom-default를 지정하여 사용할 수 있습니다.
---
marp: true
theme: custom-default
---CSS를 활용하여 배경 색상, 글꼴, 슬라이드 전환 효과 등을 커스터마이징할 수 있습니다. 더 많은 스타일 속성에 대한 정보는 Marp 문서를 참고하세요.
3. ![bg] 태그를 통한 이미지 및 배경 추가
Marp의 ![bg] 태그는 프레젠테이션 슬라이드에 사용자 정의 배경 이미지를 추가할 수 있는 기능으로, 슬라이드를 보다 시각적으로 풍부하게 만들어줍니다. ![bg] 태그는 다양한 옵션과 필터를 제공하여 배경 이미지를 효과적으로 활용할 수 있습니다.
기본 사용법
기본적으로 슬라이드에 배경 이미지를 추가하려면  형식으로 작성합니다.
이렇게 작성하면 해당 이미지가 전체 슬라이드의 배경으로 설정됩니다.
위치 조정 옵션
배경 이미지의 위치를 조정하려면 left, right, center 등의 키워드를 사용할 수 있습니다.
- 오른쪽 정렬:
 - 왼쪽 정렬:
이 설정을 사용하면 배경 이미지가 슬라이드의 왼쪽이나 오른쪽으로 정렬됩니다.
크기 비율 조정
이미지가 슬라이드의 일부만 차지하도록 설정하려면 비율을 조정할 수 있습니다. 예를 들어, left:35%와 같이 작성하면 이미지가 화면의 35%만 차지합니다.
이 설정은 프레젠테이션의 특정 부분에 이미지를 배치하여 내용을 강조하거나 레이아웃을 조정할 때 유용합니다.
필터 효과 적용
Marp는 다양한 필터를 통해 이미지의 스타일을 변경할 수 있도록 지원합니다. 필터는 슬라이드의 분위기를 조절할 수 있는 좋은 방법입니다. 지원되는 필터에는 grayscale(흑백), sepia(세피아), blur(블러), opacity(불투명도) 등이 있습니다.
- 흑백(그레이스케일):
 - 세피아:
 - 블러 효과:
 - 불투명도 조정:
필터는 서로 조합하여 사용할 수도 있습니다. 예를 들어, 흑백과 불투명도를 동시에 적용하려면 다음과 같이 작성합니다.
배경색 및 그라데이션 적용
![bg] 태그를 통해 이미지 외에도 CSS를 사용하여 단색 배경이나 그라데이션 배경을 추가할 수 있습니다. 이를 위해 CSS 스타일을 frontmatter에 추가합니다.
---
marp: true
theme: default
style: |
section {
background-color: #f0f0f0;
background-image: linear-gradient(to bottom right, #ff7e5f, #feb47b);
}
---이 CSS 코드는 슬라이드 배경을 부드러운 그라데이션으로 설정하여 시각적 매력을 높일 수 있습니다.
4. Mermaid 다이어그램 활용
Mermaid는 텍스트 기반 다이어그램 생성 라이브러리로, 복잡한 개념을 시각화하는 데 유용하며 Marp와도 잘 통합됩니다. Mermaid 다이어그램을 추가하려면 다음과 같은 구문을 사용합니다.
<div class="mermaid">
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
</div>Mermaid 다이어그램은 Marp가 자동으로 변환하여 슬라이드에 추가합니다. 기본적으로 크기가 작게 설정되지만, CSS를 통해 크기와 스타일을 조정할 수 있습니다.
svg[id^='mermaid-'] {
min-width: 480px;
max-width: 960px;
min-height: 360px;
max-height: 600px;
}5. 발표자 모드 및 스피커 노트 추가
Marp는 발표자를 위한 스피커 모드 기능이 있어, 프레젠테이션 중 노트와 다음 슬라이드를 볼 수 있습니다. HTML로 내보내기 후 브라우저에서 파일을 열고 ‘P’ 키를 누르면 스피커 모드를 사용할 수 있습니다.
스피커 노트 추가 방법
발표자가 참고할 내용을 슬라이드에 숨기기 위해, 다음과 같은 구문을 사용해 노트를 추가할 수 있습니다.
---
<!-- 여기에 발표자 노트를 추가하세요 -->스피커 모드를 통해 발표 중에만 노트를 확인할 수 있으며, PDF나 PowerPoint로 내보낼 때도 사용할 수 있습니다.
결론
Marp는 Markdown의 간결함과 사용자 맞춤화 옵션을 결합한 강력한 프레젠테이션 도구로, 다양한 스타일과 기능을 제공하여 매력적인 슬라이드를 제작할 수 있게 합니다. 특히 배경 이미지 설정, 맞춤형 테마, Mermaid 다이어그램 등 다양한 기능을 통해 프레젠테이션의 시각적 요소를 극대화할 수 있습니다. Marp를 활용해 여러분의 아이디어를 더욱 돋보이게 표현해 보세요!
자주 묻는 질문 (Q&A)
- Marp에서 사용자 맞춤 테마를 만드는 방법은?
CSS 파일을 통해 테마를 정의하고 frontmatter에 적용하여 사용자 맞춤 테마를 사용할 수 있습니다. - Mermaid 다이어그램을 Marp에서 사용하는 방법은?
Mermaid 코드를 Marp에 추가하면 다이어그램이 자동으로 생성되며, CSS로 크기나 색상 조절도 가능합니다. - 배경 이미지의 크기와 위치는 어떻게 조정할 수 있나요?
left,right등 위치 옵션과%비율 설정을 통해 배경 이미지의 위치와 크기를 쉽게 조정할 수 있습니다.
관련 태그
- marp
- 프레젠테이션
- 맞춤화
- markdown
- 다이어그램
활용해 보기
---
marp: true
theme: gaia
class:
- default
- invert
- lead
paginate: true
---
# 2025 트렌드 키워드 총정리
스네이크 센스로 바라본 새로운 기회
2025년, 예리한 감각으로 다가오는 기회를 놓치지 않는 ‘스네이크 센스’를 발휘해야 할 때가 왔습니다. 빠르게 변하는 사회에서의 새로운 소비 트렌드를 사례와 함께 소개합니다.
---
<!-- _class: lead gaia -->
## 📌 옴니보어: 다양한 취향의 '잡식성 소비자'
현대 소비자는 세대, 계층, 성별에 묶이지 않습니다. 다양한 취향을 소비하는 모습을 '옴니보어'라 부르며, 이는 새로운 소비 트렌드로 자리 잡고 있습니다.
**예시**
- 50대 남성이 다이소에서 귀여운 키링 구입
- 학생들이 남녀 구분 없는 젠더리스 패션 즐기기
---
<!-- _class: invert gaia -->
## 🌞 아보라: '아주 보통의 하루'를 소중하게
빠른 성장 대신, 평범하고 안정된 하루를 중시하는 트렌드입니다. 평범한 하루를 잘 보낸 것이 행복이라 여기는 흐름입니다.
**예시**
- 과거: 작은 행복을 SNS에 자랑
- 현재: 무탈한 하루 자체가 행복이라는 인식 확대
---
## 🍕 토핑 경제: 원하는 대로 ‘토핑’하는 맞춤 소비
이제는 제품과 서비스도 자신의 취향에 맞춰 추가할 수 있는 요소가 소비의 핵심입니다.
**예시**
- 크록스 신발에 다양한 장식 추가
- 모듈형 가구로 개성을 표현하며 완성
---
<!-- class: invert -->
## 🐣 무회 이코노미: 작고 귀여운 것들의 매력
복잡한 세상에서 사람들은 작은 사물에 위로를 찾습니다. 귀여운 캐릭터, 소형화된 제품들이 주목받는 현상을 '무회 이코노미'라 부릅니다.
**예시**
- 책상 위 작은 미니어처
- 이모티콘을 통한 소소한 위안 찾기
---
## 🎯 원포인트 업: 작은 성장이 큰 성공을 만든다
전인적 자기계발보다 특기를 발전시키는 ‘원포인트 업’ 트렌드가 떠오르고 있습니다.
**예시**
- 펭수의 "잘하는 걸 조금 더 잘하자"
- 개성과 성향에 맞춘 나다운 성공 추구
---
## 🌏 그라데이션 K: 다문화, 다원화 사회의 도래
한국 사회도 점차 다문화로 변모하며 다양한 정체성과 문화가 공존하는 시대가 도래하고 있습니다.
**예시**
- K팝 그룹의 글로벌 멤버
- 다양한 문화가 공존하는 한류 확산
---
<!-- class: invert gaia lead -->
## 😊 페이스 테크: 기계와 얼굴의 상호작용
기계가 표정을 읽고, 친근한 표정으로 상호작용을 유도하는 기술이 등장했습니다. 기계와 인간의 소통이 더욱 자연스러워집니다.
**예시**
- AI 로봇의 표정 소통
- 자동차의 운전자 졸음 감지 시스템
---
## 💎 물성 매력: 손에 잡히는 경험을 원하는 사람들
언택트 시대에 사람들은 손에 잡히는 물성을 더욱 갈망하게 되었습니다.
**예시**
- 실물 크기 캐릭터 팝업 스토어
- AI 로봇과의 실시간 대화 경험
---
## 🌍 기후 감수성: 기후 변화에 적응하는 소비와 비즈니스
기후 변화가 새로운 소비와 비즈니스 패턴을 만들고 있으며, 기후 변화에 대한 민감성이 높아지고 있습니다.
**예시**
- 한반도에서 열대 과일 재배
- 기후 적응형 농업 및 비즈니스 모델 확산
---
## 🔗 공진화 전략: 협력과 개방을 통한 공존
다양한 파트너와 협력하여 함께 성장하는 공진화 전략이 필수입니다.
**예시**
- 전기차 충전소 공유
- 데이터 협력을 통한 상호 성장
---
## 🐍 결론: 뱀처럼 예리한 ‘스네이크 센스’로 다가오는 기회를 잡아라!
2025년의 소비 트렌드는 자신만의 감각으로 기회를 포착하는 것입니다. 변화와 기회를 감지하며 자신만의 방향을 찾아가세요. **스네이크 센스**로 다가오는 기회를 놓치지 마세요!
참고 사이트
https://chris-ayers.com/2023/03/31/customizing-marp
Unleash Your Creativity with Marp Presentation Customization
This is part 2 of the MARP series. You can read the series of articles here: Marp - Create Presentations with Markdown Unleash Your Creativity with Marp Presentation Customization Introduction Marp is a powerful Markdown presentation framework that enables
chris-ayers.com