거울

이 방은 거울을 사이트 자체로 돌립니다. 비유가 아니라, 지금 읽고 있는 이 페이지를 만든 빌드에서 실제로 측정된 수치와, 이 사이트가 무엇과 통신하며 얼마의 비용이 드는지에 대한 솔직한 설명입니다.

무엇으로 만들어졌는가

React 18, TypeScript, Vite. 직접 손으로 작성했으며, 사이트 빌더나 템플릿을 사용하지 않았습니다.
스타일링에는 Tailwind, 호버 시 펼쳐지는 내비게이션과 책 부채꼴 히어로에는 `motion`을 사용했으며, 다른 애니메이션 라이브러리는 사용하지 않았습니다.
three.js와 @react-three/fiber, @react-three/drei는 정확히 하나의 방(Brain)에서만 사용됩니다. War Room 자체의 별자리는 3D가 아닌 단순 SVG이며, 232개의 에이전트를 렌더링할 때 의도적으로 가벼움을 선택한 결과입니다.
@noble/ed25519와 @noble/hashes는 Heartbeat, Sketch, Verifier, Tre에서 방문마다 사용되는 일시적 서명 키에 쓰입니다.
글꼴(Inter, Newsreader, IBM Plex Mono)은 자체 호스팅되며 문자 체계별로 서브셋화되어 있습니다. Google Fonts나 다른 제3자 글꼴 요청은 전혀 없습니다.

무엇과 통신하는가

api.drand.sh, League of Entropy의 공개 무작위성 비콘입니다. 키가 필요 없고 읽기 전용입니다.
api.open-meteo.com, 푸터와 Tre 방에 표시되는 오슬로와 발리의 실시간 기온을 위한 것입니다. 키가 필요 없고 읽기 전용입니다.
그 외에는 아무것도 없습니다. 분석 도구도, 추적 픽셀도, 광고 네트워크도, 쿠키 배너도 없습니다. 관리할 쿠키 자체가 없기 때문입니다. 이 문장을 쓰기 전에 전체 소스 트리를 실제로 검색해 일반적인 이름들을 확인했으며, 추측하지 않았습니다.

어떻게 렌더링되는가

모든 Estate 페이지와 모든 방은 크롤러나 느린 연결이 자바스크립트 한 줄이라도 실행하기 전에, 경로별로 언어별로 실제 정적 HTML로 사전 렌더링됩니다. 그 후 인터랙티브 레이어가 변경 없이 그 아래에서 시작되어, 이를 실행할 수 있는 브라우저를 가진 방문자에게 제공됩니다.

각 방의 무게

Gzip으로 압축된 자바스크립트로, 각 방 고유의 코드 분할 청크입니다. 방문자는 Estate 셸 비용을 한 번만 지불하고, 그 후에는 실제로 연 방에 대해서만 비용을 지불합니다. 이는 CONSTELLATION-SCAFFOLD의 코드 분할 규칙을 따릅니다.

Estate shell (every page pays this once)108.99 kB

Heartbeat2.42 kB

Tre3.06 kB

Gravity4.39 kB

Appendix3.23 kB

Sketch3.82 kB

Verifier5.94 kB

War Room5.74 kB

Brain232.68 kB

three.js/R3F, by far the heaviest room. Only paid by a visitor who actually opens /brain, never by anyone else.

해당 방을 마지막으로 수정한 빌드 시점에 측정된 값이며, 실시간으로 가져온 것이 아닙니다.

드는 비용

지금 당장은 아무 비용도 들지 않습니다, 아직 실서비스가 아니기 때문입니다. 이것은 스테이징 저장소(buge4/bjornvhauge-com)이며 도메인이 아닙니다. 실제로 서비스가 시작되면 정직한 예상 비용은 통상 운영 비용 0달러입니다: CDN 상의 정적 파일, 서버 프로세스 없음, 데이터베이스 없음, 위 스택 어디에도 유료 API 키가 없습니다. 만약 그것이 바뀐다면 이 방도 함께 바뀔 것이며, 그 반대는 아닙니다.