Atlases는 학습 사이트입니다. 16개의 긴 형식의 기술 가이드로 구성되어 있으며, 각 가이드는 12개의 챕터로 이루어진 심층 탐구 과정입니다. 사용자는 동일한 탭의 다른 창에서 실제 코드를 실행하면서 브라우저 탭에서 내용을 읽을 수 있습니다. Databases (데이터베이스) atlas는 실제 SQLite 엔진을 제공합니다. Python (파이썬) atlas는 CPython을 실행합니다. C++ atlas는 C++를 컴파일합니다. 스크린샷이나 터미널인 척하는 애니메이션 GIF는 아무것도 없습니다. 브라우저로 다운로드되어 로컬에서 실행되는 실제 인터프리터 (interpreter)입니다. 현재 atlases.vercel.app에서 라이브로 확인할 수 있으며, 저는 Claude를 페어 프로그래머 (pair programmer)로 활용하여 이를 구축했습니다.

이것은 무엇인가

핵심 컨셉은 "주제를 선택하고, 직관을 구축하라"입니다. 총 16개의 atlas가 있습니다: Databases (데이터베이스), Networking (네트워킹), Linux (리눅스), Cryptography (암호학), Compilers (컴파일러), Observability (관측 가능성), AI/LLM Engineering (AI/LLM 엔지니어링), FiveM/Lua/QBCore, Encoding & Wire Formats (인코딩 및 와이어 포맷), Python (파이썬), JavaScript (자바스크립트), C++, C, Docker (도커), n8n, 그리고 Coolify입니다. 이러한 구성은 의도적으로 개인적인 취향을 반영했습니다. FiveM RP 서버를 운영하는 것부터 n8n 워크플로우를 연결하고 Coolify로 배포하는 것까지, 제가 실제로 다루는 기술 스택입니다. 즉, 주제들은 제가 좋은 참조 자료를 원했지만 한곳에서 찾을 수 없었던 것들입니다.

각 atlas는 동일한 12개 챕터의 뼈대를 가집니다: 기원 이야기 (origin story), 툴체인 (toolchain), 기초 개념 (bedrock concepts), 작동하는 코드 스니펫 라이브러리 (working snippet library), 문제 해결/트러블슈팅 (triage/troubleshooting) 섹션, 그리고 다음 단계로 나아가기 위한 로드맵 (roadmap)입니다. 사이트 전체에 걸쳐 총 192개의 챕터가 있습니다. 이것을 단순한 긴 블로그 이상으로 만드는 것은 인터랙티브 (interactive)한 부분들입니다:

• 실제 브라우저 내 샌드박스 (sandboxes). sql.js를 통한 SQLite, Pyodide를 통한 CPython, JSCPP를 통한 C 및 C++, JavaScript REPL, 작동 가능한 미니 셸 (mini-shell), FiveM atlas를 위한 Lua 인터프리터, 그리고 관측 가능성 (observability)을 위한 실시간 PromQL 플레이그라운드(playground)가 포함됩니다. 모두 클라이언트 측 (client-side)에서 동작합니다. 백엔드도, 코드 실행 서버도 없으며, 공격할 대상도 없습니다. 당신의 코드는 브라우저를 절대 벗어나지 않습니다.
• 큐레이션된 스니펫 (snippet) 라이브러리. 알파벳 순서가 아닌, 당신이 수행하려는 작업에 따라 정리되어 있습니다.
• 인터랙티브한 문제 해결 트리 (troubleshooting trees). 증상에서 진단, 그리고 해결책까지 단계별로 안내합니다.
• 모든 챕터 끝에 있는 퀴즈. 단순히 정답/오답을 알려주는 것이 아니라 설명을 제공합니다.
• 스택 프로필 (Stack profiles). 컨텍스트를 선택하면 읽는 동안 예제들이 그에 맞춰 적응합니다.

가입도, 광고도, 트래킹 (tracking)도 없습니다. 진행 상황은 로컬 스토리지 (localStorage)에 저장되므로, 사이트가 당신이 어디까지 학습했는지 기억하기 위해 당신이 누구인지 알 필요가 없습니다.

구축 방법

기술 스택은 의도적으로 지루하게 구성되었습니다: Vite + React 18 + Tailwind를 사용하며, 라우팅 (routing)을 위해 react-router-dom을, 아이콘을 위해 lucide-react를 사용합니다. 이것이 거의 전체 런타임 의존성 (runtime dependency) 목록입니다. 각 atlas는 src/atlases/ 내의 단일 독립적인 .jsx 파일(예: db-atlas.jsx, python-atlas.jsx 등)로 구성되며, App.jsx에서 지연 로딩 (lazy-imported) 및 코드 분할 (code-split)되어 당신이 여는 atlas만 다운로드하게 됩니다. src/pages/Landing.jsx에 있는 랜딩 페이지는 이들을 나열하기만 합니다. 새로운 atlas를 추가하는 과정은 세 단계로 이루어집니다: 파일을 src/atlases/에 넣고, App.jsx에 지연 라우트 (lazy route)를 추가하고, 랜딩 페이지에 카드 하나를 추가하면 됩니다.

콘텐츠 파이프라인 (pipeline)은 제가 모든 작업에 사용하는 패턴과 일치합니다: 각 atlas가 무엇을 다루어야 하는지, 어떤 느낌을 주어야 하는지 결정하면, Claude가 챕터 초안을 작성하고, 배포 전 모든 주장에 대해 사람이 직접 사실 확인 (fact-check) 과정을 거칩니다. 샌드박스 엔진은 React 컴포넌트에 연결된 기성 WASM/JS 인터프리터입니다. 따라서 "브라우저에서 실제로 SQLite를 실행하는" 무거운 작업은 sql.js가 수행하며, 저의 작업은 이를 연결하는 접착제 역할과 그 주변의 교육적 내용을 구성하는 것이었습니다.

배포는 쉬운 부분입니다. 저장소(repo)는 GitHub의 denrod25-del/atlases에 있으며, Vercel은 main 브랜치로 푸시될 때마다 자동으로 배포합니다. 작은 vercel.json 파일이 SPA 리라이트(rewrites)를 처리하여 특정 아틀라스(atlas)에 대한 딥 링크(deep links)가 올바르게 해결되도록 합니다. npm run build를 실행하면 어디에서나 배포 가능한 정적 파일들이 담긴 dist/ 폴더가 생성됩니다. Vercel은 단지 설정이 필요 없는(zero-config) 옵션일 뿐입니다.

주의할 점 (The gotchas)

빠르게 변화하는 산업의 사실 관계는 낡기 마련이며, 잘못된 정보를 제공하는 학습 사이트는 아예 없는 것보다 더 나쁩니다. 여러 아틀라스가 시간에 민감한 주장들을 담고 있습니다. 현재의 프런티어 모델(frontier model) 라인업, 최신 C++ 및 C 표준, 현재의 PostgreSQL 및 LLVM 버전, OpenTelemetry의 GenAI 컨벤션(conventions)이 아직 안정화되었는지 여부 등이 그것입니다. 이러한 정보들은 작성 당시에는 정확했으나 조용히 부패(rot)해 갔습니다. 저의 해결책은 두 가지입니다. 첫째, 빠르게 변하는 모든 주장에는 텍스트 내에 직접 "2026년 6월 기준"과 같은 명시적인 스탬프를 찍어, 독자가 정보를 맹목적으로 신뢰하는 대신 해당 사실이 얼마나 최신인지 정확히 확인할 수 있도록 했습니다. 둘째, 이러한 스탬프를 갱신하는 것을 일회성 작업이 아닌 정기적인 유지보수 작업으로 만들었습니다. 단 한 번의 점검만으로도 실제 정보의 괴리(drift)를 포착할 수 있었습니다. 프런티어 모델 라인업은 현재의 Opus / GPT-5.5 / Gemini 라인업으로 업데이트가 필요했고, OpenTelemetry의 GenAI 시맨틱 컨벤션(semantic conventions)은 (이전 초안에서 암시했던 것처럼) 안정적인 것이 아니라 여전히 실험적(experimental) 단계였습니다. 또한 FiveM 생태계의 "Overextended"는 CommunityOx로 이름이 변경되었습니다. 교훈은 다음과 같습니다. 정보의 부패가 눈에 보이도록 주장에 날짜를 기입하고, 그 날짜를 체크리스트로 취급하십시오.

이 사이트는 단 한 명의 청중을 위해 작성되었습니다. 초기 버전은 저에게 개인화되어 있었습니다. 예시들은 제 Claw World RP 서버를 이름으로 언급했고, Linux 샌드박스(sandbox)에는 제 설정에서 가져온 사용자 이름이 하드코딩되어 있었으며, 여담(asides)들은 독자가 당연히 저일 것이라고 가정했습니다. 개인적인 참고용으로는 훌륭했지만, 공개 사이트로서는 쓸모가 없었습니다. 출시 전에 저는 비개인화(de-personalization) 작업을 수행했습니다. RP 서버 관련 언급을 제거하고, Linux 샌드박스의 예시 사용자 이름을 변경했으며(해당 사용자 이름을 검증하던 챌린지 체커들도 업데이트했습니다. 놓치기 쉬운 부분이며, 업데이트하지 않았다면 연습 문제가 작동하지 않았을 것입니다), 개인적인 여담들을 낯선 사람도 따라올 수 있는 내용으로 다시 작성했습니다. 자신을 위한 도구를 만들었다가 나중에 공유하고 싶다면, 자신도 모르게 심어두었던 가정들을 제거하는 데 실제 시간을 할애하십시오.

호스트에게 라우터(router)에 대해 알려주지 않으면, 정적 호스트(static hosts)에서 딥 링크(Deep links)가 깨집니다. 각 아틀라스(atlas)는 클라이언트 사이드 라우트(client-side route)이기 때문에, atlases.vercel.app/db로 직접 접속하거나 해당 페이지에서 새로고침을 하면 Vercel은 디스크에 존재하지 않는 파일을 요청하게 되어 404 오류가 발생합니다. 해결 방법은 vercel.json에서 SPA 리라이트(rewrite)를 설정하여 모든 알 수 없는 경로를 index.html로 다시 지정하고 React Router가 이를 처리하도록 하는 것입니다. 단 한 줄의 코드일 뿐이지만, 누군가 딥 링크를 공유했을 때 클릭하는 모든 사람에게 404 오류가 발생하기 전까지는 눈에 보이지 않습니다.

출시 내용

Atlases는 atlases.vercel.app에서 공개적으로 운영 중이며, 소스 코드는 GitHub의 denrod25-del/atlases에 MIT 라이선스로 공개되어 있습니다. 16개의 아틀라스, 192개의 챕터, SQLite, CPython, C/C++, JavaScript, 쉘(shell), Lua, PromQL을 위한 실제 브라우저 내 샌드박스(sandboxes), 챕터당 하나의 퀴즈, 문제 해결 트리(troubleshooting trees), 그리고 감사(audit)할 수 있는 날짜가 기입된 사실들이 포함되어 있습니다. 회원 가입, 광고, 추적은 없습니다. 그저 주제를 열고 읽기 시작하면 됩니다.

이 프로젝트는 이러한 방식으로 구축된 프로젝트들에 관한 시리즈의 또 다른 항목입니다. 전체 목록은 projects page에서 확인할 수 있습니다.