dashboard-sharing

1 개의 포스트

Steganography at scale: Embedding share URLs in Datadog widget screenshots (새 탭에서 열림)

Datadog은 사용자가 대시보드 위젯을 스크린샷으로 캡처할 때 유실되는 쿼리, 시간 범위 등의 컨텍스트를 보존하기 위해 픽셀 수준의 보이지 않는 워터마크 기술을 도입했습니다. 위젯의 테두리 픽셀에 미세한 색상 변화를 주어 메타데이터 키를 인코딩함으로써, 정적 이미지에서도 원본 데이터와 상호작용할 수 있는 기능을 구현했습니다. 이 시스템은 하루 10억 개 이상의 위젯 렌더링을 처리하면서도 사용자 경험에 영향을 주지 않는 성능과 투명성을 유지합니다. ### 스크린샷의 한계와 보이지 않는 워터마크의 필요성 - 대시보드 공유 링크는 실시간 데이터와 쿼리 정보를 포함하지만, 많은 사용자는 여전히 직관적이고 권한 문제에서 자유로운 스크린샷 공유를 선호합니다. - 일반적인 스크린샷은 이미지 픽셀 정보만 남기 때문에, 당시의 구체적인 타임프레임이나 기반 쿼리, 대시보드 상태와 같은 중요한 컨텍스트가 모두 사라집니다. - Datadog은 사용자 인터페이스를 해치지 않으면서도 스크린샷 내부에 보이지 않게 메타데이터를 심어, 이미지를 다시 Datadog이나 협업 도구(Slack 등)에 붙여넣었을 때 원본 위젯을 복구하고자 했습니다. ### 효율적인 데이터 관리를 위한 Redis 캐싱 전략 - 위젯 정의(Definition) 데이터는 평균 2kB로 이미지에 직접 모두 인코딩하기에는 너무 큽니다. - 이를 해결하기 위해 전체 위젯 정의는 Redis 캐시에 저장하고, 이를 식별할 수 있는 짧은 8바이트 고유 키(Snapshot ID)만 워터마크로 인코딩합니다. - 하루 10억 건 이상의 위젯 렌더링과 초당 35,000건의 피크 타임을 감안하여, 충돌 방지를 위해 조직 ID(Org ID)를 조합한 키 구조를 사용하며 데이터는 1시간 동안 유지됩니다. - 지연 시간을 최소화하기 위해 프론트엔드에서 낙관적(Optimistic)으로 ID를 생성하여 렌더링 즉시 워터마크를 적용합니다. ### 픽셀 단위의 RGB 인코딩 메커니즘 - 모든 위젯에 공통적으로 존재하는 1픽셀 두께의 테두리(Border)를 데이터 삽입 위치로 선정하여 시각적 일관성을 유지합니다. - 워터마크는 총 10개의 픽셀로 구성됩니다. 시작과 끝을 알리는 2개의 센티널(Sentinel) 픽셀과 그 사이의 8개 데이터 픽셀이 배치됩니다. - 각 데이터 픽셀은 1바이트(8비트)를 저장하며, RGB 채널에 비트를 분산(R: 3비트, G: 3비트, B: 2비트)하여 저장합니다. - 기본 색상에서 채널별로 아주 미세한 오프셋(최대 +7)만 조정하기 때문에 육안으로는 원본 테두리 색상과 구분이 불가능합니다. 이 기술은 대규모 트래픽 환경에서도 성능 저하 없이 정적 이미지에 생명력을 불어넣는 창의적인 엔지니어링 사례입니다. 협업 과정에서 스크린샷을 자주 활용하는 팀이라면, Datadog의 이러한 기능을 통해 이미지 너머의 원본 지표와 쿼리를 즉시 추적하여 문제 해결 속도를 높일 수 있습니다.