서론

안녕하세요! 주식회사 Nextbeat에서 테크놀로지 에반젤리스트(Technology Evangelist)라는 직함으로 일하고 있는 미즈시마입니다. 대학원 시절에는 PEG(Parsing Expression Grammar)를 연구했으며, 구문 분석(Parsing) 및 프로그래밍 언어 처리계(Language Processor)가 전공입니다.

얼마 전, Anthropic의 신모델 Claude Fable 5에 거의 모든 것을 맡기며 "프로그래밍 교육 사이트를 만들어줘"라고 부탁해 보았는데, 상상을 훨씬 뛰어넘는 결과물이 나왔습니다.

언어의 정원 — 말을 키워, 언어를 만든다

리포지토리는 여기입니다.

전체 6개 코스, 54개 레슨. 일본어 키워드를 사용하는 교재용 언어 「니와고(にわ語)」를 갖추고 있으며, 에디터와 실행, 구문 트리(Syntax Tree) 시각화까지 모두 브라우저 안에서 완결됩니다. 등록 불필요, 광고 없음, 무료. 이것이 방치한 시간 합계 2시간도 채 되지 않아 나왔습니다.

참고로, 이 「언어의 정원」은 저의 개인 프로젝트이며, 저희 회사의 서비스가 아닙니다.

솔직히 말하면, 저는 이 사이트의 내용을 거의 작성하지 않았습니다. 이 기사에서는 무엇을 지시해서 무엇이 나왔는지, 그리고 구문 분석을 전공해 온 사람의 눈으로 보았을 때 교재로서의 내용이 얼마나 정확했는지를 소개합니다. 마지막에는 무조건 칭찬할 수만은 없는 점(토큰 소비)에 대해서도 솔직하게 쓰겠습니다.

톱 페이지. "코드는, 말이다." 바로 아래에 니와고 에디터가 갑자기 배치되어 있어, 그 자리에서 바로 실행할 수 있습니다.

입력한 프롬프트는 거의 이것뿐

Claude Code에는 /goal로 목표를 설정하면, 나머지는 자율적으로 태스크를 분해하여 진행해 주는 기능이 있습니다. 제가 입력한 것은 후츠 씨(@fladdict)의 이 포스트의 프롬프트를 응용한 다음의 목표였습니다. 이 프롬프트가 흥미롭다고 생각했고, 그렇다면 예전부터 만들고 싶었던 초보자용 프로그래밍 입문 사이트를 만들어 보게 하자고 시도하게 된 것입니다.

/goal 일본의 교육 업계가 진지하게 DX(Digital Transformation)를 하지 않으면, 비즈니스 모델이나 가격 경쟁에서 전부 무너질 법한 훌륭한 무료 교육 사이트를 만들어줘. GitHub Pages로 공개. 디자인도 UI/UX도 최고로 부탁해. 문리(文理)를 불문하고, 입구를 좁히지 않으며, 진부해지지 않도록

이어서 추가한 것은 이 두 가지뿐입니다.

특히 CS(Computer Science) 교육이나 프로그래밍 언어 교육에 특화된 천하무쌍의, 초보자도 접근하기 쉬우면서도 진부하지 않은 것을 만들어 주길 바라

playground가 브라우저 상에도 있으면 좋겠어

사양서는 없습니다. 기술 스택(Tech Stack) 지정도 하지 않았습니다. "교재용 오리지널 언어를 만들어라"라고도 "구문 트리를 시각화하라"라고도 말하지 않았습니다. "입문자에게 친절한 프로그래밍 교재 사이트"라는 느낌만을 전달했을 뿐입니다.

그 외에는 진행 상황이 올라올 때마다 "정말 괜찮네. 계속 가보자"라고 대답했을 뿐, 설계나 구현에는 거의 관여하지 않았습니다.

타임라인

작업은 2개의 세션으로 나뉘어 있었으며, 방치했던 시간은 합계 2시간도 채 되지 않았습니다.

전반부: Astro 6의 스캐폴딩(Scaffolding)부터 시작하여 디자인 시스템, 니와고 엔진(TDD로 63개 테스트, 분기 커버리지 88.7%), CodeMirror 에디터, 구문 트리 뷰어, JS 샌드박스(81개 테스트), 코스 1 전체 10개 레슨, 코스 2 전체 12개 레슨, Lighthouse 점수 97-100 조정까지 -
후반부: 코스 3~6(정규 표현식·알고리즘·계산 이론·타입 시스템)의 32개 레슨을 추가하고, 접근성(Accessibility)을 88에서 100으로 향상

제가 한 일은 바라보며 맞장구치는 것뿐입니다.

무엇이 나왔는가

「니와고」 —— 교재를 위해 언어를 하나 만들어 왔다

사이트를 열고 가장 놀란 점이 이것입니다. 코스 1은 JavaScript도 Python도 아닌, 「니와고」라는 일본어 키워드를 사용하는 터틀 그래픽스(Turtle Graphics) 언어부터 시작합니다.

まる を かく (원을 그린다)
みぎ へ 90 まわる (오른쪽으로 90 회전한다)
50 すすむ (50 전진한다)

"초보자용 교재 사이트"라고 부탁했더니, 교재에서 사용할 프로그래밍 언어를 스스로 만들어 온 것입니다. 에러 메시지도 일본어이며, 심지어 설계 사상(Design Philosophy)이 있습니다. 레슨 1의 제목은 "컴퓨터는, 세상에서 가장 성실한 독자". 일부러 이상한 문장을 쓰게 하여 에러를 발생시킨 뒤, 다음과 같이 설명합니다.

여기서 주목해야 할 점은 컴퓨터가

화내지 않고 있다는 것입니다. 고장 나지도 않았습니다. "크다(おおきい)가 무엇을 의미하는지, 나는 알 수 없었다"라며, 솔직하게 곤란해하고 있을 뿐입니다. (중략) 에러는 성실한 독자로부터...

답장입니다. "여기까지 읽었다. 여기서부터는 모르겠다"라는, 세상에서 가장 정확한 독서 감상문.

— 코스 1 레슨 1 「컴퓨터는, 세상에서 가장 성실한 독자」

에러를 「실패의 표식」이 아니라 「독자로부터의 답장」으로 가장 먼저 정의합니다. 입문서를 써본 적이 있는 사람이라면, 이 도입부가 얼마나 정교하게 다듬어졌는지 알 수 있을 것입니다.

브라우저 안에서, 어휘 분석부터 평가까지 작동

코스 2 「자신만의 언어를 만들기」에서는 독자가 계산기로 시작하여 자신만의 언어를 키워나갑니다. 이를 위한 실험 환경인 「MiniLangLab」이 레슨에 내장되어 있어, 코드를 입력하면 ① 토큰 열(Token sequence) → ② 구문 트리(Syntax tree) → ③ 평가 결과가 그 자리에서 전부 표시됩니다.

1 + 2 + 40을 입력하면, 언어의 단위(토큰), 구문 트리, 평가된 값(43)이 나란히 표시됩니다. 어휘 분석(Lexical analysis) → 구문 분석(Parsing) → 평가(Evaluation)라는 처리계(Compiler/Interpreter pipeline)의 3단계 공정이 한 화면에 담겨 있습니다.

백엔드는 없습니다. 니와어(にわ語)도 minilang도, 어휘 분석기·구문 분석기·평가기가 모두 클라이언트 사이드(Client-side)의 순수 TypeScript로 구현되어 있습니다. 무한 루프 방지를 위해 fuel 방식(실행 스텝 수의 상한 설정)의 폭주 방지 기능도 포함되어 있습니다. 사용자가 작성한 JavaScript의 실행은 Web Worker에 격리하여 타임아웃으로 kill하는 방식을 사용하며, 에러 메시지에는 일본어 주석 레이어가 덧씌워져 있습니다.

이 부분은, "playground가 브라우저 상에도 있으면 좋겠다"라는 한마디에서 시작되어 여기까지 전개되었습니다.

교재 엔진이 "내부를 볼 수 있는" 자체 구현

코스가 진행될수록 더욱 심도 있는 내용이 등장합니다.

코스 3 (정규 표현식): 정규 표현식 엔진이 자체 구현되어 있으며, NFA(비결정적 유한 오토마타) 시각화가 포함됨. 백트래킹(Backtracking)을 하지 않는 구현이기에, 교재로서 「원리적 한계」를 올바르게 설명할 수 있음 -
코스 5 (계산 이론): 튜링 머신(Turing Machine) 시뮬레이터가 있어, 전이표(Transition table)를 사용자가 편집할 수 있음 -
코스 6 (타입 시스템): minilang에 **타입 검사기(Type checker)**가 추가되어, 실행 전에 에러를 잡아내는 경험을 할 수 있음 -
언어 공방: 코스 2의 수료자는 자신만의 언어를 설계하고, 키워드를 교체한 언어를 URL에 인코딩하여 공유할 수 있음

총 54개 레슨. 제목만 훑어봐도 「정지 문제(Halting problem)」, 「대각선 논법(Diagonal argument)」, 「촘스키 계층(Chomsky hierarchy)」, 「타입의 한계」 등, 입문 사이트의 탈을 쓴 채 상당히 깊은 곳까지 데려가는 구성입니다.

전문가의 눈으로 보았을 때, 설명은 올바른가

「초보자에게 친절한 교재」 자체는 세상에 아주 많습니다. 문제는, 친절함을 위해 정확성을 희생하는 교재가 매우 많다는 점입니다. "변수는 상자" 식의 비유는 입문 단계에서는 이해하기 쉽지만, 나중에 현실과 어긋나며 무너집니다.

이 사이트는 메인 페이지에서 "변수는 상자라고 가르치지 않습니다."라고 선언합니다. '꽤 크게 나섰구나'라고 생각하며, 전문 영역에 가까운 코스 2(언어 처리계)를 중점적으로 읽었습니다. 결론부터 말하자면, 속임수도 오류도 찾아낼 수 없었습니다.

예를 들어 코스 2 레슨 3 「덧셈의 나무」. 구문 트리를 신비화하지 않고 다음과 같이 도입합니다.

"1 더하기 2 더하기 40"을 계산할 때, 당신은 한 번에 전부를 더하지 않습니다.

먼저 1+2를 계산하여 3으로 만들고, 그다음 3+40을 계산합니다. 즉 계산에는 순서가 있으며, 순서가 있다는 것은 식에 「먼저 굳어지는 덩어리」가 있다는 뜻입니다. 그 덩어리의 중첩(Nesting)을 곧게 그린 것이 나무입니다.

— 코스 2 레슨 3 「덧셈의 나무」

그리고 구문 트리를 JavaScript의 { op, left, right } 중첩 구조로 쓰게 하고, 평가기를 재귀 함수(Recursive function)로 구현하게 합니다. 옆길로 빠진 칼럼에서는 10 - 3 - 2를 소재로 **좌결합(Left-associativity)**을 설명하며, "만약 우결합(Right-associativity)이라면 답은 9. 실제로는 5. 결합 방향 또한 언어 설계자가 결정하는 것"이라며 깊이 있게 파고듭니다.

연습 문제의 마지막 문장에서는 감탄했습니다. 곱셈을 추가하게 만든 뒤, 다음과 같이 정체를 밝힙니다.

눈치채셨나요——

평가기에게 곱셈의 추가는 단 한 줄이었습니다. 힘든 것은 문자열로부터 나무를 구성하는 쪽(공정 ②)입니다. 그래서 다음 레슨에서는 그 문제에 정면으로 도전합니다.

이는 언어 처리계를 작성해 본 적이 있는 사람이라면 누구나 고개를 끄덕일 포인트이며, 동시에 다음 레슨(우선순위를 나무의 형태로 설명하는 회차)으로 이어지는 훌륭한 복선이 됩니다. 재귀에 대해서도 "이곳은 많은 사람이 걸려 넘어지는 지점이며, 걸려 넘어지는 것이 정상입니다"라고 미리 언급하며 불안을 제거해 줍니다. 친절함과 정확함, 두 가지 모두 타협하지 않았습니다. 이 점이 저에게는 가장 놀라운 부분이었습니다.

구문 분석 (Parsing) 입문서를 쓰고 있는 입장으로서, 솔직히 조금 복잡한 마음이 들 정도로 완성도가 높습니다.

다만, 토큰 소비가 엄청납니다

지금까지 칭찬을 늘어놓았지만, 무시할 수 없는 대가가 있습니다. 바로 토큰 소비량입니다.

저는 Claude Max 플랜(20x)을 사용하고 있는데, 이 사이트 생성 작업을 포함한 몇 시간 동안의 작업만으로 그날의 사용 한도(usage limit)에 도달했습니다. Fable 5는 한 번의 목표(goal) 설정으로부터 대량의 태스크를 병렬로 전개하며 자율적으로 움직이는 만큼, 소비량이 차원이 다릅니다. "2시간 동안 방치해 두었더니 완성되어 있었다"라는 결과의 이면에는, 그 2시간 분량의 사고와 구현이 전부 토큰으로서 타오르고 있는 것입니다.

Opus로 같은 일을 하려고 한다면, 아마 이 정도의 완성도는 나오지 않을 것입니다. 하지만 Opus라면 같은 예산으로 훨씬 더 오래 실행할 수 있는 것도 사실입니다.

요약: Fable 5와 어떻게 함께할 것인가

이번 경험을 요약하면 다음과 같습니다.

대단한 점: "입문자에게 친절한 교재 사이트" 정도의 느낌만 전달했을 뿐인데, 교재용 언어의 자체 제작, 브라우저 내에서 동작하는 처리계 (Interpreter), 정확성을 희생하지 않는 설명문까지, 설계 판단의 연쇄를 스스로 쌓아 올려 완성품에 도달했다. /goal을 설정하고 방치하는 것만으로 말이다.

약점: 토큰 소비가 엄청나다. Max 20x에서도 몇 시간 만에 한도(limit)에 도달한다.

따라서 현시점에서의 제 추천은, Fable 5를 "계획과 골격"을 만드는 데 사용하는 것입니다. 프로젝트의 시작, 전체 설계, 품질 기준을 세우는 단계까지는 Fable 5에게 맡기고, 그 이후의 세세한 수정, 기능 추가, 정형적인 태스크는 Opus나 Sonnet에게 인계하는 방식입니다. 이번 사이트도 기반과 코스 구성이 완성된 지금 단계에서는, 레슨 추가나 수정 작업은 더 가벼운 모델로도 충분히 돌릴 수 있을 것 같습니다.

"AI에게 통째로 맡겨서 만든 사이트"라고 들었을 때 상상하는 것보다, 훨씬 더 멀리 와 있다고 생각합니다. 꼭 한 번, 언어의 정원을 걸어보세요. 첫 번째 "실행하기" 버튼을 누르는 것까지, 등록 같은 건 전혀 필요 없습니다.

마지막으로, 비밀 하나를 밝히자면. 이 기사도 아이디어 도출과 편집, 리테이크(retake)를 제외하면 모두 Claude Fable 5가 작성했습니다.

혹시 눈에 띄는 점이 있다면 꼭 댓글로 알려주시면 감사하겠습니다. 그럼, 다음에 또 만나요!

Discussion