https://github.com/developer-1px/vibe-code-ide
바이브(레거시) 코드 분석기 도구
https://github.com/developer-1px/vibe-code-ide
Last synced: 21 days ago
JSON representation
바이브(레거시) 코드 분석기 도구
- Host: GitHub
- URL: https://github.com/developer-1px/vibe-code-ide
- Owner: developer-1px
- Created: 2025-12-26T00:27:08.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2026-01-06T01:45:30.000Z (5 months ago)
- Last Synced: 2026-01-06T05:29:41.485Z (5 months ago)
- Language: TypeScript
- Homepage:
- Size: 1.3 MB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Vibe Coding IDE
AI 시대를 위한 코드 이해 도구. 코드를 작성하는 시간보다 AI가 생성한 코드를 읽는 시간이 더 많은 개발자를 위해 만들어졌습니다.
**상태**: 실험적. 활발히 개발 중.
---
## 문제 인식
현대 개발 워크플로우가 변화했습니다:
- **과거**: 코드 작성이 병목
- **현재**: 코드 이해가 병목
AI는 3초 만에 200줄을 생성합니다. 하지만 그 200줄을 이해하는 데는 여전히 30분이 걸립니다. "작성" 시대를 위해 설계된 기존 IDE는 이 새로운 현실에 맞지 않습니다.
### 구체적인 문제들
1. **파일 구조는 코드 구조를 반영하지 않습니다**
- 폴더 계층은 조직 구조를 보여줄 뿐, 의존성을 보여주지 않음
- "이 함수를 누가 호출하나" 찾으려면 머릿속으로 그래프를 그려야 함
- store가 어디 정의되어 있는지 찾는데만 5분 소요
2. **대규모 변경 시 변화 맹시**
- AI가 동시에 10개 파일 수정
- Git diff는 라인 변경만 보여주고 영향도는 보여주지 않음
- `getUserAsync()`가 동기 호출 코드를 깨뜨린 걸 놓치기 쉬움
3. **탭 과부하**
- 인간의 작업 기억: 7±2개
- AI가 수정한 파일: 50개 이상
- 탭은 연관된 파일들 간의 관계를 숨김
## 비전
**바이브 코딩**: 세부사항을 분석하기 전에 공간의 "바이브"를 느끼듯, 코드 구조를 직관적으로 이해하는 것.
코드를 한 줄씩 읽는 대신, 개발자는:
- 구조로부터 아키텍처를 **느끼고**
- 파일을 여는 게 아니라 질문을 던져 **탐색하고**
- 고수준 흐름과 구현 세부사항 사이를 **줌**하고
- 고립된 텍스트가 아니라 맥락과 영향도를 **봐야** 합니다
## 핵심 아이디어
### 1. 텍스트보다 구조
코드는 근본적으로 그래프(AST, 의존성, 데이터 흐름)입니다. 텍스트는 단지 하나의 투영일 뿐입니다.
**함의**: IDE는 구조를 1급 객체로, 텍스트를 2급 객체로 다뤄야 합니다.
### 2. 공간 기억
인간은 텍스트 목록보다 공간 배치를 더 잘 기억합니다.
**함의**: 캔버스에 배치된 코드가 파일 트리를 이깁니다.
### 3. 의미론적 줌
코드를 위한 구글 맵: 축소하면 아키텍처, 확대하면 구현.
**함의**: 작업에 따라 다른 추상화 수준이 필요합니다.
### 4. 질문 기반 탐색
"이 데이터가 어디서 오나?"가 "X 파일 열기"보다 낫습니다.
**함의**: 파일명이 아닌 의도로 탐색해야 합니다.
### 5. 지속적인 맥락
코드는 절대 고립되어 존재하지 않습니다.
**함의**: 항상 호출자, 의존성, 영향 범위를 함께 보여줘야 합니다.
## 현재 실험들
이 프로젝트는 다음을 통해 위 아이디어들을 탐구합니다:
- **의존성 그래프 뷰**: 파일을 노드로, import를 엣지로
- **캔버스 레이아웃**: 탭 대신 공간 배치
- **AST 기반 파싱**: 정확성을 위한 TypeScript Compiler API 사용
- **포커스 모드**: 변수 클릭으로 모든 사용처 확인
- **통합 검색**: 파일과 심볼을 퍼지 검색
- **Vue & React 지원**: SFC와 TSX 파일 파싱
**참고**: 이것들은 실험이지 최종 해결책이 아닙니다. 더 나은 접근법을 환영합니다.
## 빠른 시작
```bash
npm install
npm run dev
```
`http://localhost:3000` 으로 접속하세요. 예제 파일이 미리 로드되어 있습니다.
본인의 코드를 분석하려면: 우측 상단의 "Upload Folder" 클릭.
### 키보드 단축키
- `Shift + Shift` - 통합 검색
- `Cmd/Ctrl + K` - 검색
- `Cmd/Ctrl + \` - 사이드바 토글
- 화살표 키 - 파일 탐색기 이동
## 아키텍처
기술 스택:
- **React 19** + TypeScript
- **Jotai** (상태 관리)
- **TypeScript Compiler API** (파싱)
- **@vue/compiler-sfc** (Vue 템플릿 파싱)
- **D3** (캔버스 팬/줌)
- **Feature-Sliced Design** (아키텍처)
핵심 원칙:
- **AST 전용 파싱**: 코드 분석에 정규식 사용 금지
- **배럴 export 금지**: 직접 import만 사용
- **Getter 기반 데이터**: AST에서 필요시 추출, 중복 저장 금지
자세한 내용은 `CLAUDE.md` 참고.
## 설계 철학
### 코드는 텍스트가 아니라 구조다
우리는 코드를 텍스트로 다루기 때문에 Cmd+F를 너무 많이 씁니다.
하지만 코드는:
- 추상 구문 트리
- 의존성 그래프
- 데이터 흐름 다이어그램
텍스트는 단지 직렬화 방식일 뿐입니다.
### IDE는 타자기가 아니라 현미경이어야 한다
AI 시대에 개발자에게 필요한 건 입력 도구가 아니라 관찰 도구입니다:
- 보이지 않는 구조를 보이게 만들고
- 복잡한 관계를 단순화하고
- 거대한 시스템을 이해 가능하게 만드는 것
### 프론트엔드 개발자를 위한, 프론트엔드 개발자에 의한
프론트엔드 개발자는 다음과 같이 생각합니다:
- 컴포넌트 트리
- 상태 흐름
- 의존성 체인
우리의 멘탈 모델은 시각적이고 구조적입니다. 도구도 그래야 합니다.
## 왜 "바이브"인가?
잘 설계된 공간에 들어가면 즉시 느껴집니다. 세부사항을 분석하지 않아도 그냥 알 수 있습니다.
좋은 코드에는 바이브가 있습니다. 모든 줄을 읽기 전에 잘 구조화되었다는 걸 알 수 있습니다.
이 프로젝트는 탐구합니다: **코드 구조를 느낄 수 있게 만들 수 있을까?**
## 라이선스
MIT
---
**"코드는 텍스트가 아니다. 코드는 구조다."**
Cmd+F에 지친 개발자들이 만들었습니다.