클릭부터 주문확인까지 211.4밀리초, 인터랙티브 사이트로 낱낱이 시각화
- 200ms 프로젝트는 구매 버튼 클릭부터 주문 확인 화면이 뜨기까지 걸리는 211.4밀리초를 스크롤 연동 애니메이션으로 단계별 시각화한 웹사이트임
- 요청은 샌프란시스코 카페에서 미국 애슈번까지 약 4,700km 광섬유를 거치며 노스아메리카를 6번 왕복하고, 약 40대 기기와 1억 줄에 달하는 타인의 코드를 통과함
- 클릭 발생 후 첫 5ms 동안 터치패드 정전용량 변화, 인터럽트, HID 드라이버, 윈도우 서버, 크롬 브라우저 프로세스, 렌더러 히트테스팅을 순서대로 거침
- 애슈번에서는 로드밸런서가 4개 노드 프로세스 중 하나인 PID 1447로 요청을 전달하고, 포스트그레스 DB는 0.35ms 거리에 위치함
- 제작자는 Ishtmeet Singh이며 페이지 내에 Node.js 백엔드 프레임워크 학습 자료 판매 프로모션이 포함돼 있고, HN 댓글에서는 시각화 완성도에 대한 찬사와 함께 일부 설명(바이올렛 색 사용 규칙 등)이 LLM이 작성한 듯하다는 지적이 나옴
Hacker News 의견들
사실 200ms도 사람이 인지는 함. 그냥 나쁜 감정을 안 일으킬 뿐이지
나는 경험적으로 세 가지 기준이 있음. 50ms에서 알아채고, 400ms에서 신경쓰이고, 2000ms 넘으면 응답 없을 때 뭔가 멈췄나 의심하게 됨
반대로 어떤 UI는 일부러 딜레이를 넣기도 함. 너무 빨리 끝나면 사용자가 진짜 처리된 건지 못 믿어서 그럼
200ms은 너무 느림, 50ms이 목표여야 함. 근데 미국처럼 땅이 넓으면 물리적으로 50ms 자체가 불가능함. 독일에서 100ms 넘으면 화내는 유저를 미국 대상으로 서비스하려면 완전히 다른 아키텍처 짜야 함
이 페이지 진짜 대단함. 40년치 컴퓨터 네트워크 지식이 롤러코스터처럼 압축된 느낌이라 만든 사람이 부러움
근데 순서가 좀 이상함. 저 정도 지식 가진 사람이 이렇게 구성했을 것 같지 않고 LLM이 만들고 사람이 프롬프트만 대충 검수한 느낌임
바이올렛 색은 데이터 이동만 표시한다고 해놓고 실제론 툴팁, 텍스트, 헤더 등 여기저기 다 바이올렛임. 이거 완전 LLM이 지어낸 설명 같음
온라인 결제인데 200ms면 오히려 너무 빨라서 뭔가 잘못된 줄 알 것 같음. 결제 처리는 좀 걸려야 신뢰가 감
이 시나리오엔 실제 결제 검증이 빠져있음. Visa 트랜잭션이 0.5초보다 빠르게 끝날 수는 없다고 봄
터치패드 액추에이션부터 유저스페이스 클릭 이벤트까지 1.2ms는 너무 빠른 수치임. 하드웨어가 보통 90~130Hz, 좋아야 250Hz 샘플링이라 커널이 인지하는 데만 2ms는 걸릴 것 같음
스타벅스나 CVS에서 카드 긁으면 왜 5~10초나 걸리는지 궁금함
POS에서 결제 승인 서버까지 구간이 고지연 회선인 경우가 많고, 대면결제는 몇 초 지연돼도 손님이 안 나가니까 온라인만큼 지연 최적화를 안 해서 그럼. 오래된 시스템 거치고 리스크 체크도 추가되고 그럼