marp로 ppt 만들기 (1) - 기초 : wayne 특강

이영락·2024년 9월 2일

개발자 기본기

목록 보기
20/53

🏖️ 생성형 AI 기반 발표자료 만들기

생성형 AI 기반 발표자료 제작 흐름 설명


1. ChatGPT / Claude:

  • ChatGPT 또는 Claude와 같은 생성형 AI는 발표자료 작성의 첫 단계에서 프롬프트를 생성하는 역할을 합니다.
  • 사용자는 AI에게 특정 주제에 대한 프롬프트를 제공하거나 요청을 입력하여, AI가 자동으로 콘텐츠, 다이어그램, 스타일링, 상호작용 등 발표자료의 구성 요소를 생성할 수 있도록 도와줍니다.
  • 이 프롬프트를 통해 자료의 전체적인 구성 방향을 설정하고, 이후 단계에서 다양한 요소를 생성하는 데 활용됩니다.

  1. Generated Prompt(생성된 프롬프트):

    • AI가 생성한 프롬프트는 발표자료의 다양한 부분에 적용됩니다. 프롬프트는 마크다운(Markdown) 형식의 슬라이드 제작을 위한 여러 요소를 지시
      • Contents(콘텐츠): 마크다운(Markdown)을 기반으로 발표자료의 본문 내용이 작성됩니다. AI는 주제에 맞는 텍스트를 자동 생성하며, 구조화된 형식으로 문서를 구성할 수 있습니다.
      • Diagrams(다이어그램): Mermaid 또는 SVG를 사용하여 발표자료에 포함될 다이어그램을 생성합니다. 프롬프트에 따라 AI가 복잡한 순서도나 플로우차트, 데이터 시각화를 Mermaid나 SVG로 생성할 수 있습니다.
      • Styling(스타일링): HTML과 CSS를 활용해 슬라이드의 디자인과 레이아웃을 설정합니다. 이를 통해 슬라이드의 텍스트, 이미지, 레이아웃에 스타일을 입히고, 시각적으로 더 매력적인 슬라이드를 만들 수 있습니다.
      • Interaction(상호작용): CSS와 JavaScript를 사용해 슬라이드 내에서 상호작용할 수 있는 동적인 요소를 추가할 수 있습니다. 예를 들어, 애니메이션이나 버튼 클릭 시의 동작 같은 상호작용이 가능합니다.
      • Illustration(삽화): MidJourney와 같은 도구를 사용해 삽화나 이미지를 추가할 수 있습니다. 발표자료에 적절한 이미지를 AI가 자동 생성하거나 삽입할 수 있습니다.
      • Video/Audio(비디오/오디오): Runway 및 Elevenlabs와 같은 도구를 통해 발표자료에 비디오 및 오디오 자료를 통합합니다. 이를 통해 슬라이드에 동영상이나 음성 자료를 추가하여 더욱 풍부한 발표자료를 만들 수 있습니다.

  2. Markdown(.md) 파일로 통합:

    • 생성된 모든 콘텐츠(텍스트, 다이어그램, 스타일링, 이미지, 비디오 등)는 마크다운 파일(.md 파일)로 통합됩니다. 이 파일은 발표자료의 기본이 되는 텍스트 기반 파일로, 이후 Marp 엔진을 사용해 슬라이드로 변환됩니다.
    • 마크다운 파일은 일반 텍스트 기반이기 때문에 매우 가볍고, 코드 편집기를 사용해 쉽게 작성하고 수정할 수 있습니다.

  3. Marp Engine:

    • Marp 엔진은 마크다운 파일을 슬라이드로 렌더링하는 역할을 합니다. 생성된 마크다운 파일을 Marp 엔진에 넣으면, 이 엔진이 이를 슬라이드 형식으로 변환합니다.
    • Marp 엔진은 마크다운 파일을 기반으로 PDF, HTML, PPTX 등의 형식으로 슬라이드를 생성할 수 있습니다. 사용자는 필요에 따라 원하는 파일 형식을 선택하여 발표자료를 다양한 포맷으로 내보낼 수 있습니다.

  4. 최종 발표자료 (Final Presentation):

    • Marp 엔진을 통해 변환된 최종 발표자료는 PDF, HTML, 기타 형식으로 내보낼 수 있습니다.
    • 발표자료는 다중 형식(Multiple Formats)으로 제공되며, 이를 통해 사용자는 자신이 원하는 형식으로 자료를 배포할 수 있습니다. 예를 들어, PDF 형식으로 출력하여 인쇄할 수 있고, HTML 형식으로 웹에서 바로 발표할 수 있으며, PPTX 형식으로 슬라이드 발표를 진행할 수 있습니다.

이미지 속 흐름도 요약

  • 프롬프트 생성: ChatGPT/Claude에서 제공한 입력에 따라 프롬프트가 생성됩니다.
  • 다양한 발표자료 요소: 프롬프트를 기반으로 텍스트, 다이어그램, 스타일링, 상호작용 요소, 삽화, 비디오/오디오를 생성합니다.
  • 마크다운 파일(.md 파일): 모든 생성된 요소는 마크다운 파일로 통합됩니다.
  • Marp 엔진: Marp 엔진을 사용하여 마크다운 파일을 PDF, HTML, PPTX 등 다양한 형식으로 변환합니다.
  • 최종 발표자료: 다양한 형식으로 발표자료를 내보내 최종적으로 사용할 수 있습니다.

이 흐름을 통해 발표자료 제작 과정이 자동화되고 효율적으로 처리되며, 사용자는 AI의 도움을 받아 더 빠르게 고품질의 발표자료를 완성할 수 있습니다.

이 과정에 대한 더 많은 설명이 필요하시거나, 특정 부분에 대한 추가 설명이 필요하시면 말씀해 주세요!

Marp VS Code 확장 프로그램 설치 및 사용

  1. VS Code에서 Marp 확장 프로그램 설치

    • Visual Studio Code의 확장 마켓플레이스에서 'Marp for VS Code'를 설치해야 합니다. 이 확장은 Marp를 통해 Markdown 형식으로 작성된 파일을 슬라이드로 변환할 수 있는 도구입니다.

  2. Markdown 파일 생성

    • 확장 프로그램 설치 후, .md 확장자로 Markdown 파일을 새로 생성해야 합니다. 파일이 생성되면 Marp 엔진을 사용하여 프레젠테이션을 작성할 수 있습니다.

  3. 파일 상단에 'marp: true' 디렉티브 추가

    • 생성한 Markdown 파일의 상단에 marp: true를 입력해야 합니다. 이 디렉티브는 해당 파일이 Marp를 사용하여 렌더링되는 파일임을 나타냅니다.

  4. 마크다운으로 슬라이드 작성

    • 일반적인 마크다운 문법으로 슬라이드의 내용을 작성할 수 있습니다. 각 슬라이드는 '---' 기호로 구분되며, 이를 통해 여러 개의 슬라이드를 하나의 파일에서 작성할 수 있습니다.

  5. 미리보기 기능

    • VS Code 내의 미리보기 기능을 사용하여 실시간으로 작성한 슬라이드를 확인할 수 있습니다. Ctrl+Shift+V를 눌러 미리보기 모드를 실행하면, 슬라이드를 작성하면서 즉시 결과를 볼 수 있습니다.

  6. 슬라이드 형식으로 내보내기

    • 작성된 슬라이드를 PDF, HTML, PPTX와 같은 다양한 형식으로 내보낼 수 있습니다. 'Ctrl+Shift+P'를 누르고 'Marp: Export Slide Deck' 명령어를 선택한 후 원하는 형식을 선택하면 됩니다.

🏖️ Markdown이란?

Markdown 개요

  • Markdown의 정의

    • Markdown은 2004년 존 그루버(John Gruber)가 개발한 경량 마크업 언어입니다. 마크다운은 읽기 쉽고 쓰기 쉬운 plain text 포맷을 사용하여 문서를 작성하며, 다양한 출력 형식(HTML, PDF 등)으로 변환할 수 있는 기능을 제공합니다.

  • Markdown의 장점

    1. 간단하고 배우기 쉬움: 기본적인 문법이 직관적이고 간결하여 누구나 쉽게 배울 수 있습니다.
    2. 다양한 플랫폼에서 지원: 대부분의 텍스트 에디터와 플랫폼에서 마크다운을 지원합니다.
    3. 텍스트 에디터만으로 작성 가능: 별도의 복잡한 툴 없이 일반 텍스트 에디터에서 작성할 수 있습니다.
    4. 버전 관리 시스템과 호환성: Git과 같은 버전 관리 시스템과도 잘 호환되며, 문서 변경 사항을 추적하는 데 유리합니다.
    5. 다양한 출력 형식으로 변환 가능: HTML, PDF, DOC 등 여러 형식으로 변환할 수 있어 문서의 유연성이 큽니다.

🏖️ Marp란?

Marp 개요

  • Marp의 정의

    • Marp는 Markdown As a Representation of Presentation의 약자로, 마크다운을 사용하여 프레젠테이션을 만들 수 있게 해주는 도구입니다. 2016년 Yuki Hattori가 개발하였으며, 마크다운의 간결함을 그대로 유지하면서 슬라이드를 제작할 수 있는 기능을 제공합니다.

  • Marp의 주요 특징

    1. 간단한 마크다운 문법: 마크다운 문법을 사용하여 슬라이드를 작성할 수 있어 접근성이 높습니다.
    2. 코드 하이라이팅 지원: 코드를 슬라이드에 삽입할 경우 코드의 가독성을 높이기 위해 하이라이팅 기능을 지원합니다.
    3. 테마 커스터마이징 가능: CSS를 사용하여 슬라이드의 스타일을 자유롭게 변경할 수 있습니다.
    4. 다양한 형식으로 내보내기 가능: 작성한 슬라이드를 PDF, PPTX, HTML 등의 형식으로 내보낼 수 있습니다.
    5. 버전 관리 시스템과의 호환성: Marp로 작성된 파일은 Git과 같은 버전 관리 시스템에서도 손쉽게 관리할 수 있습니다.

🏖️ Marp 사용법

기본 문법 및 기능

  • 기본 문법

    • 슬라이드는 '---'으로 구분되며, 각 슬라이드의 제목은 '#' 기호로 설정됩니다. 예를 들어, # 슬라이드 제목과 같은 형태로 제목을 지정할 수 있습니다.
    • 목록을 만들 때는 '-' 또는 '1.'을 사용하며, 코드 블록을 생성하려면 '`'를 사용하여 코드 내용을 감싸면 됩니다.

  • 추가 기능

    1. 이미지 삽입: ![이미지 설명](image.jpg) 형식으로 이미지를 슬라이드에 삽입할 수 있습니다. 이미지 크기나 배경 이미지도 CSS를 사용하여 조정 가능합니다.
    2. CSS를 통한 스타일 커스터마이징: 슬라이드에 CSS를 적용하여 배경색, 글꼴, 레이아웃 등을 변경할 수 있습니다.
    3. 수식 입력 지원: 수학적 표현을 삽입할 때는 KaTeX를 이용하여 수식을 입력할 수 있습니다.

계속해서 Marp 관련 내용을 정리하겠습니다.

🏖️ Marp 슬라이드 내보내기

슬라이드 내보내기 단계

  1. Markdown 파일 열기

    • 먼저 Marp로 작성된 .md 파일을 엽니다. 이 파일은 VS Code 내에서 작성된 마크다운 파일입니다.

  2. 명령 팔레트 열기

    • Ctrl+Shift+P (Windows/Linux) 또는 Cmd+Shift+P (Mac)를 눌러 VS Code의 명령 팔레트를 엽니다. 이곳에서 다양한 명령을 실행할 수 있습니다.

  3. Marp 내보내기 명령 실행

    • 명령 팔레트에서 Marp: Export Slide Deck을 입력하고 선택합니다. 이 명령어는 현재의 마크다운 파일을 슬라이드 형식으로 내보내기 위한 명령어입니다.

  4. 형식 선택

    • 슬라이드를 내보낼 형식을 선택합니다. Marp는 PDF, PPTX, HTML 등 다양한 형식을 지원하므로, 필요에 따라 형식을 선택하면 됩니다.

  5. 저장 위치 지정

    • 파일 이름과 저장 위치를 지정합니다. 선택한 형식으로 파일이 내보내지며, 저장 위치는 사용자가 선택할 수 있습니다.

  6. 완료

    • 선택한 형식으로 슬라이드가 내보내집니다. 슬라이드를 완료하기 전에 VS Code의 우측 상단에 있는 "미리보기(Preview)" 버튼을 클릭하여 결과를 미리 확인할 수 있습니다.

🏖️ Marp 디렉티브

디렉티브 종류와 사용법

  1. 전역 디렉티브

    • 문서 전체에 적용되는 전역 디렉티브는 마크다운 파일 상단에 작성됩니다. 예시로는 다음과 같은 디렉티브들이 있습니다:
      marp: true
theme: default
paginate: true
      • marp: true: 해당 문서가 Marp로 렌더링된다는 것을 의미합니다.
      • theme: default: 슬라이드의 기본 테마를 설정합니다.
      • paginate: true: 각 슬라이드에 페이지 번호를 추가합니다.

  2. 로컬 디렉티브

    • 개별 슬라이드에만 적용되는 디렉티브는 슬라이드 내에서 사용됩니다. 예를 들어:
      <!-- _class: section_title -->
<!-- _backgroundColor: yellow -->
<!-- _color: red -->
      • _class: 해당 슬라이드에 특정 CSS 클래스를 적용합니다.
      • _backgroundColor: 슬라이드의 배경색을 설정합니다.
      • _color: 슬라이드 내 텍스트의 색상을 변경합니다.

🏖️ Marp에서 이미지 사용

이미지 크기 및 위치 조정

  1. 이미지 삽입

    • Marp 슬라이드에 이미지를 삽입하려면 다음과 같이 마크다운 문법을 사용합니다:
      ![width:500px](https://example.com/image.jpg)
      • width:500px: 이미지의 너비를 500px로 지정합니다. 크기 조정은 너비와 높이를 모두 설정할 수 있습니다.
      • 예시로:
      ![width:200px height:150px](https://example.com/resized-image.jpg)
      • 배경 이미지를 설정하려면:
      ![bg](https://example.com/background-image.jpg)

  2. 이미지 크기와 배치 조정

    • Marp에서는 이미지의 크기뿐만 아니라 위치도 조정할 수 있습니다. 배경 이미지로 설정하거나 슬라이드 내용과 함께 배치할 수 있어 디자인에 유연성을 제공합니다.

🏖️ Mermaid란?

Mermaid 개요 및 장점

  • Mermaid 개요

    • Mermaid는 텍스트 기반의 다이어그램 생성 도구로, 다양한 종류의 다이어그램을 마크다운 문법과 유사한 방식으로 생성할 수 있는 도구입니다. 코드 기반으로 다이어그램을 그리기 때문에 다이어그램을 손쉽게 수정하고 버전 관리를 할 수 있습니다.

  • Mermaid의 장점

    1. 코드로 다이어그램 생성 가능: 코드를 사용하여 다이어그램을 작성할 수 있어 복잡한 다이어그램도 손쉽게 구현할 수 있습니다.
    2. 버전 관리 용이: 텍스트 형식의 코드로 작성되기 때문에 버전 관리 도구를 통해 쉽게 변경 사항을 추적할 수 있습니다.
    3. 다양한 플랫폼과 통합 가능: 여러 개발 도구 및 플랫폼과의 호환성이 뛰어나며, 다양한 프로젝트에서 활용 가능합니다.
    4. 빠른 프로토타이핑 지원: 초안 다이어그램을 빠르게 생성하고 수정할 수 있어 프로토타이핑 작업에 적합합니다.
    5. 자동 레이아웃 기능: Mermaid는 입력한 코드에 따라 자동으로 다이어그램의 레이아웃을 생성해주므로, 레이아웃을 별도로 지정할 필요가 없습니다.

🏖️ Mermaid 다이어그램 예시

시퀀스 다이어그램 예시

  • 시퀀스 다이어그램 예시
    sequenceDiagram
    participant Application
    participant FileSystem
    participant OtherTask
    Application ->> FileSystem: Initiate Read File
    FileSystem -->> Application: Acknowledge
    Application ->> OtherTask: Perform Other Task
    Note right of FileSystem: File I/O operation
    FileSystem -->> Application: Notify Data Ready
    Application ->> FileSystem: Retrieve Data
    FileSystem -->> Application: Return Data
    Application ->> Application: Process Data

이 코드는 시퀀스 다이어그램을 생성하는 예시로, 각 단계별로 참여자 간의 상호작용을 시각적으로 나타낼 수 있습니다. 이러한 다이어그램은 시스템 내에서의 동작 흐름을 쉽게 파악할 수 있도록 도와줍니다.

🏖️ Mermaid 다이어그램 예시

클래스 다이어그램 예시

  • 클래스 다이어그램 예시

    classDiagram
    direction TB
    class ChatbotDev {
        +생성형 AI 적용
        +사용자 인터페이스 설계
        +대화 흐름 관리
        +고객 대응 스킬
        +창의적 문제 해결
    }
    class CICDPipeline {
        +자동화 배포
        +지속적 통합
        +코드 품질 유지
        +효율성 향상
        +운영 관리
    }
    ChatbotDev -- CICDPipeline
    CICDPipeline -- CollaborationSetup
    ChatbotDev -- RedisDeployment

    이 클래스 다이어그램은 두 개의 주요 클래스를 나타내며, 각 클래스는 상호작용하는 방식과 포함된 메서드 또는 속성을 보여줍니다. 클래스 간의 관계는 선과 화살표로 연결되어 있으며, 방향과 구조에 따라 서로 간의 종속성을 나타냅니다.

🏖️ Marp에서 Mermaid 사용하기

Mermaid 사용법

  1. Mermaid 스크립트 추가

    • Marp 슬라이드에서 Mermaid 다이어그램을 사용하려면, 마크다운 파일 최하단에 다음과 같은 스크립트를 추가해야 합니다:
      <script src="https://cdn.jsdelivr.net/npm/mermaid@10.9.1/dist/mermaid.min.js"></script>
<script>
  mermaid.initialize({ 
    startOnLoad: true,
    securityLevel: "loose",
    htmlLabels: true
  });
</script>
    • 이 스크립트는 Mermaid 다이어그램을 슬라이드에서 바로 렌더링할 수 있게 도와줍니다.

  2. Mermaid 다이어그램 사용하기

    • Mermaid 코드를 작성하면 Marp 슬라이드에서 해당 다이어그램이 자동으로 렌더링됩니다. Mermaid 다이어그램은 간단한 텍스트 기반 코드로 복잡한 다이어그램을 만들 수 있는 강력한 도구입니다.

🏖️ SVG를 통한 이미지 생성

SVG란?

  1. SVG의 정의

    • SVG(Scalable Vector Graphics)는 XML 기반의 2차원 벡터 그래픽 파일 형식입니다. 모든 주요 웹 브라우저에서 지원되며, 벡터 방식으로 이미지를 표현하여 확장과 축소 시에도 품질이 유지됩니다.

  2. SVG의 장점

    1. 확장성: SVG는 수학적 표현을 사용하여 이미지를 정의하므로, 크기를 변경해도 품질 저하가 발생하지 않습니다.
    2. 편집 용이성: 텍스트 형식으로 저장되기 때문에, 일반 텍스트 에디터에서 직접 수정할 수 있습니다.
    3. 작은 파일 크기: 복잡한 이미지를 벡터 방식으로 정의하므로, 일반적으로 파일 크기가 작습니다.
    4. 애니메이션 지원: CSS나 JavaScript를 사용하여 SVG 이미지를 동적으로 변환할 수 있습니다.
    5. 접근성: 텍스트 기반이므로 검색 엔진에서 쉽게 인식되며, 스크린 리더와 같은 접근성 도구와도 호환이 좋습니다.
    6. 스타일링: CSS를 통해 SVG에 다양한 스타일을 적용할 수 있습니다.

🏖️ Marp 슬라이드 디자인 커스터마이징

슬라이드 디자인 변경

  1. 슬라이드 스타일링

    • 전체 슬라이드의 배경색, 폰트, 텍스트 색상 등을 일괄적으로 변경하려면 section 태그를 사용합니다:
      section {
  background-color: #f5f5f5;
  font-family: 'Arial', sans-serif;
  color: #333;
}

  2. 제목 스타일 수정

    • 슬라이드의 제목을 더 돋보이게 하기 위해서는 h1과 h2 태그를 스타일링할 수 있습니다:
      h1 {
  color: #0066cc;
  border-bottom: 2px solid #0066cc;
  padding-bottom: 10px;
}
h2 {
  color: #009933;
}

  3. 글머리 기호 및 목록 스타일

    • 목록의 글머리 기호와 번호 스타일을 변경할 수 있습니다:
      ul {
  list-style-type: square;
  color: #666;
}
ol {
  list-style-type: lower-alpha;
  color: #666;
}

  4. 이미지 스타일링

    • 이미지에 테두리나 그림자 효과를 주어 슬라이드에서 더 돋보이게 할 수 있습니다:
      img {
  border: 3px solid #ddd;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

  5. 코드 블록 스타일링

    • 코드 블록을 강조하기 위해 다음과 같은 스타일을 사용할 수 있습니다:
      pre {
  background-color: #f0f0f0;
  border-left: 5px solid #0066cc;
  padding: 10px;
  font-family: 'Courier New', monospace;
}

  6. 특정 슬라이드 스타일링

    • 특정 슬라이드에만 스타일을 적용하고 싶다면 section 태그와 함께 클래스를 사용할 수 있습니다:
      section.lead {
  background-color: #0066cc;
  color: white;
  text-align: center;
}

🏖️ Marp 슬라이드 디자인 커스터마이징

페이지 번호 스타일링

  1. 페이지 번호 스타일

    • 슬라이드 하단에 페이지 번호를 표시하고 스타일링하려면 section::after 가상 요소를 사용할 수 있습니다:
      section::after {
  content: attr(data-marpit-pagination) '/' attr(data-marpit-pagination-total);
  font-size: 0.8em;
  position: absolute;
  bottom: 10px;
  right: 10px;
  color: #888;
}

  2. CSS 적용 방법

    • 슬라이드에 CSS 스타일을 적용하려면 Markdown 파일의 상단에 YAML 구문을 추가합니다:
      ---
marp: true
theme: default
style: |
  section { background-color: #f5f5f5; }
  h1 { color: #0066cc; }
---

    또는 외부 CSS 파일을 사용할 수 있습니다:

    ---
marp: true
theme: default
style: ./custom-theme.css
---

계속해서 Marp 관련 내용을 이어서 정리하겠습니다.

🏖️ Marp 슬라이드 디자인 커스터마이징

Marp 슬라이드 레이아웃 커스터마이징

  1. 세로로 1/2 분할된 레이아웃

    • Marp 슬라이드에 세로로 1/2로 분할되고, 우측 영역은 다시 가로로 1/2로 분할된 레이아웃을 flexbox를 사용하여 구현할 수 있습니다. 아래 예시는 이 구조를 표현한 HTML 코드입니다:
      <div style="display: flex; height: 100%; background-color: #f0f0f0; gap: 20px; padding: 20px;">
  <div style="flex: 1; border: 1px solid #ccc; padding: 20px;">
    <!-- 왼쪽 영역 -->
    - 텍스트
  </div>
  <div style="flex: 1; display: flex; flex-direction: column; gap: 20px;">
    <div style="flex: 1; border: 1px solid #ccc; padding: 20px;">
      <!-- 오른쪽 상단 -->
      - 텍스트
    </div>
    <div style="flex: 1; border: 1px solid #ccc; padding: 20px;">
      <!-- 오른쪽 하단 -->
      - 텍스트
    </div>
  </div>
</div>

  2. 해커톤 팀원 소개 슬라이드

    • 해커톤에 참여한 팀원의 사진, 이름, 소속, 역할, 그리고 느낀점을 담을 수 있는 Marp 슬라이드 레이아웃을 grid 기반으로 만들 수 있습니다. 아래 HTML 코드는 이 레이아웃을 나타냅니다:

      <div style="display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 20px; height: calc(100% - 40px);">
  <div style="display: flex; flex-direction: column; background-color: #fafafa; border: 1px #eee solid; border-radius: 10px; padding: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
    <img src="/api/placeholder/150/150" alt="팀원 1" style="background-color: #ccc; width: 80px; height: 80px; border-radius: 50%; align-self: center; object-fit: cover;">
    <h3 style="margin: 10px 0 5px; text-align: center; font-size: 1em;">이름</h3>
    <p style="margin: 0 0 5px; text-align: center; color: #666; font-size: 0.8em;">소속</p>
    <p style="margin: 0 0 5px; text-align: center; font-weight: bold; font-size: 0.9em;">역할</p>
    <p style="margin: 0; font-size: 0.8em; flex-grow: 1; overflow-y: auto;">느낀점: Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</div>

    • 이 레이아웃은 여러 팀원의 정보를 한 슬라이드에 담을 수 있도록 grid 시스템을 활용한 방식입니다. 각 팀원의 사진, 이름, 소속, 역할, 그리고 느낀점을 시각적으로 보기 좋게 정리할 수 있습니다.

🏖️ Marp 슬라이드 디자인 커스터마이징

Marp 슬라이드 내보내기 및 활용

  1. 슬라이드 형식 선택 및 내보내기

    • 슬라이드가 완성되면 VS Code의 명령 팔레트에서 Marp 내보내기 명령을 통해 PDF, PPTX, HTML 형식으로 내보낼 수 있습니다.
    • 명령 팔레트를 열려면 Ctrl+Shift+P를 누르고 Marp: Export Slide Deck을 선택한 후, 원하는 형식을 고르면 됩니다. 슬라이드를 다양한 형식으로 내보낼 수 있어, 다양한 발표 상황에서 유연하게 사용할 수 있습니다.

  2. HTML/CSS/JS 활용

    • Marp 슬라이드는 HTML, CSS, JS와 결합하여 더욱 정교한 슬라이드를 만들 수 있습니다. 이때 CSS와 JavaScript를 통해 슬라이드의 디자인을 커스터마이징하거나 동적 요소를 추가할 수 있습니다.

🏖️ 생성 AI를 활용한 SVG 생성 및 활용

생성 AI 기반 SVG 활용 방법

  1. SVG 생성 도구

    • 생성형 AI 도구(예: ChatGPT, Claude)를 사용하여 빠르고 쉽게 SVG 이미지를 생성할 수 있습니다. 이 방법은 빠른 프로토타이핑이나 다이어그램 생성에 유용합니다.

  2. AI 도구의 장점

    1. 빠른 프로토타이핑: 생성형 AI 도구를 통해 빠르게 아이디어를 시각화할 수 있습니다.
    2. 코드 생성의 용이성: 복잡한 SVG 코드를 수동으로 작성하지 않고 AI를 활용해 생성할 수 있습니다.
    3. 다양한 스타일 실험: 다양한 디자인 옵션을 실험해볼 수 있습니다.

  3. SVG 생성 및 커스터마이징

    • 생성된 SVG 코드를 수동으로 커스터마이징하여 필요한 요소를 추가하거나 변경할 수 있습니다. 예를 들어, 생성된 SVG 파일을 Adobe Illustrator와 같은 벡터 이미지 편집 도구에서 수정할 수 있습니다.
    • SVG 코드는 텍스트 기반이기 때문에, CSS를 통해 스타일을 추가하거나 JavaScript를 사용해 동적 애니메이션을 추가할 수 있습니다.

이어서 계속해서 Marp와 관련된 PDF 내용 정리 및 설명을 마무리하겠습니다.

🏖️ Marp 슬라이드 디자인 커스터마이징

CSS와 외부 파일을 통한 스타일링

  1. YAML을 통한 CSS 스타일링

    • Marp 슬라이드에 CSS 스타일을 적용하려면, 마크다운 파일 상단에 YAML 구문을 추가하여 스타일을 정의할 수 있습니다:

      ---
marp: true
theme: default
style: |
  section {
    background-color: #f5f5f5;
  }
  h1 {
    color: #0066cc;
  }
---

    • 이 구문을 사용하여 슬라이드의 배경색이나 제목의 색상을 커스터마이징할 수 있습니다.

  2. 외부 CSS 파일 적용

    • 복잡한 스타일링이 필요할 경우, 외부 CSS 파일을 연결하여 사용할 수 있습니다. 이 방법은 슬라이드의 모든 스타일을 외부 파일로 관리하는 데 유리합니다:

      ---
marp: true
theme: default
style: ./custom-theme.css
---

    • custom-theme.css 파일에 슬라이드의 스타일을 정의하고, 해당 파일을 불러와 Marp 슬라이드에 적용할 수 있습니다.

🏖️ SVG와 래스터 이미지 비교

SVG와 래스터 이미지의 차이

  1. SVG (Scalable Vector Graphics)

    • 벡터 그래픽인 SVG는 수학적 표현을 통해 이미지를 정의하는 방식으로, 무한히 확장하거나 축소해도 품질이 유지됩니다. 이로 인해 로고, 아이콘, 그리고 다이어그램과 같은 간단한 그래픽 요소에 적합합니다.
    • 장점:
      1. 확장 시 품질 유지: 벡터 방식이므로 이미지 크기 변화에 따른 품질 저하가 없습니다.
      2. 파일 크기가 작음: 복잡한 그래픽을 포함한 경우에도 상대적으로 작은 파일 크기를 유지합니다.
      3. 코드로 관리 가능: SVG는 XML 기반으로 코드로 관리가 가능하며, 버전 관리 시스템과의 호환성이 뛰어납니다.
      4. 애니메이션 지원: CSS나 JavaScript를 통해 SVG에 애니메이션을 추가할 수 있습니다.

  2. 래스터 이미지 (PNG, JPEG 등)

    • 래스터 이미지는 픽셀 기반의 이미지로, 사진이나 복잡한 그래픽에 적합합니다. 그러나 확장 시 픽셀화가 일어나며, 파일 크기가 커지는 경향이 있습니다.
    • 장점:
      1. 복잡한 이미지 표현: 사진이나 복잡한 그래픽에 적합합니다.
      2. 다양한 포맷 지원: PNG, JPEG, GIF 등 다양한 래스터 이미지 포맷이 존재합니다.
    • 단점:
      1. 확장 시 품질 저하: 이미지의 크기를 확장하면 픽셀화가 발생하여 품질이 저하될 수 있습니다.
      2. 파일 크기 큼: 고해상도의 이미지는 파일 크기가 크게 증가할 수 있습니다.

🏖️ 생성 AI 기반 SVG 생성과 활용

생성형 AI를 통한 SVG 생성의 장단점

  1. 생성형 AI의 장점

    • 빠른 프로토타이핑: 생성형 AI는 짧은 시간 안에 SVG 파일을 생성하여 아이디어를 시각화하는 데 매우 유용합니다.
    • 코드 생성 용이성: 사용자가 직접 SVG 코드를 작성하지 않고도 AI를 통해 자동으로 SVG 코드를 생성할 수 있어, 프로세스가 단순해집니다.
    • 다양한 스타일 실험: 생성형 AI를 통해 여러 가지 디자인 옵션을 빠르게 탐색하고 실험할 수 있습니다.
    • 학습 도구: 생성형 AI를 통해 생성된 코드를 분석함으로써 SVG 문법과 구조에 대한 이해를 높일 수 있습니다.

  2. 생성형 AI의 단점

    • 정확성의 한계: 복잡한 디자인이나 특정 스타일을 요구할 경우 AI가 이를 정확하게 구현하지 못할 수 있습니다.
    • 창의성 제한: AI가 학습한 데이터에 기반하여 생성되기 때문에 완전히 새로운 창의적인 결과물을 만들기 어려울 수 있습니다.
    • 일관성 부족: 여러 번의 요청에서 동일한 결과를 얻기 어려울 수 있으며, 프로젝트에 일관된 스타일을 유지하는 데 어려움이 있을 수 있습니다.
    • 컨텍스트 이해 한계: 브랜드 아이덴티티나 특정 컨텍스트를 반영하는 데에는 한계가 있습니다.

🏖️ Marp를 사용한 슬라이드 디자인과 SVG의 통합

Marp 슬라이드에서 SVG 활용

  • SVG와 Marp의 통합
    • Marp 슬라이드에서 SVG 이미지를 삽입하고 스타일링할 수 있습니다. 이를 통해 프레젠테이션에 다이어그램, 로고, 아이콘 등 다양한 그래픽 요소를 추가할 수 있습니다. CSS를 사용하여 SVG에 다양한 스타일을 적용하고, 동적인 애니메이션을 구현할 수도 있습니다.

🏖️ SVG 활용 사례 및 예시

SVG의 다양한 활용

  1. 웹 디자인

    • 로고 및 아이콘 제작: SVG는 확장성과 파일 크기 관리가 용이하므로 웹사이트의 로고나 아이콘 제작에 자주 사용됩니다.
    • 인포그래픽 및 데이터 시각화: 데이터를 시각적으로 표현하는 인포그래픽이나 차트를 SVG로 제작하면 품질이 유지되면서 효율적으로 데이터를 전달할 수 있습니다.
    • 반응형 웹 디자인: SVG는 크기가 자유롭게 조정되므로 다양한 기기에서 크기와 해상도에 구애받지 않고 이미지 품질을 유지할 수 있습니다.

  2. 기술 문서

    • 다이어그램 및 플로우차트 생성: 복잡한 다이어그램이나 플로우차트를 SVG로 생성하여 문서에 삽입할 수 있습니다. SVG는 간단한 코드로 작성되므로 수정이 쉽고, 문서 업데이트 시 변경사항을 쉽게 반영할 수 있습니다.
    • 기술 도면 및 설계도 작성: 벡터 기반 그래픽이므로 기술적 도면이나 설계도를 그릴 때 SVG를 사용하면 품질 손실 없이 세밀한 이미지를 표현할 수 있습니다.

  3. 애니메이션

    • 인터랙티브 웹 요소 제작: SVG는 CSS와 JavaScript로 애니메이션을 적용할 수 있어, 웹사이트의 인터랙티브한 요소를 제작하는 데 적합합니다.
    • UI/UX 애니메이션 구현: 사용자 인터페이스에 애니메이션을 추가하여 UX를 개선할 수 있습니다.

  4. SVG 코드 예시

    • 아래는 간단한 원을 그리는 SVG 코드 예시입니다:
      <svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
    • 결과: 이 코드는 노란색으로 채워진 원을 그리고, 둘레는 녹색 선으로 표시됩니다. 중심점은 (50, 50)이고, 반지름은 40px입니다.

🏖️ SVG vs 래스터 이미지

SVG와 래스터 이미지의 선택 기준

  • SVG (벡터 그래픽)

    • 확장 시 품질 유지: 벡터 방식이므로 크기를 조정해도 이미지의 품질이 유지됩니다.
    • 파일 크기가 작음: 단순한 이미지일수록 파일 크기가 작습니다. 그러나 복잡한 이미지에서는 성능 저하가 발생할 수 있습니다.

  • 래스터 이미지 (PNG, JPEG 등)

    • 확장 시 품질 저하: 픽셀 기반의 래스터 이미지는 확장 시 이미지가 깨질 수 있습니다.
    • 복잡한 이미지에 적합: 사진이나 세밀한 디테일이 필요한 복잡한 이미지에는 래스터 이미지가 더 적합합니다.
    • 파일 크기가 큼: 고해상도 이미지일 경우 파일 크기가 상대적으로 커질 수 있습니다.

  • 선택 기준

    1. 로고, 아이콘: SVG 사용이 권장됩니다.
    2. 사진, 복잡한 이미지: 래스터 이미지(PNG, JPEG 등)가 더 적합합니다.
    3. 웹 성능과 사용자 경험: 웹사이트의 성능과 사용자 경험을 고려하여 적절한 형식을 선택합니다.

🏖️ 생성 AI를 통한 SVG 생성과 활용

AI를 활용한 SVG 생성의 효율성

  • 효과적인 활용 방법
    1. 아이디어 구상: 생성형 AI를 활용해 초기 아이디어를 시각화하는 데 유용합니다.
    2. 템플릿 활용: AI가 생성한 기본 템플릿을 기반으로 수동으로 세부 사항을 조정할 수 있습니다.
    3. SVG 구조 학습 도구: AI를 통해 생성된 SVG 코드를 학습 도구로 사용하여 SVG 문법을 이해할 수 있습니다.
    4. 간단한 아이콘이나 로고 생성: 빠르게 프로토타입을 제작하는 데 적합합니다.
    5. PPTX 편집 가능: 생성된 SVG 파일을 PPTX 등으로 가져가서 수정할 수 있습니다.

🏖️ Marp 슬라이드 디자인 커스터마이징

슬라이드의 전반적인 디자인 변경

  1. 전체 슬라이드 스타일 변경

    • 슬라이드의 배경색, 글꼴, 텍스트 색상 등을 통일되게 적용하려면 section 선택자를 사용합니다:
      section {
  background-color: #f5f5f5;
  font-family: 'Arial', sans-serif;
  color: #333;
}

  2. 제목 스타일 수정

    • 제목의 색상과 밑줄을 통해 슬라이드 제목을 강조할 수 있습니다:
      h1 {
  color: #0066cc;
  border-bottom: 2px solid #0066cc;
  padding-bottom: 10px;
}
h2 {
  color: #009933;
}
profile
이영락
AI Engineer / 의료인공지능
이전 포스트

해커톤 준비하기 / 평가요소

다음 포스트

marp로 해커톤 기본 템플릿 만들어두기

0개의 댓글