클릭 한 번을 211.4밀리초로 쪼갠 웹사이트

• 샌프란시스코 카페에서 화요일 오전 9시 41분에 누른 구매 버튼이 211.4밀리초 뒤 주문 완료로 돌아오는 과정을, 스크롤에 맞춰 시계가 흐르는 한 페이지로 만듦
• 경유지가 일곱 곳임. 노트북, 천장의 AP, 카페가 산 ISP, 4,700km 광섬유, 애슈번의 로드밸런서, node 프로세스 PID 1447, 그리고 0.35ms 거리의 postgres
• 클릭 1밀리초 만에 정전용량 변화가 인터럽트로, HID 드라이버로, 윈도 서버로, 크롬 브라우저 프로세스로 넘어감. 노트북 밖으로는 아직 아무것도 안 나감
• 차가운 연결의 값이 71ms로 전체 예산의 3분의 1임. 그때까지 보라색 점은 샌프란시스코에 그대로 있고, 대륙을 건넌 건 페이로드 없는 연결 설정뿐
• HN은 이 페이지를 LLM이 만든 것으로 의심함. 페이지가 스스로 “보라색은 데이터에만 쓴다”고 선언해놓고 시계·툴팁·헤더에도 같은 색을 쓴 게 근거

출처: 200 Milliseconds — thenodebook.com

손끝이 유리를 누르고 1밀리초

이야기는 정전용량에서 시작합니다. 손가락 끝이 유리 아래 격자판에서 전하를 끌어가고, 그 격자를 훑던 컨트롤러가 움푹 들어간 지점을 찾아 인터럽트를 올립니다. 하드웨어 신호를 받은 CPU가 하던 일을 멈추고 드라이버 코드로 뛰어들었다가, 드라이버가 끝나면 멈춰뒀던 일로 돌아가는 거죠.

전달 사슬이 네 단계입니다. 터치패드 컨트롤러가 정전용량 변화를 인터럽트로 올리고, HID 드라이버가 x 512 · y 288 · button 1 down 리포트를 읽고(HID는 키보드·마우스·터치패드가 공유하는 범용 프로토콜이라 드라이버 하나가 전부를 읽습니다), 화면을 소유한 윈도 서버가 맨 앞 창인 크롬으로 이벤트를 보내고, 크롬 브라우저 프로세스가 탭 4의 렌더러로 마우스 이벤트를 넘깁니다.

여기까지가 1밀리초입니다. 소프트웨어 네 겹을 지났는데 노트북 밖으로는 아직 아무것도 나가지 않았습니다.

렌더러 메인 스레드가 어느 요소를 눌렀는지 계산합니다. html → body → main → section.product → div.actions → button.buy로 여섯 상자 깊이를 내려가 <button class="buy">에 도달하는 데 0.8밀리초쯤 걸리고요.

대륙을 건넌 건 페이로드가 아니었다

무선 구간에서 첫 사고가 납니다. 프레임이 안테나를 떠난 바로 그 마이크로초에 같은 채널의 다른 기기가 송신해 두 신호가 서로를 뭉갰거든요. 라디오가 무작위 백오프를 골라 차례를 기다렸다 다시 보내면서 시계에 1.2밀리초가 붙습니다.

애슈번까지는 4,700km입니다. 이 경로에서 왕복 한 번이 62밀리초고요.

TCP 연결이 열리는 동안 재밌는 일이 벌어집니다. 443 포트를 소유한 프로세스는 epoll_wait 안에서 잠들어 있는데, SYN 하나로는 깨어나지 않습니다. 커널이 혼자 세그먼트를 받아 SYN 큐에 반개방 항목을 넣죠. 그 큐가 1,024개를 담고, 반개방인 이유는 마지막 ACK가 아직 31밀리초 저편에 있기 때문입니다.

TLS 1.3이 왕복 한 번을 아끼는 방식도 나옵니다. TLS 1.2는 키 교환 수학을 합의하는 데 온전한 왕복 하나를 먼저 썼는데, 1.3은 첫 메시지에 key_share로 X25519 공개값을 실어 보냅니다. 거의 모든 서버가 지원하는 곡선이라 대개는 이걸로 끝나고, 그만큼 핸드셰이크가 한 왕복 빨리 마무리됩니다. legacy_version에 0x0303, 그러니까 “TLS 1.2”가 적혀 있는 건 중간에 낀 방화벽과 호텔 프록시가 모르는 버전 번호를 잘못 다루기 때문이고, 실제로 쓰는 버전은 옛 파서가 건너뛰는 확장 필드에 들어 있습니다.

여기서 이 페이지가 가장 잘 보여주는 사실이 나옵니다.

“보라색 점은 당신이 클릭한 이후로 샌프란시스코에 머물러 있었다. 대륙을 건너갔다 온 것은 페이로드가 없는 연결 설정이다. 이 세그먼트가 도착하면 시계는 71ms를 가리키는데, 전체 예산의 3분의 1이다. 그게 차가운 연결의 값이다.”

(“The violet dot has stayed in San Francisco since you clicked. What crossed the country and came back was connection setup, with no payload. When this segment lands, the clock will read 71 ms, a third of the whole budget. That is what a cold connection costs.”)

바이트 단위까지 내려가는 대목도 있습니다. 레코드의 첫 5바이트는 평문으로 갑니다. 17은 핸드셰이크가 아니라 애플리케이션 데이터라는 표시고, 03 03은 또 한 번 TLS 1.2를 주장하고요. 00 dc는 220으로 뒤에 오는 길이인데, 암호문 204바이트에 16바이트 태그를 더한 값입니다. 5바이트 헤더를 되돌려 더하면 225가 됩니다.

자기가 세운 규칙을 자기가 어겼다

페이지 첫머리에 읽는 법이 적혀 있습니다. 스크롤하면 이야기와 시계가 함께 나아가고, 이야기가 수업을 위해 멈추면 위쪽 시계가 얼어붙으며 하얗게 변한다는 식이죠. 그중 한 줄이 문제가 됐습니다.

“보라색은 움직이는 데이터를 표시하며, 언제나 위에서 아래로 간다. 페이지의 다른 어떤 것도 그 색을 쓰지 않는다.”

(“Violet marks the data as it moves, always top to bottom. Nothing else on the page uses that color.”)

Retr0id는 화면에 보이는 보라색 요소를 셋 세었습니다. 왼쪽 위의 ms 글자, 그 옆 점, 아래쪽 가로 타임라인의 점. 스크롤하면 더 나오고요. 그가 보기에 보라색은 그냥 이 페이지의 강조색이고, 그렇다면 저 문장은 앞뒤가 안 맞습니다. joshstrange도 같은 대목이 필요 이상으로 거슬렸다고 적었어요.

이 페이지의 재료 자체는 훌륭합니다. 이미지도 영상도 없이 보라색 점 하나로 211.4밀리초를 끌고 가는 구성이고, beders는 컴퓨터와 네트워크에 관해 40년간 쌓은 지식을 롤러코스터처럼 훑게 해줬다며 만든 사람이 부럽다고까지 했습니다. eterm은 암호화된 메시지가 평문을 덮어쓰는 CSS 애니메이션이 근사하다고 짚었고요.

그런데 스레드의 절반은 그 훌륭함을 두고 “이걸 사람이 만들었나”를 물었습니다. 자기가 첫 화면에 내건 규칙을 자기가 지키지 않은 페이지에서, 그 질문은 트집이 아니라 자연스러운 반응입니다. 만든 물건의 완성도와 그 물건을 검수했다는 신뢰는 별개로 쌓이니까요.