프로그래밍/기타(툴)

2부. Marp (Markdown Presentation Ecosystem) 슬라이드별로 다양한 내장 테마를 최대한 활용

재우니 2024. 11. 10. 02:57

 

 

Marp (Markdown Presentation Ecosystem) 에서 슬라이드별로 다양한 내장 테마를 최대한 활용하여 이쁜 프레젠테이션을 만드는 방법을 알려드리겠습니다.

 

Marp (Markdown Presentation Ecosystem) 공식사이트

https://marp.app/

 

Marp: Markdown Presentation Ecosystem

Marp (also known as the Markdown Presentation Ecosystem) provides an intuitive experience for creating beautiful slide decks. You only have to focus on writing your story in a Markdown document.

marp.app

 

 

Marp는 슬라이드별로 테마를 직접 변경하는 기능은 제공하지 않지만, 내장 테마의 스타일을 참고하여 슬라이드마다 다른 분위기를 연출할 수 있습니다. 이를 위해 CSS 변수와 클래스를 활용하여 슬라이드별로 스타일을 커스터마이징할 수 있습니다.

예제 코드

---
marp: true
paginate: true
theme: default
---

<!-- 첫 번째 슬라이드: Gaia 테마 스타일 적용 -->
<!-- _class: gaia -->

# 2025 트렌드 키워드 총정리

스네이크 센스로 바라본 새로운 기회

2025년, 예리한 감각으로 다가오는 기회를 놓치지 않는 ‘스네이크 센스’를 발휘해야 할 때가 왔습니다. 빠르게 변하는 사회에서의 새로운 소비 트렌드를 사례와 함께 소개합니다.

---

<!-- 두 번째 슬라이드: 기본 테마 사용 -->
## 📌 옴니보어: 다양한 취향의 '잡식성 소비자'

현대 소비자는 세대, 계층, 성별에 묶이지 않습니다. 다양한 취향을 소비하는 모습을 '옴니보어'라 부르며, 이는 새로운 소비 트렌드로 자리 잡고 있습니다.

**예시**

- 50대 남성이 다이소에서 귀여운 키링 구입
- 학생들이 남녀 구분 없는 젠더리스 패션 즐기기

---

<!-- 세 번째 슬라이드: Unicorn 테마 스타일 적용 -->
<!-- _class: unicorn -->

## 🌞 아보라: '아주 보통의 하루'를 소중하게

빠른 성장 대신, 평범하고 안정된 하루를 중시하는 트렌드입니다. 평범한 하루를 잘 보낸 것이 행복이라 여기는 흐름입니다.

**예시**

- 과거: 작은 행복을 SNS에 자랑
- 현재: 무탈한 하루 자체가 행복이라는 인식 확대

---

<!-- 네 번째 슬라이드: 기본 테마 사용 -->
## 🍕 토핑 경제: 원하는 대로 ‘토핑’하는 맞춤 소비

이제는 제품과 서비스도 자신의 취향에 맞춰 추가할 수 있는 요소가 소비의 핵심입니다.

**예시**

- 크록스 신발에 다양한 장식 추가
- 모듈형 가구로 개성을 표현하며 완성

---

<!-- 다섯 번째 슬라이드: Tokyo Night 테마 스타일 적용 -->
<!-- _class: tokyo-night -->

## 🐣 무회 이코노미: 작고 귀여운 것들의 매력

복잡한 세상에서 사람들은 작은 사물에 위로를 찾습니다. 귀여운 캐릭터, 소형화된 제품들이 주목받는 현상을 '무회 이코노미'라 부릅니다.

**예시**

- 책상 위 작은 미니어처
- 이모티콘을 통한 소소한 위안 찾기

---

<!-- 여섯 번째 슬라이드: Gaia 테마 스타일 적용 -->
<!-- _class: gaia -->

## 🎯 원포인트 업: 작은 성장이 큰 성공을 만든다

전인적 자기계발보다 특기를 발전시키는 ‘원포인트 업’ 트렌드가 떠오르고 있습니다.

**예시**

- 펭수의 "잘하는 걸 조금 더 잘하자"
- 개성과 성향에 맞춘 나다운 성공 추구

---

<!-- 일곱 번째 슬라이드: Unicorn 테마 스타일 적용 -->
<!-- _class: unicorn -->

## 🌏 그라데이션 K: 다문화, 다원화 사회의 도래

한국 사회도 점차 다문화로 변모하며 다양한 정체성과 문화가 공존하는 시대가 도래하고 있습니다.

**예시**

- K팝 그룹의 글로벌 멤버
- 다양한 문화가 공존하는 한류 확산

---

<!-- 여덟 번째 슬라이드: 기본 테마 사용 -->
## 😊 페이스 테크: 기계와 얼굴의 상호작용

기계가 표정을 읽고, 친근한 표정으로 상호작용을 유도하는 기술이 등장했습니다. 기계와 인간의 소통이 더욱 자연스러워집니다.

**예시**

- AI 로봇의 표정 소통
- 자동차의 운전자 졸음 감지 시스템

---

<!-- 아홉 번째 슬라이드: Tokyo Night 테마 스타일 적용 -->
<!-- _class: tokyo-night -->

## 💎 물성 매력: 손에 잡히는 경험을 원하는 사람들

언택트 시대에 사람들은 손에 잡히는 물성을 더욱 갈망하게 되었습니다.

**예시**

- 실물 크기 캐릭터 팝업 스토어
- AI 로봇과의 실시간 대화 경험

---

<!-- 열 번째 슬라이드: Gaia 테마 스타일 적용 -->
<!-- _class: gaia -->

## 🌍 기후 감수성: 기후 변화에 적응하는 소비와 비즈니스

기후 변화가 새로운 소비와 비즈니스 패턴을 만들고 있으며, 기후 변화에 대한 민감성이 높아지고 있습니다.

**예시**

- 한반도에서 열대 과일 재배
- 기후 적응형 농업 및 비즈니스 모델 확산

---

<!-- 열한 번째 슬라이드: Unicorn 테마 스타일 적용 -->
<!-- _class: unicorn -->

## 🔗 공진화 전략: 협력과 개방을 통한 공존

다양한 파트너와 협력하여 함께 성장하는 공진화 전략이 필수입니다.

**예시**

- 전기차 충전소 공유
- 데이터 협력을 통한 상호 성장

---

<!-- 마지막 슬라이드: 기본 테마 사용 -->
## 🐍 결론: 뱀처럼 예리한 ‘스네이크 센스’로 다가오는 기회를 잡아라!

2025년의 소비 트렌드는 자신만의 감각으로 기회를 포착하는 것입니다. 변화와 기회를 감지하며 자신만의 방향을 찾아가세요. **스네이크 센스**로 다가오는 기회를 놓치지 마세요!

---

<!-- 스타일 정의 -->
<style>
/* Gaia 테마 스타일 */
section.gaia {
  background-color: #e0f7fa;
  color: #00695c;
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

/* Unicorn 테마 스타일 */
section.unicorn {
  background-color: #f8bbd0;
  color: #880e4f;
  font-family: 'Comic Sans MS', cursive, sans-serif;
}

/* Tokyo Night 테마 스타일 */
section.tokyo-night {
  background-color: #1a1b27;
  color: #c0caf5;
  font-family: 'Courier New', Courier, monospace;
}
</style>

설명

  • 전역 테마 설정: theme: default를 통해 기본 테마를 전역적으로 적용합니다.
  • 슬라이드별 클래스 지정: 각 슬라이드의 맨 위에 <!-- _class: 클래스명 -->을 추가하여 슬라이드별로 클래스를 지정합니다.
  • 스타일 정의: 마지막에 <style> 태그를 사용하여 각 클래스에 대한 스타일을 정의합니다.
    • 배경색과 글자색: 각 테마의 느낌을 살리기 위해 background-color와 color 속성을 지정합니다.
    • 폰트 설정: 테마의 분위기에 맞게 font-family를 지정하여 슬라이드별로 다른 폰트를 사용할 수 있습니다.
  • Marp 내장 테마 스타일 모방: 직접 테마를 변경할 수는 없지만, 내장 테마의 주요 스타일 요소를 가져와 슬라이드별로 적용할 수 있습니다.

추가 팁

  • 이미지 배경 사용: 특정 슬라이드에 배경 이미지를 넣고 싶다면 해당 슬라이드의 클래스에 background-image 속성을 추가할 수 있습니다.그리고 해당 슬라이드에 <!-- _class: custom-background -->를 추가하세요.
  • section.custom-background { background-image: url('이미지_주소'); background-size: cover; color: #fff; }
  • 텍스트 스타일링: 슬라이드별로 텍스트 크기나 스타일을 변경하고 싶다면 font-size, font-weight 등의 CSS 속성을 활용할 수 있습니다.
  • 애니메이션 효과: CSS를 활용하여 슬라이드 전환 시나 요소 등장 시 애니메이션을 추가할 수 있습니다.

주의사항

  • 테마 변경의 한계: Marp에서는 슬라이드별로 테마를 완전히 변경하는 기능은 지원하지 않습니다. 그러나 위와 같이 CSS를 활용하여 원하는 스타일을 적용할 수 있습니다.
  • 스타일 충돌 방지: 커스텀 스타일을 적용할 때 기존 테마의 스타일과 충돌하지 않도록 클래스 선택자를 정확하게 사용하세요.

이렇게 수정하시면 Marp의 내장 테마를 최대한 활용하면서 슬라이드별로 다양한 스타일을 적용하여 더욱 이쁜 프레젠테이션을 만들 수 있습니다. 

 

출력물 

untitled.pdf
0.25MB

 

 

 

 

 

저작자표시 비영리 동일조건