아두이노 나노 33 IoT: 다중 파라미터 수질 센서 (EC, pH, ORP) - BLE & PWA 지원

부품 및 소모품

아두이노 나노 33 IoT	1개
Microfire LLC 아이솔레이티드 EC 프로브 인터페이스	1개
Microfire LLC 아이솔레이티드 ISE 프로브 인터페이스	2개

프로젝트 개요

무엇을 만들 것인가?

EC(전기전도도), pH, ORP(산화환원전위), 온도를 측정하는 장치를 제작합니다. 수영장이나 수경재배 시스템 모니터링에 활용할 수 있습니다. 블루투스 저전력(BLE)으로 통신하며, 웹 블루투스(Web Bluetooth)를 통해 웹페이지에서 데이터를 표시합니다. 더 나아가 프로그레시브 웹 앱(PWA)으로 변환하여 웹에서 설치 가능한 앱처럼 사용할 수 있습니다.

필요한 모든 부품은 ufire.co에서 구매할 수 있습니다.

용어 설명

• EC/pH/ORP/온도: 가장 일반적인 수질 측정 항목입니다. EC는 수경재배에서 영양액 농도를, pH는 물의 산성/염기성을, ORP는 물의 살균 능력을 판단하는 데 사용됩니다.
• 블루투스 저전력(BLE): 정보를 무선으로 주고받는 프로토콜입니다. 이 프로젝트에 사용된 아두이노 나노 33 IoT에는 WiFi와 BLE 인터페이스가 내장되어 있습니다.
• 웹 블루투스(Web Bluetooth): 구글 크롬과 오페라 브라우저에 구현된 API 세트로, 웹페이지가 BLE 기기와 직접 통신할 수 있게 해줍니다.
• 프로그레시브 웹 앱(PWA): 일반 앱처럼 동작하는 웹페이지입니다. 안드로이드, 아이폰, 데스크톱에서 각각 다르게 처리되므로 세부 사항은 별도 학습이 필요합니다.

하드웨어 구성

조립 전 한 가지 해결해야 할 점이 있습니다. uFire ISE 센서 보드들은 동일한 I2C 주소를 사용하므로, 두 개를 사용할 경우 하나의 주소를 변경해야 합니다. 이 프로젝트에서는 ISE 보드 중 하나를 ORP 측정에 사용하며, 여기 안내에 따라 주소를 0x3e로 변경합니다.

주소 변경 후 하드웨어 연결은 간단합니다. 모든 센서가 Qwiic 커넥트 시스템을 사용하므로 체인 형태로 연결하면 됩니다. 센서 하나를 나노 33에 연결하기 위해 Qwiic-수컷 변환 케이블이 필요합니다. 선은 색상으로 구분되어 있습니다: 검정(GND), 빨강(3.3V 또는 5V), 파랑(SDA, A4 핀), 노랑(SCL, A5 핀).

이 프로젝트에서는 온도 정보를 EC 센서에서 가져오므로, EC 보드에 온도 센서를 반드시 연결하세요. 모든 보드가 온도 측정이 가능합니다. EC, pH, ORP 프로브를 해당 센서에 BNC 커넥터로 연결하는 것도 잊지 마세요. 방수 처리를 위해 케이스가 있다면 내부 장착을 권장합니다.

소프트웨어 구조

소프트웨어는 두 부분으로 나뉩니다: 나노 33에 올릴 펌웨어와 웹페이지.

기본 흐름은 다음과 같습니다:

• 웹페이지가 BLE를 통해 나노 33에 연결
• 웹페이지가 텍스트 기반 명령 전송 (측정 요청, 액션 실행 등)
• 나노 33이 명령을 수신해 실행하고 JSON 형식으로 응답
• 웹페이지가 응답을 받아 UI 업데이트

이 구조로 측정, 캘리브레이션 등 필요한 모든 기능을 웹페이지에서 수행할 수 있습니다.

BLE 서비스와 특성

BLE 기본 개념부터 살펴보겠습니다. 비유하자면 서비스는 '책', 특성은 '페이지'입니다. 페이지는 내용 변경이 가능하고 변경 시 알림을 받을 수 있습니다.

BLE 기기는 여러 서비스를 가질 수 있습니다. 표준화된 서비스(Tx Power, 연결 끊김 등)부터 인슐린, 맥박 산소 측정 같은 특수 서비스까지 다양합니다. 직접 정의도 가능하며 UUID로 식별합니다. UUID는 UUIDTools.com 같은 곳에서 생성할 수 있습니다.

이 프로젝트 펌웨어에는 하나의 서비스와 두 특성이 정의되어 있습니다:

BLEService uFire_Service("4805d2d0-af9f-42c1-b950-eae78304c408");
BLEStringCharacteristic tx_Characteristic("50fa7d80-440a-44d2-967a-ec7731ec736a", BLENotify, 20);
BLEStringCharacteristic rx_Characteristic("50fa7d80-440b-44d2-967b-ec7731ec736b", BLEWrite, 20);

• tx_Characteristic: 장치에서 웹페이지로 측정값 등 정보를 전송 (BLENotify로 변경 알림)
• rx_Characteristic: 웹페이지에서 장치로 명령 수신 (BLEWrite로 쓰기 허용)

ArduinoBLE 라이브러리를 사용하며, 문자열 처리가 편한 BLEStringCharacteristic을 선택했습니다. 초기화 코드는 다음과 같습니다:

BLE.setLocalName("uFire BLE");
BLE.setAdvertisedService(uFire_Service);
uFire_Service.addCharacteristic(tx_Characteristic);
uFire_Service.addCharacteristic(rx_Characteristic);
BLE.addService(uFire_Service);
rx_Characteristic.setEventHandler(BLEWritten, rxCallback);
BLE.advertise();

rx_Characteristic.setEventHandler(BLEWritten, rxCallback)는 값 변경 시 rxCallback 함수를 호출하도록 등록합니다. BLE.advertise()는 장치를 탐색 가능하게 만들어 연결을 기다리게 합니다.

텍스트 명령 프로토콜

장치와 웹페이지는 간단한 텍스트 명령으로 통신합니다. uFire 센서 라이브러리가 JSON과 MsgPack 기반 명령 처리를 이미 제공하므로 구현이 쉽습니다. 이 프로젝트에서는 가독성이 좋은 JSON을 사용합니다.

예시 흐름:

1. 웹페이지가 ec 명령을 rx_Characteristic에 쓰기로 전송
2. 장치가 명령을 받아 EC 측정 실행 후 {"ec":1.24} 형식의 JSON을 tx_Characteristic에 쓰기로 응답
3. 웹페이지가 응답을 받아 화면에 표시

웹페이지 구현

프론트엔드에 Vue.js를 사용하며 백엔드는 불필요합니다. 빌드 시스템 없이 js, css, assets 폴더로 구성했습니다. HTML은 Bulma.io로 스타일링했으며 <head>에 중요한 한 줄이 있습니다:

<link rel="manifest" href="manifest.json">

이 manifest.json이 PWA 기능을 활성화합니다. 자바스크립트는 app.js(Vue 기본 설정, UI 변수), ble.js(블루투스 로직)로 분리되어 있습니다.

자바스크립트와 웹 블루투스

현재 크롬과 오페라에서만 동작합니다. app.js에 펌웨어와 동일한 UUID들이 정의되어 있습니다.

ble.js의 connect() 함수를 보면 연결 로직이 있습니다. 웹 블루투스 연결은 사용자 물리적 상호작용(버튼 탭 등)으로만 시작 가능하며, 페이지 로드 시 자동 연결은 보안상 불가능합니다.

this.device = await navigator.bluetooth.requestDevice({
  filters: [{ namePrefix: "uFire" }],
  optionalServices: [this.serviceUuid]
});

필터와 optionalServices 모두 필요합니다. 연결 대화상자는 크롬 기본 UI로 변경 불가하며, 기기가 하나여도 사용자가 선택해야 합니다.

이후 서비스와 특성을 설정하고 알림 콜백을 등록합니다:

service = await server.getPrimaryService(this.serviceUuid);
characteristic = await service.getCharacteristic(this.txUuid);
await characteristic.startNotifications();
characteristic.addEventListener("characteristicvaluechanged", this.value_update);

value_update는 수신된 JSON으로 UI를 업데이트하며, 5초마다 정보를 갱신하는 타이머도 설정됩니다. ec.js, ph.js, orp.js에는 측정 및 캘리브레이션 명령 함수들이 있습니다.

실행하려면 HTTPS로 서빙해야 합니다. 로컬에서는 serve-https 같은 도구를 사용하세요. 펌웨어 업로드, 하드웨어 연결, 웹페이지 서빙이 완료되면 작동을 확인할 수 있습니다.

PWA 변환

웹페이지를 앱으로 만들기 위한 단계:

• 웹페이지 설치 가능
• 설치 후 오프라인 접근 가능
• 일반 앱처럼 아이콘으로 실행

1. manifest.json 생성: App Manifest Generator 같은 도구 활용. 애플리케이션 범위(Application scope), 시작 URL(Start URL), 표시 모드(Display Mode - Standalone 권장) 설정이 중요합니다. 파일을 index.html과 같은 루트에 배치.

2. 서비스 워커: 오프라인 캐싱용으로 사용. 구글 예제를 참고해 캐시할 파일 목록만 수정하면 됩니다. 자체 도메인 파일만 캐시 가능.

3. 아이콘 생성: FavIcon Generator 활용.

4. Vue 마운트 훅에 등록 코드 추가:

mounted: function () {
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('service-worker.js');
  }
},

Lighthouse로 검증 가능합니다. 모든 게 정상이면 크롬이 설치 배너를 표시합니다.

코드

아두이노 크리에이트 / GitHub

https://github.com/u-fire/uFire-BLE

회로도

모든 연결은 Qwiic 케이블로 이루어집니다.