다국어 놀이터 속으로: 브라우저, WASM Runtime, 그리고 Language Packs가 어떻게 함께 작동하는가
Source: Dev.to
위에 제공된 소스 링크 외에 번역할 텍스트가 포함되어 있지 않습니다. 번역을 원하는 본문 내용을 알려주시면 한국어로 번역해 드리겠습니다.
개요
최근 기사에서 나는 인간‑언어‑우선 프로그래밍 언어가 WebAssembly를 사용하여 다국어 구문에서 다국어 런타임으로 이동할 수 있는 방법을 탐구했습니다. 이 게시물은 한 단계 더 깊이 들어가 이를 가능하게 하는 브라우저 플레이그라운드의 내부를 공개합니다.
리소스
- 프로젝트 저장소
- 온라인 플레이그라운드
- 언어 코어
Components
Browser UI
간단한 HTML/CSS/JavaScript 인터페이스로 다음을 제공합니다:
- 코드 편집기
- 언어 선택기 (영어, 프랑스어, 스페인어, …)
- “Run” 버튼
- 프로그램 출력 및 중간 표현을 위한 패널
WASM Runtime
멀티링구얼 인터프리터를 WebAssembly로 컴파일한 것과 JavaScript에서 쉽게 호출할 수 있게 해주는 몇 가지 도우미 구성 요소. 인터프리터는 렉싱, 파싱, AST 구축, 프로그램 평가를 담당합니다.
Language Packs
각 인간 언어가 공유된 의미 핵심에 어떻게 매핑되는지를 설명하는 데이터: 키워드, 연산자, 구두점, 그리고 궁극적으로 오류 메시지. 각 팩은 설정 파일이며 런타임의 포크가 아니므로 시스템 유지보수가 용이합니다.
개념 흐름: HTML ↔ JS ↔ WASM ↔ Your code — 언어 팩은 의미를 바꾸지 않고 단지 “억양”만 바꿉니다.
실행 흐름
-
소스 및 언어 선택 수집
UI는 편집기에서 텍스트와 선택된 언어 식별자(예:fr또는en)를 가져옵니다. -
WASM 모듈 호출
JavaScript는{ source, language_id }를WebAssembly.instantiate바인딩을 통해 내보낸 WASM 함수에 전달합니다. WASM 모듈 내부에서는 데이터가 단순히 원시 바이트와 식별자로 취급됩니다. -
언어 팩을 이용한 렉싱 및 파싱
렉서와 파서는 선택된 팩에 대한 적절한 키워드 매핑을 조회합니다.si,wenn,if와 같은 토큰은 모두 동일한 조건문 AST 노드에 매핑됩니다. -
통합 AST 구축
파서는 단일, 언어에 구애받지 않는 AST를 생성합니다. 이 시점부터 런타임은 표면 언어와 무관하게 동작합니다. -
평가 및 결과 반환
인터프리터는 AST를 평가하고 출력 및 오류를 캡처한 뒤, JS/WASM 경계를 넘어 구조화된 결과를 반환합니다. 브라우저는 이를 출력 패널에 렌더링합니다.
이 모든 과정은 브라우저 내 샌드박스 환경에서 이루어지므로, 학습자는 URL만 있으면 실험할 수 있습니다.
Language Packs
언어 팩은 일반적으로 다음을 포함합니다:
- 키워드 매핑 – 예: 대상 언어의
if,else,while를 내부 토큰에 매핑. - 논리 연산자 이름 –
and,or,not. - 리터럴 규칙 – 소수점 구분자와 같은 규칙.
- 메타데이터 – 언어 이름 및 코드.
런타임이 팩을 사용하는 방법
// Pseudocode illustrating the process
function compile(source, language_id) {
const pack = registry[language_id];
const lexer = buildLexer(pack);
const parser = buildParser(pack);
const ast = parser.parse(lexer.tokenize(source));
return ast; // language‑agnostic
}새로운 언어를 추가하는 것은 단순히 설정 라인을 추가하고 팩을 등록하는 일일 뿐이며, 인터프리터를 포크할 필요가 없습니다. 이 설계 덕분에 유지 보수에 압도되지 않으면서 10개 이상의 인간 언어를 현실적으로 실험할 수 있습니다.
멋진 부수 효과: 플레이그라운드에서 동일한 프로그램을 서로 다른 표면 구문으로 표시하면서도 기본 의미는 동일하게 유지할 수 있습니다.
오류 처리
다국어 런타임은 관심사를 분리합니다:
- Core interpreter – 언어에 구애받지 않는 오류 코드와 구조를 생성합니다.
- Browser UI – 선택된 언어에 맞게 현지화된 사용자 친화적인 방식으로 오류를 표시합니다.
가능한 확장
- 오류 코드별로 키가 지정된 현지화된 오류 메시지 카탈로그.
- 소스와 동일한 인간 언어로 오류를 표시하는 기능.
- 프로그램을 다시 실행하지 않고 진단 언어를 전환할 수 있음.
예를 들어, 구문 오류는 메시지 카탈로그를 교체하기만 하면 프랑스어 또는 영어로 표시할 수 있으며, 기본 오류 객체는 변경되지 않습니다.
배포
플레이그라운드는 정적 자산으로 구성됩니다:
- UI를 위한 HTML 및 CSS
- JavaScript 연결 코드
- 컴파일된 WASM 바이너리
- 언어 팩을 위한 JSON(또는 유사) 파일
이들은 GitHub Pages 또는 기타 정적‑사이트 호스트에 배포할 수 있습니다. 인터프리터가 WASM으로 컴파일되면, 동일한 코어를 온라인 교과서, 문서, 혹은 WASI 환경을 통한 IDE 확장 등 다른 컨텍스트에서도 재사용할 수 있습니다.
향후 방향
- More language packs, 키워드와 레이아웃에 대한 가정을 뒤흔드는 스크립트와 문자 체계를 포함합니다.
- Richer visualizations, 파이프라인의 시각화를 풍부하게 (예: 코드와 함께 WAT 또는 내부 AST 표시).
- Embeddable widgets, 튜토리얼 및 인터랙티브 학습 자료를 위한 위젯.
Contributing
플레이그라운드를 사용해 보시고 새로운 언어나 진단 기능을 실험해 보신다면, 저장소에 피드백과 기여를 환영합니다.
Resources
- 프로젝트 저장소
- 온라인 플레이그라운드
- 언어 코어