Webviz

1. 서론

Webviz는 로보틱스 및 데이터 시각화 분야에서 중요한 역할을 수행하였던 웹 기반 도구이나, 그 이름은 단일한 프로젝트를 지칭하지 아니한다. 이 명칭은 최소 두 개의 주요하고 상이한 프로젝트에 사용되었으며, 각각은 다른 산업적 맥락에서 독립적으로 개발되었다. 하나는 자율주행 기업 Cruise가 로보틱스 데이터의 디버깅 및 분석을 위해 개발한 웹 기반 시각화 도구이며, 다른 하나는 노르웨이 에너지 기업 Equinor가 방대한 지질학적 데이터 세트의 시각화 및 안내서 자동화를 위해 구축한 프레임워크이다.

본 안내서는 Webviz라는 명칭의 이러한 이중적 맥락을 명확히 구분하고, 각 프로젝트의 기원, 기술 스택, 핵심 기능, 산업별 활용 사례 및 주요 경쟁 도구와의 관계를 심층적으로 분석할 것이다. 특히, Cruise의 Webviz가 오픈 소스 커뮤니티에서 어떠한 위치를 차지하였는지, 그리고 이 프로젝트가 Foxglove Studio와 같은 현대적 도구의 출현에 어떻게 영향을 미쳤는지에 대한 기술적, 산업적 함의를 논할 것이다. 이 분석은 독자에게 Webviz에 대한 총체적이고 다층적인 이해를 제공하는 데 목적을 둔다.

2. Webviz의 기원 및 정체성

2.1 자율주행 분야의 선구적 도구, Cruise의 Webviz

Cruise의 Webviz는 자율주행 기업 Cruise가 자사의 로보틱스 데이터를 브라우저에서 직접 시각화하기 위하여 개발한 웹 기반 도구였다.1 이 도구는 ROS bag 파일과 실시간 로봇 데이터 재생을 지원하며, 로봇 시스템의 디버깅 및 분석 작업에 필수적인 역할을 수행하였다.1 이 도구의 핵심은 사용자가 3D 시각화, 플롯, 이미지 등 다양한 모듈형 패널을 사용하여 맞춤형 레이아웃을 구성할 수 있다는 점에 있다.1 이러한 기능은 기존에 RViz나 rqt와 같이 여러 개의 분산된 도구들을 개별적으로 사용해야 했던 번거로움을 해결하고, 모든 워크플로우를 하나의 통합된 개발 환경으로 통합하는 것을 목표로 하였다.2

2.2 에너지 산업의 데이터 혁신가, Equinor의 Webviz

Cruise의 Webviz와는 완전히 다른 맥락에서, 노르웨이 에너지 기업 Equinor 또한 방대한 데이터 세트의 협업적이고 대화형 시각화를 위한 웹 기반 애플리케이션인 WebViz를 개발하였다.4 이 프로젝트는 특히 유정 시뮬레이션 및 유정 모델 업데이트(FMU, Fast Model Update) 워크플로우를 자동화하는 데 중점을 두었다.5 Equinor의 Webviz는 정적 사이트 생성기 역할을 수행하며, YAML 스키마와 Python API를 사용하여 복잡한 데이터를 자동으로 시각화하는 안내서를 생성하였다.6 이 프레임워크는 과거에 분석가들이 단일 모델을 분석하고, 수동으로 스크린샷을 찍어 PowerPoint 프레젠테이션을 구성하는 데 소요되었던 막대한 시간을 절약하도록 하였다.5

2.3 Webviz와 Foxglove Studio의 역사적 관계 및 분화

Foxglove Studio는 Cruise의 Webviz 프로젝트에서 시작된 역사적 포크(fork)이다.2 Foxglove 팀의 많은 구성원이 Cruise에서 Webviz 프로젝트에 참여한 경력이 있으며, 이로 인해 두 도구는 웹 기반 접근성, 모듈형 패널 시스템 등 많은 유사점을 공유한다.2 그러나 Foxglove는 Webviz에서 분화된 이후 광범위한 데이터 소스 지원, 교차 플랫폼 호환성, 강력한 협업 및 데이터 관리 기능을 추가하며 독자적인 방향으로 진화하였다.2

2.3.1 기업 주도 오픈 소스 프로젝트의 한계와 상업적 오픈 소스의 성공 전략

Webviz는 Cruise의 특정 목적, 즉 자율주행에 최적화된 내부 도구로 개발되었고, 이후 오픈 소스로 공개되었다.3 이로 인해 해당 프로젝트의 오픈 소스 구성 요소는 특정 사용 사례와 긴밀하게 결합된 형태로 남았으며, 커뮤니티에서 제기된 버그 리포트나 기능 요청에 대한 우선순위는 상대적으로 낮았다.3 이러한 한계는 기업의 내부 도구로 시작된 오픈 소스 프로젝트가 개발의 동기가 해당 기업의 핵심 사업에 집중된다는 구조적 특성에서 비롯한다. 이는 다른 산업의 사용자나 일반 커뮤니티의 기여를 유도하고 유지하는 데 어려움을 초래한다.

반면, Foxglove는 이러한 한계를 극복하기 위해 진정한 커뮤니티 프로젝트로서의 정체성을 구축하였다.3 Foxglove는 다양한 산업 분야(농업, 우주항공, 해양 탐사 등)의 요구사항을 반영하며, 유료 구독 모델을 통해 지속 가능한 개발을 위한 재정적 기반을 마련하였다.2 이 사례는 단순히 기술적 기능의 차이를 넘어, 오픈 소스 프로젝트의 성공을 좌우하는 비즈니스 모델과 커뮤니티 참여 전략의 중요성을 보여준다. Webviz의 모델이 특정 기업의 요구에 종속된 형태로 남은 반면, Foxglove는 오픈 소스의 가치를 상업적으로 확장하고 전문화된 워크플로우에 최적화하는 길을 선택하였다.

3. Webviz의 핵심 기술 구조 및 기능

3.1 웹 기반 통합 개발 환경의 강점

Webviz의 가장 큰 강점 중 하나는 웹 기반 애플리케이션이라는 점이다.2 이는 사용자가 복잡한 설치 과정이나 특정 운영 체제 환경에 대한 종속성 없이 브라우저를 통해 즉시 데이터 분석을 시작하도록 하였다.2 기존의 RViz와 같은 네이티브 도구가 특정 환경에서만 안정적으로 작동하는 한계가 있었던 점과 대비된다.9 Webviz는 RViz, rqt 등 여러 도구를 통합하여 하나의 워크스페이스에서 다양한 작업을 수행할 수 있는 통합 개발 환경을 제공함으로써 개발 워크플로우를 획기적으로 간소화하였다.2

3.2 모듈형 패널 시스템의 활용

Webviz의 아키텍처는 모듈형 패널 시스템에 기반한다.2 사용자는 3D 시각화 패널, 플롯 패널, 이미지 패널 등 다양한 기능을 가진 패널들을 타일 형태로 자유롭게 배치하여 자신의 워크플로우에 최적화된 맞춤형 대시보드를 구성할 수 있었다.2 이를 통해 관심 있는 값들을 플롯하고, 상호작용적인 3D 장면을 렌더링하며, 토픽 메시지를 상세히 탐색하는 모든 작업을 단일 환경에서 수행할 수 있다.2

3.3 기반 기술 스택: WebGL과 WebAssembly의 시너지

Cruise의 Webviz는 rosbag.js와 roslibjs를 사용하여 각각 ROS bag 파일과 실시간 데이터를 처리하였으며, React와 regl 라이브러리로 구축된 Worldview를 3D 장면 렌더링에 활용하였다.10 특히, Webviz와 Foxglove는 모두WebGL과 WebAssembly를 핵심 기술로 활용하였다.2

• WebGL: 하드웨어 가속 2D 및 3D 그래픽을 브라우저에서 직접 렌더링하는 JavaScript API로서, GPU를 활용하여 고성능의 실시간 렌더링을 가능하게 한다.13

• WebAssembly (Wasm): C++나 Rust와 같은 저수준 언어로 작성된 코드를 브라우저에서 네이티브에 가까운 속도로 실행하는 저수준 바이너리 포맷이다.13

3.3.1 웹 기술의 발전이 로보틱스 개발 환경에 미치는 영향

로보틱스 데이터(특히 LiDAR 포인트 클라우드 등)는 방대한 양의 정보를 포함하며, 이를 실시간으로 시각화하고 분석하기 위해서는 고성능의 연산 능력이 요구된다.15 전통적으로 이러한 작업은 RViz와 같은 네이티브 애플리케이션에서만 가능하다고 여겨져 왔다.16 그러나 Webviz는 WebAssembly를 사용하여 행렬 연산, 물리 시뮬레이션 등 CPU 집약적인 작업을 네이티브에 준하는 속도로 처리하고, WebGL로 GPU를 활용한 3D 렌더링을 담당하도록 분업함으로써, 브라우저 환경에서도 고성능 시각화를 구현하였다.13

이 기술적 조합은 웹 기반 도구가 더 이상 단순한 “가벼운” 대안이 아니라, 성능 면에서도 네이티브 도구에 도전할 수 있는 “강력한” 대안이 되었음을 시사한다. 이는 로보틱스 분야의 개발 환경을 운영 체제 및 하드웨어 종속성에서 해방시키고, 접근성과 휴대성을 극대화하는 패러다임 전환을 이끌어냈다. Webviz의 성공은 WebAssembly와 WebGL의 결합이 단순한 웹 애플리케이션을 넘어, 컴퓨팅 집약적이고 전문적인 분야의 워크플로우를 혁신할 수 있는 잠재력을 가졌음을 증명한다.

4. Webviz의 주요 활용 사례

4.1 로보틱스 및 자율주행 시스템 개발에서의 활용

Cruise는 Webviz를 자사의 자율주행 시스템 개발에 활용하였다. 이 도구는 자율주행 차량이 내리는 수천 개의 복잡한 결정을 시뮬레이션 및 실제 도로 환경에서 시각화하는 데 사용되었다.10 사용자는 ROS bag 파일을 Webviz에 드래그 앤 드롭으로 불러와 즉각적인 시각적 통찰을 얻거나, 실시간으로 로봇에 연결하여 데이터를 탐색할 수 있었다.10

4.2 자율 RC카 프로젝트를 통한 데이터 디버깅

한 연구 프로젝트에서는 자율주행 RC카 시스템의 데이터를 Webviz로 시각화하였다.15 이 프로젝트는 ROS bag 파일에 기록된 LiDAR 포인트 클라우드, 카메라 피드, 2D 플롯 등을 Webviz를 통해 동시에 시각화함으로써, ML 모델의 성능을 면밀히 조사하였다. 이 과정을 통해 개발자는 모델의 조향 명령이 직선 구간에서도 극단적인 값으로 치우치는 문제를 발견하였고, 모델 학습에 더 많은 직선 구간 데이터가 필요하다는 결론을 도출하였다.15 이 사례는 Webviz가 단순한 시각화를 넘어, 복잡한 시스템의 동작을 디버깅하고 성능을 개선하는 데 중요한 역할을 수행함을 보여준다.

4.3 유정 시뮬레이션 및 FMU 자동화에서의 활용

Equinor의 Webviz는 유정 모델링 및 특성화 워크플로우를 자동화하는 Fast Model Update (FMU)와 연계되었다.5 과거에는 분석가들이 단일 모델을 분석하고, 여러 전문 소프트웨어에서 스크린샷을 찍어 PowerPoint로 수동 안내서를 만들었으나, Webviz를 통해 이 과정이 완전히 자동화되었다.5 Equinor에 따르면, Webviz는 단일 분야에서 1년에 30,000시간에 달하는 수동 작업을 자동화함으로써, 막대한 시간과 비용을 절감하였다.5 이러한 사례는 기술 도구의 가치를 단순히 기능적 우월성으로만 평가할 수 없음을 보여준다. 실제적인 가치는 얼마나 많은 수동 작업을 자동화하고, 얼마나 빠르고 정확한 의사결정을 가능하게 하는지에 따라 결정된다.

5. Webviz의 강점 및 한계 분석

5.1 주요 강점

Webviz의 주요 강점은 탁월한 접근성에서 비롯한다. 웹 브라우저 기반으로 설치가 필요 없어 진입 장벽이 낮고 즉시 사용 가능하였으며 2, 이는 기존 로보틱스 도구들이 가졌던 환경 종속성 문제를 해결하였다.2 또한, RViz와 rqt 등 여러 도구를 하나의 통합 환경으로 묶어 개발자의 워크플로우를 간소화하였다.2 사용자는 모듈형 패널을 통해 맞춤형 대시보드를 구성할 수 있었고, Node Playground 패널을 사용하여 직접 코드를 작성함으로써 기능을 확장할 수 있었다.11

5.2 주요 한계

Webviz는 개별 개발자나 취미 활동가에게 적합한 도구였으며, 팀 단위의 협업 워크플로우나 설정 공유를 위한 내장 기능은 부족하였다.2 또한, ROS 생태계에 의존하여 데이터를 기록하고 접근하였을 뿐, Foxglove와 같이 별도의 데이터 수집, 관리, 중앙 저장소 기능을 제공하지 않았다.2 데이터 소스 또한 ROS 1 (rosbridge) 연결 및 .bag 파일 재생에 주로 의존하였고, ROS 2 등 새로운 데이터 형식에 대한 지원은 미흡하였다.2 이러한 한계는 Webviz가 특정 기업의 내부 도구에서 발전한 데 따른 자연스러운 결과이다.

6. 주요 경쟁 도구와의 비교 분석

6.1 RViz와의 비교

RViz는 ROS 생태계의 대표적인 3D 시각화 도구이나, 주로 Linux 환경에 최적화된 네이티브 애플리케이션이다.9 이로 인해 설치가 번거롭고 환경 종속성이 높다는 단점이 존재한다.2 Webviz는 RViz와 유사한 시각화 기능을 제공하되, 웹 기반으로 접근성과 휴대성을 크게 향상시켰다.16 즉, Webviz는 RViz의 강력한 기능을 브라우저 환경으로 가져와 로보틱스 데이터 시각화의 새로운 장을 열었다.

6.2 Foxglove Studio와의 비교

Foxglove Studio는 Webviz의 한계를 극복하며 발전한 도구로서, 기능적 측면에서 상당한 차이를 보인다.2

• 데이터 소스: Webviz가 ROS 1 (rosbridge) 및 .bag 파일에 주로 의존한 데 반해, Foxglove는 ROS 1/2 (네이티브 및 rosbridge), .db3 (ROS 2), PX4 ULog, Velodyne LiDAR, MCAP 등 Webviz보다 훨씬 광범위한 데이터 소스를 지원한다.2

• 플랫폼 호환성: Webviz가 웹 앱으로만 제공된 데 반해, Foxglove는 Windows, macOS, Linux용 데스크톱 앱과 웹 앱을 모두 제공하여 사용자의 선택지를 넓혔다.2

• 협업 및 데이터 관리: Foxglove는 중앙 데이터 저장소, Foxglove Agent를 통한 데이터 수집, 팀 레이아웃 공유 등 협업에 필수적인 기능을 내장하였다.2

6.2.1 도구의 “플랫폼화” 추세

Webviz는 주로 시각화와 디버깅이라는 단일 작업에 집중한 반면, Foxglove는 데이터 수집, 관리, 분석, 협업에 이르는 전체 워크플로우를 아우르는 “플랫폼“으로 진화하였다.2 이는 현대 로보틱스 개발 팀이 단편적인 도구를 넘어, 전체 데이터 생명 주기를 효율적으로 관리하고 팀원 간 협업을 원활하게 만드는 통합 솔루션을 필요로 함을 시사한다. Webviz가 로봇 데이터 시각화의 가능성을 열었다면, Foxglove는 그 가능성을 상업적으로 확장하고 전문화된 워크플로우에 최적화하였다. 이 과정에서 단순한 기능 개선을 넘어, 데이터 관리 및 공유와 같은 부가가치 서비스가 중요해졌음을 알 수 있다.

7. Webviz 설치 및 배포 방법론

7.1 Docker를 활용한 간편한 배포

Cruise의 Webviz는 Docker 이미지를 통해 로컬 환경에서 쉽게 실행할 수 있었다.

docker run -p 8080:8080 cruise/webviz

이 방식은 의존성 문제를 최소화하며 즉각적인 사용을 가능하게 하였다.17

7.2 Python API를 이용한 맞춤형 안내서 생성

Equinor의 Webviz는 pip를 통해 설치되고 Python API를 사용하여 정적 웹사이트를 생성하는 방식을 채택하였다.7 예를 들어, webviz.Webviz.write_html() 명령어를 사용하여 Pandas DataFrame 기반의 다양한 차트와 시각화 요소를 포함하는 안내서를 자동으로 생성할 수 있었다.7

7.3 YAML 스키마를 통한 설정 관리

Equinor의 webviz-config는 YAML 파일을 사용하여 앱의 제목, 페이지, 플러그인 등 전체 구성을 정의하였다.6 이는 코드 없이도 시각화 내용을 쉽게 관리하고 재사용하도록 하였다.6

아래 표는 Webviz의 두 가지 주요 구현체와 주요 경쟁 도구들의 기술 스택을 비교 정리한 내용이다.

8. 결론 및 제언

Webviz는 로보틱스 분야와 에너지 분야에서 각각 독립적으로 발전하며 웹 기반 데이터 시각화의 새로운 가능성을 제시한 선구적인 도구였다. 특히 WebGL과 WebAssembly를 결합하여 브라우저에서 고성능 시각화를 구현한 것은 기술적 패러다임의 전환을 상징한다. 그러나 Cruise의 Webviz는 협업 기능 및 데이터 관리 역량의 부족, 그리고 특정 ROS 생태계에 대한 의존성 등의 한계를 노정하였다. 이 틈을 메운 Foxglove Studio는 더욱 강력한 기능을 갖춘 현대적 대안으로 부상하였다.

아래 표는 Webviz와 주요 경쟁 도구들을 핵심 지표별로 비교 분석하여 각 도구의 상대적 위치를 명확히 제시한다.

8.0.1 제언: 올바른 도구 선택 가이드라인

• 단일 개발자나 취미 활동가: ROS 1 데이터에 대한 가벼운 시각화가 필요한 경우, Webviz는 여전히 유용할 수 있다. Docker를 사용하면 즉시 시작이 가능하다.

• 전문 로보틱스 팀: 데이터의 수집부터 관리, 분석, 협업까지 통합된 워크플로우를 구축하고자 한다면 Foxglove Studio가 더 적합하다. Foxglove는 광범위한 데이터 소스 지원과 팀 중심의 기능을 제공한다.

• 고전적 ROS 환경: Linux 시스템에서 ROS와 긴밀하게 통합된 3D 시각화가 필요하다면 RViz가 여전히 표준적인 선택이다.

• 대규모 데이터 안내서 자동화: 특정 도메인(예: 지질학)에서 정형화된 안내서 작성을 자동화해야 한다면 Equinor의 Webviz 프레임워크가 강력한 솔루션이 될 수 있다. 이 프레임워크는 Python 기반의 자동화에 최적화되어 있다.

결론적으로, Webviz는 웹 기반 시각화의 혁신을 이끌었던 역사적인 도구이나, 로보틱스 분야에서는 Foxglove Studio와 같은 더욱 전문화되고 확장된 “플랫폼“으로의 진화가 이루어졌다. 웹 기반 데이터 시각화 도구는 앞으로도 더욱 발전하여, 복잡한 데이터를 다루는 모든 산업에서 필수적인 솔루션으로 자리 잡을 것으로 전망된다.

9. 참고 자료

1. foxglove.dev, https://foxglove.dev/blog/foxglove-vs-webviz#:~:text=Webviz%20is%20a%20web%2Dbased,%2C%20plots%2C%20and%20image%20displays.
2. Foxglove vs. Webviz., https://foxglove.dev/blog/foxglove-vs-webviz
3. Foxglove Studio vs. Webviz - Esther S. Weon, https://esthersweon.medium.com/foxglove-studio-vs-webviz-374f6f37d642?source=user_profile———5—————————––
4. WebViz:A Web-based Collaborative Interactive Visualization System for large-Scale Data Sets | Request PDF - ResearchGate, https://www.researchgate.net/publication/241380450_WebVizA_Web-based_Collaborative_Interactive_Visualization_System_for_large-Scale_Data_Sets
5. Webviz - web-based visualization - Ceetron Solutions, https://www.ceetronsolutions.com/projects/webviz-web-based-visualization
6. Webviz introduction - GitHub Pages, https://equinor.github.io/webviz-subsurface/
7. webviz documentation — webviz 0.1.0 documentation, https://webviz.readthedocs.io/en/latest/
8. Foxglove Studio vs. Webviz - Medium, https://medium.com/@esthersweon/foxglove-studio-vs-webviz-374f6f37d642
9. Comparing Robotics Visualization Tools: RViz, Foxglove, Rerun | ReductStore, https://www.reduct.store/blog/comparison-rviz-foxglove-rerun
10. webviz, https://webviz.io/
11. Webviz - ROS Wiki, http://wiki.ros.org/Webviz
12. Worldview - webviz, https://webviz.io/worldview/
13. How to Combine WebGL with WebAssembly for Powerful 3D Apps - PixelFreeStudio Blog, https://blog.pixelfreestudio.com/how-to-combine-webgl-with-webassembly-for-powerful-3d-apps/
14. Combining WebAssembly with WebGL High-Performance Graphics Processing, https://dev.to/tianyaschool/combining-webassembly-with-webgl-high-performance-graphics-processing-322
15. Using Cruise’s Webviz Tool to Visualize Autonomous RC Car …, https://wilselby.com/2020/02/using-cruises-webviz-tool-to-visualize-autonomous-rc-car-system-data/
16. www.infoq.com, https://www.infoq.com/news/2019/11/webviz-ros-jupyter/#:~:text=Rviz%20is%20a%20well%2Dused,RViz%2C%20but%20with%20greater%20portability.
17. cruise-automation/webviz: web-based visualization libraries - GitHub, https://github.com/cruise-automation/webviz
18. webviz-ert - PyPI, https://pypi.org/project/webviz-ert/
19. Examples — webviz 0.1.0 documentation, https://webviz.readthedocs.io/en/latest/examples.html