이 사이트를 무엇으로 만들었나 — 기능과 기술을 잇는 3D 기술 지도
기술 지도는 이 사이트의 도구들이 어떤 브라우저 기능과 라이브러리 위에 서 있는지 보여주는 페이지입니다. 파일을 다루는 도구가 아니라 저장소 자체를 3D 도시로 그린 설명 화면입니다. 기능 하나를 고르면 그것이 기대는 기술과 저장소의 소스 파일 경로가 함께 나옵니다.
이런 때 씁니다
- 이 사이트가 정말 파일을 서버로 보내지 않는지 직접 확인하고 싶을 때
- 설치 없이 브라우저 안에서만 도는 도구를 어떻게 만드는지 참고할 때
- 인터넷이 필요한 지점 — wasm을 받는 곳, 서버에 붙는 곳만 골라 보고 싶을 때
- PDF 합치기나 움짤 만들기가 내부적으로 어떤 단계를 거치는지 궁금할 때
- SPAKE2·WebRTC·EXIF 같은 절차를 글이 아니라 도식으로 보고 싶을 때
보는 방법
- 도시를 드래그로 돌리고 휠로 확대한 뒤, 유닛을 누르면 그 기능의 설명과 소스 경로가 오른쪽에 열립니다.
- "기능·기술·설명 검색"으로 찾거나 "레인"으로 브라우저 네이티브·순수 JS·직접 구현·wasm을 갈라 봅니다.
- "네트워크 타는 것만"을 켜면 인터넷이 필요한 지점만 남습니다.
- "파이프라인 보기" 뒤 "파일 흘려보내기"를 누르면 파일이 단계마다 무엇으로 바뀌는지 따라갑니다.
- "안 들여다보기"로 내부 절차 도식을 열고, "거리 시점"에서는 WASD로 도시를 걸을 수 있습니다.
자주 묻는 것
- 여기서 파일을 변환하거나 합칠 수 있나요?
- 아닙니다. 기술 지도는 도구가 아니라 저장소를 설명하는 메타 페이지라 파일을 올리는 자리가 없습니다. 실제 변환은 각 도구 페이지에서 합니다.
- 이 페이지도 서버에 무언가 보내나요?
- 아닙니다. 지도에 그려지는 내용이 전부 페이지 안에 들어 있어 바깥으로 나가는 요청이 없습니다. 다만 다른 도구와 달리 이 페이지만 3D 때문에 파일을 나눠 받는 구조라, 한 장짜리 HTML로 내려받아 오프라인에서 여는 형태는 아닙니다.
- 3D 도시가 뜨지 않습니다.
- WebGL을 쓸 수 없는 브라우저에서는 도시가 그려지지 않습니다. 그때도 오른쪽 목록으로 기능과 기술을 전부 둘러보고 상세 설명과 소스 경로를 볼 수 있습니다. 브라우저는 크로미엄(Chrome·Edge) 기준입니다.
- 설명이 실제 코드와 어긋나 있지는 않나요?
- 모든 항목에 저장소 소스 경로가 붙어 있습니다. 빌드 검사에서 그 경로가 실재하는지, 서드파티 목록과 접속하는 호스트가 코드와 일치하는지 확인하므로 파일을 옮기거나 의존성을 바꾸면 검사가 먼저 깨집니다.
- 건물 모양에 의미가 있나요?
- 있습니다. 유닛 높이와 앞면 눈금은 그 기능의 소스 줄 수, 왼쪽 면 포트는 기대는 기술, 지붕 안테나는 바깥과 통한다는 표시, 덕트는 wasm입니다. 성벽 안이 브라우저 안이고, 성문 밖 격자탑 하나가 실제로 붙는 서버 하나입니다.
함께 쓰는 도구
지도에 그려진 도구는 따로 열어서 씁니다. 문서를 정리하려면 PDF 합치기, 폰과 PC 사이에 파일을 옮기려면 파일 전송, JSON 변환·해시·QR 같은 잔손질은 개발자 도구에서 합니다. 전부 회원가입 없이 무료로 쓰고, 파일은 브라우저 밖으로 나가지 않습니다.