DEVOCEAN

블로그를 운영하다 보면 작성한 글을 슬라이드와 같은 형식으로 효과적으로 공유해야 할 때가 있습니다.

이럴 때마다 슬라이드를 처음부터 새로 만드는 것은 상당한 시간과 노력이 필요한 작업입니다.

하지만, LLM과 Reveal.js를 활용하면 작성한 글을 효율적으로 슬라이드로 변환하고, GitHub Pages를 통해 쉽게 게시하여 함께 볼 수 있습니다.

이 글에서는 그 과정에 대한 아이디어를 나누어 보도록 하겠습니다.

블로그 글을 슬라이드로 변환해야 하는 이유

블로그 글은 상세한 설명과 깊이 있는 내용을 담기에 적합한 형식이지만, 발표나 강연에서는 핵심 내용을 시각적으로 전달할 수 있는 슬라이드가 더 효과적입니다.

블로그 글을 슬라이드로 변환하면 유용한 상황들이 있습니다.

• 컨퍼런스나 세미나에서 블로그 내용을 발표할 때

• 팀 미팅에서 연구 결과나 아이디어를 공유할 때

• 온라인 강의나 웨비나를 진행할 때

• 복잡한 개념을 시각적으로 설명해야 할 때

그러나, 블로그 글을 슬라이드로 변환하는 과정은 종종 시간 소모적이고 반복적인 작업이 될 수 있습니다.

AI툴을 활용하기 좋은 시대에 LLM과 Reveal.js의 조합의 아이디어는 큰 도움이 됩니다.

LLM : 블로그 글의 슬라이드 변환

최근 ChatGPT, Claude와 같은 LLM의 발전으로 텍스트 변환 작업이 훨씬 수월해졌습니다. 블로그 글을 슬라이드로 변환하는 과정에서 LLM은 다음과 같은 역할을 할 수 있습니다.

1. 핵심 내용 추출: 긴 블로그 글에서 슬라이드에 포함할 핵심 포인트를 추출합니다.

2. 슬라이드 구조화: 추출된 내용을 논리적인 슬라이드 구조로 재구성합니다.

3. 마크다운 형식 변환: Reveal.js에서 사용할 수 있는 마크다운 형식으로 변환합니다.

예를 들어, 다음과 같이 LLM에게 요청할 수 있습니다.

"내 블로그 글을 Reveal.js 슬라이드용 마크다운으로 변환해줘. 
각 슬라이드는 '---'로 구분하고, 중요한 포인트는 불릿 포인트로 정리해줘."

LLM은 블로그 글을 분석하여 다음과 같은 형식의 마크다운을 생성할 수 있습니다.

# 블로그 제목

작성자: 홍길동

---

## 주요 내용 1

- 첫 번째 핵심 포인트
- 두 번째 핵심 포인트
- 세 번째 핵심 포인트

---

## 주요 내용 2

- 관련 데이터 분석
- 중요한 인사이트

이렇게 LLM을 활용하면 블로그 글의 핵심 내용을 한 번에 빠르게 슬라이드 형식으로 변환할 수 있어 시간과 노력을 크게 절약할 수 있습니다.

Reveal.js : 웹 기반 프레젠테이션의 강력한 도구

Reveal.js는 HTML과 JavaScript 기반의 오픈 소스 프레젠테이션 프레임워크로, 다음과 같은 장점이 있습니다.

• 마크다운 지원: 복잡한 HTML 코드 없이도 마크다운으로 슬라이드를 쉽게 작성할 수 있습니다.

• 웹 기반: 브라우저에서 바로 실행되어 플랫폼에 관계없이 접근 가능합니다.

• 반응형 디자인: 다양한 화면 크기에 자동으로 적응합니다.

• 다양한 플러그인: 코드 하이라이팅, 수학 공식, 차트 등 다양한 기능을 지원합니다.

• 사용자 정의: CSS를 통해 디자인을 자유롭게 커스터마이징할 수 있습니다.

Reveal.js를 사용하면 LLM이 생성한 마크다운을 바로 슬라이드로 변환할 수 있어, PowerPoint나 Keynote와 같은 전통적인 프레젠테이션 도구보다 효율적으로 작업할 수 있습니다.

GitHub Pages : 온라인 공유

슬라이드를 만든 후에는 GitHub Pages를 활용하여 쉽게 온라인에 게시하면 아래의 장점을 누릴 수 있습니다.

• 무료 호스팅: 별도의 호스팅 비용 없이 슬라이드를 온라인에 게시할 수 있습니다.

• 버전 관리: Git을 통해 슬라이드의 변경 사항을 추적하고 관리할 수 있습니다.

• 협업 가능: 팀원들과 함께 슬라이드를 편집하고 개선할 수 있습니다.

• 접근성: URL만 있으면 누구나 어디서든 슬라이드에 접근할 수 있습니다.

실제 활용 과정: 블로그에서 온라인 슬라이드까지

다음은 블로그 글을 Reveal.js 슬라이드로 변환하고 GitHub Pages에 게시하는 전체 과정입니다.

1. LLM을 활용한 슬라이드 콘텐츠 생성

기존 블로그 글을 LLM에 입력하고, Reveal.js용 마크다운 형식으로 변환을 요청합니다. 이때 다음과 같은 프롬프트를 사용할 수 있습니다.

다음 블로그 글을 Reveal.js 슬라이드용 마크다운으로 변환해줘:
1. 슬라이드는 '---'로 구분
2. 각 섹션의 주요 내용은 불릿 포인트로 요약
3. 코드 블록은 ```
4. 중요한 개념은 굵은 글씨로 강조"

2. Reveal.js 저장소 클론하기

먼저 터미널이나 명령 프롬프트를 열고 다음 명령어를 실행하여 Reveal.js 저장소를 클론합니다.

git clone https://github.com/hakimel/reveal.js.git
cd reveal.js

이 명령어는 Reveal.js의 최신 버전을 현재 디렉토리에 다운로드합니다.

3. 필요한 패키지 설치하기

Reveal.js를 로컬에서 실행하기 위해 필요한 패키지를 설치합니다.

npm install

이 명령어는 package.json 파일에 명시된 모든 의존성 패키지를 설치합니다.

4. 슬라이드 마크다운 파일 생성하기

프로젝트 루트 디렉토리에 slides.md 파일을 생성합니다. 이 파일에는 LLM이 생성한 마크다운 형식의 슬라이드 내용을 저장합니다.

# 컨테이너 기술과 Kubernetes의 발전

---

## 현재 IT 환경에서의 컨테이너 기술
- **컨테이너 기술**은 필수적인 요소로 자리잡음
- **Kubernetes(K8s)**를 통한 클라우드 네이티브 애플리케이션의 배포 및 관리 용이
- **containerd**와 같은 경량화된 컨테이너 런타임의 발전으로 설치 과정 간소화
- 실무 사례를 통해 클라우드 네이티브 Kubernetes 설치의 간편함 소개

---

## 컨테이너 런타임의 개념과 의의
- **컨테이너 런타임**: 컨테이너의 생성, 실행, 관리 담당
- **런타임**: 전체 생명 주기 관리, 리소스 할당, 격리 환경 유지 포함
- **Docker**의 등장(2013)으로 컨테이너 기술 대중화
- **containerd**: Docker에서 분리되어 경량화된 런타임 제공
- **Kubernetes**와의 긴밀한 통합으로 클라우드 네이티브 환경의 표준화
...
...
중략 
...
...
## 비교 요약
- **Docker**: 개발자 친화적, 로컬 개발에 유용하지만 CRI 미지원으로 Kubernetes 프로덕션 환경에서 외면받음
- **containerd**: OCI와 CRI 표준 준수, Kubernetes와의 통합에 최적화된 경량 런타임으로 대규모 프로덕션 환경에서 선호됨

---

## containerd의 장점
- **경량화된 아키텍처**: 낮은 자원 소모로 효율적
- **OCI 및 CRI 표준 준수**: 상호 운용성 보장
- **Kubernetes와의 긴밀한 통합**: 별도의 중간 계층 없이 안정적 동작
- **모듈성과 확장성**: 커스터마이징과 유지보수 용이
- **오픈소스 커뮤니티 지원**: 활발한 업데이트와 신뢰성 제공
- **보안성**: 공격 표면 줄이고 보안 정책 통합

5. HTML 파일 수정하기

프로젝트 루트 디렉토리에 있는 index.html 파일을 열고 다음과 같이 수정합니다.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <title>Container Runtime Overview</title>

    <link rel="stylesheet" href="dist/reset.css">
    <link rel="stylesheet" href="dist/reveal.css">
    <link rel="stylesheet" href="dist/theme/black.css">
    <link rel="stylesheet" href="plugin/highlight/monokai.css">
	<link rel="stylesheet" href="css/custom.css"> <!-- custom.css 추가 -->
</head>
<body>
    <div class="reveal">
        <div class="slides">
			<section data-markdown="slides.md"></section></section>	
        </div>
    </div>

    <script src="dist/reveal.js"></script>
    <script src="plugin/notes/notes.js"></script>
    <script src="plugin/markdown/markdown.js"></script>
    <script src="plugin/highlight/highlight.js"></script>
    <script src="plugin/math/math.js"></script>
    <script>
        Reveal.initialize({
            hash: true,
            plugins: [ RevealMarkdown, RevealHighlight, RevealNotes, RevealMath ],
            transition: 'slide', // 슬라이드 전환 효과 설정 fade, slide, convex, concave, zoom 중 선택
            transitionSpeed: 'fast' // 전환 속도 설정
        });
    </script>
</body>
</html>

이 HTML 파일은 slides.md 파일을 로드하고, 마크다운 형식을 슬라이드로 변환합니다. 또한 코드 하이라이팅과 발표자 노트 기능도 활성화합니다.

6. 커스텀 CSS 파일 생성하기

프로젝트의 css 디렉토리에 custom.css 파일을 생성하여 슬라이드의 디자인을 커스터마이징합니다.

css/* 전체 슬라이드 배경색 설정 */
.reveal {
    background-color: #f0f0f0; 
}

/* 슬라이드 내 텍스트 색상 설정 */
.reveal h1,
.reveal h2 {
    color: mediumseagreen; /* 헤더 색상 */
}

/* 일반 텍스트 색상 및 크기 설정 */
.reveal p,
.reveal li {
    color: #333333; /* 어두운 회색 */
    font-size: 1.2em; /* 글자 크기 조정 */
}

/* 코드 블록 스타일링 */
.reveal pre {
    background-color: #282c34;
    border-radius: 5px;
    padding: 15px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* 링크 색상 설정 */
.reveal a {
    color: #000000; /* 검정색 글자 */
    text-decoration: none; /* 링크 밑줄 제거 */
}

.reveal a:hover {
    color: #555555; /* 링크 호버 시 색상 변경 */
    text-decoration: underline; /* 호버 시 밑줄 표시 */
}

/* 불릿 포인트 스타일링 */
.reveal ul {
    list-style-type: square; /* 사각형 불릿 */
}

/* 강조 텍스트 스타일링 */
.reveal strong {
    color: #e63946; /* 강조 색상 */
    font-weight: bold;
}

이 CSS 파일은 슬라이드의 전체적인 디자인을 사용자 취향에 맞게 조정합니다. 필요에 따라 색상, 폰트 크기, 여백 등을 변경할 수 있습니다.

7. 로컬에서 슬라이드 확인하기

설정이 완료되면 다음 명령어를 실행하여 로컬 서버를 시작하고 슬라이드를 확인합니다.

npm start

이 명령어는 로컬 서버를 시작하고, 기본적으로 http://localhost:8000 주소에서 슬라이드를 볼 수 있습니다. 브라우저에서 이 주소를 열면 슬라이드가 표시됩니다.

8. 슬라이드 탐색 방법

슬라이드를 탐색하는 방법은 다음과 같습니다.

• 오른쪽/왼쪽 화살표 키: 다음/이전 슬라이드로 이동

• 위/아래 화살표 키: 수직 슬라이드 탐색

• 스페이스바: 다음 슬라이드로 이동

• ESC 키: 슬라이드 개요 보기

• F 키: 전체 화면 모드 전환

• S 키: 발표자 노트 창 열기

9. 추가 기능 활용하기

Reveal.js는 다양한 추가 기능을 제공합니다.

• 발표자 노트: 슬라이드 마크다운에 Note: 다음에 텍스트를 추가하여 발표자 노트를 작성할 수 있습니다.

• PDF 내보내기: 브라우저 주소 뒤에 ?print-pdf를 추가하고 브라우저의 인쇄 기능을 사용하여 PDF로 저장할 수 있습니다.

• 코드 하이라이팅: 코드 블록에 언어를 지정하여 구문 강조 표시를 적용할 수 있습니다.

10. GitHub Pages에 배포

슬라이드를 GitHub Pages에 배포하는 과정은 다음과 같습니다.

1. GitHub에 새 저장소 생성

2. Reveal.js 파일과 마크다운 슬라이드 파일 업로드

3. 저장소 설정에서 GitHub Pages 활성화

4. 생성된 URL을 통해 슬라이드 공유

11. 슬라이드 결과

https://jeonck.github.io/slide-containerd-k8s/

결론

블로그 글을 슬라이드로 변환하는 과정에 대한 새로운 접근 방법으로 Ideation을 해 보았습니다.

LLM을 활용해 핵심 내용을 추출하고, Reveal.js로 웹 기반 슬라이드를 만든 뒤 GitHub Pages를 통해 온라인에 게시하는 이 방법은 시간과 노력을 크게 줄여줍니다.

이 접근 방식의 가장 큰 매력은 한 번 작성한 콘텐츠를 다양한 형태로 쉽게 재활용할 수 있다는 점입니다.

블로그 글 작성에 투자한 시간과 노력을 최대한 활용하면서, 다양한 상황에 맞게 콘텐츠를 유연하게 변형해 더 넓은 청중에게 다가갈 수 있습니다.

LLM, Reveal.js, GitHub Pages의 조합은 기술 발전에 따라 콘텐츠 제작과 공유 방식의 새로운 형태가 될 수 있습니다.

직접 블로그 글로 슬라이드를 만들어 보세요. 같은 내용으로 두 가지 다른 형태의 콘텐츠를 얻는 효과성을 직접 경험할 수 있을 것입니다.