디자인 시스템으로 만든 reveal.js 라이트·다크·민트 테마

발표를 준비할 때마다 테마와 예제 HTML, 실행 파일을 다시 챙기고 있었습니다. 내용은 달라도 제목 페이지와 장 구분, 이미지·본문을 나누는 화면은 반복해서 만들었습니다. CSS를 복사해 시작하면 다음 발표에서도 어느 파일을 고쳐야 하는지 다시 확인해야 했습니다.

처음에는 이런 파일을 reveal-presentations-kit 으로 모았습니다. 그런데 세 테마를 다시 보니 회사 발표 양식 같은 느낌이 많이 남아 있었습니다. 개인 발표에서도 쓰려는 키트라서, 이미 만들어 둔 Ersione 디자인 시스템 을 기준으로 테마를 다시 구성했습니다.

라이트·다크·민트 세 테마의 CSS와 수정용 SCSS, 예제 발표, 기본 reveal.js 런타임을 함께 둡니다. 새 발표는 예제를 복사해 내용을 바꾸고, 테마를 수정할 때만 SCSS를 빌드합니다.

이 글에서는 어떤 파일이 필요한지와 실제 사용 순서, 로컬 발표를 준비하며 주의할 경로·폰트, PDF 출력 방법을 정리합니다. 발표 내용과 매번 반복하는 실행 환경 준비를 나누는 데 목적을 뒀습니다.

세 가지 테마

라이트와 다크는 디자인 시스템의 밝은 화면과 어두운 화면 색상을 가져왔습니다. 민트는 밝은 배경과 흰 카드에 초록색을 더한 발표용 구성입니다. 세 테마 모두 같은 글꼴 구성과 카드·구분선 스타일을 사용합니다.

세 테마는 Ersione 디자인 시스템의 배경·본문·구분선·강조색을 가져와 구성했습니다. 민트는 별도 브랜드 테마가 아니라 디자인 시스템의 초록 계열 데이터 색상을 발표용으로 조합한 버전입니다. 카드 모서리와 글꼴 구성도 같은 기준을 사용하고, 글자 크기와 여백은 발표 화면에 맞춰 키웠습니다.

아래 미리보기에서 테마를 고르고, 슬라이드를 누른 뒤 방향키로 이동할 수 있습니다. 이름과 파일명도 Ersione Light(ersione-light.css), Ersione Dark(ersione-dark.css), Ersione Mint(ersione-mint.css)로 맞췄습니다. reveal.js 런타임은 그대로 두고 테마를 바꿨으며, 민트 예제는 일반적인 발표 내용으로 정리했습니다.

테마 예제를 별도 화면으로 열기 · 저장소의 원본 예제 

디자인 시스템에서 가져온 것들

발표 테마를 위해 색상을 처음부터 다시 고르지는 않았습니다. 디자인 시스템의 배경·카드·본문·보조 글자·구분선·강조색을 가져와 역할에 맞춰 적용했습니다.

라이트와 다크는 디자인 시스템의 파란색 브랜드 토큰을 사용했습니다. 민트는 data-salary-tint를 배경에, data-salary를 강조색에 적용했습니다. 데이터 표시용 색상을 발표 테마에 조합한 것이어서 디자인 시스템에 민트 브랜드가 따로 생긴 것은 아닙니다.

카드는 16px, 큰 패널은 20px 모서리를 사용하고 작은 라벨은 둥근 형태로 맞췄습니다. 글꼴은 Noto Sans KR를 우선 사용하되, 설치돼 있지 않으면 운영체제의 글꼴로 표시합니다. 웹 화면의 작은 글자와 간격을 그대로 가져오면 발표 화면에서 읽기 어려워서, 제목·본문 크기와 여백은 1920×1080 슬라이드에 맞춰 조정했습니다.

테마별 SCSS에는 색상과 글꼴 설정을 두고, 카드·분할 화면·장 구분 같은 공통 스타일은 scss/template/_ersione.scss에 모았습니다. 공통 카드 모양을 바꾸려고 세 파일을 각각 수정하지 않도록 한 구성입니다. 색상 토큰은 키트 안에 복사해 두었으므로 발표할 때 디자인 시스템 저장소가 함께 있어야 하는 것은 아닙니다. 이후 디자인 시스템의 색상이 바뀌면 테마에도 반영할지 확인하고 다시 빌드해야 합니다.

내용·스타일·실행 파일의 구분

reveal.js는 HTML의 section을 슬라이드로 보여줍니다. 키트에서는 발표 내용과 테마 CSS, 공통 런타임을 다음처럼 나눴습니다.

reveal-presentations-kit/
  dist/
    ersione-dark.css
    ersione-light.css
    ersione-mint.css
  examples/
    ersione-dark-template.html
    ersione-light-template.html
    ersione-mint-template.html
  scss/
    source/              # 테마별 설정과 레이아웃
    template/            # 공통 테마 틀
  vendor/
    reveal.css
    reveal.js
    plugin/highlight/
  build.sh
  build.ps1

dist는 바로 적용할 CSS입니다. 발표의 제목과 본문만 바꾸려면 SCSS를 건드릴 필요가 없습니다. 반대로 기본 색이나 글꼴, 공통 레이아웃을 바꾸려면 scss/source에서 해당 테마를 수정하고 CSS를 다시 만듭니다.

이 구분이 없으면 발표 내용 하나를 바꾸면서 테마를 다시 빌드하거나, 다음 발표에 수정 전 CSS를 복사하는 일이 생기기 쉽습니다. 사용할 파일과 수정할 원본의 위치를 따로 보이게 한 이유입니다.

예제를 복사해 발표 시작

저장소를 받은 뒤 같은 깊이의 발표 폴더에 예제를 복사합니다. 예를 들어 examples 옆에 presentations를 만들면 원본의 ../vendor, ../dist 상대 경로를 그대로 사용할 수 있습니다.

git clone https://github.com/ersione/reveal-presentations-kit.git
cd reveal-presentations-kit
mkdir -p presentations
cp examples/ersione-light-template.html presentations/my-talk.html

PowerShell에서는 다음처럼 준비할 수 있습니다.

git clone https://github.com/ersione/reveal-presentations-kit.git
Set-Location reveal-presentations-kit
New-Item -ItemType Directory -Force presentations
Copy-Item examples/ersione-light-template.html presentations/my-talk.html

HTML 파일을 저장소 루트로 바로 옮기면 경로가 달라집니다. 원본은 examples에서 한 단계 올라가도록 작성돼 있는데, 루트에서는 그 경로가 저장소 바깥을 가리킵니다. 내용은 열렸지만 테마나 스크립트가 적용되지 않는다면 파일 위치와 상대 경로부터 확인해야 합니다.

파일을 직접 열어 기본 슬라이드를 볼 수 있고, 로컬 HTTP 주소가 필요하면 저장소 루트에서 서버를 실행합니다.

python3 -m http.server 8000 --bind 127.0.0.1

Windows 환경에서는 같은 위치에서 py -m http.server 8000 --bind 127.0.0.1을 사용할 수 있습니다. 브라우저에서 http://127.0.0.1:8000/presentations/my-talk.html을 엽니다. 이 명령은 발표 폴더를 서비스하는 용도이며 외부 공개 배포 설정은 아닙니다.

슬라이드 내용 수정

슬라이드의 기본 구조는 복잡하지 않습니다. .reveal 안에 .slides를 두고, 각 section에 한 장의 내용을 넣습니다.

<div class="reveal">
  <div class="slides">
    <section>
      <h1>프로젝트 소개</h1>
      <p>어떤 문제를 해결하려고 시작했는지</p>
    </section>
    <section>
      <h2>기존 방식과 바꾼 부분</h2>
      <ul>
        <li>반복해서 준비하던 파일</li>
        <li>공통으로 묶은 테마와 실행 환경</li>
      </ul>
    </section>
  </div>
</div>

이 부분은 슬라이드 본문 예시입니다. 실제 파일에는 CSS와 reveal.js 로딩, 초기화 코드가 함께 있어야 합니다. 키트의 HTML을 복사하는 것은 그 주변 준비를 매번 다시 쓰지 않기 위해서입니다.

Ersione Light 예제에는 큰 제목 화면, 본문과 이미지의 분할 화면, 장 구분 화면이 있습니다. 예제의 Image Area는 실제 이미지가 아니라 자리 표시자입니다. 발표에 맞는 이미지 파일을 함께 넣고 해당 부분을 바꿔야 합니다.

긴 내용을 한 장에 모두 넣으면 브라우저에서는 축소돼 보이더라도 PDF에서 읽기 어려울 수 있습니다. 제목·본문 분할과 장 구분 레이아웃을 준비한 것도 정보를 페이지별로 나누기 위해서였습니다.

테마 변경과 reveal.js 설정

런타임 CSS와 테마 CSS의 역할도 다릅니다. 런타임은 슬라이드의 기본 동작과 구조를 제공하고, 선택한 테마가 글꼴·색·레이아웃을 덮어씁니다.

<link rel="stylesheet" href="../vendor/reveal.css">
<link rel="stylesheet" href="../dist/ersione-light.css">
<link rel="stylesheet" href="../vendor/plugin/highlight/monokai.css">
 
<script src="../vendor/reveal.js"></script>

다른 테마로 바꾸려면 CSS 이름뿐 아니라 해당 테마의 예제 레이아웃도 참고하는 편이 좋습니다. chapter-divider나 분할 화면 같은 클래스는 각 테마에서 의도한 배치가 있으므로 CSS 파일 하나만 바꿔 모든 화면이 같은 모양으로 유지되는 구성은 아닙니다.

Ersione Light 예제의 초기화 설정은 다음과 같습니다.

Reveal.initialize({
  width: 1920,
  height: 1080,
  margin: 0,
  transition: 'fade',
  transitionSpeed: 'fast',
  center: false,
  progress: true,
  slideNumber: true
});

width와 height는 기준 슬라이드 크기이고 reveal.js가 화면에 맞춰 배치합니다. center: false는 예제에서 직접 구성한 위쪽 정렬과 레이아웃을 사용하기 위한 설정입니다. 진행 막대는 progress로 켜고 끌 수 있으며, 테마에서는 이를 위쪽의 얇은 띠로 표시합니다.

SCSS를 수정하고 CSS 생성

배경색이나 강조색을 바꿀 때는 해당 테마의 SCSS를 수정합니다. 예를 들어 Ersione Light 원본에는 다음 설정이 있습니다.

$backgroundColor: #f6f8fc;
$mainColor: #182235;
$headingColor: #182235;
$linkColor: #2563eb;
$linkColorHover: #2563eb;

SCSS를 바꾼 뒤에는 macOS·Linux용 셸 스크립트나 PowerShell용 스크립트를 실행합니다.

./build.sh

.\build.ps1
if ($LASTEXITCODE -ne 0) {
    throw 'Sass 빌드 결과를 확인하세요.'
}

두 스크립트는 npx sass로 세 테마를 dist/*.css에 생성합니다. SCSS 문법이나 공통 템플릿을 바꾼 경우에는 만들어진 CSS와 실제 슬라이드를 함께 확인해야 합니다. CSS 파일 생성만으로 긴 제목과 이미지 배치까지 확인된 것은 아닙니다.

완성된 CSS는 저장소에 포함돼 있으므로 일반적인 내용 수정에는 Node.js나 Sass 설치가 필요하지 않습니다. 테마를 다시 컴파일할 때는 npm 환경이 필요하고, Sass가 준비돼 있지 않으면 npx가 내려받을 수 있습니다. 발표장에서 처음 빌드하기보다 수정과 빌드는 미리 끝내고 결과물을 가져가는 편이 좋습니다.

오프라인 준비와 외부 글꼴

로컬에 reveal.js를 넣었다는 사실만으로 발표의 모든 자원이 오프라인이 되지는 않습니다. 사진을 외부 URL로 연결했거나 CSS에서 글꼴을 가져오면 그 요청은 남아 있습니다.

현재 세 테마에는 외부 글꼴 요청을 넣지 않았습니다. Noto Sans KR가 설치돼 있으면 사용하고, 없으면 운영체제의 대체 글꼴을 사용합니다. 장비마다 글꼴과 줄바꿈이 달라질 수 있으므로 발표할 장비에서 한 번 더 확인해야 합니다. 같은 글꼴로 보여야 한다면 사용 조건을 확인해 글꼴 파일도 로컬에 준비합니다.

배포할 폴더에는 HTML뿐 아니라 vendor, dist, 사용하는 이미지와 글꼴이 함께 있어야 합니다. 브라우저 개발자 도구에서 외부 요청을 확인하고 실제로 네트워크를 끈 상태에서 발표를 열어보는 것이 마지막 점검입니다. 이 키트에는 기본 실행 파일을 넣었지만 모든 플러그인과 개인 발표 자료까지 포함한 것은 아닙니다.

코드 강조 CSS가 있다는 것과 코드 강조 플러그인을 실행한 것도 다릅니다. 추가 기능을 쓰려면 해당 JavaScript를 포함하고 reveal.js 초기화에 등록해야 합니다. 최소 키트의 범위와 발표별로 추가한 기능을 구분해서 준비합니다.

PDF 출력

발표 파일 외에 PDF도 함께 준비할 수 있도록 출력 방법을 남겼습니다. 로컬 서버로 연 주소 뒤에 ?print-pdf를 붙이면 인쇄용 화면을 볼 수 있습니다.

http://127.0.0.1:8000/presentations/my-talk.html?print-pdf

Chrome 또는 Chromium의 인쇄 화면에서 가로 방향, 여백 없음, 배경 그래픽 포함을 확인하고 PDF로 저장합니다. 슬라이드에 긴 내용이나 단계별 표시가 있으면 화면에서 넘겨 보는 것과 인쇄된 페이지 수가 달라질 수 있으므로 PDF를 실제로 열어봐야 합니다.

슬라이드가 잘렸다면 먼저 원래 HTML의 내용이 기준 크기를 넘는지 확인합니다. PDF의 글자 크기와 이미지·배경, 페이지 구분도 함께 봅니다. HTML이 정상적으로 열려도 PDF에서 같은 모습으로 출력되는지는 따로 확인해야 합니다. 상세 출력 옵션은 reveal.js PDF Export 문서 에 정리돼 있습니다.

반복 준비를 줄이는 방식

이 키트는 모든 발표를 자동으로 완성하는 도구는 아닙니다. 발표할 내용과 정보의 순서는 직접 정하고, 테마와 기본 화면을 가져와 시작하는 구성입니다. 사용한 예제를 수정한 뒤에는 상대 경로와 외부 자원, 실제 발표 장비와 PDF를 확인합니다.

반복해서 챙기던 파일을 모으는 것에서 시작해, 지금은 디자인 시스템을 적용한 세 가지 발표 테마와 예제로 정리했습니다. SCSS를 빌드하고 세 예제를 넘겨 보며 표시를 확인했으며, 블로그 미리보기에도 같은 CSS를 넣었습니다. 발표 내용은 예제를 복사해 바꾸면 됩니다. 다만 실제 발표 장비의 글꼴과 PDF 출력은 발표 자료를 만든 뒤 다시 확인해야 합니다.

소스와 참고 자료

• reveal-presentations-kit 저장소 
• Ersione 디자인 시스템 
• 테마의 색상 구성과 이전 파일명 변경 안내 
• 세 테마의 SCSS 원본 
• 원본 예제 HTML 
• reveal.js 초기화 
• reveal.js PDF 출력