VisualGitCode_Lite

"환경 설정에 지친 개발자를 위한, 깃허브 웹 에디터의 VS Code급 변신"

💡 탄생 배경 (Motivation)

원래는 Codespace에서 작업을 즐겨 했습니다. 하지만 어느 날, 깃 커밋이 꼬여 예전 코드만 계속 불러와지고 git log를 확인해도 최신 코드가 반영되지 않는 심각한 동기화 문제를 겪었습니다.

문제를 해결하려고 새로운 Codespace를 만들려니 .env 설정부터 Supabase, GitHub Auth 등 복잡한 환경 설정을 다시 할 생각에 너무 막막하고 힘들었습니다.

"나는 그저 코딩을 하고 싶었을 뿐인데..."

환경 설정에 진을 빼는 대신, 어디서나 바로 접속할 수 있는 GitHub 웹 에디터를 쓰기로 했습니다. 하지만 웹 에디터는 기능이 너무 부족해 불편했습니다. 그래서 결심했습니다. "내가 직접 깃허브 웹을 에디터처럼 바꿔버리자!"

이 프로젝트는 개발자가 환경 설정이 아닌 '코딩 그 자체'에 집중할 수 있도록 돕기 위해 시작되었습니다.

---

👨‍💻 사용 방법

1. https://raw.githubusercontent.com/junnyontop-pixel/VisualGitCode_Lite/main/github_editor_plus/content.js에 접속후 전체 코드 복사, 콘솔창에 붙여넣고 사용가능

2. 이 레포지토리에서 다운로드 후 chrome://extensions로 이동, 개발자 모드를 켜고 압축해제한 확장프로그램 로드클릭

---

✨ 주요 기능 (Key Features)

• 스마트 자동완성: 키워드의 일부만 입력해도 대소문자 구분 없이 일치하는 모든 키워드를 추천합니다.
• VS Code 테마: 실제 VS Code와 유사한 다크 모드 UI와 가독성 좋은 아이콘을 적용했습니다.
• 정교한 텍스트 제어: Range API를 활용하여 자동완성 선택 시 텍스트가 겹치는 버그를 해결했습니다.
• 실시간 커서 추적: 타이핑하는 커서의 위치를 정확히 계산하여 자동완성 팝업이 커서를 따라다닙니다.
• 단축키 지원: Ctrl + /를 이용한 주석 토글 처리 등 익숙한 단축키를 제공합니다.

---

🛠 기술 스택 (Tech Stack)

• Language: JavaScript (Vanilla JS)
• Target: GitHub Web Editor (CodeMirror)
• APIs: Selection API, Range API, MutationObserver (에디터 동적 감지)

---

📈 앞으로의 계획 (Roadmap)

• [x] HTML 태그 자동 완성 및 닫는 태그 자동 생성
• [x] 스마트 괄호 자동 완성 ((), {}, []) 및 커서 중앙 배치
• [x] 파일 확장자별 맞춤형 키워드 제공 (JS, HTML, CSS 분리)
• 에디터 줄 이동 및 고급 단축키 추가
• ✨ 코드 포맷터: Alt + F로 엉망인 들여쓰기를 한 번에 정렬
• 🎨 컬러 피커: CSS 색상 코드 위에서 실시간 색상판 팝업
• 🗺️ 미니맵: 긴 코드 전체를 한눈에 파악하고 이동하는 네비게이터
• 🖼️ 이미지 미리보기: <img> 태그 위에 실제 이미지 툴팁 노출

---

💬 한마디

• 아유 힘들어
• 생각해보니 github.dev가 이미 있는데?