Show GN: 바이브 코딩으로 간단한 노트 확장 프로그램을 만들어 봤습니다
(chromewebstore.google.com)소개
제목처럼, 바이브 코딩으로 브라우저의 Side panel에 열어서 쓸 수 있는 간단한 노트 앱을 만들어 봤습니다.
처음에는 혼자 쓸 목적으로 시작했는데 처음 3일동안 나온 결과물을 보고 여기에 공유해봐도 좋을것 같다는 생각이 들어 일주일동안 오류수정/기능추가를 거쳐 이렇게 글을 쓰게 되었습니다.
사용방법 및 특징으로는
- Alt+Shift+W 단축키로 노트 앱 실행
- 마크다운 문법으로 메모 가능
- 더블클릭으로 Edit 창 진입, ESC나 Shift+Enter로 프리뷰 모드로 전환
- 글작성할때 줄바꿈(줄 맨 뒤에 공백 2개 추가)를 자동으로 처리해줌 (On/Off 가능)
- 외부 글을 붙여넣을때 줄바꿈 및 ~ 문자를 ￦~ 문자로 치환해서 글이 깨지지 않도록 처리해줌 (On/Off 가능)
- Ctrl+V로 이미지 붙여넣기 가능
- 원하는 노트들은 상단에 고정시켜둘 수 있음
- 다크모드 지원
정도입니다.
개발동기
혹시 노트 앱을 여는 단축키를 보고 깨달으신 분이 있을지도 있겠지만, 이 프로그램은 5년 전에 개발중단된 Notes by Firefox 확장프로그램으로부터 단축키와 디자인을 포함해 많은 영향을 받았습니다.
다만 개발이 중단된지 몇년이 지나니까 한글 입력이 이상하게 되고 파이어폭스 자체도 메모리를 크롬에 비해 많이 잡아먹어서 이와 비슷한 확장프로그램을 직접 구현해보자는게 개발 동기가 되었습니다
개발환경
AI는 제미니 CLI와 제미니 웹페이지를 같이 이용하면서 했습니다.
디자인이 크게 상관없는 부분은 제미니 CLI를 주로 썼고, 웹은 스크린샷을 보여주며 디자인 요소를 조정하거나 제미니 CLI가 특정한 오답에 꽂혀 함정에서 빠져나오지 못할때 주로 사용했습니다.
두 경우 다 모델은 gemini-2.5-pro 정식버전으로 고정했고, 대시보드를 보니 제미니 CLI에서 입력한 토큰만 거의 1억토큰에 근접했습니다.
버전관리는 git으로 해서 AI가 코드를 이상하게 망가뜨린 경우 이전 버전으로 되돌릴 수 있게 하였고, 작업할땐 명령 -> 제미니 CLI의 코드 작성 -> 제미니 CLI의 커밋 -> 수정된 코드 및 결과를 수동으로 검토 -> 명령 이 과정을 반복하였습니다.
앞으로의 계획
우선 지금처럼 하나의 파일에 모든 자바스크립트 코드가 들어가있는 상황에서 벗어나, 여러개의 파일로 코드를 분리해서 모듈형식으로 불러오도록 해 유지보수가 편하도록 대대적인 리팩토링을 진행할 예정입니다.
처음에는 간단한 텍스트 메모정도로 시작해서 단일파일에 코드를 다 몰아넣었던게 규모가 커지면서 코드를 읽고 직접 수정하기가 힘들어지는 문제점이 생겨나더라고요.
그리고 추가하고 싶은 기능으로는 완전한 위지윅 메모 지원, 수식 입력 및 표기 지원, 마크다운 말고 일반 텍스트나 html 기반으로도 메모할 수 있는 기능 추가 정도가 있습니다.
특히 위지윅 지원은 메모할때 편의성이 많히 올라갈거라 생각되어 리팩토링이 끝난 후 가장 먼저 구현을 시도해볼것 같습니다.
그리고 시간이 나면 Firefox에서도 쓸 수 있게 포팅해서 애드온으로 올려보지 않을까 싶습니다.
마치며
평소에 간단한 작업을 할땐 AI를 많이 이용했었지만, 이정도 크기의 작업을 AI를 메인으로 한건 처음인데 생각보다 잘 돌아가서 정말 신기했습니다.
다만 제미니 CLI에 문제가 있는건지 gemini-2.5-pro 를 제한없이 쓰려면 API키를 넣고 쓰는만큼 돈을 내는것만 가능한데, 이 프로그램을 제작하면서 인풋으로만 거의 1억토큰이 소모되어 돈이 생각보다 많이 나온점은 아쉬웠습니다.
캐싱이 있어서 예상금액보단 청구금액이 적긴 했지만 저렇게 많이 사용된건 예상하지 못했던 결과였기에 사용할땐 컨텍스트 요약기능을 적절히 사용해야 성능유지가 가능할거라 생각합니다.
실사용이 가능할 정도까진 개발이 되었지만, 아직 구상한 모든 기능이 완벽하게 구현된게 아닌만큼 써보시고 질문이나 피드백할것이 있다면 가감없이 해주셨으면 합니다!