SSR을 활용한 웹 애플리케이션의 국제화 (Internationalization, i18n) 전략

16 Oct 2023

javascript

많은 웹 애플리케이션은 국제 사용자를 대상으로 하기 때문에 국제화(Internationalization)는 중요한 요소입니다. 국제화란 애플리케이션을 여러 언어와 문화에 대응할 수 있도록 하는 것을 말하며, 이는 사용자의 언어, 날짜 형식, 금액 표시 등을 지원하여 사용자 경험을 향상시킵니다.

서버 사이드 렌더링 (SSR)은 웹 애플리케이션의 초기 로딩 속도와 SEO (Search Engine Optimization)에 많은 이점을 제공합니다. SSR을 활용하여 국제화를 구현하는 방법은 아래와 같습니다.

1. 다국어 지원을 위한 리소스 파일 준비

국제화를 위해서는 각 지역에 해당하는 다국어 리소스 파일을 준비해야 합니다. 이는 텍스트, 메시지, 레이블 등 웹 애플리케이션에서 사용되는 모든 텍스트를 포함하는 파일입니다. 일반적으로 JSON, XML 또는 YAML 형식으로 작성됩니다. 예를 들어, en.json 파일에는 영어로 된 텍스트가, ko.json 파일에는 한국어로 된 텍스트가 포함됩니다.

{
  "welcome_message": "Welcome to our website!",
  "button_label": "Click me"
}

2. SSR을 통한 로케일 설정

SSR에서는 사용자의 로케일 정보를 파악하여 해당하는 다국어 리소스 파일을 로드하고, 애플리케이션의 텍스트를 로컬라이즈합니다. 이를 위해 웹 서버에서 사용자의 언어 설정을 확인하고, 해당하는 리소스 파일을 로드하는 작업이 필요합니다.

예를 들어, Express.js를 사용하는 경우 다음과 같이 로케일 미들웨어를 등록하여 로케일 설정을 수행할 수 있습니다.

const express = require('express');
const i18n = require('i18n');
const app = express();

// 다국어 설정 및 리소스 파일 경로 지정
i18n.configure({
  locales: ['en', 'ko'],
  directory: __dirname + '/locales'
});

// 로케일 설정을 위한 미들웨어 등록
app.use(i18n.init);

// 라우트 핸들러에서 다국어 텍스트 사용 예시
app.get('/', (req, res) => {
  res.send(req.__('welcome_message'));
});

위의 예시에서 req.__ 함수는 사용자의 로케일에 따라 해당하는 텍스트를 반환합니다.

3. 국제화를 위한 프론트엔드 처리

웹 애플리케이션의 프론트엔드에서도 국제화를 위한 처리를 해 주어야 합니다. SSR을 사용하는 경우, 서버에서 로케일 설정을 처리해주기 때문에 프론트엔드에서는 언어 변경, 날짜 형식 변환 등의 작업을 수행해주면 됩니다.

일반적으로 라이브러리나 프레임워크를 활용하여 국제화 기능을 구현할 수 있습니다. 예를 들어, Vue.js에서는 vue-i18n 라이브러리를 사용하여 국제화를 구현할 수 있습니다.

import Vue from 'vue';
import VueI18n from 'vue-i18n';
import messages from './locales';

Vue.use(VueI18n);

const i18n = new VueI18n({
  locale: 'en',
  messages
});

new Vue({
  i18n,
  // ...
}).$mount('#app');

위의 예시에서 messages 변수에는 앞서 준비한 다국어 리소스 파일이 포함되어 있습니다. Vue 컴포넌트에서 다국어 텍스트를 사용하려면 $t 핼퍼 함수를 사용하면 됩니다.

<template>
  <div>
    <h1>{{ $t('welcome_message') }}</h1>
    <button>{{ $t('button_label') }}</button>
  </div>
</template>

위와 같이 작성하면, 브라우저에서 해당하는 로케일에 따라 다국어 텍스트가 동적으로 표시됩니다.

4. 추가 고려 사항

숫자, 날짜 및 통화 등의 형식 역시 로케일에 맞게 변환해야 합니다. 이를 위해 moment.js 등의 라이브러리를 사용할 수 있습니다.
이미지, 아이콘, 로고 등의 리소스도 로케일에 따라 다른 버전을 제공해야 합니다.
서버 사이드 렌더링과 클라이언트 사이드 렌더링 (CSR)을 함께 사용하는 경우, 초기 로딩 시 SSR을 사용하여 로케일을 설정한 뒤, CSR을 통해 동적인 국제화 처리를 할 수 있습니다.

국제화는 웹 애플리케이션의 사용자 경험을 향상시키는 핵심 요소입니다. SSR을 활용하여 국제화를 구현하면 초기 로딩 성능과 SEO에도 긍정적인 영향을 미칠 수 있습니다. 적절한 리소스 파일 준비와 로케일 설정, 그리고 프론트엔드 처리를 통해 다국어 지원을 완성할 수 있습니다.

해시태그: #SSR #국제화 #i18n