8월, 2026의 게시물 표시

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 구조로 프로젝트 전체가 생성되...

WEB 콘트롤 아두이노 AI 개발프로젝트 Part 1 - 아두이노 AI를 이용해서 말로 코딩하기

이미지
1부 · 아두이노 / 2부 · 웹 제어 (Human + AI Pair Programming) 아두이노도 대화로 만들었다 Arduino C++ Adafruit_SSD1306 EEPROM Claude OLED가 달린 아두이노 나노 보드를 시리얼 명령으로 제어하는 코드를, 처음부터 끝까지 AI와의 대화만으로 만든 과정입니다. 1부에서는 하드웨어 쪽 — 가장 단순한 기능에서 시작해 EEPROM 저장까지 기능을 쌓아올린 기록을 다룹니다. 0. 왜 이 글을 쓰나 (Before You Start) 하드웨어 코드를 AI에게 시키는 건 왠지 더 어려울 것 같지만, 방식은 웹 개발과 크게 다르지 않았습니다. 핵심은 한 번에 완성형을 요구하지 않고 작동하는 가장 작은 단위 부터 시작해서 기능을 하나씩 얹어가는 것이었습니다. 아래는 실제 대화 순서 그대로 재구성한 기록입니다. 이 프로젝트가 뭔가요? 아두이노 나노 + 128x32 OLED로 시리얼 명령( @led1 on 같은)을 받아 8개 출력 핀을 제어하고, 상태를 EEPROM에 저장해뒀다가 재부팅 시 복원합니다. 2부에서는 여기에 Node.js 서버를 붙여 브라우저로도 제어하는 이야기가 이어집니다. 1. 가장 작은 것부터 (Serial → OLED) 첫 요청은 일부러 아주 좁게 잡았습니다. "시리얼로 받은 텍스트를 OLED에 표시한다" — 딱 이것 하나만요. 배선, 라이브러리, 핀 번호 같은 하드웨어 맥락을 프롬프트에 구체적으로 넣어줄수록 AI가 헤매지 않습니다. 💬 실제 프롬프트 아두이노 나노 보드에 OLED 128x32를 연결한 상태이고 com port에 print input text를 입력하면 그 값을 O...