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 파일 파싱

참고: 이것들은 실험이지 최종 해결책이 아닙니다. 더 나은 접근법을 환영합니다.

빠른 시작

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에 지친 개발자들이 만들었습니다.