홍쌤의 인포클래스AI + X · 기술 블로그

← 목록

크롬만 열면 되는 피코 수업: 웹 IDE, 센서 문서, 그리고 오렌지식 데이터 분석을 만든 기록

작성 2026.10.12 · 홍창민

라즈베리파이 피코 수업을 위해 브라우저에서 돌아가는 IDE와 센서 문서를 만들었고, 센서 데이터를 모아 바로 기계학습까지 해 보는 화면을 붙였다.
원래 3,889줄이던 코드가 5,802줄이 됐다. 그동안 고친 것과 아직 못 한 것을 적어 둔다.
지금 버전: pico.cmhong95.com

시작: 수업 첫 20분이 설치로 사라졌다

피지컬 컴퓨팅 수업은 매번 비슷하게 시작됐다. Thonny를 깔고, 드라이버를 잡고, 포트를 고른다. 그러다 보면 첫 20분이 지나간다. 학교 PC는 관리자 권한이 막혀 있어서 설치가 안 되는 반도 있었다.

그래서 목표를 하나로 정했다. 크롬만 열면 된다.

// Run: 실행 중인 걸 멈추고 → raw REPL 진입 → 코드 전송 → 실행
await write('\r\x03\x03');   // Ctrl-C ×2
await write('\x01');         // raw REPL
await write(code);
await write('\x04');         // 실행

솔직히 처음 바람은 "꽂으면 알아서 붙는 것"이었다. 그런데 브라우저 보안 규칙상 첫 연결은 사용자가 직접 포트를 골라야 한다. 한 번 허락받은 포트에 다음부터 알아서 다시 붙는 기능(getPorts)은 아직 못 넣었다. 지금은 USB가 빠지면 그걸 알아채고 화면에 알려주는 데까지만 된다.

Pico IDE 화면

Run을 눌렀는데 아무 일도 없었다

10월 11일 오전에 정리하다가 부끄러운 버그를 찾았다. Run 버튼이 연결된 피코가 아니라 가상 시뮬레이터에서만 코드를 돌리고 있었다. 학생 눈에는 "버튼은 눌렀는데 LED가 안 켜진다"로 보였을 것이다. 시리얼 쓰기 잠금이 풀리지 않는 문제와 줄바꿈 문제도 함께 있었다. 셋 다 고쳤고, 그 뒤로는 가상 피코 브리지를 만들어 실제 보드 없이도 raw REPL이 오가는지 시험하고 있다.

블록과 코드 사이

처음 배우는 학생은 블록(Blockly)으로, 익숙해지면 파이썬 코드로 넘어간다. 블록은 30개를 만들었다. 이벤트, 텍스트, 그리고 AI 판단 결과에 반응하는 블록이 들어 있다.

여기서 생긴 버그도 있었다.

둘 다 고쳤다. 학생 코드를 날리는 버그는 수업에서 신뢰를 한 번에 잃는 종류라 가장 먼저 잡았다.

문서: 센서 30종, 그리고 내가 틀렸던 것들

IDE 옆에 센서 가이드를 붙였다. 센서마다 설명, 배선, 예제 코드, 주의 사항을 담았다. 기본 10종, 센서 12종, 모션 4종, 디스플레이 4종이다.

배선도는 손으로 그리지 않았다. Raspberry Pi 공식 Pico 2 W 핀아웃 PDF와 pinout.xyz를 맞대어 본 핀맵을 데이터 하나로 만들었다. 회로도와 브레드보드 그림은 모두 그 데이터에서 자동으로 그려진다. 브레드보드 그림은 830홀 보드 가운데 홈에 피코가 걸쳐 앉은 모습이다. 수업에서 학생들이 실제로 꽂는 방식 그대로다. 점퍼가 이어진 구멍끼리 같은 선(넷)인지도 검사한다.

센서 가이드: 검증된 핀 데이터로 그린 배선도

문서를 다시 읽다가 내가 틀린 곳을 꽤 찾았다.

라이브러리도 문제였다.

오렌지처럼, 그런데 피코 데이터로

데이터 과학 수업에서는 Orange를 자주 쓴다. 코딩 없이 위젯을 이어 가며 데이터를 보고 모델을 만들 수 있다. 문제는 피코 센서 값을 Orange로 가져가려면 Thonny에서 로그를 복사하고, 파일로 저장하고, 다시 여는 단계를 거쳐야 한다는 점이었다. 거기서 학생 절반이 떨어져 나갔다.

그래서 IDE 안에 "데이터 분석" 화면을 만들었다. 흐름은 이렇다.

  1. 피코가 print하는 줄을 실행하는 동안 자동으로 CSV로 쌓는다.
  2. 특성 열과 목표 열을 고른다.
  3. KNN으로 학습한다. 순수 자바스크립트라 모델을 내려받을 필요가 없다. min-max 정규화, 유클리드 거리, 다수결 방식이다.
  4. 결과를 본다.
    • 산점도: 정답 색으로 점을 찍고, 배경에 모델이 판단하는 영역을 칠한다.
    • 혼동행렬: 어떤 라벨끼리 헷갈리는지 보여준다.
    • 회귀: 실제값과 예측값을 비교한다.
  5. 학습한 모델을 MicroPython 코드로 내보낸다. 이제 피코가 컴퓨터 없이 혼자 판단한다.

5번을 가장 해 보고 싶었다. "AI는 클라우드에 있다"던 학생들이, 손바닥만 한 보드가 혼자 "덥다/춥다"를 판단하는 걸 보게 하고 싶었다. 브라우저 예측과 같은 규칙(정규화, 거리, 다수결, 동률 처리)을 그대로 옮겨서, 브라우저와 피코가 같은 답을 내도록 맞췄다.

실수도 있었다. 정확도를 leave-one-out으로 재는데, 처음에는 자기 자신을 이웃에 포함해 계산했다. 정확도가 실제보다 높게 나왔다. 지금은 자기 자신을 빼고 계산한다. CSV를 열면 시간 열이 특성으로 먼저 선택되는 버그도 있었다. 시간으로 온도를 맞히는 모델이 그럴듯한 점수를 내고 있었다.

아쉬운 점도 분명하다. 지금은 Orange처럼 위젯을 선으로 잇는 캔버스가 아니라 "데이터 → 학습 → 예측" 3단계를 차례로 넘기는 화면이다. 학생이 흐름을 직접 이어 붙여 보는 경험이 Orange의 핵심이라, 다음 목표는 노드를 잇는 캔버스다.

텍스트와 이미지도 넣었다.

pose-detection 최신판은 tfjs 4 전용이라 IDE와 충돌했다. 1.0.1로 고정했다.

수업 도구, 그리고 AI에 얼마나 기대는지

교실에서 필요한 것들도 붙였다. 화면에 펜으로 판서하기, 접착 메모, 확대 기능이다. 판서 도구 막대가 판서 캔버스 밑에 깔려서 눌리지 않는 버그가 있었다. 막대를 화면 맨 위층으로 옮겨 고쳤다.

하나 더 넣은 게 "인지적 외주 지수"다. AI에게 맡긴 횟수와 스스로 해 본 횟수의 비율을 화면 위에 보여준다. 기록은 학생 기기에만 남는다. 막히면 IDE에서 바로 시나브로 AI(학교 서버의 AI)에게 물어볼 수 있게 이어 놓았다. 그러니 "AI에게 얼마나 기대고 있나"를 학생 스스로 보게 하는 장치도 같이 있어야 한다고 생각했다. 두 창 사이 메시지는 학교 AI 주소에서 온 것만 받는다. 답에 파이썬 코드 블록이 딱 하나 있을 때만 코드를 가져온다.

숫자로 보면

항목 값
코드 3,889줄 → 5,802줄 (JS)
블록 30개
센서 가이드 30종 (회로도·브레드보드 자동 생성)
학습 방식 KNN(표 데이터), 나이브 베이즈(텍스트), MobileNet·MoveNet KNN(이미지·포즈), 소리
배포 Firebase Hosting

다음에 할 것