Lovable & Bronto를 사용하여 자신만의 Telemetry UI 구축하기

Feargal Karney & Mati Remi 작성

Bronto REST API가 이제 저희 자체 UI를 구축하는 데 사용되는 모든 것을 노출합니다. 이는 다른 사람이 설계한 범용 인터페이스를 사용할 필요 없이, 팀의 워크플로우에 정확히 맞춘 맞춤형 인터페이스를 구축할 수 있음을 의미합니다. 쉽게 시작할 수 있도록, Lovable에 여러분의 워크스페이스로 remix할 수 있는 베이스라인 프로젝트를 게시했습니다. 아직 사용해 보지 않은 분들을 위해 설명하자면, Lovable은 AI 기반의 프론트엔드 빌더(frontend builder)입니다. Figma와 Claude Code가 만나 실제 React 앱을 출시하는 형태라고 생각하면 됩니다. Lovable은 단 8개월 만에 ARR(연간 반복 매출) 1억 달러를 달성하며 성장했습니다. 자신만의 BrontoVibe 프로젝트를 만드는 방법은 다음과 같습니다.

3단계로 시작하기

1단계: Lovable에 무료 계정을 생성하거나 로그인한 후, 여기에서 템플릿을 엽니다.
2단계: Bronto 계정의 Settings → API Keys → Add API Key (API Full Access Role)에서 API Key를 가져옵니다.
3단계: 프로젝트를 Remix하고 프롬프팅(prompting)을 시작하세요!

그게 전부입니다. 배포할 백엔드(backend)도, 구성할 인증(auth)도, 관리할 인프라(infrastructure)도 없습니다.

베이스라인 프로젝트가 다루는 내용

검색 및 탐색 (Search & Explore)
SQL 또는 LogQL을 통해 쿼리(Query)하고, 원시 이벤트(raw events)를 확인하거나 시계열(timeseries)에 플롯(plot)할 수 있습니다. 필요에 따라 확장할 수 있는 견고한 시작점입니다.

추적 (Tracing)
오류와 성능 문제를 찾고, 서비스 전반의 스팬(spans)을 상세히 조사합니다. 어떤 트레이스(trace)에서도 클릭 한 번으로 연관된 원시 로그 데이터로 이동할 수 있습니다. 이는 장애 대응 중에 빠르게 문맥(context)을 파악해야 할 때 유용합니다.

대시보드 (Dashboards)
기존 대시보드를 확인하거나 Lovable에 새로운 위젯(widgets) 생성을 요청할 수 있습니다. 이 부분이 AI 빌더(AI-builder) 관점에서 흥미로워지는 지점입니다.

사용량 (Usage)
수집(Ingestion) 및 검색 사용량이 세분화되어 있어, 데이터 볼륨이 어디로 가고 있는지 항상 알 수 있습니다.

수집 방법 (Ingestion Methods)
다음과 같은 방식으로 데이터를 보낼 수 있습니다:

• Quick Ingest — 빠른 테스트를 위한 원시 로그 붙여넣기
• Agents — Fluent Bit, Vector, Datadog Agent, OpenTelemetry Collector
• Integrations — Akamai, PagerDuty 등
  전체 목록은 Bronto 통합 문서(integrations docs)에서 확인하세요.

여러분이 무엇을 구축할지 기대됩니다!

BrontoVibe 템플릿 Remix하기