작가:

생성:2026-04-24마지막 업데이트:2026-05-31

GitHub에서 애플리케이션 템플릿 보기

이 페이지에는 애플리케이션 템플릿이 제공됩니다.

쇼케이스 애플리케이션 보기

이 페이지는 템플릿의 라이브 데모로 연결됩니다.

이 문서를 원하는 AI 어시스턴트에 참조하세요ChatGPT Claude DeepSeek Google AI mode Gemini Perplexity Mistral Grok

이 페이지와 원하는 AI 어시스턴트를 사용하여 문서를 요약합니다

버전 기록

"Solid useIntlayer API 사용법을 직접 속성 액세스로 업데이트"
v8.9.02026. 5. 4.
"Astro + Vanilla JS를 위한 초기 문서"
v8.7.72026. 4. 24.

이 페이지의 콘텐츠는 AI를 사용하여 번역되었습니다.

영어 원본 내용의 최신 버전을 보기

문서 수정

이 문서를 개선할 아이디어가 있으시면 GitHub에 풀 리퀘스트를 제출하여 자유롭게 기여해 주세요.

문서에 대한 GitHub 링크

복사

문서의 Markdown을 클립보드에 복사

Intlayer를 사용하여 Astro + Vanilla JS 사이트 번역하기 | 국제화 (i18n)

Name: Intlayer
Author: Intlayer

ide.intlayer.org

대안보다 Intlayer를 선택해야 하는 이유는 무엇입니까?

'astro-i18n' 또는 'i18next'와 같은 주요 솔루션과 비교할 때 Intlayer는 다음과 같은 통합 최적화가 제공되는 솔루션입니다.

Intlayer는 다국어 라우팅, 사이트맵 및 국제화 확장(i18n)에 필요한 모든 기능을 제공하여 Astro와 완벽하게 작동하도록 최적화되어 있습니다.

대용량 JSON 파일을 페이지에 로드하는 대신 필요한 콘텐츠만 로드하세요. Intlayer는 번들 및 페이지 크기를 최대 50% 줄이는 데 도움이 됩니다.

애플리케이션 콘텐츠의 범위를 지정하면 대규모 애플리케이션의 유지 관리가 용이해집니다. 전체 콘텐츠 코드베이스를 검토해야 하는 정신적 부담 없이 단일 기능 폴더를 복제하거나 삭제할 수 있습니다. 또한 Intlayer는 완전히 유형되어 콘텐츠의 정확성을 보장합니다.

콘텐츠를 같은 위치에 배치하면 LLM(대형 언어 모델)에 필요한 컨텍스트가 줄어듭니다. Intlayer에는 누락된 번역을 테스트하기 위한 CLI, LSP, MCP 및 agent)와 같은 도구 모음도 함께 제공됩니다. 기술, AI 에이전트를 위한 개발자 경험(DX)을 더욱 원활하게 만듭니다.

AI 공급자의 비용으로 선택한 LLM을 사용하여 CI/CD 파이프라인을 번역하려면 자동화를 사용하세요. Intlayer는 또한 콘텐츠 추출을 자동화하는 컴파일러와 백그라운드에서 번역을 돕는 웹 플랫폼을 제공합니다.

대규모 JSON 파일을 구성 요소에 연결하면 성능 및 반응성 문제가 발생할 수 있습니다. Intlayer는 빌드 시 콘텐츠 로딩을 최적화합니다.

Intlayer는 단순한 i18n 솔루션 그 이상으로 관리에 도움이 되는 자체 호스팅 비주얼 편집기 및 전체 CMS를 제공합니다. 다국어 콘텐츠를 실시간으로 제공하여 번역가, 카피라이터, 기타 팀원과 원활하게 협업할 수 있습니다. 콘텐츠는 로컬 및/또는 원격으로 저장될 수 있습니다.

Astro + Vanilla JS에서 Intlayer 설정을 위한 단계별 가이드

GitHub에서 애플리케이션 템플릿 보기.

1단계: 종속성 설치

선호하는 패키지 관리자를 사용하여 필요한 패키지를 설치합니다:

bash

코드 복사

코드를 클립보드에 복사

npm install intlayer astro-intlayer vanilla-intlayernpx intlayer init

alt, title, href, aria-label 등과 같은 문자열 속성에서 콘텐츠를 사용하려면 다음과 같이 함수의 값을 사용할 수 있습니다.

html

코드 복사

코드를 클립보드에 복사

<img src="{content.image.src.value}" alt="{content.image.value}" /><img src="{content.image.src.toString()}" alt="{content.image.toString()}" /><img src="{String(content.image.src)}" alt="{String(content.image)}" />

intlayer 설정 관리, 번역, 콘텐츠 선언, 트랜스파일 및 CLI 명령어를 위한 국제화 도구를 제공하는 핵심 패키지입니다.
astro-intlayer Intlayer를 Vite 번들러와 통합하기 위한 Astro 통합 플러그인과 사용자의 선호 로케일을 감지하고 쿠키를 관리하며 URL 리디렉션을 처리하는 미들웨어가 포함되어 있습니다.
vanilla-intlayer Intlayer를 Vanilla JavaScript / TypeScript 애플리케이션과 통합하는 패키지입니다. 프레임워크 없이도 Astro의 <script> 태그 내 어디서나 언어 변경에 응답할 수 있도록 pub/sub 싱글톤(IntlayerClient)과 콜백 기반 헬퍼(useIntlayer, useLocale 등)를 제공합니다.

2단계: 프로젝트 설정

애플리케이션의 언어를 설정하기 위한 설정 파일을 생성합니다:

intlayer.config.ts

코드 복사

코드를 클립보드에 복사

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [      Locales.ENGLISH,      Locales.FRENCH,      Locales.SPANISH,      // 기타 로케일    ],    defaultLocale: Locales.ENGLISH,  },};export default config;

이 설정 파일을 통해 로컬라이즈된 URL, 미들웨어 리디렉션, 쿠키 이름, 콘텐츠 선언 위치 및 확장자 설정, 콘솔의 Intlayer 로그 비활성화 등을 구성할 수 있습니다. 사용 가능한 파라미터의 전체 목록은 설정 문서를 참조하세요.

3단계: Astro 설정에 Intlayer 통합

Astro 설정에 intlayer 플러그인을 추가합니다. Vanilla JS의 경우 추가적인 UI 프레임워크 통합은 필요하지 않습니다.

astro.config.ts

코드 복사

코드를 클립보드에 복사

// @ts-checkimport { intlayer } from "astro-intlayer";import { defineConfig } from "astro/config";// https://astro.build/configexport default defineConfig({  integrations: [intlayer()],});

intlayer() 통합 플러그인은 Intlayer를 Astro와 통합하는 데 사용됩니다. 콘텐츠 선언 파일의 빌드를 보장하고 개발 모드에서 이를 감시합니다. Astro 애플리케이션 내에서 Intlayer 환경 변수를 정의하며, 성능 최적화를 위한 에일리어스(alias)를 제공합니다.

4단계: 콘텐츠 선언

번역을 저장하기 위해 콘텐츠 선언을 생성하고 관리합니다:

src/app.content.ts

코드 복사

코드를 클립보드에 복사

import { t, type Dictionary } from "intlayer";const appContent = {  key: "app",  content: {    greeting: t({      en: "Hello World",      fr: "Bonjour le monde",      es: "Hola mundo",      ko: "안녕하세요",    }),    description: t({      en: "Welcome to my multilingual Astro site.",      fr: "Bienvenue sur mon site Astro multilingue.",      es: "Bienvenido a mi sitio Astro multilingüe.",      ko: "다국어 Astro 사이트에 오신 것을 환영합니다.",    }),    switchLocale: t({      en: "Switch language:",      fr: "Changer de langue :",      es: "Cambiar idioma:",      ko: "언어 전환:",    }),  },} satisfies Dictionary;export default appContent;

콘텐츠 선언은 contentDir(기본값 ./src)에 포함되어 있고 콘텐츠 선언 파일 확장자(기본값 .content.{json,ts,tsx,js,jsx,mjs,cjs,md,mdx,yaml,yml})와 일치한다면 애플리케이션 어디에서나 정의할 수 있습니다.

자세한 내용은 콘텐츠 선언 문서를 참조하세요.

5단계: Astro에서 콘텐츠 사용

Vanilla JS의 경우 모든 서버 사이드 렌더링은 .astro 파일 내에서 getIntlayer를 직접 사용하여 수행됩니다. 그 후 <script> 블록이 클라이언트 사이드에서 vanilla-intlayer를 초기화하여 언어 전환을 처리합니다.

src/pages/[...locale]/index.astro

코드 복사

코드를 클립보드에 복사

---import {  getIntlayer,  getLocaleFromPath,  getLocalizedUrl,  getPrefix,  getLocaleName,  localeMap,  locales,  defaultLocale,  getPathWithoutLocale,  type LocalesValues,} from "intlayer";export const getStaticPaths = () => {  return localeMap(({ locale }) => ({    params: { locale: getPrefix(locale).localePrefix },  }));};const locale = getLocaleFromPath(Astro.url.pathname) as LocalesValues;const pathWithoutLocale = getPathWithoutLocale(Astro.url.pathname);const { greeting, description, switchLocale } = getIntlayer("app", locale);---<!doctype html><html lang={locale} dir={getHTMLTextDir(locale)}>  <head>    <meta charset="utf-8" />    <meta name="viewport" content="width=device-width" />    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />    <title>{greeting}</title>    <!-- Canonical 링크 -->    <link      rel="canonical"      href={new URL(getLocalizedUrl(Astro.url.pathname, locale), Astro.site)}    />    <!-- Hreflang 링크 -->    {      localeMap(({ locale: mapLocale }) => (        <link          rel="alternate"          hreflang={mapLocale}          href={new URL(            getLocalizedUrl(Astro.url.pathname, mapLocale),            Astro.site          )}        />      ))    }    <link      rel="alternate"      hreflang="x-default"      href={new URL(        getLocalizedUrl(Astro.url.pathname, defaultLocale),        Astro.site      )}    />  </head>  <body>    <main>      <h1 id="greeting">{greeting}</h1>      <p id="description">{description}</p>      <div class="locale-switcher">        <span class="switcher-label">{switchLocale}</span>        <div class="locale-buttons">          {            locales.map((localeItem) => (              <a                href={localeItem === locale ? undefined : getLocalizedUrl(pathWithoutLocale, localeItem)}                class={`locale-btn ${localeItem === locale ? "active" : ""}`}                data-locale={localeItem}                aria-disabled={localeItem === locale}              >                {getLocaleName(localeItem)}              </a>            ))          }        </div>      </div>    </main>  </body></html>

라우팅 설정에 관한 참고 사항: 사용하는 디렉토리 구조는 intlayer.config.ts의 middleware.routing 설정에 따라 달라집니다:

prefix-no-default (기본값): 루트(프레픽스 없음)에 기본 언어를 유지하고 나머지에 프레픽스를 붙입니다. 모든 케이스를 처리하려면 [...locale]을 사용하세요.
prefix-all: 모든 URL에 언어 프레픽스가 붙습니다. 루트를 분리해서 처리할 필요가 없다면 표준 [locale]을 사용할 수 있습니다.
search-param 또는 no-prefix: 로케일 폴더가 필요 없습니다. 로케일은 검색 파라미터나 쿠키를 통해 처리됩니다.

6단계: 언어 전환 기능 추가

Vanilla JS가 포함된 Astro에서 언어 전환은 서버에서 일반 링크로 렌더링되며 클라이언트에서 <script> 블록을 통해 하이드레이션됩니다. 사용자가 언어 링크를 클릭하면 vanilla-intlayer는 로컬라이즈된 URL로 이동하기 전에 setLocale을 통해 언어 쿠키를 설정합니다.

src/pages/[...locale]/index.astro

코드 복사

코드를 클립보드에 복사

<!-- 위 5단계의 서버 사이드 마크업 참조 --><script>  import { installIntlayer, useLocale } from "vanilla-intlayer";  import { getLocaleFromPath, getLocalizedUrl, type LocalesValues } from "intlayer";  // 현재 URL의 로케일을 사용하여 클라이언트 사이드 Intlayer 초기화  const locale = getLocaleFromPath(window.location.pathname);  installIntlayer({ locale: locale as LocalesValues });  const { setLocale } = useLocale({    onLocaleChange: (newLocale: LocalesValues) => {      window.location.href = getLocalizedUrl(window.location.pathname, newLocale);    },  });  // 언어 전환 링크에 클릭 이벤트 연결  const localeLinks = document.querySelectorAll("[data-locale]");  localeLinks.forEach((link) => {    link.addEventListener("click", (e) => {      const localeValue = link.getAttribute("data-locale") as LocalesValues;      if (localeValue && localeValue !== locale) {        e.preventDefault();        setLocale(localeValue);      }    });  });</script>

영속성에 관한 참고 사항: installIntlayer는 서버가 정의한 로케일로 Intlayer 싱글톤을 초기화합니다. onLocaleChange와 함께 사용되는 useLocale은 이동 전에 미들웨어를 통해 언어 쿠키를 설정하여 향후 방문 시 사용자의 선호도가 기억되도록 보장합니다.

점진적 향상(Progressive Enhancement)에 관한 참고 사항: 언어 전환 링크는 JavaScript가 없어도 표준 <a> 태그로 작동합니다. JS를 사용할 수 있는 경우, setLocale 호출은 이동 전에 쿠키를 업데이트하여 미들웨어가 올바른 리디렉션을 실행하도록 합니다.

7단계: Sitemap 및 Robots.txt

Intlayer는 동적으로 로컬라이즈된 사이트맵과 robots.txt 파일을 생성하기 위한 유틸리티를 제공합니다.

Intlayer에서 생성한 사이트맵은 xhtml:link 네임스페이스(Hreflang XML 확장)를 지원합니다. 원시 URL만 나열하는 기본 사이트맵 생성기와 달리, Intlayer는 페이지의 모든 언어 버전(예: /about, /about?lang=fr, /about?lang=es) 간에 필요한 양항향 링크를 자동으로 생성합니다. 이를 통해 검색 엔진이 올바른 언어 버전을 올바른 사용자에게 색인화하고 제공할 수 있도록 보장합니다.

모든 로컬라이즈된 경로를 포함하는 사이트맵을 생성하기 위해 src/pages/sitemap.xml.ts를 생성합니다.

src/pages/sitemap.xml.ts

코드 복사

코드를 클립보드에 복사

import type { APIRoute } from "astro";import { generateSitemap, type SitemapUrlEntry } from "intlayer";const pathList: SitemapUrlEntry[] = [  { path: "/", changefreq: "daily", priority: 1.0 },  { path: "/about", changefreq: "monthly", priority: 0.7 },];const SITE_URL = import.meta.env.SITE ?? "http://localhost:4321";export const GET: APIRoute = async ({ site }) => {  const xmlOutput = generateSitemap(pathList, { siteUrl: SITE_URL });  return new Response(xmlOutput, {    headers: { "Content-Type": "application/xml" },  });};

Robots.txt

검색 엔진 크롤링을 제어하기 위해 src/pages/robots.txt.ts를 생성합니다.

src/pages/robots.txt.ts

코드 복사

코드를 클립보드에 복사

import type { APIRoute } from "astro";import { getMultilingualUrls } from "intlayer";const getAllMultilingualUrls = (urls: string[]) =>  urls.flatMap((url) => Object.values(getMultilingualUrls(url)) as string[]);const disallowedPaths = getAllMultilingualUrls(["/admin", "/private"]);export const GET: APIRoute = ({ site }) => {  const robotsTxt = [    "User-agent: *",    "Allow: /",    ...disallowedPaths.map((path) => `Disallow: ${path}`),    "",    `Sitemap: ${new URL("/sitemap.xml", site).href}`,  ].join("\n");  return new Response(robotsTxt, {    headers: { "Content-Type": "text/plain" },  });};

TypeScript 설정

Intlayer는 모듈 증강(module augmentation)을 사용하여 TypeScript의 이점을 활용함으로써 코드베이스를 더 견고하게 만듭니다.

자동 완성

번역 오류

TypeScript 설정에 자동 생성된 타입이 포함되어 있는지 확인하세요.

tsconfig.json

코드 복사

코드를 클립보드에 복사

{  // ... 기존 TypeScript 설정  "include": [    // ... 기존 TypeScript 설정    ".intlayer/**/*.ts", // 자동 생성된 타입 포함  ],}

Git 설정

Intlayer가 생성한 파일은 무시하는 것이 좋습니다. 이를 통해 Git 리포지토리에 커밋되는 것을 방지할 수 있습니다.

무시하려면 .gitignore 파일에 다음 지침을 추가하세요:

bash

코드 복사

코드를 클립보드에 복사

# Intlayer가 생성한 파일 무시.intlayer

VS Code 확장 프로그램

Intlayer 개발 환경을 개선하기 위해 공식 Intlayer VS Code 확장 프로그램을 설치할 수 있습니다.

VS Code Marketplace에서 설치

이 확장 프로그램은 다음 기능을 제공합니다:

번역 키 자동 완성.
누락된 번역에 대한 실시간 오류 감지.
번역된 콘텐츠의 인라인 미리보기.
번역을 쉽게 생성하고 업데이트할 수 있는 빠른 작업(Quick Actions).

확장 프로그램 사용에 대한 자세한 내용은 Intlayer VS Code 확장 프로그램 문서를 참조하세요.

15단계: 컴포넌트에서 콘텐츠 추출(선택 사항)

기존 코드베이스가 있는 경우 수천 개의 파일을 변환하는 데 시간이 많이 걸릴 수 있습니다.

이 프로세스를 용이하게 하기 위해 Intlayer는 컴포넌트를 변환하고 콘텐츠를 추출하기 위한 컴파일러 / 추출기를 제안합니다.

설정하려면 intlayer.config.ts 파일에 compiler 섹션을 추가할 수 있습니다.

intlayer.config.ts

코드 복사

코드를 클립보드에 복사

import { type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  // ... 나머지 구성  compiler: {    /**     * 컴파일러 활성화 여부를 나타냅니다.     */    enabled: true,    /**     * 출력 파일 경로를 정의합니다.     */    output: ({ fileName, extension }) => `./${fileName}${extension}`,    /**     * 변환 후 컴포넌트를 저장할지 여부를 나타냅니다. 그렇게 하면 컴파일러를 한 번만 실행하여 앱을 변환한 다음 제거할 수 있습니다.     */    saveComponents: false,    /**     * 사전 키 접두사     */    dictionaryKeyPrefix: "",  },};export default config;

컴포넌트를 변환하고 콘텐츠를 추출하기 위해 추출기를 실행합니다

bash

코드 복사

코드를 클립보드에 복사

npx intlayer extract

vite.config.ts를 업데이트하여 intlayerCompiler 플러그인을 포함합니다.

vite.config.ts

코드 복사

코드를 클립보드에 복사

import { defineConfig } from "vite";import { intlayer, intlayerCompiler } from "vite-intlayer";export default defineConfig({ plugins: [   intlayer(),   intlayerCompiler(), // 컴파일러 플러그인을 추가합니다 ],});

더 알아보기

더 자세히 알고 싶다면 비주얼 에디터를 구현하거나 CMS를 사용하여 콘텐츠를 외부화할 수 있습니다.

Astro 및 Lit Vite 및 React

버전 기록

Intlayer를 사용하여 Astro + Vanilla JS 사이트 번역하기 | 국제화 (i18n)

목차

대안보다 Intlayer를 선택해야 하는 이유는 무엇입니까?

Astro + Vanilla JS에서 Intlayer 설정을 위한 단계별 가이드

1단계: 종속성 설치

2단계: 프로젝트 설정

3단계: Astro 설정에 Intlayer 통합

4단계: 콘텐츠 선언

5단계: Astro에서 콘텐츠 사용

6단계: 언어 전환 기능 추가

7단계: Sitemap 및 Robots.txt

사이트맵

Robots.txt

TypeScript 설정

Git 설정

VS Code 확장 프로그램

15단계: 컴포넌트에서 콘텐츠 추출(선택 사항)

더 알아보기