데이터 분석2026. 6. 13.
아이디어를 떠올릴 때 필요한 마인드맵
claude로 만든 깔끔한 마인드맵
만든 동기
머릿속에 흩어진 정보들을 한눈에 정리하고 싶었어요. 기존 메모앱보다 시각적으로 연결 관계를 보여주는 마인드맵이 적합하다고 생각해서 직접 만들게 됐어요.
어려웠던 점
Canvas 위에서 노드 좌표 계산과 확대/축소·패닝을 동시에 처리하는 게 복잡했어요. 화면 좌표와 월드 좌표를 계속 변환해야 해서 처음엔 클릭 위치가 자꾸 어긋났어요. 기능을 하나씩 추가할수록 코드가 얽히면서 Undo/Redo 상태 관리나 접기/펼치기 로직이 서로 충돌하는 경우가 생겼어요. 미니맵에서 클릭한 위치를 메인 캔버스의 뷰포트로 정확하게 변환하는 계산이 까다로웠어요.
해결한 방법
화면↔월드 좌표 변환 함수(s2w)를 하나로 통일하고, 모든 마우스 이벤트가 이 함수를 거치도록 구조를 정리했어요. 상태를 JSON으로 직렬화해 배열에 스냅샷으로 쌓는 방식으로 Undo/Redo를 구현했더니 기능 추가가 훨씬 수월해졌어요. 미니맵은 전체 노드의 바운딩박스를 계산하고 스케일 비율(ms)을 따로 저장해뒀다가 클릭 좌표에 역산 적용하는 방식으로 해결했어요.