WEB 콘트롤 아두이노 AI 개발 프로젝트 Part 2 - 웹 제어 (Human + AI Pair Programming)
2부 · 웹 제어 (Human + AI Pair Programming) 브라우저로 아두이노를 켜다 Node.js WebSocket serialport Vanilla JS 1부에서 완성한 아두이노를, 이번엔 웹 브라우저에서 실시간으로 제어해봅니다. Node.js + WebSocket으로 여러 사람이 동시에 접속해 LED를 켜고 끄고, 전원이 나갔다 들어와도 자동으로 상태가 맞춰지는 콘솔을 만드는 과정입니다. Local WEB 과 스마트폰 WEB 접속 사진 1. 방식부터 물어보기 (Architecture Decision) 웹 개발은 처음부터 구현을 요청하지 않고, "어떤 방식이 있는지" 부터 물어봤습니다. AI가 방식별 트레이드오프를 비교표로 정리해주면, 그중 프로젝트에 맞는 걸 고르는 방식이 혼자 검색하는 것보다 훨씬 빨랐습니다. 💬 실제 프롬프트 웹으로 시리얼 포트 제어 명령을 하려면 어떤 방식으로 만들면 돼? ✅ 결과물 (RESULT) Web Serial API (서버 불필요, Chrome/Edge 전용) vs Node.js + WebSocket (모든 브라우저, 다중 접속 가능) 비교표를 받고 후자를 선택했습니다. 💬 실제 프롬프트 Node.js 서버 + WebSocket을 이용하여 확장성 있게 html을 만들어줘 ✅ 결과물 (RESULT) server.js (시리얼↔WS 브릿지) + public/index.html (제어 UI) + package.json 구조로 프로젝트 전체가 생성되...