TL;DR

CodeFlow는 설치나 서버 없이도 브라우저에서 GitHub URL이나 로컬 파일을 즉시 파싱해 상호작용식 의존성 그래프와 블래스트 레디어스, 보안 검사, 코드 소유권 정보를 제공하는 도구다. 모든 처리는 클라이언트 측에서 이루어지고 토큰은 브라우저 메모리에만 머물러 프라이버시와 오프라인 사용을 보장하며 단일 HTML 파일 구조로 빌드 과정 없이 실행된다. 헬스 스코어와 패턴 감지 기능이 시각화와 결합되어 리팩터링 우선순위와 PR 영향도 판단을 지원하지만 동적 임포트나 런타임 참조는 휴리스틱으로 처리되어 일부 연결이 누락될 수 있다. 따라서 빠른 구조 이해와 사전 보안 점검에는 즉시 유용하지만 100% 완전한 정밀 분석을 대체하지는 못한다.

주요 기능

• 파일 간 의존 관계를 대화형 그래프로 시각화하고 노드를 클릭하면 해당 노드와 연결된 의존성을 강조하여 구조적 결합도를 즉시 파악할 수 있다. 그래프는 드래그와 줌을 지원하여 대형 코드베이스에서도 관심 영역을 탐색하기 용이하다. 노드 기반 인터랙션은 리팩터링 전후 영향도를 추적하는 데 직접적인 시각적 피드백을 제공한다.
• 선택한 파일을 시작점으로 삼아 영향을 받는 파일 목록과 깊이를 계산하는 블래스트 레디어스 분석을 제공하여 변경 사항이 시스템에 미치는 전파 범위를 수치와 그래프로 보여준다. 이 기능은 PR 영향도 예측과 리스크 평가에 사용될 수 있으며 변경 범위를 제한하거나 테스트 우선순위를 정하는 의사결정에 도움이 된다. 결과는 영향을 받는 파일 수와 레벨별 분포로 제시되어 우선 조치가 필요한 부분을 명확히 한다.
• 깃 커밋 로그를 집계하여 파일별 상위 기여자를 표시하는 코드 소유권 보기를 제공하여 누가 해당 코드를 주로 관리하는지 빠르게 식별할 수 있다. 이 정보는 코드 리뷰, 책임 할당, 빠른 문의 대상 선정에 직접적으로 활용된다. 소유권 정보는 자동화된 PR 코멘트나 아카이브 카드에도 반영되어 지속적 가시성을 유지한다.
• 민감 정보와 보안 취약점을 탐지하는 자동 스캐너를 내장하여 하드코딩된 비밀, 잠재적 SQL 인젝션, 위험한 eval 사용, 프로덕션 디버그 잔재 등을 경고한다. 검사 대상 디렉터리는 테스트·문서·툴링 일부를 제외하도록 설정되어 실제 배포 표면만을 검토하도록 설계되어 있다. 스캐너 결과는 리포트와 카드에 통합되어 코드베이스 보안 상태를 빠르게 점검할 수 있다.
• 로컬 파일 드래그앤드롭과 폴더 선택을 통해 오프라인 환경에서도 전체 분석을 수행하도록 클라이언트 사이드 처리를 제공하며, 개인 코드가 서버로 전송되지 않도록 설계되었다. 브라우저 메모리에서 토큰을 임시 보관하고 탭을 닫으면 제거되어 프라이버시를 유지한다. 핀된 CDN에서 React, D3 같은 의존성을 불러오는 방식으로 빌드 없이 실행 가능하도록 구성되어 있다.

어떻게 동작하는가

CodeFlow는 브라우저에서 GitHub API 또는 로컬 파일 시스템을 호출해 소스 파일을 받아와 클라이언트 측에서 파싱과 그래프 생성을 수행한다. 파싱 모듈은 함수와 명시적 import를 기준으로 노드와 엣지를 생성하고 D3를 통해 대화형 시각화를 렌더링하며 React 단일 파일이 UI를 조율한다. 이 방식은 서버나 백엔드를 요구하지 않으므로 코드가 외부에 저장되지 않고 오프라인에서도 동일한 흐름으로 분석이 가능하다.

해결 문제

새로운 코드베이스를 빠르게 파악해야 하는 상황에서 파일 간 의존 구조와 변경 영향도를 수동 탐색 없이 시각적으로 제시하여 초기 이해 비용을 크게 절감한다. 복잡한 리포지토리에서 어떤 파일을 변경하면 얼마나 광범위하게 영향을 미치는지 정량적으로 제시하여 PR 위험도 판단과 리팩터링 우선순위 결정을 지원한다. 또한 로컬 분석과 프라이버시 보장을 통해 민감한 코드에 대한 사전 점검을 손쉽게 수행할 수 있게 한다.

지금 주목받는 이유

이 프로젝트는 4463개의 스타와 브라우저만으로 동작하는 '제로 세트업' 접근으로 주목을 받았으며 설치 부담을 없앤 UX가 확산 요인이다. 즉시 분석 가능성과 프라이버시 중심 설계가 개발자들 사이에서 빠른 채택을 촉진한 것으로 나타난다. 또한 GitHub Action 카드와 시각적 리포트 기능이 오픈소스 리포지토리 관리 워크플로에 직접 연결되어 실무 적용 가능성이 높다.

차별점

• 완전한 클라이언트 사이드 실행 모델을 채택하여 코드가 개발자의 머신에서만 처리되고 외부 서버로 전송되지 않으므로 데이터 유출 위험과 서버 비용을 동시에 줄인다. 모든 분석 로직이 브라우저에서 이뤄지며 토큰은 브라우저 메모리에만 남도록 설계되어 개인 저장소나 프라이빗 프로젝트에 대한 안전한 사용을 가능하게 한다. 이 구조는 오프라인 사용과 즉시 실행 환경을 동시에 제공한다.
• 설치나 빌드 과정이 필요 없는 단일 HTML 파일 구조를 제공하여 빠른 시도와 간편한 배포를 지원한다. 저장소를 클론한 뒤 index.html을 열기만 하면 로컬에서 동일한 분석을 수행할 수 있어 CI나 로컬 테스트 환경에 손쉽게 통합할 수 있다. 또한 카드 액션을 통해 리포지토 리드미에 자동 업데이트되는 건강 카드 출력을 제공해 지속적 가시성을 유지한다.
• 파일·함수·패턴 감지와 보안 스캐너·헬스 스코어를 통합하여 단순 그래프를 넘는 종합 진단을 제공한다. 패턴 감지는 싱글턴·팩토리·옵저버와 같은 구조적 패턴뿐 아니라 안티패턴까지 식별하여 구조적 문제점을 노출한다. 보안 검사와 헬스 스코어는 그래프 정보와 결합되어 리스크 우선순위 산정에 활용될 수 있다.

사용 사례

• 새로 합류한 개발자가 대형 코드베이스의 구조와 핵심 연결점을 빠르게 파악하기 위해 리포지토 URL을 붙여넣어 상호작용식 맵을 얻는 용도로 사용된다. 그래프를 통해 주요 모듈과 결합도가 높은 영역을 시각적으로 확인함으로써 온보딩 시간을 단축할 수 있다. 블래스트 레디어스와 헬스 스코어를 함께 보면 초기 리팩터링 대상과 위험 파일을 우선적으로 식별할 수 있다.
• PR 검토 과정에서 변경 파일의 영향 범위를 계산해 테스트 범위와 리뷰어 선정을 보조하는 용도로 사용된다. PR URL을 붙여넣으면 해당 변경이 영향을 미치는 파일들을 즉시 시각화하여 리뷰어가 검토해야 할 범위를 좁힌다. 카드 액션을 통해 PR 병합 시 자동으로 리포지토 상태를 갱신하는 워크플로와 연계할 수 있다.
• 민감 코드나 사내 비공개 프로젝트를 외부 서버에 올리지 않고 로컬에서 사전 보안 점검을 수행하는 용도로 사용된다. 로컬 폴더 분석 기능은 오프라인 환경에서도 하드코딩된 비밀과 위험한 패턴을 탐지하여 배포 전 보안 리스크를 낮춘다. 토큰과 소스가 브라우저 밖으로 유출되지 않으므로 규정상 외부 전송이 제한된 코드에도 적용 가능하다.

시작하기

온라인 옵션에서는 제공된 웹앱에 접속해 GitHub URL을 붙여넣으면 즉시 아키텍처 맵이 생성된다. 자체 호스팅을 원할 경우 저장소를 클론한 뒤 index.html을 브라우저로 열면 빌드 과정 없이 로컬에서 실행할 수 있다. 로컬 파일 분석은 브라우저의 'Open Folder' 버튼으로 폴더를 선택하거나 파일을 드래그하면 모든 처리가 브라우저 내에서 완료된다.

요구사항

• 최신 데스크톱 웹 브라우저가 필요하며 서버 사이드 런타임이나 빌드 도구는 요구되지 않는다. 공개 저장소는 토큰 없이 분석 가능하고 비공개 저장소는 GitHub Personal Access Token 또는 GitHub App 설치 토큰이 필요하다. 로컬 분석은 파일 시스템 접근 권한만 있으면 되며 별도 네트워크 연결은 선택적이다.

이미지 분석