게임패드로 로봇 이슈 기록하기: 딸깍이 개발 과정

 

이번 글에서는 '딸깍이'의 개발 과정과 이를 통해 얻은 경험을 공유하려고 합니다. 로봇 모니터링 업무에서 발생하는 불편함을 어떻게 기술적으로 해결했는지, 그리고 이를 통해 업무 효율을 어떻게 높였는지에 대해 다루겠습니다.

 

목차

• 개요
• 배경
• 아키텍처
• 개발 과정
• 좋았던 점
• 아쉬웠던 점
• 개선 방향
• 마치며

 

 

---

개요

딸깍이는 로봇 모니터링 업무 중 발생하는 여러 불편을 해결하기 위해 개발된 기능입니다. 주행 중 발생한 이슈를 기록하려면 수기로 타이핑해야 했는데, 이는 관제 업무 중 위험을 초래하고 시간이 소요되어 효율성을 저하시켰습니다. 또한, 관제사마다 기록 방식에 차이가 있어 동일한 이슈의 발생 빈도를 정확히 파악하기 어려웠습니다.

 

 

---

배경

이슈 기록은 "12:33:05 장애물이 있으나 감속하지 않음"과 같이 타임스탬프 형식으로 상세히 작성해야 했습니다. 예를 들어, 5분 동안의 주행 중 10건의 이슈가 발생했다면, 각 이슈의 발생 시간을 전부 기록해야 했습니다:

• 12:33:05 이슈 내용
• 12:34:22 이슈 내용
• 12:37:33 이슈 내용

하지만 관제 업무 중 타이핑하는 것은 번거롭고 위험해 실시간 기록이 어려웠고, 관제사마다 기록 내용이 달라 정확한 데이터 확보가 힘들었습니다. 이러한 문제를 해결하기 위해 딸깍이를 개발해 게임패드를 통해 간편하게 이슈를 기록하고 코멘트를 추가해 리포트를 작성할 수 있게 했습니다. 또한, 이슈 관리를 체계화하기 위해 Slack에 별도의 이슈 채널을 생성해 자주 발생하는 이슈를 정의하고 우선순위를 부여했습니다. 특정 수준의 이슈가 발생하면 Slack 채널에 자동으로 전송되어 기술 담당자가 이를 확인하고 분석할 수 있게 했습니다. 필요한 경우, Jira 이슈 티켓을 생성해 데이터 분석과 관리를 효율화했으며, Slack 메시지에는 관련 Jira 티켓 링크를 스레드로 연결해 체계적으로 관리했습니다.

 

---

아키텍처

딸깍이의 아키텍처는 클라이언트, 서버, 데이터 저장 방식으로 구성됩니다. 클라이언트는 Chrome Extension을 통해 사용자 인터페이스를 제공했는데, 당시 저는 플랫폼 소속이 아니었기 때문에 기존 관제 플랫폼을 해치지 않으면서 데이터를 수집할 필요가 있었습니다. Chrome Extension으로 스크립트를 페이지에 주입할 수 있었기 때문에 이 방식이 적합했습니다.

 

서버는 Node.js로 구축해 백엔드 로직과 데이터 관리를 담당합니다. 이슈의 우선순위를 수정하거나 재정의하기 쉽게 Google 스프레드시트와 연동했으며, 스프레드시트에서 수정된 데이터는 Node.js 서버로 전송되어 캐시에 저장됩니다. 클라이언트 요청 시 매번 스프레드시트를 호출하지 않고 캐싱된 데이터를 활용해 성능을 높였습니다. 구글 스프레드시트를 사용한 이유는 다른 관제사들이 데이터 입력 상태를 쉽게 확인할 수 있도록 하기 위함이었으며, 당시에는 별도의 데이터베이스 설계에 대한 경험이 부족했습니다.

---

개발 과정

데이터 기록

관제사가 버튼 하나로 다양한 정보를 쉽게 기록할 수 있도록, 게임패드와 연동하여 사용성을 극대화하는 데 중점을 두었습니다.

1. 웹소켓 메시지 가로채기

WebSocket 객체를 래핑하여, 웹소켓 메시지를 실시간으로 가로채고 데이터를 처리합니다.

• 웹소켓 메시지 수신: 메시지를 수신할 때마다 파싱하여 상태 정보를 추출합니다.
• 조건별 메시지 처리: 특정 조건에 맞는 메시지를 수신하면, 이를 파싱하여 필요한 상태 정보를 추출합니다.

2. XMLHttpRequest 요청 가로채기

XMLHttpRequest 메서드를 덮어씌워 특정 URL 패턴에 맞는 요청을 가로채고 데이터를 처리합니다.

• URL 패턴 매칭: 패턴에 맞는 URL에서 응답을 받을 때, 응답 데이터에서 필요한 정보를 추출하여 사용합니다.
• 데이터 추출: 로봇 정보나 사용자 정보를 포함한 데이터를 추출하여 활용합니다.

3. 게임패드 버튼으로 데이터 기록

게임패드 버튼을 눌렀을 때, 수집된 웹소켓 메시지와 XMLHttpRequest 요청 데이터를 조합하여 해당 시점의 타임스탬프와 함께 로컬 스토리지에 기록합니다.

• 타임스탬프 기록: 버튼을 누른 순간의 타임스탬프를 포함하여, 관련된 모든 데이터를 로컬 스토리지에 저장합니다.
• 데이터 저장: 수집된 데이터는 이후 리포트 작성 시 사용할 수 있도록 저장됩니다.

이슈 분류 화면

이슈 분류 화면은 사용자가 수집된 타임스탬프 목록에서 이슈를 분류하고 코멘트를 작성하는 기능을 제공합니다. React를 사용하여 구현된 이 화면은 로컬 스토리지에 저장된 타임스탬프 데이터를 불러와서, 사용자가 조작한 값은 상태(state)에 저장되며, UI에 실시간으로 반영됩니다.

• useEffect 훅을 사용하여 컴포넌트가 마운트될 때, 로컬 스토리지에서 타임스탬프 데이터를 불러옵니다.
• 타임스탬프 항목이 수정되거나 삭제되면, 로컬 스토리지에 업데이트된 목록을 저장합니다.

 

---

서버 개발

서버는 Node.js를 사용하여 백엔드 기능을 구현했습니다. 사용자가 리포트를 제출하면 데이터가 서버로 전송되며, Slack과 Jira 연동을 통해 여러 팀이 효율적으로 이슈를 관리할 수 있도록 했습니다.

1. Slack 알림 시스템

중요 이슈가 발생하면 Slack을 통해 자동으로 알림이 전송됩니다. 이를 통해 관련 팀원들이 즉시 이슈를 인지하고 대응할 수 있습니다.

2. Jira 티켓 자동화

특정 수준 이상의 이슈는 자동으로 Jira 티켓이 생성되어 체계적인 이슈 트래킹이 가능합니다.

3. 효율적인 데이터 관리

Google 스프레드시트의 우선순위 데이터를 서버에서 캐싱하여 접근 속도를 개선했습니다. 정기적인 업데이트와 관리자의 수정 사항이 있을 때만 스프레드시트 API를 호출하도록 최적화했습니다.

 

---

좋았던 점

1. 문제 해결 방식
   • Chrome Extension을 활용해 기존 플랫폼을 건드리지 않고 해결책 제시
   • 게임패드 연동으로 사용자 편의성 극대화
   • 실시간 데이터 수집과 처리 구현
2. 기술적 성과
   • 웹소켓과 XMLHttpRequest 래핑을 통한 효율적인 데이터 수집
   • React를 활용한 반응형 UI 구현
   • 서버 캐싱을 통한 성능 최적화
3. 협업 시스템 구축
   • Slack과 Jira 연동으로 체계적인 이슈 관리
   • Google 스프레드시트 활용으로 유연한 데이터 관리
   • 자동화된 알림 시스템 구축

 

---

아쉬웠던 점

1. 기술적 한계
   • 클라이언트 중심 설계로 인한 확장성 제약
   • 서버 사이드 로직 부족
   • 업데이트 프로세스의 비효율성
2. 시간 제약
   • 추가 기능 구현 미흡
   • 사용자 피드백 반영 지연
3. 유지보수 어려움
   • Chrome Extension 특성상 배포와 업데이트가 번거로움
   • 문서화 부족
   • 코드 리팩토링 필요성

 

---

개선 방향

사용성 향상 개선: 데이터를 분석해 자동 드롭다운 선택 기능을 구현하여 관제사가 빠르게 선택할 수 있도록 했고, 인터페이스를 직관적으로 개선해 사용성을 높였습니다.

• 피드백: 관제사들이 이슈 분류 화면에서 선택을 빠르고 쉽게 할 수 있기를 원했습니다. 특히, 이슈 유형이나 우선순위를 설정하는 데 시간이 소요되었고, 실수를 줄일 수 있는 기능이 필요하다는 의견을 받았습니다.

위치 기반 데이터 수집 개선: 실시간 위치 정보 저장 기능을 추가해 주행 중 발생하는 지리적 이슈를 추적하고, 문제 발생 지점을 정확히 파악하고 분석할 수 있도록 했습니다.

• 피드백: 로봇의 주행 중 발생하는 문제를 정확히 추적하고, 주행 환경에 따른 장애물이나 경로 변경 등의 지리적 이슈를 분석할 필요가 있다는 의견이 있었습니다.

 

---

마치며

처음에는 개인 업무 효율을 높이기 위해 시작한 프로젝트였지만, 사용자 피드백을 지속적으로 반영하고 개선하면서 팀 전체의 생산성을 높이는 도구로 발전했습니다.

 

웹 기술 기반의 직관적인 인터페이스와 게임패드 연동 덕분에 사용자 경험이 크게 향상되었고, 이를 통해 데이터의 일관성도 확보되었습니다. 그 결과 팀원들의 업무 효율도 눈에 띄게 개선되었습니다. 2023년 10월부터 2024년 10월까지 약 6,000건 이상의 이슈를 체계적으로 수집하고 관리할 수 있었습니다.

 

이러한 성과를 바탕으로 딸깍이는 사내 공식 플랫폼으로 채택되었고, 현재는 Chrome Extension에서 벗어나 플랫폼 내부에서 직접 동작하는 웹 기반 시스템으로 재구성 중입니다. 이 프로젝트를 통해 많은 성취감을 얻었으며, 특히 사용자 피드백을 반영해 실제 문제를 해결하고 팀의 업무 효율성을 높일 수 있었던 점이 가장 큰 보람이었습니다.