Fable을 사용해 일주일 만에 840만 개의 실제 별이 포함된 우주 아틀라스를 만들었습니다

직접 해보기: https://universeatlas.org
(WebGPU 필요: 크롬/엣지, 윈도우용 파이어폭스, macOS/iOS 26 이상 사파리)

소스 코드 (MIT): https://github.com/chrisjz/universe

간단한 소개

본업은 일반 소프트웨어 엔지니어고, 취미로 게임 개발을 좀 해. Fable을 써볼 기회가 생겼길래, 좀 말도 안 되는 걸로 테스트해보고 싶더라고. 우주 그 자체면 어떨까 싶었지. 결과물은 우주 거대 구조부터 쿼크까지, 실제 측정된 크기와 거리, 속도로 렌더링하는 아틀라스야. 고유 운동이 반영된 실제 Gaia DR3 별들, 실제 거리에 배치된 260만 개의 SDSS 은하, 실제 궤도를 도는 행성들, 실시간 위성 데이터, 그리고 8월 12일 아이슬란드를 통과하는 개기일식까지 실제 시간과 10분 오차 범위 내로 구현했어. 마우스, 키보드, 터치로 어디든 날아다닐 수 있고, T를 누르면 가이드 투어도 가능해.

설정 및 수치

• Max(5x) 플랜에서 Fable 5를 사용한 Claude Code
• 일주일 조금 넘는 기간: 92개의 PR 병합, 237개의 커밋, 약 14,500줄의 TypeScript 및 WGSL 코드
• 엔진 용량은 gzipped 기준 90kB, 런타임 의존성 제로, 게임 엔진 없이 순수 WebGPU로 구현

Fable이 한 일

• 사실상 코드 전부: 렌더러, 궤도 역학, 데이터 파이프라인
• 물리 엔진: 케플러 솔버, SGP4 위성 궤도 전파, 레이마칭 기법으로 구현한 대기, 궁수자리 A* 주변의 중력 렌즈 효과
• 내가 보고한 모든 버그 진단 (보통 URL 하나만 던져줘도 해결함)

내가 한 일

• 92개 PR 전부 검토 및 병합
• 사용자처럼 돌아다니면서 고칠 만한 버그 찾기: 화성에서 줌아웃할 때 나타나는 하얀 섬광(카메라가 지표면 1,500km 아래에 처박혀 있었음), 태평양 한가운데 뜨는 회색 "지도 데이터 없음" 타일, 바다 위에서만 보이는 타일 이음새 등
• 다음에 뭘 만들지, 뭘 건너뛸지 같은 의사결정이 필요한 모든 부분

속도를 낼 수 있었던 비결

믿지 말고 검증해라. 행성 위치는 CI에서 JPL Horizons 데이터와 비교해서 테스트하고, 0.2도 이상 오차가 나면 바로 실패 처리해. 데이터 생성기에는 잘못된 타일이 생성되지 않도록 물리적 게이트를 걸어뒀어. CI는 실제 WebGPU 장면을 소프트웨어 Vulkan으로 렌더링해서 픽셀 단위로 기준값과 비교해. 모든 뷰는 결정론적인 URL로 되어 있어서, 시각적 버그를 발견하면 채팅창에 링크만 붙여넣으면 Fable이 헤드리스 환경에서 정확히 그 프레임을 재현하고 이진 탐색으로 버그를 잡아냈지.