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

"확장성 있게"라는 한 단어가 실제로 설계에 반영된 부분이 인상적이었습니다. 서버가 시리얼 포트를 독점 관리하고, 여러 브라우저 클라이언트가 WebSocket으로 동시에 붙는 구조로 만들어졌습니다. 즉 한 사람이 켠 LED를 다른 사람 화면에서도 실시간으로 보게 됩니다.

2. 시스템 구조 (System Architecture)

완성된 구조는 아래와 같습니다. 서버 하나가 시리얼 포트 하나를 물고 있고, 여러 클라이언트가 동일한 상태를 실시간으로 공유합니다.

[시스템 흐름 구성도]
• 하드웨어: Arduino Nano + OLED (USB Serial 9600)
• 백엔드: Node.js Server (serialport + ws 라이브러리 활용 / LED 상태 캐시 보관)
• 통신망: 포트 :3000 기반의 WebSocket 실시간 연결 채널
• 클라이언트: PC 브라우저, 스마트폰, 태블릿 등 멀티 디바이스 접속 가능
➔ 서버 1개가 시리얼 포트 1개를 독점하여 다중 클라이언트에게 실시간 브로드캐스트하는 구조

💬 실제 프롬프트 web 제어도 8개 led 제어를 만들어줘 ➡️ 그리고 전원이 꺼졌다가 보드가 살았을때 web LED 버튼 정보랑 일치하게 만들어줘

✅ 결과물 (RESULT) "지금 다른 동작을 하고 있다"는 상황 설명만으로, AI가 원인(서버가 실제 하드웨어 상태를 모른다는 것)을 먼저 짚어주고 @status 자동 조회 및 상태 캐싱 구조를 제안하며 구현까지 깔끔하게 이어졌습니다.

3. 가장 까다로웠던 부분 — 재부팅 동기화 (State Sync)

보드가 리셋되면 EEPROM에서 상태를 복원하지만, 웹 브라우저는 그 사실을 알 방법이 없었습니다. "버튼 상태가 실제 하드웨어와 다르게 논다"는 문제 상황을 설명하자, 해결 방향(상태를 읽어와서 버튼에 반영)까지 함께 제시하며 대화가 진행됐습니다.

[부팅 동기화 프로세스 매커니즘]
1. 전원 On / 하드웨어 리셋 ➔ 2. 아두이노 내부 EEPROM 상태 자동 복원 ➔ 3. 아두이노가 서버로 BOOT_READY 전송 ➔ 4. Node.js 서버가 이를 즉시 감지하여 @status 자동 역요청 ➔ 5. 아두이노에서LED 1~8 상태 전체 응답 ➔ 6. 웹 버튼 8개 데이터 실시간 자동 동기화 고정!➔ 불완전한 고정 타이머 대신 부팅 완료 신호(BOOT_READY) 기반으로 정확한 타이밍 동기화를 이뤄냈습니다.

💬 실제 프롬프트 WEB 버튼이 상태 동기화가 안되네. web쪽 창에도 @status 명령을 하면 정보를 받아서 창으로 출력하고 버튼 상태로 업데이트 하는 방법이 좋겠어

✅ 결과물 (RESULT) 처음엔 고정 3.5초 타이머 방식이었지만, 이 피드백을 계기로 BOOT_READY 신호 기반으로 리팩터링되었습니다. 타이밍 문제를 근본적으로 없애는 방향으로 스스로 설계를 바꾸더군요.

💬 실제 프롬프트 아두이노가 전원이 꺼졌다가 다시 연결되었을때 npm start 시리얼 연결이 해제 되었다가 자동으로 연결 될수 있는 방법은?

✅ 결과물 (RESULT) 사용자가 직접 끊은 경우(Disconnect 버튼)와 예기치 못한 전원 차단을 구분해서, 후자일 때만 2초 간격으로 포트를 재탐색하다가 장치가 재감지되면 자동으로 세션을 재연결하는 복구 로직이 추가되었습니다.

💡 배운 점

"동작이 이상하다"고만 말해도 괜찮습니다. 증상을 구체적으로 설명할수록 (버튼만 안 바뀐다 / 로그 자체가 안 뜬다 등) AI가 원인을 훨씬 빠르게 좁혀갑니다. 실제로 이 프로젝트에서도 로그창에 무엇이 찍히는지 교환하며 디버깅이 진행됐습니다.