국제화(Internationalization)

앱에 다국어 지원을 추가하세요. 에디터 콘텐츠 현지화에는 Proyecta Content API를 사용하거나, AI에게 i18n 프레임워크를 코드에 직접 연결하도록 요청하세요.

Proyecta는 여러분이 만드는 앱을 국제화하는 두 가지 상호 보완적인 방식을 지원합니다:

Proyecta Content API를 통한 콘텐츠 현지화 — 여러 언어로 번역이 필요한 에디터 콘텐츠(블로그 포스트, FAQ, 마케팅 문구)에 적합
번역 프레임워크를 통한 코드 레벨 i18n — UI 문자열, 날짜, 통화, 런타임 로케일 전환에 적합

두 가지 모두 현재 사용 가능합니다. 어느 것이 필요한지는 번역 대상이 무엇이냐에 따라 달라집니다.

Proyecta 빌더 자체는 24개 로케일을 지원하므로, 제품 자체가 i18n에 능숙합니다. 동일한 패턴이 여러분이 Proyecta 안에서 만드는 앱에도 그대로 적용됩니다.

옵션 1: 콘텐츠 현지화 (Proyecta Content API)

블로그, 지식 베이스, 마케팅 페이지, 상품 카탈로그처럼 콘텐츠 중심의 사이트를 만들고 있다면, Content API의 내장 로케일 지원을 활용하세요.

// Create the locales you support
await proyecta.content.locales.create({
    /* code: 'en', name: 'English' */
});
await proyecta.content.locales.create({
    /* code: 'es', name: 'Español' */
});
await proyecta.content.locales.create({
    /* code: 'fr', name: 'Français' */
});

// Then create entries that exist in multiple locales — fetch the right
// translation per request based on the user's locale.

다음 경우에 적합한 선택입니다:

코드를 작성하지 않는 에디터가 콘텐츠를 번역해야 할 때
번역 내용을 버전 관리하고 싶을 때
로케일별 퍼블리싱이 필요할 때 (예약 퍼블리싱은 곧 지원 예정 — 현재 엔트리는 API를 통한 수동 publish가 필요합니다)

전체 Content API는 콘텐츠 관리를 참고하세요.

옵션 2: 코드 레벨 i18n 프레임워크

레이블, 버튼, 오류 메시지, 날짜, 통화 등 UI 문자열에 대해서는 AI에게 i18n 프레임워크를 프로젝트에 직접 연결하도록 요청하세요:

Add internationalization to my app.
Support English, Spanish, French, and Arabic.
Add message catalogs in src/locales/.
Add a language switcher in the header.
Use locale-prefixed URLs like /en/about and /es/about.
Make sure RTL layout works correctly for Arabic.

AI는 다음과 같은 작업을 수행합니다:

프레임워크 선택 — AI는 i18next와 react-i18next를 사용합니다 (Proyecta 표준)
카탈로그 파일 생성 — src/locales/ 경로에 언어별 JSON 파일 생성
텍스트 래핑 — react-i18next의 useTranslation 훅에서 가져온 t() 호출로 텍스트를 감쌈
언어 전환기 컴포넌트 추가
로케일 접두사가 있는 URL 라우팅 연결
아랍어, 히브리어 등을 위한 RTL 레이아웃 처리 (dir="rtl")
로케일에 맞는 숫자, 날짜, 통화 포맷팅

AI로 자동 번역하기

기본 언어가 준비되면, AI를 활용해 다른 카탈로그 파일을 손쉽게 생성할 수 있습니다:

"Translate every string in src/locales/en.json into Spanish, French, German, and Japanese. Use natural, idiomatic phrasing — don't translate brand names."
"My app is fully built in English. Add Spanish translations for everything and an es/ route prefix."

법률, 의료, 금융 등 중요도가 높은 콘텐츠의 경우, 배포 전에 전문 번역가가 AI 번역 결과를 검토하도록 하세요.

두 가지 방식 함께 사용하기

실제 앱 대부분은 두 가지를 함께 사용합니다. UI 크롬(버튼, 오류 메시지, 내비게이션)에는 코드 레벨 i18n을, 에디터 콘텐츠(아티클, 상품 설명)에는 Content API를 활용하는 방식입니다. 두 방식은 자연스럽게 공존합니다 — i18n 프레임워크가 빌드 타임에 카탈로그 파일을 처리하고, Content API는 런타임에 현지화된 엔트리를 제공합니다.

모범 사례

기본 언어를 먼저 정하고 문구를 확정하세요. 계속 바뀌는 내용을 번역하는 것은 매우 번거롭습니다.
번역은 일괄 처리하세요. 작업하면서 즉시 번역하지 말고, 기능이 안정화될 때까지 기다리세요.
아랍어나 히브리어를 지원한다면 RTL을 일찍 테스트하세요. RTL 버그는 실제로 확인하기 전까지는 눈에 띄지 않습니다.
<html>에 lang과 dir을 포함하세요. 브라우저와 스크린 리더가 이에 의존합니다.
포맷팅에는 Intl을 사용하세요. 날짜나 통화 포맷팅을 직접 구현하지 말고 Intl.DateTimeFormat, Intl.NumberFormat을 활용하세요.

곧 출시 예정

빌더 내 로케일 관리 UI — Proyecta를 벗어나지 않고 로케일 선택, 번역 커버리지 확인, 카탈로그 편집 가능
새 문자열에 대한 저장 시 자동 번역
프레임워크가 사전 연결된 i18n 지원 프로젝트 템플릿