Morph Map으로 코드 구조를 그리고 리팩터링 계획을 비교한다

Morph Map은 코드 프로젝트나 웹사이트를 상자와 화살표로 나타내고, 현재 구조와 계획한 구조를 비교해 AI 코더에게 전달할 작업 요약을 만드는 도구다. 제작자 Danny Natha는 설치나 계정 없이 HTML 파일 하나로 작동하며 데이터가 브라우저 밖으로 나가지 않는다고 설명한다.

웹에서 Morph Map 열기를 눌러 Examples 메뉴의 예제를 고르거나, 스캔된 프로젝트 7개를 살펴볼 수 있다. 직접 코드 프로젝트를 스캔하려면 Node 18 이상이 필요하다.

코드 프로젝트에서는 다음 명령으로 지도를 만든 뒤 index.html에서 Import를 눌러 JSON 파일을 불러온다. 스캐너는 JavaScript, TypeScript, Python, Vue, Svelte, HTML을 읽는다.

node scanner/morph-scan.js ./your-project --out my-map.json

웹사이트는 브라우저에서 사이트를 연 뒤 개발자 콘솔에 scanner/morph-web.js를 붙여 넣고 실행한다. 최대 40개의 공개 페이지를 읽어 지도 데이터를 복사한다. 스캐너는 먼저 robots.txt를 확인하고 크롤러가 피해야 한다고 표시한 페이지는 건너뛰며, 페이지 사이에 대기한다.

지도에서 현재 구조를 편집하는 대신 Planned 지도에서 상자를 추가·삭제·이름 변경하고 연결하거나 메모를 남길 수 있다. Play로 두 구조의 변화를 애니메이션으로 보고, Report 탭에서 계획이 발견 사항을 얼마나 해결하는지 표시할 수 있다. 계획을 확정하면 Claude Code, Cursor 등 AI 코더에 전달할 단계별 작업 요약을 작성한다.

복잡도 점수는 0~100이며 Today와 Planned에 같은 계산식을 적용한다. 상자 수, 상자당 화살표 수, 최상위 상자에서의 최대 단계 수, 데이터 저장소에 닿는 점선 화살표 수를 기준으로 점수를 산정한다.

점수 35 미만은 Light, 35 이상 65 미만은 Medium, 65 이상은 Heavy로 분류한다. 코드 분석은 프로그램 시작 지점, 다른 파일이 많이 의존하는 파일, 순환 참조, 400줄이 넘는 파일, 연결되지 않은 파일, 외부 패키지를 살핀다. 웹사이트 분석은 반복되는 메뉴, 비슷한 페이지, 링크가 닿지 않는 결제 페이지, 세 번 넘게 클릭해야 도달하는 페이지, 끊어진 링크와 외부 서비스를 확인한다.

웹사이트 보안 점검은 HTTPS, HSTS, 콘텐츠 보안 정책(CSP), 프레임 보호, 콘텐츠 유형·리퍼러 설정, 스크립트가 읽을 수 있는 세션 유사 쿠키를 대상으로 한다. 이 점검은 방문자의 브라우저가 이미 받는 정보만 사용하며, 로그인하거나 양식을 전송하거나 사이트를 탐색해 시험하지 않는다. 보안 문제는 공개하지 말고 사이트 운영자에게 비공개로 알리도록 안내한다.

제작자가 밝힌 실제 프로젝트 사례로는 Express의 2014년 구조와 현재 구조를 비교했을 때 라우터를 분리하며 파일 수가 13개에서 7개로, 복잡도 점수가 45에서 36으로 줄었다. python.org, gov.uk, daraz.pk를 살핀 결과 두 사이트에서 큰 메뉴 반복이, 두 사이트에서 Content Security Policy 부재가 발견됐고, 두 사이트에서는 1~2년간 HTTPS가 적용된 것으로 나타났다. 제작자는 실제 사이트에서 지나치게 민감하게 작동하는 규칙을 발견해 이번 배포 전에 수정했다고 설명한다.

Morph Map은 개인, 학습자, 오픈소스 프로젝트와 비상업적 용도에는 무료다. 기업 등 상업적 이용자는 유료 라이선스가 필요하며, 자세한 조건은 저장소의 LICENSE에서 확인할 수 있다. 허가받은 코드와 공개 웹페이지에만 사용해야 한다.