모든 데모 영상을 처음부터 끝까지 내레이션과 함께 담았습니다. 대부분은 해당 내용을 다루는 섹션에도 함께 실려 있으며, 각 영상 아래의 링크를 누르면 그곳으로 이동합니다. 먼저 소개 영상을 보고, 이어서 개념 트랙을 순서대로 보세요. 나머지는 참고용으로 시청하시면 됩니다.
여기서 시작하기
Langsys가 무엇인지, 전체 설정 과정을 한 번에, 그리고 모든 언어에 필요한 핵심 개념인 플랫 문장까지 소개합니다.
시청 · 1:17Langsys란?앱에 SDK를 넣고 호스팅형 Translation Manager를 사용하는 방식: 실행만 해도 문구가 스스로 등록되는 과정, 번역이 만들어지는 곳, 그리고 09:00에 게시된 블로그 글을 마드리드의 독자가 09:03에 스페인어로 읽게 되는 흐름까지 — 빌드도, 쓰기 키도 필요 없습니다. 페이지에서: /learn시청 · 4:13시작하기, 처음부터 끝까지프로젝트와 로캘을 만들고, 읽기 및 쓰기 키를 발급받아 SDK를 설치하고 초기화한 다음, t(), <Translate>, <Phrase>, <DontTranslate>가 문구를 등록하고 앱이 새로 고침 없이 스페인어와 프랑스어로 전환되는 모습을 확인하세요. 페이지에서: /learn/quickstart시청 · 1:14복수형 처리숫자에 따라 문장이 달라지는 이유, 이를 해결하는 if (count === 1)가 코드에 들어 있는 영어 문법인 이유, 그리고 문장을 통째로 작성하면 모든 언어의 모든 분기를 얻을 수 있는 방법을 알아봅니다. 페이지에서: /learn/concepts/locale-store
개념 트랙
차례대로 이어지는 짧은 5개 모듈로, 각 모듈은 앞 모듈을 전제로 합니다. 화면에 SDK별 구문은 나오지 않으며, 동일한 영상이 개념 페이지에 그대로 실려 있습니다.
langsys-js-svelte의 기본 요소별로 하나씩 살펴봅니다. 다른 바인딩도 같은 인터페이스를 공유하며, 달라지는 것은 구문뿐입니다.
시청 · 1:00Svelte: 단계별 안내다른 i18n 도구는 왜 계속 보조를 맞추게 만드는지, 호출 한 번으로 끝나는 로케일 전환, 일률적인 스페인어 번역이 사용자의 절반에게 왜 맞지 않는지, 그리고 ICU select가 이를 어떻게 해결하는지 알아봅니다. 페이지에서: /learn/sdk/svelte시청 · 1:09t(phrase, category, params)키 파일 문제에서 시작해 세 가지 인수, ICU 플레이스홀더, 복수형까지 다룹니다. 페이지에서: /learn/sdk/svelte시청 · 1:06<Phrase>마크업이 안에 포함된 문장을 하나의 문구로 유지하는 방법과, 그 매개변수가 %name%인 이유. 페이지에서: /learn/sdk/svelte시청 · 1:04<Translate>태그 하나로 영역 전체를 등록하는 방법과, 줄마다 호출하는 것보다 블록이 나은 이유를 알아봅니다. 페이지에서: /learn/sdk/svelte시청 · 0:34<DontTranslate>브랜드 이름과 식별자를 문장 밖으로 빼내지 않고 원문 그대로 유지합니다. 페이지에서: /learn/sdk/svelte시청 · 0:42콘텐츠 블록콘텐츠 블록이란 — 하나의 단위로 등록되지만 개별적으로 재사용할 수 있는 문구들로 이루어진 섹션입니다. 페이지에서: /learn/sdk/svelte시청 · 0:34카테고리i18n에서 키가 만들어진 이유와 이를 대체하는 것은 무엇일까요? 같은 단어, 두 가지 의미, 그리고 그에 따라 나뉘는 쌍들을 살펴봅니다. 페이지에서: /learn/sdk/svelte시청 · 0:39성별 일치다른 i18n 라이브러리가 컴포넌트에 남겨 두는 조건문과, Langsys가 대신 생성하는 분기. 페이지에서: /learn/sdk/svelte시청 · 1:07속성일부만 번역된 양식이 사용자에게 어떻게 보이는지, 그리고 하나의 <Translate>가 플레이스홀더, 대체 텍스트, aria 레이블에 한 번에 적용되는 방식을 보여 줍니다. 페이지에서: /learn/sdk/svelte시청 · 0:46숫자 및 날짜CLDR 기준의 숫자와 날짜: 자릿수 묶음이 구분 기호가 아닌 형태인 이유와, 주문 번호를 문자열로 전달해야 하는 이유. 페이지에서: /learn/sdk/svelte
Translation Manager
화면에 코드 없이 app.langsys.dev만 보여 드립니다. 카피, 언어, 키, 청구를 담당하는 분들을 위한 영상입니다.
시청 · 3:02번역 관리하기문구를 관리하는 담당자를 위한 Manager 단독 사용 화면입니다. 기계 번역 초안 수정, Update Memory, 대기열을 따라 Auto-next로 진행하는 AI Translate, Never Translate, 스페인어 전용으로 초대된 번역가를 다룹니다. 페이지에서: /learn/dashboard시청 · 2:47번역 메모리두 번째 프로젝트는 이미 가득 채워진 상태로 시작됩니다. 수정된 장바구니 문구가 작성자 배지와 함께 그대로 이어지며, 모델 호출은 없습니다. 조직 전체에서 언어별로 문장당 하나의 항목만 유지됩니다. 페이지에서: /learn/dashboard시청 · 2:24AI 번역기 설정탭의 모든 스위치를 보여 드립니다: 프로젝트별 사용자 지정, AI 번역 사용, 자동 번역 켜기/끄기, 그리고 이미 스페인어로 들어오는 문구를 유지하는 자동 감지까지. 페이지에서: /learn/concepts/keys-and-environments시청 · 1:49언어 추가하기라이브 프로젝트에 독일어를 추가했습니다. 먼저 확인하도록 정책을 설정하고, 기존 카탈로그 비용을 정확히 계산해 주는 대화상자를 거쳐, 빌드나 배포 없이 스토어를 독일어로 전환했습니다. 페이지에서: /learn/concepts/adding-a-locale시청 · 1:30뒤처진 언어 따라잡기뒤처진 언어를 위한 Manager의 일괄 작업입니다. 한 로케일에 대해 AI Translate Pending을 실행한 다음, 전체 프로젝트에 실행합니다. 페이지에서: /learn/concepts/adding-a-locale시청 · 1:38콘텐츠 블록 번역하기Manager에서 하나의 블록으로 표시된 <Translate> 영역: 원문과 나란히 놓인 미번역 이탈리아어, 세그먼트를 채우는 AI 번역, 직접 문구를 수정한 세그먼트, 그리고 번역에서 제외된 <DontTranslate> 문장. 페이지에서: /learn/concepts/token-discovery시청 · 1:30프로덕션 환경의 API 키배포 이후의 키: 실제 일주일 치 읽기 기록이 담긴 활동 페이지, 키를 삭제하지 않고 일시 중지하는 방법, 그리고 키 교체 과정을 화면으로 보여 드립니다. 페이지에서: /learn/concepts/keys-and-environments시청 · 1:48하나의 조직, 여러 프로젝트모든 프로젝트의 출발점인 조직: 기본 로케일, AI 번역기 및 결제 설정, 그리고 이를 다시 상속하도록 전환된 프로젝트. 페이지에서: /learn/dashboard시청 · 2:22사용량 및 크레딧두 가지 미터와 프로젝트에 자금이 충전되는 방식: 요금제 대비 API 사용량, 선불 크레딧과 무료 크레딧, 프로젝트로의 이체, 월 한도와 자동 충전. 페이지에서: /learn/dashboard시청 · 1:26요금제 및 결제등록된 정보 둘러보기: 요금제와 청구 주기, 요금제 변경, 결제 수단, 주소, 청구서 — 모든 대화상자는 취소했습니다. 페이지에서: /learn/dashboard시청 · 1:13알림받은 편지함과 필터를 살펴본 다음, 앱 내 알림과 이메일별 계정 기본값을 설정하고, 프로젝트별 재정의를 켰다가 다시 끄는 방법을 알아봅니다. 페이지에서: /learn/dashboard시청 · 1:47AI 어시스턴트 연결하기호스팅된 MCP 서버를 통해 AI 어시스턴트 안에서 사용하는 Langsys: claude mcp add, 접근 권한 승인 화면, Store의 언어에 대한 실제 답변, 그리고 Security에서 연결을 해제하는 과정까지. 페이지에서: /learn/dashboard
컷 영상은 langsys-demo-videos 마스터에서 렌더링되어 langsys-demos 저장소에 게시됩니다. 모든 SDK 페이지가 StackBlitz에서 여는 데모 앱과 동일합니다.
