ーーWeb 버전 ChatGPT의 결과를 “붙여넣기만 하면” 안전하게 코드를 반영할 수 있는 AI Folder Editor
최근의 AI 코드 에디터(AI Code Editor), 편리하죠.
- Cursor
- Windsurf
- Claude Code
- Cline
- Continue
등등.
하지만, 저에게는 계속 불만이 있었습니다.
그래서, 저만의 이상적인 AI 에디터를 만들었습니다.
이것입니다.
※ 로컬 버전은 File System Access API를 사용하기 때문에, 서버 환경에서 구동해야 합니다.
이 에디터의 사상은 상당히 심플합니다.
「AI는 ChatGPT의 Web 버전으로 충분하다」
입니다.
즉,
- 에디터 측에서 프롬프트(Prompt) 생성
- ChatGPT를 열기
- 붙여넣기
- 출력을 다시 붙여넣기
- 차이(Diff) 확인 후 반영
이것뿐입니다.
이 점이 상당히 중요했습니다.
최근의 AI 에디터는,
- OpenAI API Key
- Anthropic API Key
- 월간 구독료
등이 필요한 경우가 많습니다.
하지만 개인적으로는,
「ChatGPT 무료 버전으로도 충분히 강력하다」
라고 생각합니다.
그렇다면,
- ChatGPT 페이지를 열고
- 붙여넣고
- 출력을 다시 붙여넣기
만으로 충분합니다.
그 약간의 수고를 맞바꾸어,
- API Key 불필요
- 무료로도 사용 가능
- OpenAI 측의 UI도 그대로 사용 가능
- ChatGPT Plus에도 그대로 대응
이라는 구성이 더 취향이었습니다.
「폴더 열기」를 누릅니다.
브라우저 상에서 로컬 폴더를 직접 편집할 수 있습니다.
왼쪽 트리에서 편집 대상을 선택.
예를 들어,
이 함수를 리팩토링(Refactor)해 주세요
등.
누르면,
- 필요한 코드를 자동으로 수집
- ChatGPT를 열기
- 프롬프트를 복사
해 줍니다.
은근히 편리한 기능입니다.
현재 파일 중에서 참조되고 있는 이름을 보고,
styles.css
utils.js
Player.cs
등을 자동으로 프롬프트에 포함합니다.
그렇기 때문에,
「관련 코드가 부족하다」
는 문제를 상당히 줄일 수 있습니다.
이 도구는,
AI가 직접 파일을 쓰게 하지 않습니다.
반드시 차이(Diff) 확인 단계를 거칩니다.
을 모두 확인할 수 있습니다.
게다가,
를 파일마다 선택할 수 있습니다.
이 부분은 상당히 중시했습니다.
이 도구에는,
작지만 안전 장치가 있습니다.
AI의 출력은,
와 같은 형식으로 다뤄집니다.
하지만,
- OLD가 현재 코드와 일치하지 않음
- OLD가 여러 곳에서 일치함
- JSON이 깨져 있음
- Patch 형식이 무너짐
인 경우에는,
처리를 중단합니다.
즉,
「AI가 어중간하게 망가진 출력을 했을」
경우에,
억지로 반영하지 않습니다.
이것은 상당히 중요하다고 생각합니다.
최근의 AI 도구들은,
기세로 파일을 바꿔버리는 경우가 많지만,
개인적으로는,
「불완전하다면 멈춰라」
가 더 안심됩니다.
특히 편리했던 것은,
- HTML/CSS/JS
- Unity C#
- 소규모 Web 도구
- 리팩토링 (Refactoring)
- UI 수정
입니다.
「ChatGPT에 붙여넣기만 하면 된다」
라는 단호함이,
오히려 상당히 쾌적했습니다.
서버는 없습니다.
거의 브라우저뿐입니다.
사용하고 있는 것은 주로:
- File System Access API
- Vanilla JavaScript
- 차이 표시 (Diff display)
- Patch 해석 (Patch parsing)
뿐입니다.
저는,
「AI가 전부 다 하는 IDE」
보다,
「인간이 확인하면서 사용하는 AI 보조 에디터」
를 더 좋아했습니다.
그리고,
- API Key 불필요
- 무료로도 사용 가능
- ChatGPT 그 자체를 사용
- 차이 확인 가능
- 망가진 Patch는 중단
이라는 구성이,
상당히 이상에 가까웠습니다.
혹시 같은 사상을 가진 분이 있다면,
꼭 한번 사용해 보세요.
