aily-blockly 딥다이브
— 블록으로 하드웨어를 짜고, AI가 배선도·코드·디버깅까지 돕는 임베디드 IDE

1프로젝트 한 줄 요약

aily-blockly는 크게 세 덩어리로 이뤄진다. 첫째는 비주얼 블록 에디터 — 레고처럼 블록을 끼워 프로그램을 만들면, 그게 아두이노용 C++(.ino)나 MicroPython 코드로 자동 변환된다. 둘째는 하드웨어 실행 계층 — 그 코드를 실제 보드에 맞춰 컴파일하고, 시리얼·BLE·무선(OTA)으로 업로드한다. 셋째는 AI 에이전트 — "온습도 센서로 팬을 제어하고 싶어" 같은 자연어 요구를 받아 보드·모듈·라이브러리를 추천하고, 배선도를 그리고, 블록/코드를 짜고, 컴파일 에러 로그를 읽어 고쳐준다.

핵심 발상은 "블록 코딩의 쉬움과 전문 임베디드 개발의 깊이를 한 화면에서 잇는 것"이다. 초보자는 블록만 만져도 되고, 숙련자는 생성된 .ino를 열어 직접 손댈 수 있으며, 그 둘은 소스맵(block-source-map)으로 연결돼 "이 블록이 코드 몇 번째 줄이 되는지"까지 추적된다.

블록과 생성 코드의 대응은 이렇게 눈에 보인다. 블록 하나하나가 코드의 특정 줄로 매핑되고, 그 매핑이 디버깅의 근거가 된다.

블록(비주얼)                        생성 코드 (.ino / C++)
──────────────────────────────────────────────────────
[setup 안에서]                 →   void setup() {
  [핀 13을 출력으로]           →     pinMode(13, OUTPUT);
[loop 안에서]                  →   void loop() {
  [핀 13 = 켬(HIGH)]           →     digitalWrite(13, HIGH);
  [1000ms 기다리기]            →     delay(1000);
  [핀 13 = 끔(LOW)]            →     digitalWrite(13, LOW);
  [1000ms 기다리기]            →     delay(1000);
                                   }  // ← 각 블록의 코드 줄 범위가 소스맵에 기록됨

스스로 alpha 단계(v0.9.72)임을 밝히고 있어 양산용 펌웨어보다는 프로토타이핑·교육·메이커 용도를 겨냥한다. 그럼에도 규모는 작지 않다 — 렌더러(Angular) 소스만 30만 줄대, Electron(Node) 계층 4만 줄대의 대형 프로젝트다.

2왜 지금 주목받는가

비슷한 블록 코딩 툴(Scratch 계열, mBlock, Arduino의 예전 Blockly 실험)은 많았지만, aily-blockly가 TrendShift 1위에 오른 건 네 가지가 동시에 겹쳤기 때문이다.

① 블록 코딩과 "진짜 코드"의 경계를 없앴다

대부분의 블록 툴은 초보용 장난감에서 끝난다. 생성된 코드는 숨겨져 있거나 조잡하다. aily-blockly는 반대로 블록 ↔ 생성 코드 ↔ 소스레벨 디버깅을 한 줄로 잇는다. 블록으로 만든 프로그램의 각 블록이 최종 코드의 어느 줄인지(block-source-map) 추적되므로, 블록을 만지다가 그대로 .ino를 열어 전문 개발로 넘어갈 수 있다. "배우다가 버리는 도구"가 아니라 "계속 쓰는 도구"를 지향한다.

② AI-Native — Claude Code급 에이전트를 IDE에 내장

단순 코드 자동완성이 아니라, 프로젝트 분석 → 보드·모듈 추천 → 배선도 생성 → 코드 작성 → 컴파일 에러 분석 → 디버깅까지 전 과정을 도구를 쥔 에이전트가 수행한다. 내부 엔진 aily-lex(LEX)는 별도 프로세스에서 격리 실행되며, MCP(Model Context Protocol)·AI Skills(SKILL.md)·서브에이전트·명령 보안 검증까지 갖춰 사실상 하드웨어 특화 코딩 에이전트다. README도 이 설계가 Kode(shareAI-lab)와 microsoft/vscode-copilot-chat을 참고했다고 밝힌다.

③ Hardware Agnostic — 100+ 보드를 "설정 0"으로

ESP32·STM32·아두이노(AVR)·RP2040·nRF5x·Renesas·MicroPython까지 100종 이상 보드/칩을 지원하는데, 그 방식이 영리하다. 모든 보드가 하나의 npm 패키지(@aily-project/board-*)이고, 라이브러리·컴파일러도 마찬가지다. 보드를 고르면 필요한 패키지가 프로젝트로 설치돼, 툴체인 세팅이라는 고전적 고통이 사라진다.

④ 브라우저 기술로 직접 플래싱 + 자체 고속 컴파일러

외부 CLI(esptool, arduino-cli) 없이 WebSerial(esptool-js)로 ESP를 직접 굽고, Web Bluetooth로 BLE OTA, mDNS로 무선 네트워크 OTA까지 한다. 컴파일도 arduino-cli를 직접 부르지 않고 자체 도구 aily-builder(+ 전처리 캐시)로 감싸 대기 시간을 줄인다("Lightning Compilation").

3기술 스택 전체 지도

데스크톱 셸은 Electron 35(Tauri 아님), UI는 Angular 19 + ng-zorro-antd(Ant Design) 컴포넌트다. 코드 에디터는 Monaco, 터미널은 xterm + node-pty를 쓴다. 스택은 "데스크톱/UI 층", "AI 에이전트 층", "하드웨어 실행 층" 세 겹으로 나뉜다. 가장 특징적인 건, 보드·라이브러리·컴파일러·SDK가 전부 @aily-project/ 스코프의 npm 패키지로 쪼개져 semver로 버전 관리된다는 점이다.

데스크톱 · UI 층

AI 에이전트 층 — "IDE 속 코딩 에이전트"

하드웨어 실행 층

4아키텍처 심화 분석

aily-blockly는 Electron의 3-프로세스 구조를 넘어, AI 에이전트를 별도 프로세스로 한 겹 더 격리한 게 특징이다. 전체 그림은 이렇다.

핵심 ① — AI 에이전트를 utilityProcess로 격리

에이전트 엔진(LEX)은 렌더러도 메인도 아닌 별도의 utilityProcess에서 돈다 — AI가 무거운 작업이나 무한 루프에 빠져도 UI(렌더러)나 시스템(메인)이 얼어붙지 않도록 프로세스 경계로 갈라 둔 것이다. chat-runtime-host.js가 이 프로세스를 utilityProcess.fork로 띄우고, HOST_COMMAND·RESOURCE_HANDLER 같은 IPC 채널로만 통신한다. 명령 실행은 command-security.service.ts가 검증하고, 토큰 예산은 tiktoken으로 관리하며, 서브에이전트·반복 감지(repetition-detection)까지 있는 본격 에이전트 런타임이다.

핵심 ② — 블록 → 코드 생성 (2개 생성기 + iframe 격리)

블록을 코드로 바꾸는 생성기는 둘이다. ArduinoGenerator(C++/.ino)와 MicroPythonGenerator(Python). 둘 다 Blockly.CodeGenerator를 상속하고, 프로젝트의 devmode(arduino | micropython)로 갈린다. 흥미로운 건 라이브러리가 제공하는 생성기 코드를 신뢰하지 않고 iframe realm 안에서 실행한다는 점이다(blockly-generator-runtime.service.ts). 외부 라이브러리의 generator.js가 타이머·전역을 오염시켜도 iframe을 교체해 원복한다 — 플러그인을 안전하게 실행하는 샌드박스 패턴이다.

핵심 ③ — block-source-map (비주얼 프로그램의 소스레벨 디버깅)

생성 결과에는 어느 블록이 코드의 어느 섹션(macros/libraries/variables/objects/functions/setups/loops/body)에 무슨 코드를 기여했는지 + 최종 코드의 행 범위가 함께 기록된다. 특히 실행 가능한 줄(executableLineRanges, GDB가 멈출 수 있는 지점)과 선언·include 줄(supportLineRanges)을 구분한다. 덕분에 블록으로 짠 프로그램도 "이 블록에 브레이크포인트"처럼 소스레벨로 디버깅할 수 있다.

핵심 ④ — 컴파일 플로우 (aily-builder + 전처리 캐시)

컴파일은 child/scripts/compile.js가 담당한다. 흐름은 이렇다.

1) 블록 생성 코드를  <proj>/.temp/sketch/sketch.ino  로 기록
   + block-source-map을  .build/aily-block-source-map.json  에 저장
2) <proj>/node_modules/<boardModule>/board.json 을 읽어
   compilerParam(예:  -b esp32:esp32:XIAO_ESP32S3 )에서 보드 타입 파싱
3) aily-builder compile "<src>" --board "<type>" \
        --build-path ... --preprocess-result ... \
        --emit-artifact-manifest ...
   → 전처리 결과(preprocess.json) 캐시를 재사용해 재빌드 시간 단축

즉 arduino-cli/PlatformIO를 직접 부르는 대신 자체 빌더로 감싸, 캐시·아티팩트 매니페스트·그래프 의미 리비전(SHA-256) 같은 최적화를 얹는다. 이게 README가 말하는 "Lightning Compilation"의 실체다.

핵심 ⑤ — 업로드/플래싱은 다중 경로

5디렉토리 구조 해부

구조가 곧 설계 의도다. "Node로 하드웨어·빌드를 다루는 쪽"(electron/·child/)과 "UI·에디터·에이전트를 그리는 쪽"(src/)이 프로세스 경계로 갈려 있다. 하드웨어와 대화하는 무거운 일은 전부 electron/·child/에 있고, 사용자가 보는 모든 화면과 로직은 src/app/에 있다. 새 보드·라이브러리·컴파일러는 코드 수정이 아니라 npm 패키지 추가로 확장되므로, 이 저장소 자체는 "플랫폼"이고 하드웨어 지원은 "데이터"에 가깝다.

6학습 포인트

aily-blockly는 "데스크톱 앱 + 비주얼 프로그래밍 + 임베디드 + AI 에이전트"가 한 저장소에 겹쳐 있어, 각 계층이 그대로 교재가 된다.

① Electron 멀티프로세스 아키텍처

메인/렌더러/preload의 기본 3-프로세스에, utilityProcess로 무거운 작업을 격리하는 실전 패턴을 볼 수 있다. IPC 채널 설계, contextBridge로 안전하게 API를 노출하는 법, 그리고 "왜 AI 런타임을 별도 프로세스로 빼야 하는가"라는 판단의 근거를 코드로 배운다.

② Blockly 커스터마이징의 끝판

표준 Blockly를 포크해 커스텀 렌더러(aily-thrasos/zelos/icon), 커스텀 필드(LED 패턴·매트릭스·오디오), 플러그인(continuous-toolbox·multiselect·toolbox-search)을 얹었다. "블록을 코드로 바꾸는 생성기(CodeGenerator)"를 두 언어(C++/Python)로 구현한 사례라, Blockly를 장난감 이상으로 쓰는 법을 배운다.

③ "하드웨어를 npm 패키지로" — 확장 가능한 생태계 설계

보드·라이브러리·컴파일러·SDK를 전부 @aily-project/ 스코프 npm 패키지로 쪼개고, 프로젝트를 그 패키지들에 의존하는 하나의 npm 프로젝트로 만든 것이 이 저장소의 지적 핵심이다. 덕분에 보드 지원은 semver로 버전 관리되고, 프로젝트마다 격리되며(재현성), 커뮤니티가 패키지만 올리면 확장된다. "플랫폼과 콘텐츠를 분리"하는 설계 감각을 실물로 익힌다.

④ 코드 생성기 + 소스맵

비주얼 표현(블록)을 텍스트 코드로 낮추면서 양방향 추적성(소스맵)을 유지하는 법은 컴파일러·트랜스파일러의 핵심 주제다. aily-blockly의 block-source-map은 "고수준 표현 ↔ 저수준 코드"를 잇는 실전 예제다.

⑤ LLM 에이전트를 제품에 내장하기

도구(tool) 40여 개, MCP 연결, Skills 주입, 서브에이전트, 명령 보안 검증, 토큰 예산, 반복 감지 — "데모"가 아니라 "제품" 수준의 에이전트가 어떻게 구성되는지 통째로 볼 수 있다. 특히 도메인(하드웨어)에 특화된 도구(getBoardParametersTool·connectionGraphTool)를 어떻게 설계하는지가 값지다.

⑥ 브라우저 기술로 하드웨어 통신

WebSerial(esptool-js)과 Web Bluetooth(BLE OTA)로 물리 장치와 통신하는 코드는 흔치 않은 학습 자료다. "웹이 어디까지 하드웨어에 닿는가"를 실물로 확인할 수 있다.

7하드웨어 / 시스템 요구사항

이 프로젝트의 주인공은 소프트웨어를 돌릴 PC가 아니라 대상 개발보드다. 지원 범위가 요청의 Arduino·MicroPython·ESP32·STM32·RP2040·nRF5x를 전부 덮는다(코드/설정 등장 빈도 순).

브랜드 자산(public/brands/)에는 Arduino·Espressif·STMicroelectronics·Nordic·Raspberry Pi·M5Stack·micro:bit·Adafruit·SparkFun·Seeed(SenseCraft) 등이 들어 있다. 각 보드는 npm 패키지 @aily-project/board-*이고, 그 안의 board.json이 컴파일 파라미터와 핀맵의 정본이다.

PC / 시스템 요구사항

8직접 해볼 수 있는 실습 과제

9관련 기술 심화 학습 로드맵

10핵심 키워드 사전

11참고 링크