Langsys 학습 센터
Langsys를 앱에 연동하는 개발자를 위한 안내입니다. 실시간 지속적 현지화로, 코드 안의 문구가 곧 키이자 기본값입니다. 키 파일도, 추출 단계도 필요 없습니다. 설명 영상을 보고, 다섯 가지 핵심 개념을 읽고, 프로젝트를 설정한 다음 사용하는 스택을 선택하세요.
경로
세 단계를 이 순서대로 진행하세요. SDK 페이지는 앞의 두 단계를 완료했다고 가정합니다.
개념
Langsys의 핵심 개념을 소개합니다. 문구가 곧 키라는 원리, 토큰 탐색, 로케일 스토어, 키, 로케일 추가까지 다섯 개의 짧은 페이지로 구성되어 있으며, 각 페이지마다 동영상이 있습니다.
2단계 · 2분빠른 시작
프로젝트를 만들고, 쓰기 키와 읽기 전용 키를 발급한 뒤, 환경 변수에 연결하세요.
3단계사용 중인 스택 선택
SDK 6종, 하나의 인터페이스. 각 페이지는 설치부터 시작하며, 라이브 데모와 해당 바인딩의 관용적인 사용법을 함께 보여 줍니다.
프런트엔드 — JavaScript
작업은 하나의 기본 SDK가 처리하고, 각 프레임워크 바인딩은 그 위를 감싼 얇은 래퍼입니다.
TypeScript
프레임워크에 독립적인 기본 SDK인 langsys-js-typescript입니다. 모든 바인딩이 이를 감싸고 있습니다.
React
훅과 컴포넌트 — langsys-js-react.
Vue
컴포저블과 컴포넌트 — langsys-js-vue.
Svelte
스토어와 컴포넌트 — langsys-js-svelte. 기본 요소별 데모가 있는 페이지입니다.
백엔드 — 서버 렌더링
템플릿이 서버에서 번역되므로 페이지가 처음부터 현지화된 상태로 전달됩니다.
PHP
기본 SDK — langsys/langsys-php. 순수 PHP, 프레임워크, 워커, CLI 등 모든 PHP 앱에서 사용할 수 있습니다.
Laravel
@t Blade 디렉티브와 t() 헬퍼 — langsys/langsys-php-laravel.
가이드 — 서버 사이드 렌더링
각 가이드는 하나의 패턴을 따릅니다. 서버에서 카탈로그를 가져오고, 이를 바탕으로 클라이언트 바인딩을 초기화합니다. 따라서 카탈로그는 한 번만 가져오고 서버 키는 서버에만 남습니다.
Next.js
앱 라우터 — 서버 컴포넌트 가져오기, 'use client' 초기화.
Nuxt
Nitro 라우트와 useAsyncData로 Vue 바인딩을 초기화합니다.
SvelteKit
+layout.server.ts load, 로캘 저장소로 쓰는 표준 writable.
문제를 확인하고 바로 수정하세요
나란히 비교
React, Vue, Svelte, 바닐라 TypeScript가 하나의 공유 프로젝트에서 동시에 발맞춰 번역합니다.
대시보드
코드 없이 화면에서 바로 사용하는 번역 관리자: 검수, 메모리, 조직, 크레딧, 결제를 한곳에서 관리하세요.
동영상
모든 데모를 한곳에 — 개념 트랙, API별 Svelte 살펴보기, 그리고 Translation Manager까지.
문제 해결
번역되지 않는 문구, CORS 차단, 알림 없이 발생하는 읽기 전용 누락 등의 증상과 해결 방법입니다.
API 레퍼런스와 연동 가이드를 찾고 계신가요? Langsys 문서로 이동하세요.