글 작성자: 코코띵

Electron과 React로 만드는 현대적인 Serial Monitor 앱

기존의 불편한 시리얼 통신 도구들 때문에 고생해본 적이 있나요? 최근에 하드웨어 제어와 사용자 친화적인 인터페이스를 결합한 현대적인 데스크톱 애플리케이션을 개발했습니다. 오늘은 Electron과 React를 사용해서 범용 Serial Monitor 및 디바이스 제어 앱을 만든 여정을 공유하고자 합니다.

🎓 개발 계기: 대학원 연구에서 시작된 아이디어

대학원에서 하드웨어 관련 연구를 진행하면서 TeraTerm과 Putty 같은 기존 터미널 프로그램들을 자주 사용했습니다. 아두이노, 라즈베리파이부터 시작해서 다양한 마이크로컨트롤러와 통신하는 과정에서 이런 도구들이 충분했지만, 프로젝트가 복잡해질수록 다음과 같은 한계를 느끼게 되었습니다:

단조로운 인터페이스: 1990년대 스타일의 UI로 인한 피로감
제한적인 커스터마이징: 내 프로젝트에 맞는 특별한 기능 추가가 어려움
데이터 관리의 불편함: 로그 분석과 데이터 내보내기의 번거로움
멀티채널 제어의 복잡함: 여러 디바이스나 센서를 동시에 제어할 때의 불편함

연구실에서 늦은 밤 실험하다가 "심심한데, 내가 직접 더 나은 범용 시리얼 도구를 만들어볼까?"라는 생각이 들었습니다. 그렇게 시작된 사이드 프로젝트가 현재의 Serial Monitor & Device Control App이 되었습니다.

🎯 해결하고자 한 문제

시리얼 통신을 사용하는 다양한 하드웨어 프로젝트에서 자주 마주치는 문제들:

구식 터미널 기반 도구들로 인한 직관적이지 않은 인터페이스
제한적인 시리얼 통신 옵션과 나쁜 사용자 경험
실시간 데이터 전송 모니터링 기능의 부재
복잡한 디바이스 제어를 위해 수동으로 명령어를 작성해야 하는 번거로움
데이터 로깅 및 내보내기 기능의 부족

저는 이런 문제들을 해결하고, 아두이노부터 고급 마이크로컨트롤러까지 다양한 하드웨어와 쉽게 통신할 수 있는 현대적이고 사용자 친화적인 범용 애플리케이션을 만들고 싶었습니다.

🛠️ 기술 스택 선택

여러 가지 옵션을 고려한 후, 다음과 같은 기술 스택을 선택했습니다:

Electron: 크로스 플랫폼 데스크톱 애플리케이션 개발
React: 반응형 현대적 UI 구축
Vite: 빠른 개발 및 빌드
Node-SerialPort: 안정적인 시리얼 통신
CSS3: 다크 테마를 포함한 현대적 스타일링

왜 Electron을 선택했을까요? 성능에 대한 논의가 있을 수 있지만, 이 프로젝트에는 Electron이 완벽했습니다:

기본적으로 제공되는 크로스 플랫폼 호환성
하드웨어 통신을 위한 풍부한 생태계
빠른 개발을 위한 친숙한 웹 기술
시리얼 통신을 위한 Node.js 라이브러리와의 쉬운 통합

🏗️ 아키텍처 개요

애플리케이션은 명확한 관심사 분리를 따릅니다:

┌─────────────────┐    ┌──────────────────┐    ┌─────────────────┐
│   React 프론트엔드 │◄──►│  Electron 메인   │◄──►│ 시리얼 하드웨어    │
│   (렌더러 프로세스) │    │    프로세스       │    │   (FPGA/DAC)    │
└─────────────────┘    └──────────────────┘    └─────────────────┘
         ▲                        ▲
         │                        │
         ▼                        ▼
┌─────────────────┐    ┌──────────────────┐
│  프리로드 스크립트  │    │ Node-SerialPort  │
│   (보안 계층)     │    │    라이브러리      │
└─────────────────┘    └──────────────────┘

주요 컴포넌트:

메인 프로세스: 시리얼 통신, 파일 작업, 시스템 통합 처리
렌더러 프로세스: 실시간 업데이트가 포함된 React 기반 UI
프리로드 스크립트: 메인과 렌더러 프로세스 간의 보안 브리지
시리얼 통신 계층: 안정적인 디바이스 통신 처리

🚀 구현된 핵심 기능들

1. 지능형 시리얼 포트 관리

// 사용 가능한 포트 자동 감지
const ports = await SerialPort.list();
setPorts(ports.map(port => ({
  path: port.path,
  manufacturer: port.manufacturer || 'Unknown',
  // ... 기타 속성들
})));

앱은 사용 가능한 시리얼 포트를 자동으로 감지하고 각 디바이스에 대한 상세 정보를 제공하여, 사용자가 자신의 하드웨어(아두이노, 라즈베리파이, ESP32 등)를 쉽게 식별할 수 있게 합니다.

2. 고급 시리얼 모니터: TeraTerm을 뛰어넘다

기존에 사용하던 TeraTerm이나 Putty의 답답함을 해결하기 위해 가장 공들인 부분입니다. 대학원 연구 중 가장 자주 사용하는 기능이다 보니, 정말 많은 시간을 투자했습니다:

다중 형식 표시: ASCII, HEX, Binary 시각화 (TeraTerm에서는 불가능!)
스마트 필터링: 정규식 검색 지원과 TX/RX 필터 (연구 데이터 분석에 필수)
내보내기 기능: TXT 또는 CSV 파일로 로그 저장 (논문 작성 시 활용)
타임스탬프 옵션: 절대시간, 상대시간, 밀리초 타임스탬프 (실험 데이터 분석용)
실시간 검색: 실험 중 특정 패턴을 바로 찾아볼 수 있음

const formatData = (data) => {
  switch (displayFormat) {
    case 'hex':
      return data.split('').map(char => 
        char.charCodeAt(0).toString(16).padStart(2, '0')
      ).join(' ');
    case 'binary':
      return data.split('').map(char => 
        char.charCodeAt(0).toString(2).padStart(8, '0')
      ).join(' ');
    default:
      return data.replace(/\r/g, '\\r').replace(/\n/g, '\\n');
  }
};

3. 다목적 디바이스 제어

시리얼 통신을 활용한 다양한 하드웨어 제어를 위한 기능들:

유연한 명령 전송: 다양한 인코딩 방식 지원
배치 작업: 여러 명령을 순차적으로 실행
사용자 정의 프로토콜: 개별 프로젝트에 맞는 통신 방식 적용
실시간 피드백: 명령 전송과 응답의 즉각적인 확인

4. 현대적인 UI/UX 디자인

인터페이스의 특징:

다크 테마: 긴 개발 세션 동안 눈의 피로 감소
반응형 레이아웃: 다양한 화면 크기에 적응
탭 기반 네비게이션: 체계화된 워크플로우 분리
실시간 상태: 모든 작업에 대한 라이브 피드백

🎨 설계 결정사항

보안 우선

Electron 보안 모범 사례 준수:

new BrowserWindow({
  webPreferences: {
    preload: path.join(__dirname, 'preload.js'),
    nodeIntegration: false,        // 보안을 위해 비활성화
    contextIsolation: true,        // 격리를 위해 활성화
  }
});

성능 최적화

효율적인 렌더링: 부드러운 업데이트를 위한 React의 가상 DOM
메모리 관리: 메모리 블로트 방지를 위한 제한된 로그 라인
비동기 작업: 논블로킹 시리얼 통신

사용자 경험

자동 스크롤 토글: 사용자가 새 데이터를 따라갈지 선택 가능
다중 선택: 여러 로그 항목 선택 및 복사
검색 및 필터: 정규식 지원으로 빠른 데이터 위치 찾기

🧪 개발 도전과제 및 해결책

도전과제 1: 시리얼 포트 안정성

문제: 시리얼 포트는 특히 USB 연결에서 까다로울 수 있습니다.

해결책: 강력한 오류 처리와 자동 포트 감지 구현:

port.on('error', (err) => {
  console.error(`시리얼 포트 오류:`, err.message);
  event.sender.send('serial-port-status', { 
    isOpen: false, 
    error: err.message 
  });
});

도전과제 2: 실시간 데이터 플로우

문제: UI 동결 없이 고주파 데이터 관리.

해결책: 신중한 배치와 메모리 제한을 가진 React 상태 관리 사용:

setSerialMonitorLog(prev => {
  const newLog = [...prev, logEntry];
  if (newLog.length > maxLogLines) {
    return newLog.slice(-maxLogLines);
  }
  return newLog;
});

도전과제 3: 프로세스 간 통신

문제: Electron 프로세스 간의 보안 통신.

해결책: 프리로드 스크립트로 깔끔한 IPC 계층 구현:

contextBridge.exposeInMainWorld('electron', {
  openSerialPort: (portPath, baudRate, dataBits, parity, stopBits) => 
    ipcRenderer.invoke('open-serial-port', portPath, baudRate, dataBits, parity, stopBits),
  // ... 기타 보안 API들
});

📊 결과 및 영향

이 애플리케이션은 제 하드웨어 개발 워크플로우를 크게 개선했습니다:

⏱️ 70% 빨라진 디바이스 설정 및 구성
🔍 향상된 디버깅 실시간 데이터 시각화로
📈 개선된 생산성 효율적인 시리얼 통신으로
💾 더 나은 데이터 관리 내보내기 기능으로

🔮 향후 개선 계획

앞으로 추가할 계획인 기능들:

프로토콜 분석기: 일반적인 하드웨어 통신 프로토콜 디코딩
스크립팅 지원: JavaScript로 반복 작업 자동화
그래프 시각화: 센서 데이터의 실시간 플롯팅
플러그인 시스템: 사용자 정의 프로토콜을 위한 확장 가능한 아키텍처
클라우드 동기화: 여러 디바이스에서 설정 저장 및 동기화

🎓 배운 점들

기술적 인사이트:

Electron의 생태계는 하드웨어 인터페이싱에 매우 풍부함
React의 컴포넌트 모델은 복잡한 UI에 잘 확장됨
시리얼 통신은 신중한 오류 처리와 사용자 피드백이 필요함
Electron의 보안은 중요하며 나중에 생각할 문제가 아님
기존 도구의 한계를 이해하고 개선하는 것이 새로운 도구 개발의 핵심

개발 프로세스:

조기 사용자 피드백으로 수많은 재작업 시간을 절약함 (연구실 동료들의 피드백이 큰 도움!)
모듈러 아키텍처로 기능 추가와 테스트가 더 쉬워짐
성능 프로파일링으로 예상치 못한 병목지점 발견
문서화는 코드 자체만큼 중요함
개인 프로젝트라도 체계적인 개발 방법론 적용이 중요함

🤝 오픈소스 및 커뮤니티

이 프로젝트는 MIT 라이선스 하에 GitHub에서 공개되어 있습니다. 저를 배우고 성장하게 도와준 커뮤니티에 기여하고 싶습니다. FPGA 작업을 하시든, Electron 앱을 개발하시든, 하드웨어-소프트웨어 통합에 관심이 있으시든, 여러분의 생각과 기여를 듣고 싶습니다.

🔗 직접 체험해보기

📥 바로 다운로드해서 사용하기

개발 환경 설정 없이 바로 사용해보고 싶으시다면:

⬇️ FPGA Device Control App 다운로드

Windows용 실행 파일 (.exe)
별도 설치 과정 없이 바로 실행 가능
모든 기능이 포함된 완전한 버전

🛠️ 개발자를 위한 소스 코드

소스 코드를 직접 확인하고 수정하고 싶으시다면 GitHub 저장소에서:

완전한 소스 코드
설치 지침서
개발 환경 설정 가이드
기여 가이드라인

🚀 지금 바로 시작해보세요!

FPGA 개발에 지쳤다면, 이 도구가 여러분의 워크플로우를 어떻게 바꿀 수 있는지 직접 경험해보세요. 복잡한 설정 과정 없이 다운로드해서 바로 사용할 수 있습니다.

📋 시스템 요구사항

운영체제: Windows 10/11 (64비트)
메모리: 최소 4GB RAM
저장공간: 200MB 이상
포트: USB 시리얼 포트 지원

🎯 이런 분들께 추천합니다

아두이노, 라즈베리파이 등을 사용하는 메이커들
시리얼 통신을 다루는 임베디드 개발자
하드웨어 프로토타이핑을 하는 연구원 및 학생
IoT 디바이스 개발자
센서 데이터 수집 및 분석이 필요한 모든 분들

💭 마무리 생각

이 Serial Monitor 애플리케이션을 구축하면서 현대적인 웹 기술이 하드웨어 개발을 위한 강력한 데스크톱 도구를 만들 수 있다는 것을 배웠습니다. Electron과 React의 조합은 기능성을 희생하지 않으면서도 사용자 친화적인 인터페이스를 만드는 데 탁월한 선택이었습니다.

대학원 연구를 하면서 느낀 점은, 기존 도구들의 한계를 그냥 받아들이기보다는 "더 나은 방법이 있을까?"라고 질문해보는 것이 중요하다는 것입니다. TeraTerm이나 Putty 같은 훌륭한 도구들도 있지만, 특정 용도나 개인의 워크플로우에 맞춘 커스터마이징이 필요할 때가 있습니다.

심심할 때 시작한 사이드 프로젝트가 결국 다양한 하드웨어 프로젝트에서 생산성을 크게 향상시킨 범용 도구가 되었다는 것이 가장 큰 보람입니다.

기존 시리얼 도구에 좌절감을 느끼는 하드웨어 개발자든, 하드웨어 인터페이싱에 호기심이 있는 소프트웨어 개발자든, 웹 기술과 하드웨어 제어의 교차점을 탐험해보시길 권합니다. 가능성은 무한하고, 개발 경험은 정말 보람찹니다.

비슷한 시리얼 통신 도구를 만들어본 적이 있나요? 대학원 연구나 개인 프로젝트에서 어떤 도전에 직면했나요? 아래 댓글로 여러분의 경험을 듣고 싶습니다!

이 글이 도움이 되었다면 팔로우를 고려해주세요. 하드웨어-소프트웨어 통합, Electron 개발, FPGA 프로그래밍에 대한 더 많은 콘텐츠를 제공합니다. 질문이 있거나 비슷한 프로젝트에서 협업하고 싶으시다면 언제든지 연락주세요!

Claude로 작성됨

저작자표시 (새창열림)

코코의 행복한 개발도전기