[javascript] Reveal.js의 다국어 지원 및 다국어 프레젠테이션 제작하기

27 Nov 2023

javascript

Reveal.js는 웹 기반 프레젠테이션 라이브러리로, 다양한 템플릿과 효과를 제공합니다. 이번 글에서는 Reveal.js를 사용하여 다국어 지원 및 다국어 프레젠테이션을 만드는 방법에 대해 알아보겠습니다.

1. 다국어 지원 설정하기

Reveal.js는 config 객체를 사용하여 다국어 지원을 설정할 수 있습니다. config 객체에 i18n 속성을 추가하여 다국어 설정을 할 수 있습니다.

예를 들어, 영어와 한국어를 지원하는 프레젠테이션을 만들고 싶다면, 다음과 같이 config 객체를 설정할 수 있습니다:

Reveal.initialize({
    // 기본 설정 값
    // ...

    // 다국어 설정
    i18n: {
        default: 'en',  // 기본 언어 설정
        available: ['en', 'ko']  // 사용 가능한 언어 목록
    },

    // 그 외 설정 값
    // ...
});

위의 설정에서 default 속성은 기본 언어를 설정하고, available 속성은 사용 가능한 언어를 설정합니다.

2. 다국어 컨텐츠 작성하기

프레젠테이션의 각 슬라이드에 다국어로 작성된 컨텐츠를 추가해야 합니다. Reveal.js는 data-i18n 속성을 사용하여 컨텐츠를 언어별로 구분합니다.

다음은 영어와 한국어로 작성된 컨텐츠를 추가하는 예제입니다:

<section>
    <h2 data-i18n="hello">Hello</h2>
    <p data-i18n="welcome">Welcome to my presentation!</p>
</section>

<section>
    <h2 data-i18n="thank-you">Thank you</h2>
    <p data-i18n="goodbye">Goodbye!</p>
</section>

위의 예제에서 data-i18n 속성 값으로 사용된 키는 config 객체의 다국어 설정과 일치해야 합니다.

3. 다국어 프레젠테이션 실행하기

프레젠테이션을 실행할 때, Reveal.js에 다국어 지원 기능을 적용하기 위해 config 객체의 i18n 속성을 사용합니다.

다음은 프레젠테이션을 실행하는 예제입니다:

Reveal.initialize({
    // 기본 설정 값
    // ...

    // 다국어 설정
    i18n: {
        default: 'en',  // 기본 언어 설정
        available: ['en', 'ko']  // 사용 가능한 언어 목록
    },

    // 그 외 설정 값
    // ...
});

위의 설정에서는 영어를 기본 언어로 설정하고, 한국어를 사용 가능한 언어 목록에 추가했습니다. 프레젠테이션 실행 시에는 lang 속성을 사용하여 원하는 언어를 지정할 수 있습니다.

<!DOCTYPE html>
<html lang="en">  <!-- 영어로 실행 -->
<head>
    <!-- head 부분 설정 -->
</head>
<body>
    <div class="reveal">
        <!-- 프레젠테이션 내용 -->
    </div>

    <script src="reveal.js"></script>
    <script>
        Reveal.initialize({
            // 다국어 설정
            i18n: {
                default: 'en',  // 기본 언어 설정
                available: ['en', 'ko']  // 사용 가능한 언어 목록
            },

            // 그 외 설정 값
            // ...
        });
    </script>
</body>
</html>

위의 예제에서는 html 태그의 lang 속성을 사용하여 영어로 프레젠테이션을 실행하도록 설정했습니다.

결론

Reveal.js를 사용하여 다국어 지원 프레젠테이션을 만들 수 있습니다. config 객체의 i18n 속성을 사용하여 다국어 설정을 추가하고, 각 슬라이드에 data-i18n 속성을 사용하여 다국어 컨텐츠를 추가할 수 있습니다. 프레젠테이션 실행 시에는 lang 속성을 사용하여 원하는 언어를 선택할 수 있습니다.