Retool을 활용한 로그 데이터 시각화

안녕하세요, The Pinkfong Company에서 프론트엔드 개발을 하고 있는 페이지입니다. 🙆‍♀️

Retool을 이용하여 로그 시각화를 도입하는 과정에서 제가 얻게 된 지식과 팁을 공유하고자 합니다.

기존에는 앱에서 생성되는 로그를 Elastic Search에 적재 한 후 그 데이터를 Kibana를 활용하여 시각화 하였습니다. 또한 추가적인 데이터 분석 요구 사항을 반영하기 위해 JavaScript를 활용하여 웹페이지에서도 로그 데이터를 분석할 수 있도록 구현했습니다.

최근 모든 로그 기록을 Snowflake로 이관함에 따라, 통합된 로그 데이터를 시각화 할 수 있는 하나의 효과적인 도구가 필요해졌습니다. 다양한 데이터 시각화 도구 중에서도 저희 시스템과의 호환성을 고려해 Tableau와 Retool이 가장 적합하다고 판단했습니다.

Tableau의 장점

1. 시각화 다양성: 다양한 시각화 옵션과 유연한 사용자 인터페이스를 제공하여 데이터를 간편하게 시각화 할 수 있습니다.
2. 대화식 UI: 상호 작용 가능한 대시보드를 만들어 데이터 탐색 및 분석이 가능합니다.
3. 데이터 연결성: 다양한 데이터 원본과 연결할 수 있는 기능을 제공하여 실시간으로 데이터를 시각화하고 갱신할 수 있습니다.
4. 커뮤니티 및 지원: 커뮤니티가 활성화 되어있어서 인사이트를 얻기 편리합니다.

Tableau의 단점

1. 비용: 라이선스 및 구독 비용이 상대적으로 높을 수 있습니다.
2. 높은 러닝커브: 복잡한 시각화 및 분석 작업을 위해서는 학습 시간이 필요할 수 있습니다.

Retool의 장점

1. 빠른 개발: 로우 코드이며, 사용하기 쉬운 인터페이스를 제공하여 빠르게 데이터 기반 애플리케이션을 개발할 수 있습니다.
2. 데이터 연결성: 다양한 데이터 원본과 통합할 수 있는 연결성을 제공하여 실시간 데이터를 활용할 수 있습니다.
3. 커스텀 기능: JavaScript를 활용하여 커스텀 로직 및 기능을 추가할 수 있어 더 많은 유연성을 제공합니다.
4. 대화식 UI: 사용자와 상호 작용이 가능한 UI 요소를 쉽게 만들 수 있습니다.

Retool의 단점

1. 고급 시각화 부재: Tableau만큼 다양한 시각화 옵션이 제공되지는 않을 수 있습니다.
2. 비교적 새로운 도구: Tableau만큼 커뮤니티 크기가 크지 않습니다.

데이터 분석가분들과의 의논을 토대로 Retool을 활용하여 데이터 시각화를 진행하기로 결정했습니다. Kibana를 사용할 때도 추가 요구사항들이 나타났는데, 예를 들어 회사 앱 목록을 드롭다운 형식으로 표시할 때 앱의 아이덴티피케이션, 이름 및 이미지를 함께 보여주는 것이 필요했습니다. 그러나 Kibana에서는 이를 구현하기에제약이 있었습니다.

Tableau를 고려했을 때, 데이터 분석가들은 직접 데이터를 활용하여 지표를 분석하고 시각화할 수 있는 장점을 갖고 있었습니다. 그러나 러닝 커브가 높고 모든 요구사항을 반영하는 데 어려움이 있었습니다. 특히 추가적인 커스텀화된 기능이 필요한 경우 직접 프론트엔드 개발을 해야하는데, 이에는 상당한 공수가 필요한 단점이 있습니다.

이에 비해 Retool은 필요한 기능을 충족시키면서도 신속한 데이터 시각화 대시보드 제작을 가능케 하는 강력한 도구였습니다. 특히 Tableau에서 제공되는 기능 이상의 커스텀 기능이 필요한 경우 Retool이 더욱 두드러졌습니다. Retool은 마치 Tableau와 프론트엔드 개발 간의 중간 지점에 위치한 것으로, 직접 프론트엔드 개발보다 빠르게 대시보드를 개발할 수 있었습니다. 이로써 데이터 분석가들은 더 빠르게 필요한 기능을 시각화하여 활용할 수 있었습니다.

Retool을 선택함으로써, JavaScript를 기반으로 빠르게 구현하면서도 Tableau에서 제공되는 기능보다 더 커스텀한 대시보드 개발의 이점을 확보했습니다. 결과적으로 저희는 요구사항을 완벽히 반영한 대시보드를 제작할 수 있었습니다.

리소스 연결

• 다양한 외부 데이터베이스와 API를 연결할 수 있는 유연한 옵션을 제공하기 때문에, 필요에 따라 원하는 데이터 소스를 연결하여 활용할 수 있습니다.

• 저희는 Snowflake 데이터베이스와 GraphQL API를 활용하여 데이터 시각화를 진행했습니다.
• 외부에서 데이터베이스로 직접 SQL 을 전달 형태로 작동하는 서비스의 경우 항상 SQL injection 보안 이슈가 있지만, Retool에서는 기본적으로 작성한 쿼리에 대해 Prepared Statements방식(SQL 쿼리를 미리 컴파일하고, 사용자 입력을 파라미터로 전달하는 방법)으로 SQL injection protection을 방지하도록 적용되어 있습니다.
• Disable converting queries to prepared statements 체크박스를 선택한다면 JavaScript를 사용하여 동적으로 SQL을 생성할 수 있게 되지만 동시에 SQL injection protection도 비활성화됩니다.

JavaScript 접근

• Retool에서 앱을 구축할 때, {{ }} 를 이용하면 JavaScript로 처리됩니다.
• 보안 목적으로 모든 JavaScript는 별도의 iframe에서 실행되며 다른 도메인에서 실행됩니다. 이는 JavaScript 주입, 즉 크로스사이트 스크립팅(XSS) 공격과 같은 보안 취약점을 방지하기 위해서 입니다.

{{ moment().subtract(1, 'week').startOf('isoweek').format('YYYY-MM-DD') }}

모듈화 처리

• 여러 페이지에서 사용될 것을 고려한다면, 네비게이션바나 필터링 기능을 모듈화하여 구축하는 것이 편리합니다.
• 무료 계정은 5개까지 모듈화 할 수 있습니다.

• 저희는 메뉴를 모듈화 시켜서 각각의 페이지에서 재활용할 수 있도록 처리하였습니다.

• 모듈화 되어있는 값에 접근하기 위해서는 Module settings에서 export처리를 해주어야 합니다.
• 예를 들어, 저희는 테스트 서버와 실서버의 로그 기록을 구분하기 위해 토글 버튼을 활용했습니다. 각 페이지에서 이 토글 버튼을 조작하여 테스트 서버와 실서버의 로그를 따로 확인할 수 있습니다. Outputs 섹션의 플러스 버튼을 클릭하여 Name과 Value를 설정하면, 나중에 필요한 컴포넌트에서 해당 값을 활용할 수 있습니다. 이를 통해 데이터 소스에 따라 로그를 구분하고 필요한 정보를 더 효율적으로 분석할 수 있습니다.

{{ [MODULE_NAME].testLoggerToggleValue }}

Query Library(쿼리 라이브러리)

• 서로 다른 페이지에서 공통으로 사용되는 쿼리를 효율적으로 관리하기 위해, 쿼리 라이브러리에 해당 쿼리를 저장하고 각 페이지에서 필요한 리소스와 연결하여 사용할 수 있습니다.
• 쿼리를 재사용해야 하는 경우가 있을때, 불필요한 코드 작성을 줄이고 일관된 쿼리를 재사용 할 수 있도록 보장할 수 있습니다. 또한 버전 선택 기능을 제공하여 필요한 버전의 쿼리를 사용할 수 있게 되어, 적절한 버전의 쿼리를 쉽게 선택하여 활용할 수 있습니다. 이를 통해 코드 관리와 유지보수를 용이하게 합니다.

쿼리 요청 및 최적화

• 쿼리 요청은 2가지 방법으로 가능합니다.

1. 인풋 값이 변경 되었을 때
2. 수동으로 트리거 했을 때

• 인풋 값이 변경되면 자동으로 쿼리 요청을 전송하도록 설정할 수 있지만, 특정 조건에 따라 해당 쿼리를 비활성화할 수도 있습니다.
• Custom rule을 추가하여 Disable query에 반영하여 쿼리 요청을 막을 수 있습니다. 예를 들어, Date Range 컴포넌트의 경우 Max date 또는 Min date 규칙 이외에도, 필요한 경우 Custom rule을 추가하여 원하는 조건으로 유효성을 검사할 수 있습니다. 이를 통해 데이터 유효성 검증과 함께 필요한 조건을 충족하지 않는 경우 쿼리를 막을 수 있습니다.

• 수동으로 쿼리를 트리거하는 방식을 사용하더라도, Watched inputs에 원하는 필드를 추가하여 해당 값의 변경을 감지하면 자동으로 쿼리 요청을 보낼 수 있습니다.
• 데이터 캐싱 처리가 가능하며, 최대 저장 시간은 하루(86,400 초)로 설정할 수 있습니다. 이러한 기능을 활용하면 실시간으로 변경되지 않는 데이터의 경우 페이지 로딩 시 한 번의 쿼리 요청을 보내고, 그 이후 불필요한 쿼리 요청을 줄여 최적화할 수 있습니다.

JavaScript Transformer

• JavaScript를 활용하면 데이터를 원하는 형식으로 가공할 수 있습니다.
• 데이터 예외 처리나 원하는 값 변환을 쿼리로 처리하는 대신 JavaScript를 사용하여 데이터를 원하는 형태로 변환할 수 있는 장점이 있습니다.
• 예를 들어, 저희는 그래프를 작성할 때, 그래프의 x축 좌표를 [ID]_[TITLE]형식으로 지정하였습니다. JavaScript Transformer를 활용하여 Snowflake의 ID와 GraphQL API의 Title을 매핑하여 사용했습니다. 이를 통해 데이터 변환과 매핑을 우리가 원하는 대로 자유롭게 조작할 수 있었습니다.

Variable

• React.useState처럼 상태 관리를 할 수 있습니다.

• 그래프의 x축 값을 [ID]_[TITLE]형식으로 할당한다고 가정하면, 해당 그래프에 Event Handler를 추가하여 사용자가 그래프를 선택할 때 x축 값을 사용하여 ID를 저장할 수 있습니다. 이후 쿼리 요청을 전송할 때, 저장된 ID를 활용하여 필요한 데이터를 조회하도록 처리하였습니다. 이를 통해 그래프와 상호작용하는 과정에서 필요한 정보를 효과적으로 활용할 수 있도록 구현하였습니다.

Prefix Image

• 이미지를 불러와서 해당 로우에 이미지가 보이도록 처리할 수 있습니다.

테이블 활용

• Adds-ons에서 Toolbar를 선택하면, 필터링, 다운로드, 재요청 기능이 포함됩니다.

• 필터링 같은 경우, 따로 쿼리 요청을 보내는 것이 아닌, 테이블에 사용하는 Source를 이용하여 처리합니다.

• Throttle/Debounce를 기본적으로 제공하고 있고, 파일명/타입을 커스텀 하게 지정하여 사용 가능합니다.

• 테이블 데이터를 활용하여 새로운 컬럼을 생성할 수 있습니다. 저희는 각 플랫폼별 PV(Page View) 데이터를 가져와서 테이블에 새로운 컬럼으로 플랫폼 통합 PV 값을 생성하여 통합된 정보를 확인할 수 있도록 처리했습니다.

Release 기능

• 릴리즈 기능을 활용하여, 배포 버전 관리가 가능합니다. Draft 버전으로도 생성 가능하면 버그 발생 시 이전 버전으로 변경 가능합니다.
• 하지만 해당 기능은 유료 버전일 때만 사용가능합니다.

디버깅/ 히스토리 관리

• 디버깅과 히스토리 관리도 용이합니다. 좌측 🐞또는 하단 🐞Debug를 누르면 콘솔 팝업이 띄워지며, JavaScript Transformer에서 console.log(‘Hello World');를 이용하여 디버깅이 가능합니다.
• 히스토리 리스트를 이용하여 특정 버전으로 되돌아갈 수 있는 기능도 제공하기 때문에 여러 명이 한번에 작업을 할 때 용이합니다.

Retool은 로우코드의 이점과 JavaScript 문법을 활용하여 신속하게 데이터 시각화를 처리할 수 있는 기회를 제공합니다. 신속한 개발, 유연한 커스터마이징, 다양한 데이터 연결 옵션, 직관적인 사용자 인터페이스, 그리고 실시간 협업 등의 장점을 종합해 보면, Retool은 데이터 시각화와 웹 애플리케이션 개발에 매우 효과적인 도구입니다.

뿐만 아니라, Retool은 Kibana와 Tableau와 같은 대시보드 개발 도구와 직접 프론트엔드 개발 사이에 위치해 있는 거 같습니다. 이로 인해 직접 프론트엔드 코드를 작성하고 유지 보수하는 번거로움을 피하면서도, Kibana와 Tableau에서 어려웠던 커스텀한 사용자 인터랙션과 같은 기능들을 손쉽게 추가할 수 있었습니다. 이로써 Retool은 데이터 시각화 및 웹 애플리케이션 개발의 효율성을 극대화하는 데 좋은 도구라고 생각합니다.

감사합니다.

참고 문서:

Build any business software, remarkably fast.