생각을 탐색하면서도 길을 잃지 않는 마인드맵
작은 행성 모양의 마인드맵입니다. 메모를 열면 하위 메모가 그 주위에 나타나고, 전체 그림은 계속 보입니다.
필요
대부분의 마인드맵 도구에서는 가지를 펼치면 화면이 복잡해지거나 새 페이지로 넘어가 버려, 어디서 왔는지 놓치게 됩니다.
아이디어
익숙한 생각의 나무는 그대로 두고, 그 안을 이동하는 방식만 바꾸자는 것입니다.
만든 것
- 메모마다 하위 메모가 주위의 작은 구 위에 나타나고, 상위 단계는 화면에 그대로 남는 탐색 방식.
- 편안함을 기준으로 고른 조작: 휠로 확대·축소, 드래그로 회전, Alt + 드래그로 화면 이동, 휴대폰에서는 더 큰 터치 영역.
- 이전 버전 두 가지(평면 그림, 그리고 클릭할 때마다 장면이 바뀌는 3D)는 사람들이 방향을 잃게 만들어 교체했습니다.
- 작은 공개 데이터 피드를 통해 이 웹사이트의 프로젝트도 자동으로 지도에 표시합니다.
결과
- 3시험한 탐색 방식, 그중 1개 채택
- 22편집 보호 우회 시도 — 모두 차단
- 2프로젝트 전체의 의존성 수
- 2026년 9월 5일운영 시작일
공개 지도는 이 탐색 방식을 실제로 보여 주는 데모입니다. 변경 사항은 자동 테스트를 통과해야만 운영 환경에 반영됩니다.
화면으로 보기
배운 점
세 번의 버전을 거치는 동안 데이터는 거의 바뀌지 않았고, 바뀐 것은 이동하는 방식뿐이었습니다. 둘을 분리해 둔 덕분에 데이터를 건드리지 않고 화면을 두 번이나 다시 만들 수 있었습니다.
기술 세부 정보 기술 스택, 아키텍처, 설계 결정 — 기술 담당자용
기술 스택
- Three.js
- 순수 JavaScript
- Node.js + Express
- SQLite (node:sqlite)
- Cloudflare Tunnel + Access
- systemd
- GitHub Actions
작동 방식
- 재귀 테이블 하나 notes(id, parent_id, x, y, title, content)를 사용하며, x와 y는 상위 메모의 구 위의 경도와 위도(도 단위)입니다.
- 브라우저가 불러오는 라이브러리는 Three.js 하나뿐이며, 직접 작성한 약 760줄의 JavaScript가 배치, 탐색, 편집을 처리합니다. 카메라는 OrbitControls 대신 구면 좌표를 직접 제어합니다.
- 하위 구의 반지름은 상위 구의 0.46배이며, 탐색 중에 장면 그래프를 다시 만들지 않습니다.
- 읽기는 공개, 쓰기는 앞단의 Cloudflare Access로 보호되며, 서비스는 터널 뒤에서 127.0.0.1에서만 대기합니다. 우회 시도 22건(대소문자 변경, 이중 슬래시, ‘..’ 경로, URL 인코딩, 다른 HTTP 메서드)은 모두 로그인 페이지로 이어졌습니다.
- 적대적 관점의 검토에서 실제 결함 두 가지를 찾아 당일 고쳤습니다. 모든 경로에 걸린 JSON 파서 때문에 익명 방문자가 시스템 로그에 기록을 남길 수 있었고, 네트워크 로딩이 한 번만 실패해도 탐색이 멈췄습니다.
- GitHub Actions를 통한 지속 배포. 테스트를 통과해야만 운영 환경이 갱신됩니다.
발생한 문제와 해결
- 휴대폰에서 작은 메모 표식(6~10 px)을 탭하면 자주 빗나갔습니다. 22 px의 터치 허용 범위를 두고 다음 단계를 미리 불러오자, 시뮬레이션 탭 성공이 12/17에서 17/17로 늘었습니다.
- 글로 효과(bloom)가 휴대폰에서 병목이었습니다. 휴대폰에서 이 효과를 끄자, 여러 단계를 오가는 비행 장면이 초당 20프레임에서 37프레임으로 올라갔습니다.
아직 부족한 점
- 편집은 저만 가능 — 의도한 설계
- 터치 조작은 아직 다듬는 중