{"id":49833431,"url":"https://github.com/developer-1px/vibe-code-ide","last_synced_at":"2026-05-13T22:38:02.690Z","repository":{"id":331052126,"uuid":"1122976308","full_name":"developer-1px/vibe-code-ide","owner":"developer-1px","description":"바이브(레거시) 코드 분석기 도구","archived":false,"fork":false,"pushed_at":"2026-01-06T01:45:30.000Z","size":1368,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-01-06T05:29:41.485Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/developer-1px.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-12-26T00:27:08.000Z","updated_at":"2026-01-04T13:43:25.000Z","dependencies_parsed_at":"2026-01-02T22:10:49.022Z","dependency_job_id":null,"html_url":"https://github.com/developer-1px/vibe-code-ide","commit_stats":null,"previous_names":["developer-1px/vibe-code-viewer"],"tags_count":null,"template":false,"template_full_name":"google-gemini/aistudio-repository-template","purl":"pkg:github/developer-1px/vibe-code-ide","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/developer-1px%2Fvibe-code-ide","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/developer-1px%2Fvibe-code-ide/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/developer-1px%2Fvibe-code-ide/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/developer-1px%2Fvibe-code-ide/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/developer-1px","download_url":"https://codeload.github.com/developer-1px/vibe-code-ide/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/developer-1px%2Fvibe-code-ide/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33003185,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-13T13:14:54.681Z","status":"ssl_error","status_checked_at":"2026-05-13T13:14:51.610Z","response_time":115,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-05-13T22:37:57.068Z","updated_at":"2026-05-13T22:38:02.680Z","avatar_url":"https://github.com/developer-1px.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vibe Coding IDE\n\nAI 시대를 위한 코드 이해 도구. 코드를 작성하는 시간보다 AI가 생성한 코드를 읽는 시간이 더 많은 개발자를 위해 만들어졌습니다.\n\n**상태**: 실험적. 활발히 개발 중.\n\n---\n\n## 문제 인식\n\n현대 개발 워크플로우가 변화했습니다:\n- **과거**: 코드 작성이 병목\n- **현재**: 코드 이해가 병목\n\nAI는 3초 만에 200줄을 생성합니다. 하지만 그 200줄을 이해하는 데는 여전히 30분이 걸립니다. \"작성\" 시대를 위해 설계된 기존 IDE는 이 새로운 현실에 맞지 않습니다.\n\n### 구체적인 문제들\n\n1. **파일 구조는 코드 구조를 반영하지 않습니다**\n   - 폴더 계층은 조직 구조를 보여줄 뿐, 의존성을 보여주지 않음\n   - \"이 함수를 누가 호출하나\" 찾으려면 머릿속으로 그래프를 그려야 함\n   - store가 어디 정의되어 있는지 찾는데만 5분 소요\n\n2. **대규모 변경 시 변화 맹시**\n   - AI가 동시에 10개 파일 수정\n   - Git diff는 라인 변경만 보여주고 영향도는 보여주지 않음\n   - `getUserAsync()`가 동기 호출 코드를 깨뜨린 걸 놓치기 쉬움\n\n3. **탭 과부하**\n   - 인간의 작업 기억: 7±2개\n   - AI가 수정한 파일: 50개 이상\n   - 탭은 연관된 파일들 간의 관계를 숨김\n\n## 비전\n\n**바이브 코딩**: 세부사항을 분석하기 전에 공간의 \"바이브\"를 느끼듯, 코드 구조를 직관적으로 이해하는 것.\n\n코드를 한 줄씩 읽는 대신, 개발자는:\n- 구조로부터 아키텍처를 **느끼고**\n- 파일을 여는 게 아니라 질문을 던져 **탐색하고**\n- 고수준 흐름과 구현 세부사항 사이를 **줌**하고\n- 고립된 텍스트가 아니라 맥락과 영향도를 **봐야** 합니다\n\n## 핵심 아이디어\n\n### 1. 텍스트보다 구조\n\n코드는 근본적으로 그래프(AST, 의존성, 데이터 흐름)입니다. 텍스트는 단지 하나의 투영일 뿐입니다.\n\n**함의**: IDE는 구조를 1급 객체로, 텍스트를 2급 객체로 다뤄야 합니다.\n\n### 2. 공간 기억\n\n인간은 텍스트 목록보다 공간 배치를 더 잘 기억합니다.\n\n**함의**: 캔버스에 배치된 코드가 파일 트리를 이깁니다.\n\n### 3. 의미론적 줌\n\n코드를 위한 구글 맵: 축소하면 아키텍처, 확대하면 구현.\n\n**함의**: 작업에 따라 다른 추상화 수준이 필요합니다.\n\n### 4. 질문 기반 탐색\n\n\"이 데이터가 어디서 오나?\"가 \"X 파일 열기\"보다 낫습니다.\n\n**함의**: 파일명이 아닌 의도로 탐색해야 합니다.\n\n### 5. 지속적인 맥락\n\n코드는 절대 고립되어 존재하지 않습니다.\n\n**함의**: 항상 호출자, 의존성, 영향 범위를 함께 보여줘야 합니다.\n\n## 현재 실험들\n\n이 프로젝트는 다음을 통해 위 아이디어들을 탐구합니다:\n\n- **의존성 그래프 뷰**: 파일을 노드로, import를 엣지로\n- **캔버스 레이아웃**: 탭 대신 공간 배치\n- **AST 기반 파싱**: 정확성을 위한 TypeScript Compiler API 사용\n- **포커스 모드**: 변수 클릭으로 모든 사용처 확인\n- **통합 검색**: 파일과 심볼을 퍼지 검색\n- **Vue \u0026 React 지원**: SFC와 TSX 파일 파싱\n\n**참고**: 이것들은 실험이지 최종 해결책이 아닙니다. 더 나은 접근법을 환영합니다.\n\n## 빠른 시작\n\n```bash\nnpm install\nnpm run dev\n```\n\n`http://localhost:3000` 으로 접속하세요. 예제 파일이 미리 로드되어 있습니다.\n\n본인의 코드를 분석하려면: 우측 상단의 \"Upload Folder\" 클릭.\n\n### 키보드 단축키\n\n- `Shift + Shift` - 통합 검색\n- `Cmd/Ctrl + K` - 검색\n- `Cmd/Ctrl + \\` - 사이드바 토글\n- 화살표 키 - 파일 탐색기 이동\n\n## 아키텍처\n\n기술 스택:\n- **React 19** + TypeScript\n- **Jotai** (상태 관리)\n- **TypeScript Compiler API** (파싱)\n- **@vue/compiler-sfc** (Vue 템플릿 파싱)\n- **D3** (캔버스 팬/줌)\n- **Feature-Sliced Design** (아키텍처)\n\n핵심 원칙:\n- **AST 전용 파싱**: 코드 분석에 정규식 사용 금지\n- **배럴 export 금지**: 직접 import만 사용\n- **Getter 기반 데이터**: AST에서 필요시 추출, 중복 저장 금지\n\n자세한 내용은 `CLAUDE.md` 참고.\n\n## 설계 철학\n\n### 코드는 텍스트가 아니라 구조다\n\n우리는 코드를 텍스트로 다루기 때문에 Cmd+F를 너무 많이 씁니다.\n\n하지만 코드는:\n- 추상 구문 트리\n- 의존성 그래프\n- 데이터 흐름 다이어그램\n\n텍스트는 단지 직렬화 방식일 뿐입니다.\n\n### IDE는 타자기가 아니라 현미경이어야 한다\n\nAI 시대에 개발자에게 필요한 건 입력 도구가 아니라 관찰 도구입니다:\n- 보이지 않는 구조를 보이게 만들고\n- 복잡한 관계를 단순화하고\n- 거대한 시스템을 이해 가능하게 만드는 것\n\n### 프론트엔드 개발자를 위한, 프론트엔드 개발자에 의한\n\n프론트엔드 개발자는 다음과 같이 생각합니다:\n- 컴포넌트 트리\n- 상태 흐름\n- 의존성 체인\n\n우리의 멘탈 모델은 시각적이고 구조적입니다. 도구도 그래야 합니다.\n\n## 왜 \"바이브\"인가?\n\n잘 설계된 공간에 들어가면 즉시 느껴집니다. 세부사항을 분석하지 않아도 그냥 알 수 있습니다.\n\n좋은 코드에는 바이브가 있습니다. 모든 줄을 읽기 전에 잘 구조화되었다는 걸 알 수 있습니다.\n\n이 프로젝트는 탐구합니다: **코드 구조를 느낄 수 있게 만들 수 있을까?**\n\n\n## 라이선스\n\nMIT\n\n---\n\n**\"코드는 텍스트가 아니다. 코드는 구조다.\"**\n\nCmd+F에 지친 개발자들이 만들었습니다.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdeveloper-1px%2Fvibe-code-ide","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdeveloper-1px%2Fvibe-code-ide","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdeveloper-1px%2Fvibe-code-ide/lists"}