NAND 게이트부터 CPU까지, 디지털 논리를 가르치는 게임을 만들었습니다

Simten은 회로를 TypeScript로 작성하고 브라우저에서 시뮬레이션한 뒤 Verilog로 내보내 FPGA에서 실행하는 HDL 프로젝트입니다. NAND 게이트부터 4비트 CPU까지 단계별로 만드는 학습 게임도 제공하며, RISC-V와 6502 예제 및 MCP 연동도 소개합니다.

주제: 하드웨어 개발 도구 교육

에디터 노트

회로를 코드로 정의하는 방식은 학습 게임을 넘어 npm 테스트와 Verilog 내보내기, FPGA 실행까지 같은 설계를 이어 간다는 점에서 설득력이 있습니다. 특히 타입 검사와 포트 자동 완성은 회로 연결의 오타를 코드 편집 단계에서 잡는 구체적인 이점입니다. 작성자가 RV32I CPU의 공식 아키텍처 테스트 통과와 ULX3S 실행 사례를 들었지만, 상세한 성능 수치나 지원 범위는 제공하지 않습니다. 댓글에서는 Turing Complete나 nand2tetris와 비슷한 학습 목표를 공유하면서도 회로의 기준을 코드로 옮긴 차이가 확인됩니다. 6502 예제를 찾던 질문에 제작자가 회로 구조와 버스 폭, 명령어 비트 분할 사례로 답한 점은 추상화된 코드와 내부 회로를 오갈 수 있음을 보여줍니다. 다만 게임은 현재 데스크톱 브라우저 전용이며, MCP는 로컬에서 npm 테스트와 같은 권한으로 코드를 실행합니다. 교육용 게임과 실제 회로 개발 환경을 함께 제공하지만, 독자는 두 실행 맥락의 조건을 구분해 볼 수 있습니다.

AI 요약

TypeScript로 회로를 작성하고 브라우저에서 확인한 뒤 FPGA까지 실행하는 오픈소스 HDL 프로젝트 Simten을 소개합니다. 함께 제공하는 게임은 NAND 게이트에서 시작해 가산기, 래치, 레지스터, ALU를 만들고 4비트 CPU에 도달하는 순서로 구성됩니다.

TypeScript를 회로 기술 언어로 사용

Simten의 회로는 일반적인 TypeScript 코드로 정의합니다. 예를 들어 HalfAdder 회로는 입력과 출력의 핀을 선언하고 XOR, AND 게이트를 내부 노드로 둔 뒤 각 핀과 노드 사이의 연결을 작성합니다. 입력 폭은 bit나 bus(8)처럼 지정합니다. 라이브러리가 연결 관계의 타입을 검사하므로 존재하지 않는 포트 이름을 쓰면 타입 오류가 발생하고, 편집기 자동 완성도 사용할 수 있습니다. 회로 코드를 Node.js에서 실행하고 npm 패키지를 테스트에 활용할 수도 있습니다.

simten.dev/circuit 편집기는 왼쪽에 코드를, 오른쪽에 회로도를 표시합니다. 각 구성 요소를 열어 내부 구조를 확인할 수 있고, 회로를 웹 페이지에 넣는 React 컴포넌트도 제공합니다. 삽입된 회로에는 입력 스위치와 출력 표시등이 있어 방문자가 동작을 시험할 수 있습니다.

단계별 게임과 회로 시뮬레이션

play.simten.dev의 게임 캠페인은 NAND 게이트에서 출발해 논리 회로를 차례로 쌓아 CPU를 만드는 방식입니다. 제작자는 Turing Complete와 nand2tetris에서 아이디어를 얻었다고 설명합니다. 다만 Turing Complete처럼 화면에서 선을 연결하는 방식이 아니라 TypeScript 코드가 회로의 기준입니다. Reddit 댓글에서 제작자는 순차 회로의 클록을 앞뒤로 이동하며 사이클별 상태 변화를 볼 수 있고, 현재 게임은 데스크톱 브라우저에서만 동작한다고 밝혔습니다.

게임은 학습용 인터페이스의 한 부분입니다. 프로젝트에는 6502 컴퓨터 예제도 있습니다. 제작자에 따르면 CPU를 ROM, RAM, 콘솔에 연결해 프로그램을 실행하며, CPU 블록 안으로 들어가 디코드 PLA, ALU, 레지스터와 SB, DB, ADL, ADH 버스를 볼 수 있습니다. 명령어를 수동으로 작성한 주석과 opcode 비트 분할 예제도 제공한다고 답했습니다.

Verilog 내보내기와 FPGA

Simten은 회로를 Verilog로 내보냅니다. 저장소에는 시뮬레이터와 Verilog 내보내기 기능 외에도 Icarus Verilog로 내보낸 결과와 자체 시뮬레이션 trace를 대조하는 검증기, Yosys를 사용해 게이트 수와 netlist를 반환하는 합성 앱이 포함됩니다. 작성자는 ULX3S FPGA에서 C와 Rust 프로그램을 실행하는 RISC-V CPU와 HDMI Snake 데모를 구동했다고 설명합니다. RISC-V 구현은 RV32I 파이프라인 CPU이며 공식 아키텍처 테스트를 통과한다고 제작자가 댓글에서 밝혔습니다.

개발 환경과 실행 경계

저장소는 core, UI, embed, MCP 패키지와 웹 편집기, 게임, 샌드박스, 컴파일러, 검증기, 합성 앱으로 나뉩니다. 브라우저 시뮬레이션으로 엣지 서버에 상태를 두지 않으며, 회로 코드는 별도 출처의 iframe 샌드박스에서 실행합니다. 로컬 MCP 서버는 에이전트가 회로 파일을 작성하고 검사, 시뮬레이션, 검증, 시각화를 요청하도록 합니다. 제작자는 MCP 서버와 테스트 코드가 사용자의 컴퓨터에서 실행되므로 npm test와 같은 접근 권한을 가진다고 명시합니다. 신뢰하는 회로에만 사용하라는 안내도 함께 제공합니다.

프로젝트는 pnpm 기반이며 1,000개 이상의 테스트와 내보내기 결과의 drift 검사 절차를 설명합니다. 웹 편집기는 TanStack Start, React 19, Vite를 사용하고 Cloudflare Workers에 배포합니다. 문서와 회로 예제, 하드웨어 빌드 및 플래시 절차도 저장소와 웹사이트에서 확인할 수 있습니다.

Reddit 반응

@hwpfpga — 정말 멋집니다. 전자공학 수업에서 훨씬 단순한 버전을 손으로 만들었던 기억이 납니다. 그때 이후로 오랜만이네요.
- @kottbusser_floor — Steam 게임 Turing Complete를 해봤는지 모르겠네요. 이 게임은 그 게임을 코드 기반으로 다시 만들어 보려는 시도입니다. 수작업으로 선을 연결할 필요가 없고 브라우저에서 바로 상호작용할 수 있어 다른 HDL보다 학습자가 쉽게 다가가길 바랐습니다.
@nic0x819 — Steam 게임 Turing Complete를 해보세요. 꽤 고급스럽습니다.
@bajuh — NAND Game도 좋았습니다.
- @kottbusser_floor — 맞아요, Turing Complete는 정말 멋집니다. 이 게임의 캠페인은 그 게임에서 느슨하게 영감을 받았습니다. 가장 큰 차이는 이쪽이 코드 기반이고 저쪽은 캔버스에서 회로를 연결하는 방식이라는 점입니다.
@McPhage — Turing Complete와 비교하면 어떤 점이 다릅니까?
- @kottbusser_floor — 가장 큰 차이는 이쪽은 코드와 HDL이 기준이고 Turing Complete는 연결한 회로가 기준이라는 점입니다. 공유한 게임은 익숙한 형식으로 플랫폼을 보여주기 위한 안내형 게임입니다. 회로는 Node.js에서 실행할 수 있고 로컬 MCP로 에이전트가 API와 문서를 따라 회로를 만들도록 할 수도 있습니다. Claude가 RISC-V CPU를 작성하고 검증하게 해봤습니다. Node.js 안에서 실행하므로 npm 라이브러리와 연동하거나 컴파일 시 ROM 데이터를 넣는 것도 가능합니다. Verilog 가져오기와 내보내기도 지원합니다. 회로를 빠르게 만들고 시험한 다음 일반적인 오픈소스 FPGA 도구 체인으로 내보내는 것이 목표입니다.
@Pale_Row3634 — OR 단계까지 해봤는데 지금까지는 정말 훌륭한 게임이라고 생각합니다. 완성도도 좋고 단계별 진행 구조도 마음에 듭니다.
@IQueryVisiC — 아주 간단한 마이크로프로세서인 6502를 설명하는 데 쓸 수 있나요? Intel 프로세서는 복잡해서 4004나 RCA 1802로 설명하고 싶었습니다. 텍스트 형태의 배치 기능이 필요합니다. 명령어 비트 분할은 가능한가요? 버스는 어떤가요? 저장소를 둘러보기가 어렵습니다. useLayout 내보내기 함수를 찾았습니다.
- @kottbusser_floor — 6502 예제가 있습니다. 6502를 ROM, RAM, 콘솔에 연결한 회로에서 실행을 누르면 "hello from the 6502!"를 출력합니다. 프로그램은 맨 위 주석에 수동으로 어셈블해 두어 각 명령을 따라갈 수 있습니다. CPU를 두 번 클릭하면 블록 다이어그램에 나온 디코드 PLA, ALU, 레지스터, SB, DB, ADL, ADH 버스를 볼 수 있습니다. 회로는 TypeScript 기반 HDL로 정의합니다. 찾은 useLayout은 오른쪽 React Flow 캔버스의 배치를 정리하는 함수라 회로 코드와는 관계가 없습니다. opcode를 6502의 AAABBBCC 형식으로 나누는 예제도 있고, 버스 폭은 데이터용 bus(8), 주소용 bus(16)처럼 지정합니다. 4004와 1802는 아직 살펴보지 않았습니다.
- @IQueryVisiC — 아, 멋지네요. 처음에는 그 부분을 놓쳤습니다. 살펴보겠습니다. 감사합니다.
@Somniferus — GUI가 있는 nand2tetris와 같은 건가요?
- @kottbusser_floor — 비슷한 아이디어입니다. nand2tetris에서 큰 영감을 받았습니다. 다른 점은 HDL이 TypeScript라 타입과 개발 도구를 활용하고, 속성 기반 테스트나 ROM 데이터 삽입 같은 npm 패키지도 함께 쓸 수 있다는 점입니다. nand2tetris의 자체 Hack CPU보다 더 나아가 파이프라인 RV32I RISC-V를 제공하며 공식 아키텍처 테스트를 통과합니다. 자체 컴파일러를 만드는 일은 nand2tetris의 좋은 부분이었지만, 이쪽에서는 GCC나 LLVM으로 만든 bare-metal C, C++, Rust 프로그램을 실행할 수 있습니다.

원문: GitHub / 번역·요약: Trawling

원문 보기 ↗토론 보기 ↗