Reveal.js는 강력한 프레젠테이션 프레임워크로 알려져 있습니다. 하지만 기본적으로는 고정된 크기의 슬라이드를 제공하므로, 반응형 디자인을 적용하려면 몇 가지 추가적인 작업을 해야 합니다.

1. CSS 수정

먼저, Reveal.js의 CSS 파일을 수정하여 반응형 디자인을 적용합니다.

.reveal .slides {
  display: flex;
  flex-direction: column;
}

.reveal .slides>section {
  width: 100%;
  height: 100%;
}

위의 CSS는 슬라이드 컨테이너와 각 섹션을 일렬로 배치하도록 설정합니다.

2. JavaScript 수정

다음으로, Reveal.js의 JavaScript 파일을 수정하여 반응형 동작을 추가합니다.

Reveal.addEventListener('slidechanged', function(event) {
  var currentSlide = event.currentSlide;

  var slideWidth = currentSlide.offsetWidth;
  var slideHeight = currentSlide.offsetHeight;

  var scaleRatio = Math.min(window.innerWidth / slideWidth, window.innerHeight / slideHeight);

  currentSlide.style.transform = 'scale(' + scaleRatio + ')';
});

위의 JavaScript는 슬라이드가 변경될 때마다 현재 슬라이드의 크기를 측정하고, 현재 창의 크기에 맞게 슬라이드를 확대/축소합니다.

3. 반응형 이미지

Reveal.js에서 이미지를 사용하는 경우, 반응형 이미지를 사용하면 좋습니다.

<img src="image.jpg" srcset="image.jpg 1x, image@2x.jpg 2x" alt="Image">

위의 코드는 두 가지 버전의 이미지를 제공하여 디바이스의 해상도에 맞게 이미지를 로드합니다.

4. 뷰포트 설정

마지막으로, HTML 파일의 뷰포트 설정을 수정하여 반응형 디자인을 지원합니다.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

위의 코드는 뷰포트를 휴대폰 화면에 맞춰 설정합니다.

이제 Reveal.js에 반응형 디자인이 적용되었습니다. 모바일 장치에서 프레젠테이션을 할 때에도 원활한 화면 전환과 이미지 표시를 경험할 수 있습니다.

참고 자료

• Reveal.js 공식 문서
• Reveal.js Git 저장소