screenshot-encoding

대규모 스테가노그래피: Datadog 위젯 스크린샷에 공유 URL 임베딩하기 (새 탭에서 열림)

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의 이러한 기능을 통해 이미지 너머의 원본 지표와 쿼리를 즉시 추적하여 문제 해결 속도를 높일 수 있습니다.

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

데이터독(Datadog)은 사용자가 위젯을 스크린샷으로 캡처하더라도 쿼리, 시간 범위, 대시보드 설정과 같은 풍부한 컨텍스트를 보존할 수 있도록 픽셀 단위의 '보이지 않는 워터마크' 시스템을 구축했습니다. 위젯의 메타데이터 전체를 이미지에 직접 담는 대신, 해당 데이터를 저장한 Redis 캐시의 고유 키를 위젯 테두리 픽셀의 RGB 값을 미세하게 조정하여 인코딩하는 방식을 채택했습니다. 이를 통해 사용자 경험을 해치지 않으면서도 하루 10억 개 이상의 위젯에 대해 스크린샷만으로 원본 데이터에 접근할 수 있는 연결성을 제공합니다. **스크린샷의 한계와 워터마킹의 도입 배경** - 대시보드 위젯을 복사하여 붙여넣으면 라이브 프리뷰와 데이터 연결이 유지되지만, 많은 사용자는 직관적이고 권한 문제에서 자유로운 스크린샷 방식을 선호합니다. - 하지만 일반적인 스크린샷은 캡처 시점의 쿼리, 시간 범위, 시각화 유형 등 유용한 메타데이터를 모두 잃어버린다는 단점이 있습니다. - UI에 요소를 추가하지 않고도 이 정보를 보존하기 위해, 육안으로는 식별할 수 없지만 알고리즘으로 읽을 수 있는 픽셀 기반 워터마킹 기술을 도입했습니다. **데이터 최적화 및 캐싱 전략** - 위젯 정의 데이터는 평균 2KB로 이미지에 직접 인코딩하기에는 너무 크기 때문에, 전체 데이터는 Redis 캐시에 저장하고 이를 참조하는 짧은 고유 ID만 워터마크에 포함합니다. - 위젯이 렌더링될 때마다 프론트엔드에서 낙관적(Optimistic)으로 ID를 생성하여 백엔드 응답을 기다리지 않고 즉시 워터마크를 삽입함으로써 성능 저하를 방지합니다. - 조직 ID와 8바이트 무작위 ID를 조합하여 대규모 환경에서도 ID 충돌 가능성을 극도로 낮추었으며, 데이터는 스크린샷이 주로 활용되는 시간대를 고려해 1시간 동안 캐싱됩니다. **픽셀 레벨의 미세 인코딩 기법** - 모든 대시보드 위젯이 공통적으로 가진 1px 두께의 테두리를 데이터 삽입 공간으로 활용하여 시각화 유형에 상관없이 일관된 적용이 가능하게 했습니다. - RGB 모델의 각 채널 값을 미세하게 오프셋(Offset)하는 방식을 사용합니다. 기본 배경색에서 각 채널값을 조정한 뒤 0~7 사이의 값을 더해 픽셀당 약 9비트의 데이터를 저장합니다. - 워터마크의 시작과 끝을 알리는 센티널(Sentinel) 픽셀을 배치하고 그 사이에 8개의 데이터 픽셀을 넣어 총 8바이트의 ID를 인코딩하며, 이는 육안으로 거의 식별되지 않습니다. 이 시스템은 장애 대응이나 협업 과정에서 스크린샷이라는 익숙한 도구를 사용하면서도, 필요할 때 언제든 원본 데이터 컨텍스트로 복귀할 수 있는 강력한 연결성을 제공합니다. 대규모 트래픽 환경에서도 성능 영향 없이 작동하도록 설계된 이 기법은 단순한 이미지를 지능적인 데이터 포인터로 변환하는 실용적인 해법을 제시합니다.