연결 버튼에서 Web Serial을 요청하고, 한 줄씩 받은 JSON으로 화면을 바꿉니다.Requests Web Serial from a connection button and changes the page from newline-delimited JSON.
이지웹 스쿨
EasyWeb School
실제 장치와 시뮬레이션 연습을 한 프로젝트에서
Real hardware and simulator practice in one project
웹페이지와 마이크로비트 시뮬레이터를 연결해 보세요 Connect Your Webpage to the micro:bit Simulator
새 프로젝트를 만들 필요 없이, 작업 중인 기존 웹 프로젝트에서도 언제든 시뮬레이터를 열고 실제 micro:bit까지 연결할 수 있습니다. Without creating a new project, open the simulator at any time in an existing web project and later connect a real micro:bit.
1
가장 쉬운 시작 순서The Easiest Way to Start
먼저 웹페이지와 마이크로비트 프로그램이 같은 약속으로 데이터를 주고받게 만든 뒤, 연습용 시뮬레이터 또는 실제 장치를 고릅니다.First make the webpage and micro:bit program exchange the same data contract, then choose a simulator or real hardware.
- 1새 프로젝트 또는 기존 프로젝트 열기Open a new or existing project
index.html이 있는 어떤 프로젝트에서도 바로 사용할 수 있습니다.Use it immediately in any project containingindex.html. - 2필요할 때 마이크로비트 열기Open micro:bit When Needed
일반 웹 프로젝트에서는 웹페이지 미리보기만 씁니다. 마이크로비트가 필요한 프로젝트에서만 ‘마이크로비트 시뮬레이터’ 또는 ‘나란히 보기’를 선택합니다.Use only webpage preview for regular projects. Choose “micro:bit Simulator” or “Side by Side” only for a project that needs micro:bit.
- 3웹페이지에서 연결Connect from the webpage
프로젝트에 만든 연결 버튼을 누릅니다.Press the connection button in your project.
- 4한 가지 연결 방식 선택Choose One Connection
연습은 ‘마이크로비트 시뮬레이터 연결’, 실제 장치 통신은 ‘실제 마이크로비트 USB 연결’을 고릅니다. 동시 연결은 비교가 필요할 때만 쓰는 고급 기능입니다.Choose the simulator for practice or physical USB for hardware communication. Use the advanced simultaneous option only when you need to compare both.
2
시뮬레이터와 실제 마이크로비트 USB의 차이Simulator vs Real USB
마이크로비트 시뮬레이터는 아이디어와 웹 코드 확인용이고, 마지막 검증은 실제 장치로 합니다.Use the micro:bit simulator for ideas and web code, then perform final validation on real hardware.
| 확인할 것Check | 시뮬레이터Simulator | 실제 마이크로비트 USBPhysical micro:bit USB |
|---|---|---|
| 버튼·흔들기·센서 흐름Buttons, gestures, sensor flow | 가능Available | 가능Available |
| USB 케이블USB cable | 필요 없음Not required | 필요Required |
| 마이크로비트 프로그램(.hex)micro:bit program (.hex) | 필요 없음 — 정해진 시뮬레이션 이벤트를 보냄Not required — sends fixed simulation events | 필요 — 웹페이지와 같은 데이터 약속을 사용해야 함Required — must use the webpage’s data contract |
| 정확한 측정값·전기 특성Exact measurements/electrical behavior | 근사값Approximate | 실제값Measured |
| 수업 중 빠른 반복Fast classroom iteration | 적합Best fit | 최종 확인Final check |
3
웹페이지와 마이크로비트가 만나는 방식How the Webpage and micro:bit Meet
이지웹의 시뮬레이터는 MakeCode처럼 .hex를 실행하는 도구가 아닙니다. 웹페이지가 읽을 수 있는 줄바꿈 JSON 이벤트를 보내고, 웹페이지가 보낸 출력은 시뮬레이터 화면에 반영합니다.The EasyWeb simulator does not execute .hex files like MakeCode. It sends newline-delimited JSON events the webpage can read and reflects webpage output on the simulator.
시뮬레이터 또는 실제 보드가 같은 데이터 이름과 통신 속도로 메시지를 보냅니다.The simulator or physical board sends messages with the same data names and baud rate.
예: {"type":"button","button":"A","action":"pressed"}처럼 한 줄에 하나의 JSON을 보냅니다. 실제 보드의 프로그램도 웹페이지가 기대하는 같은 이름·형식을 사용해야 합니다.Example: send one JSON object per line, such as {"type":"button","button":"A","action":"pressed"}. A physical board program must use the names and format expected by the webpage.
4
지원하는 기본 센서와 입력Supported Built-in Sensors and Inputs
V2 전용 기능은 V1 모드에서 비활성화되어 버전 차이도 확인할 수 있습니다.V2-only features are disabled in V1 mode so version differences remain visible.
가속도·동작Motion
X·Y·Z, 기울기, 흔들기, 자유낙하, 3g·6g·8gX/Y/Z, tilt, shake, free fall, 3g/6g/8g
나침반·자기장Compass
0~359도 방향과 X·Y·Z 자기장0–359° heading and X/Y/Z magnetic force
온도·빛Environment
섭씨 온도와 0~255 빛 밝기Celsius temperature and 0–255 light level
소리·로고 터치Sound & Logo
소리 크기와 V2 정전식 터치 이벤트Sound level and V2 capacitive touch events
A·B·A+BA·B·A+B
누름과 해제 상태를 모두 전달Both pressed and released states
P0·P1·P2P0·P1·P2
터치 입력과 0~1023 아날로그 값Touch input and 0–1023 analog values
5
AI에게 두 프로그램을 한 쌍으로 요청하세요Ask AI for Both Programs as One Pair
이지웹이 예시 코드를 프로젝트에 자동으로 넣지 않습니다. 만들고 싶은 상호작용을 설명하고 웹페이지 코드와 마이크로비트 코드를 함께 요청하세요.EasyWeb does not insert sample code into a project. Describe the interaction and ask AI for both the webpage and micro:bit programs together.
웹페이지 프로그램에 요청할 것Request for the webpage program
- 연결·연결 해제 버튼과 현재 상태 표시Connect/disconnect buttons and visible status
- Web Serial, 통신 속도, 줄바꿈 JSON 형식과 정확한 데이터 이름Web Serial, baud rate, newline JSON, and exact data names
- 센서 입력에 따른 화면 변화와 정확한 오류 표시Screen reactions to sensor input and accurate error messages
마이크로비트 프로그램에 요청할 것Request for the micro:bit program
- 사용할 보드 V1·V2와 MakeCode JavaScript 또는 PythonBoard V1/V2 and MakeCode JavaScript or Python
- 웹페이지와 똑같은 통신 속도·줄바꿈 JSON·데이터 이름The same baud rate, newline JSON, and data names as the webpage
- 공식 편집기에서 다운로드할 수 있는
.hex생성 절차Steps to create a downloadable.hexin the official editor
6
.hex를 실제 마이크로비트에 설치하기Install a .hex on a Physical micro:bit
웹페이지가 이해하는 시리얼 프로그램을 .hex로 만든 뒤, 이지웹에서 보관·다운로드·직접 설치할 수 있습니다.Build the serial program your webpage expects as a .hex, then keep, download, or install it directly from EasyWeb.
- 공식 MakeCode 또는 Python 편집기에서 웹페이지와 같은 통신 속도·데이터 형식을 쓰는 프로그램을 만들고
.hex를 다운로드합니다.Create a program in the official MakeCode or Python editor using the same baud rate and data format as the webpage, then download its.hex. - 작업 화면에서 ‘마이크로비트’ 또는 ‘나란히 보기’를 열고, ‘프로그램(.hex) 설치’의 ‘.hex 가져오기’를 누릅니다.Open “micro:bit” or “Side by Side,” then choose “Import .hex” under “Install a Program (.hex).”
- 파일만 보관하려면 ‘컴퓨터에 저장’, 실제 보드에 기록하려면 ‘마이크로비트에 설치’를 누릅니다.Choose “Save to Computer” to keep a copy, or “Install on micro:bit” to program the physical board.
- 설치 장치 선택 창은 시리얼 연결 창과 별개입니다. 미리보기에 연결했던 같은 마이크로비트를 고르고, 완료 메시지가 나올 때까지 케이블을 빼지 않습니다.The installation device picker is separate from the serial connection picker. Select the same micro:bit used by the preview and keep the cable connected until completion.
- 미리보기가 실제 마이크로비트 USB에 연결돼 있었다면 설치 중 잠시 멈추고, 보드가 재시작되면 같은 연결을 자동으로 다시 시작합니다. 자동 재연결에 실패한 경우에만 ‘미리보기 다시 연결’을 누릅니다.If preview was connected to physical USB, it pauses during installation and automatically resumes after the board restarts. Use “Reconnect Preview” only if automatic reconnection fails.
꼭 기억하기Remember
직접 설치는 HTTPS로 배포된 웹의 Chrome·Edge와 Electron 앱에서 지원합니다. Safari·Firefox에서는 ‘컴퓨터에 저장’ 후 MICROBIT 드라이브로 옮기세요. V1·V2·Universal HEX를 지원합니다.Direct installation works in Chrome or Edge on the HTTPS web app and in the Electron app. In Safari or Firefox, save the file and copy it to the MICROBIT drive. V1, V2, and Universal HEX are supported.
공식 MakeCode 열기Open Official MakeCode
7
연결이 안 될 때When Connection Fails
오류를 감추지 말고 어느 단계에서 멈췄는지 차례로 확인합니다.Do not hide errors; identify the exact step where connection stopped.
시뮬레이터 연결 선택 화면이 안 보여요The simulator choice does not appear
웹페이지 코드에서 navigator.serial.requestPort()가 연결 버튼을 누른 바로 그 동작 안에서 실행되는지 확인하고 미리보기를 새로고침하세요. 브라우저 보안상 자동 연결은 할 수 없습니다.Make sure navigator.serial.requestPort() runs directly inside a connection-button click, then refresh the preview. Browser security does not permit automatic device selection.
실제 마이크로비트 USB 장치가 목록에 없어요The real USB device is missing
데이터 전송 가능한 USB 케이블인지 확인하고, 다른 브라우저나 프로그램이 포트를 사용 중이면 연결을 해제한 뒤 다시 시도하세요.Use a data-capable USB cable and disconnect other browsers or programs that may be holding the port.
.hex 설치에서 ‘장치 사용 중’이 보여요“.hex device in use” appears
이지웹은 설치 전에 자체 미리보기 연결을 잠시 멈추고 설치 후 자동으로 다시 시작합니다. Chrome·Edge의 다른 탭, MakeCode, 시리얼 모니터가 같은 보드를 쓰고 있다면 그쪽 연결은 직접 해제한 뒤 다시 설치하세요.EasyWeb pauses its own preview connection before flashing and resumes it afterward. Disconnect other Chrome/Edge tabs, MakeCode, or serial monitors using the same board, then retry.
펌웨어 업데이트가 필요하다고 나와요A firmware update is required
오래된 V1 인터페이스 펌웨어는 WebUSB 설치를 지원하지 않을 수 있습니다. microbit.org의 공식 펌웨어 안내에 따라 업데이트한 뒤 다시 연결하세요.Older V1 interface firmware may not support WebUSB flashing. Follow the official micro:bit firmware guide, then reconnect.
마이크로비트 시뮬레이터를 눌러도 웹페이지가 반응하지 않아요The webpage does not react to simulator input
시뮬레이터 위 상태가 ‘웹페이지와 시뮬레이터 연결됨’인지 확인하고, 시리얼 확인 영역에서 전송된 JSON과 콘솔 오류를 함께 확인하세요.Confirm the status says the simulator is connected, then inspect both the serial activity and console errors.
독립적으로 만든 교육용 마이크로비트 시뮬레이터An Independently Built Educational micro:bit Simulator
이 화면은 공식 보드 이미지, micro:bit 로고 또는 MakeCode 화면을 복제하지 않고 이지웹 스쿨의 HTML·CSS·JavaScript로 독립 구현했습니다. Works with the BBC micro:bit. 이지웹 스쿨은 Micro:bit Educational Foundation 또는 Microsoft의 공식 제품이나 보증 제품이 아닙니다.This screen was independently implemented with EasyWeb School HTML, CSS, and JavaScript without copying official board artwork, the micro:bit logo, or the MakeCode interface. Works with the BBC micro:bit. EasyWeb School is not an official or endorsed product of the Micro:bit Educational Foundation or Microsoft.