JavaScript로 구현한 AI 기반 데이터 시각화 도구 — 4개월 간의 개발 과정과 사용자 피드백

AI 기반 데이터 시각화 도구를 개발하는 과정은 여러 가지 도전과 해결책이 필요했다. 본 글에서는 4개월 간의 개발 과정과 사용자 피드백을 바탕으로, 경험에서 얻은 교훈과 트레이드오프를 공유하고자 한다.

프로젝트 개요

이 프로젝트의 목표는 사용자가 쉽게 데이터를 시각화할 수 있도록 돕는 도구를 만드는 것이었다. 사용자는 CSV 파일을 업로드하고, 다양한 시각화 옵션을 통해 데이터를 분석할 수 있어야 했다. 핵심 기술로는 JavaScript와 D3.js를 사용했으며, AI 알고리즘을 통해 데이터의 패턴을 자동으로 인식하고 추천하는 기능도 포함했다.

기술 선택의 트레이드오프

JavaScript는 데이터 시각화 도구 개발에 적합한 언어다. 그러나 선택 과정에서 여러 가지 트레이드오프가 있었다.

1. 성능 vs. 유연성: D3.js는 강력한 시각화 라이브러리지만, 복잡한 데이터셋을 처리할 때 성능 저하가 발생할 수 있다. 초기에는 다양한 시각화 옵션을 제공하려다 성능이 떨어져 사용자 경험이 나빠졌다. 결국 성능 최적화를 위해 몇 가지 시각화 옵션을 줄였다.

2. AI 알고리즘의 선택: AI 기능을 추가하기 위해 TensorFlow.js를 사용했는데, 이는 브라우저에서 직접 모델을 학습하고 예측할 수 있게 해준다. 하지만 모델 학습과 예측 속도가 느리다는 단점이 있었다. 사용자 피드백을 통해 예측 기능을 비활성화하고, 서버 측에서 처리하는 방법으로 변경했다.

// TensorFlow.js 모델 예측 예시
const model = await tf.loadLayersModel('model.json');
const prediction = model.predict(tf.tensor2d(data, [1, data.length]));

사용자 피드백과 개선 사항

프로토타입을 사용자에게 배포한 후, 피드백을 통해 여러 개선 사항이 도출되었다. 사용자들은 다음과 같은 점을 지적했다.

• UI/UX 개선: 초기 UI가 복잡하다는 의견이 많았다. 사용자가 쉽게 접근할 수 있도록 UI를 단순화하고, 도움말과 튜토리얼을 추가했다.
• 데이터 처리 속도: 대규모 데이터셋을 업로드할 때 지연이 발생했다. 이를 해결하기 위해 데이터 전처리 로직을 최적화하고, Web Worker를 활용하여 비동기적으로 처리하도록 개선했다.

마무리

4개월 간의 개발 과정은 여러 교훈을 남겼다. 기술 선택에서의 트레이드오프, 사용자 피드백을 반영한 개선, 그리고 성능 최적화 과정은 모두 중요한 경험이었다. 앞으로도 사용자 중심의 개발을 지속하며, 기술적 한계를 극복해 나가야겠다. 개발자는 항상 사용자와 소통하며, 피드백을 적극적으로 반영해야 한다는 원칙을 잊지 말아야 한다.