전체 체인 관찰성: 느린 부분을 한 눈에 확인

볼 수 없고 통제할 수 없는 시스템

시스템이 더욱 복잡해지고 자율적으로 실행하기 위해 AI에 점점 더 많은 단계를 넘겨줌에 따라 근본적인 질문이 표면화됩니다. 시스템 내부에서 실제로 무슨 일이 일어나고 있나요? 작업이 전송되었지만 한동안 아무 응답도 없습니다. 프런트엔드, 백엔드에서 멈춰 있습니까? 아니면 일부 에이전트가 작업 중입니까? 표면적인 증상만으로는 추측만 할 수 있습니다. 오늘은 전체 시스템을 "블랙 박스"에서 "투명 상자"로 전환한 것입니다. 즉, UI 클릭부터 백엔드 처리, 차례대로 실행되는 에이전트를 거쳐 화면의 결과까지 모든 작업의 ​​전체 여정을 추적 가능하고 볼 수 있게 만드는 것입니다. 새로운 게임플레이를 추가하지는 않지만 복잡한 시스템을 장기적으로 조종하기 위한 전제 조건입니다. 볼 수 있는 것만 제어할 수 있고, 제어할 수 있는 것만 자신있게 더 많은 것을 전달할 수 있습니다. 관찰 가능성은 모든 최적화와 디버깅의 출발점입니다. 명확하게 볼 수 없는 것은 개선할 수 없습니다.

단일 트레이스 스레딩 프런트 엔드, 백엔드 및 에이전트

그날의 핵심 작업은 "추적"을 실제로 전체 스택을 스레드하는 체인에 연결하는 것이었습니다. 추적이란 작업이 흐르는 시스템의 어떤 계층에 관계없이 해당 식별자를 전달하고 타임스탬프를 남기도록 단일 식별자로 작업에 스탬프를 찍는 것을 의미합니다. 따라서 나중에 흩어져 있는 조각이 해당 식별자에 의해 하나의 완전한 타임라인으로 묶일 수 있습니다. 오늘 달성한 것은 해당 식별자를 프런트 엔드에서 백엔드와 에이전트 실행까지 전달하는 것입니다. 모든 작업은 "먼저 프런트 엔드에서 소요된 시간, 그 다음 백엔드, 다음으로 어떤 에이전트가 인계받았는지, 소요된 시간"에 대한 전체 궤적으로 재구성될 수 있습니다. 기술적인 핵심은 이 추적 컨텍스트를 경계에 삭제하는 대신 모든 레이어 경계에 걸쳐 올바르게 전파하는 것입니다(이렇게 하면 전체로 조립할 수 없는 격리된 조각만 남게 됩니다). 이 전체 체인 추적이 존재하면 가장 모호하고 조사하기 어려운 불만 사항("시스템이 느리다" 또는 "시스템이 멈췄습니다")을 정확하게 찾아내는 눈금자를 얻게 됩니다.

브라우저 추적기 + 정지 감시 장치

이 전체 체인 추적 내에서 프런트엔드 세그먼트에는 "UI의 작업에서 최종 렌더링까지" 구간을 따라가는 전용 브라우저 측 추적기가 있습니다. 이는 매우 구체적인 혼란을 해결합니다. 때때로 클릭하거나 입력하면 인터페이스의 응답이 느려집니다. 요청이 아직 전송되지 않았습니까, 백엔드에서 기다리고 있습니까, 아니면 프런트 엔드 자체가 어딘가에서 렌더링을 멈췄습니까? 브라우저 추적 프로그램은 이 구간을 눈에 보이는 단계로 나누어서 정체된 단계를 정확하게 확인할 수 있습니다. "스톨 워치독"이 함께 제공됩니다. 키 흐름의 리듬을 관찰하고 단계가 예상 시간 이상으로 멈춘 순간 정지 상태에 플래그를 지정하여 인터페이스가 죽었거나 사용 중인지 확신할 수 없게 합니다. 인터페이스 상호 작용에 중점을 둔 도구의 경우 "프론트 엔드는 무엇으로 바쁘고 정체되어 있습니까?"는 사용자가 가장 직접적이고 자주 묻는 질문입니다. 이 구간을 관찰 가능하게 만들면 추적 범위가 사용자에게 가장 가까운 지점까지 확장됩니다.

백엔드 수집 및 보고 + 각 에이전트가 추적을 수행합니다.

체인의 다른 두 세그먼트는 나란히 채워졌습니다. 백엔드는 원격 측정 싱크를 세웠습니다. 모든 곳에서 생성된 추적 및 로그가 여기에 수집되어 보고되고, 프런트 엔드에서 가져온 추적 컨텍스트가 더 전달되어 작업의 백엔드 부분이 공백 없이 동일한 추적 선에 계속 유지되도록 합니다. 에이전트 세그먼트는 각 실행 차례를 동일한 추적으로 엮었습니다. 즉, 에이전트가 작업을 수행하고 차례를 실행할 때 해당 차례에 걸린 시간과 수행한 작업이 이 추적에 하나의 노드로 기록됩니다. 이 두 가지를 함께 사용하면 프론트엔드 클릭부터 백엔드 처리, 에이전트의 단계별 작업까지 모두 한 줄에 묶인 "풀체인"이 이름에 걸맞게 구현됩니다. 핵심 경험이 "AI 에이전트 팀의 작업 지시"인 플랫폼의 경우 "각 에이전트가 이번 차례에 바쁜 것은 무엇이며, 어디가 느린가"가 바로 눈에 보여야 하는 것입니다. 에이전트 실행을 추적으로 가져오는 것은 AI의 작업 프로세스가 더 이상 피어링할 수 없는 블랙박스가 아니라는 것을 의미합니다.

그래픽 디버깅: 검은 화면 버그를 재현하기 위해 초기 상태 기록

관찰 가능성과 마찬가지로 렌더링 디버깅 도구도 오늘날 더욱 강력해졌습니다. 이미 "프레임을 캡처하고 비교를 위해 재생"할 수 있었지만 핵심 부분인 초기 상태가 누락되었습니다. 그림은 어떤 시작점부터 단계별로 그려지며, 캡처가 그리기 동작만 기록하고 시작 시 리소스의 초기 내용은 기록하지 않는 경우 재생은 "잘못된 시작점에서 재생"에 해당하며 일부 문제는 단순히 재현되지 않습니다. 오늘은 이를 채워주었습니다. 이제 프레임 캡처는 관련 리소스의 초기 상태도 기록하고, 동일한 시작에서 전체 프레임을 정확하게 재구축하기 위해 리플레이에 시드됩니다. 이는 "화면이 검게 변하고 개체가 사라졌습니다"와 같은 가장 심각한 문제에 특히 유용합니다. 일부 초기 상태가 잘못 설정되어 발생하는 경우가 많았으며 이전에는 리플레이에서 재현할 수 없어 찾기가 매우 어려웠습니다. 이제 검은색 화면은 재생 시 충실하게 재현되어 "가끔씩 발견할 수 없는" 고스트 버그를 "안정적으로 재생산하고 반복적으로 연구하고 수정할 수 있는" 구체적인 개체로 바꿉니다. 이는 오늘의 전체 체인 추적과 동일한 동전의 양면입니다. 하나는 "시스템이 느린 곳"을 볼 수 있고 다른 하나는 "그림이 잘못된 곳"을 볼 수 있습니다.

오늘의 의미

이날 추가된 것은 성숙 시스템에 없어서는 안될 감각 기관입니다. 이전 며칠 동안 플랫폼은 움직이는 캐릭터, 편집 가능한 장면, 생성 가능한 자산, 모두에게 오픈 소스 제공 등 새로운 기능을 계속해서 성장시켰습니다. 그러나 더 유능하고 자율적이 될수록 "내부에서 무슨 일이 일어나고 있는지 명확하게 보는" 것이 더 중요해집니다. 자체 내부를 볼 수 없는 시스템은 언제 문제가 발생하는지 추측만 할 수 있고, 속도 저하가 어디서 오는지 알지 못하며, 결국 진단할 수 없다는 통제력을 잃게 됩니다. 오늘은 추적을 프런트 엔드, 백엔드 및 에이전트에 걸쳐 하나의 라인으로 연결하고 렌더링 디버깅이 초기 상태를 기록하여 그림 문제를 안정적으로 재현할 수 있도록 했습니다. 즉, 플랫폼에 성능과 흐름을 위한 눈, 그림과 렌더링을 위한 눈을 동시에 두 쌍씩 제공하는 것입니다. "시스템이 수행하는 작업"과 "그림이 왜 이렇게 보이는지"를 모두 가시화한다는 것은 속도 최적화, 결함 진단 또는 AI에 더 많은 자율성을 자신 있게 부여하는 등 다음에 올 모든 것이 신뢰할 수 있는 증거에 달려 있음을 의미합니다. 능력은 "플랫폼이 무엇을 할 수 있는지"를 결정하고 관찰 가능성은 "얼마나 신뢰할 수 있는지"를 결정합니다. 오늘은 후자를 차지했습니다.