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] 태그는 다양한 옵션과 필터를 제공하여 배경 이미지를 효과적으로 활용할 수 있습니다.

기본 사용법

기본적으로 슬라이드에 배경 이미지를 추가하려면 ![bg](path/to/image.jpg) 형식으로 작성합니다.

![bg](path/to/your/background-image.jpg)

이렇게 작성하면 해당 이미지가 전체 슬라이드의 배경으로 설정됩니다.

위치 조정 옵션

배경 이미지의 위치를 조정하려면 left, right, center 등의 키워드를 사용할 수 있습니다.

• 오른쪽 정렬: ![bg right](path/to/image.jpg)
• 왼쪽 정렬: ![bg left](path/to/image.jpg)

![bg right](path/to/your/background-image.jpg)
![bg left](path/to/your/background-image.jpg)

이 설정을 사용하면 배경 이미지가 슬라이드의 왼쪽이나 오른쪽으로 정렬됩니다.

크기 비율 조정

이미지가 슬라이드의 일부만 차지하도록 설정하려면 비율을 조정할 수 있습니다. 예를 들어, left:35%와 같이 작성하면 이미지가 화면의 35%만 차지합니다.

![bg left:35%](path/to/your/background-image.jpg)

이 설정은 프레젠테이션의 특정 부분에 이미지를 배치하여 내용을 강조하거나 레이아웃을 조정할 때 유용합니다.

필터 효과 적용

Marp는 다양한 필터를 통해 이미지의 스타일을 변경할 수 있도록 지원합니다. 필터는 슬라이드의 분위기를 조절할 수 있는 좋은 방법입니다. 지원되는 필터에는 grayscale(흑백), sepia(세피아), blur(블러), opacity(불투명도) 등이 있습니다.

• 흑백(그레이스케일): ![bg grayscale](path/to/image.jpg)
• 세피아: ![bg sepia](path/to/image.jpg)
• 블러 효과: ![bg blur](path/to/image.jpg)
• 불투명도 조정: ![bg opacity](path/to/image.jpg)

![bg grayscale](path/to/your/background-image.jpg)
![bg sepia](path/to/your/background-image.jpg)
![bg blur](path/to/your/background-image.jpg)
![bg opacity](path/to/your/background-image.jpg)

필터는 서로 조합하여 사용할 수도 있습니다. 예를 들어, 흑백과 불투명도를 동시에 적용하려면 다음과 같이 작성합니다.

![bg grayscale opacity](path/to/your/background-image.jpg)

배경색 및 그라데이션 적용

![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