USB 모뎀 설정 웹: 브라우저에서 기기 설정을 읽고 쓰는 현장 도구
네트워크가 없는 현장에서 일하는 엔지니어가 USB로 연결한 모뎀의 설정을 브라우저에서 바로 읽고 쓰는 웹 도구입니다. 기존에는 데스크탑 애플리케이션을 설치하고 USB로 연결해 설정했는데, 이를 설치 없이 쓰는 웹으로 다시 만드는 것이 요구사항이었습니다.
2024.11 – 2025.04 · 웹 클라이언트 단독 개발, USB 통신·바이너리 처리 구현, 오프라인 방식 선정과 구현
- React
- Web Serial API
- Service Worker
- IndexedDB
프로젝트 개요
네트워크가 없는 현장에서 일하는 엔지니어가 USB로 연결한 모뎀의 설정을 브라우저에서 바로 읽고 쓰는 웹 도구입니다. 기존에는 데스크탑 애플리케이션을 설치하고 USB로 연결해 설정했는데, 이를 설치 없이 쓰는 웹으로 다시 만드는 것이 요구사항이었습니다.
외부 인력으로 참여해 웹 클라이언트를 혼자 개발했습니다. 네트워크가 되는 곳에서 기기 프로파일 정보를 미리 받아 두면, 네트워크가 없는 현장에서도 받아 둔 데이터로 USB에 연결된 기기와 통신해 설정을 적용할 수 있습니다. 개발을 마친 뒤 국내 테스트와 현지 테스트까지 진행했습니다.
| 항목 | 내용 |
|---|---|
| 팀 구성 | 웹 클라이언트 1명(본인) |
| 나의 역할 | 웹 클라이언트 단독 개발, USB 통신·바이너리 처리 구현, 오프라인 방식 선정과 구현 |
주요 성과
- Web Serial API로 서버를 거치지 않고 브라우저에서 USB 기기와 통신했습니다. Web Serial API는 Chromium 계열에서만 동작해서, 현장에서는 크롬을 쓰도록 안내했습니다.
- 기기 유형별 바이너리 계산 방식이 적힌 규격 문서를 받아, 기기에서 읽은 바이너리를 디코딩해 화면에 보여 주고 수정한 값을 다시 인코딩해 기기로 보내는 흐름을 만들었습니다.
- 최솟값·최댓값이나 선택지가 정해진 파라미터에는 입력 검증을 걸었습니다. 기기가 값을 거부하면 기기가 보낸 메시지를 에러 토스트로 보여 줬습니다.
- 요구사항에 없던 오프라인 대응 방식으로 Service Worker와 IndexedDB를 골랐습니다. 앱을 캐싱하고, 한 번이라도 읽어 온 데이터와 화면을 IndexedDB에 저장해 네트워크 없이도 보여 줬습니다.
- 기기 유형별 기본 프로파일을 받아 모든 설정을 되돌리고, 적용한 프로파일을 파일이나 서버로 내보낼 수 있게 했습니다. 같은 모델명의 기기끼리만 같은 프로파일을 쓸 수 있습니다.
- 영어·스페인어·포르투갈어를 지원했습니다.