Firestore에 쌓인 데이터를 Retool로 대시보드 형태로 시각화하기

by

안드로이드 앱에서 실험용 로그 데이터를 Firestore에 넣어두긴 했는데,
이걸 매번 콘솔에서 열어서 보기는 너무 번거로웠다.
그래서 이번에는 Retool을 활용해서
Firebase Firestore 데이터를 직접 불러오고,
테이블과 차트로 바로 확인할 수 있는 간단한 대시보드를 만들어봤다.

구성은 Firestore → Retool REST 연결 → 테이블/차트로 시각화 순서로 진행했다.

Firestore를 Retool에 연결하기 위한 준비

Firestore REST API는 인증이 필요한데,
이때 서비스 계정(JSON 키)을 사용한다.
여기서 중요한 포인트는 Firebase 프로젝트 ID와 서비스 계정의 project_id가 반드시 같아야 한다는 점이다.
처음에 프로젝트 ID가 섞여서 403 오류가 많이 났는데,
Firebase 콘솔에서 올바른 프로젝트를 선택해 키를 다시 생성해 해결했다.

정리하면 다음 순서로 설정했다.

  1. Firebase 콘솔 → 프로젝트 설정 → 서비스 계정
  2. 서비스 계정에서 새 비공개 키(JSON)을 생성
  3. Retool → Resources → New → REST API 생성
  4. Base URL은 Firestore REST API 형식으로 입력
https://firestore.googleapis.com/v1/projects/{프로젝트ID}/databases/(default)/documents
  1. Authentication은 Service Account(JSON) 방식으로 선택
  2. OAuth Scope는 아래 값을 사용
https://www.googleapis.com/auth/datastore

이렇게 연결하면 Retool이 Firestore 문서를 직접 조회할 수 있는 상태가 된다.

Firestore 쿼리 만들기

Retool에서는 쿼리를 따로 작성해야 한다.
REST 방식은 단순히 URL Path만 입력하면 Firestore 문서를 가져올 수 있다.

예를 들어 metrics_log 컬렉션이라면 다음처럼 설정했다.

GET /metrics_log

쿼리 실행 시 Firestore 문서가 JSON 형태로 쭉 내려온다.

Firestore 문서를 테이블 형태로 변환하기

Firestore REST API는 문서가 아래처럼 구조화되어 있어서
그대로 테이블에 넣으면 Fields 전체가 한 칸에 뭉쳐서 들어간다.

{
  name: "...",
  fields: {
    perfMs: { stringValue: "59ms" },
    ...
  },
  createTime: "...",
}

그래서 Retool 테이블에 넣기 전에
Fields 안의 값들을 직접 펼쳐주는 전처리를 했다.
Retool Data source에 아래처럼 mapping 코드를 넣어준다.

{{
  query1.data.documents.map(d => {
    const f = d.fields || {};
    const getStr = k => f[k]?.stringValue ?? null;
    const getInt = k => f[k]?.integerValue ? Number(f[k].integerValue) : null;
    const getNum = k => {
      const v = f[k];
      if (!v) return null;
      if (v.integerValue !== undefined) return Number(v.integerValue);
      if (v.doubleValue  !== undefined) return Number(v.doubleValue);
      return null;
    };
    const stripMs = s => (s ? Number(s.replace('ms', '')) : null);
    const toKst = ts => {
      if (!ts) return null;
      const date = new Date(ts);
      const kst = new Date(date.getTime() + 9 * 60 * 60 * 1000);
      return kst.toISOString().replace("T", " ").replace("Z", "");
    };

    const ts = f["ts"]?.timestampValue ?? null;

    return {
      id: d.name.split("/").pop(),
      userId: getStr("userId"),
      deviceId: getStr("deviceId"),
      frame: getInt("frame"),
      resultCode: getInt("resultCode"),

      prefMs: getStr("prefMs"),
      prefMsNum: stripMs(getStr("prefMsNum")),

      tsUtc: ts,
      tsKst: toKst(ts),
    };
  })
}}

이렇게 하면 테이블에 컬럼들이 깔끔하게 정리되어 들어간다.

한국 시간(KST) 변환하기

Firestore Timestamp는 내부적으로 UTC를 사용하기 때문에
REST API로 가져오면 항상 UTC 기준 문자열이 들어온다.
이를 KST로 변환하려면 단순히 9시간을 더해주면 된다.

위 코드의 toKst() 함수 부분이 그 역할을 한다.

대시보드 구성

Retool에서 시각화는 매우 간단하다.
테이블로 구조를 잡아놓으면 나머지는 컴포넌트만 추가하면 된다.

예시로 만들었던 구성은 다음과 같다.

~ 전체 로그 테이블
~ 평균 FD / FAS / SessionTime 계산 텍스트

대시보드를 열면 Firestore에서 데이터가 자동으로 불러와지도록
쿼리 실행 모드를 Automatic 으로 설정했다.

마무리

지금까지는 Firestore에 쌓인 데이터가 있어도
이를 정리해서 보는 과정이 꽤 번거로웠는데,
Retool을 활용해 대시보드를 만들고 나니
기기별 성능 비교나 시간대별 변화 흐름을 바로 확인할 수 있어서 훨씬 편해졌다.

나중에는 여러 기기나 여러 앱 버전을 비교하는 UI도 넣어보고,
필요하면 BigQuery 연결로 데이터의 양이 많아졌을 때도 대비할 수 있을 것 같다.

Leave a Comment