CheapGPT 개발 히스토리

개요

최근 ChatGPT와 Copilot을 병용하며 개발에 좋은 영향을 받다보니 사용률이 점점 올랐다. Suno AI 사용 후기에서도 소개했지만 개인적인 견해로는 아직 소스코드 자체를 믿고 맡기기에는 무리가 있고, 제시하는 코드를 처음부터 끝까지 확인해야 한다는 생각이 강하기 때문에 새로운 해결방안을 찾거나 테스트 데이터를 뽑아내는 수준으로 활용하고 있다. 이 정도만 하더라도 그 편의성이 높았기에 점점 손에 익기 시작하고 구글 검색과 더불어 자주 chatgpt에 접속하게 되었다.

그러나, 매번 브라우저를 켜고 새 탭을 열고 GPT에 접속하고 채팅기록을 찾고 들어가서 메시지를 입력하는 방식은 점점 피로도를 급격하게 올렸다. 항시 켜두고 필요할 때 바로 검색하면 되지 않느냐 하는 사람들도 있다만 나 같은 꼰대들은 똥고집이라는 신체적 한계가 있어서 몸이 적응하지 못한다. 듀얼 모니터조차 시선만 분산시키지 오히려 생산성을 떨어뜨리는 몸이 되어버렸기 때문에 되도록이면 한 화면에서 효율적으로 활용하는 방법을 찾는 편이다. 일정 수준 이상 피로도가 쌓이면 Copilot과 구글 검색을 전적으로 활용하게 되었고 점점 더 ChatGPT의 사용율이 떨어졌다.

또 하나의 불만은 채팅 로그가 조금만 쌓이면 버벅거린다는 점이다. 왠지 모르겠지만 UI 자체가 무거운 느낌이 많이 들었고 한 참을 기다렸다가 출력이 실패하는 경우도 있었다. Dall-e를 통해 이미지를 생성할 때가 특히 심했다. 채팅 로그를 정리할 때에도 답답해서 그냥 포기하고 새로운 채팅을 생성하는데 마찬가지로 UI의 성능을 떨어뜨리기만 하는 느낌이다.

상황이 이렇다보니 세금 포함 한 달 $22 구독료가 이해타산에 맞지 않는다는 결론에 도달하였지만 쉬이 버릴 수도 없는 일이었다. 분명히 ChatGPT를 통해서만 얻을 수 있는 큰 이점이 있었기 때문이다.

현재의 ChatGPT 사용 방식을 따르지 않고 쉽고 빠르게 결과를 얻을 수 있는 방법을 이리저리 찾아보았지만 내 마음에 드는 프로그램은 찾을 수 없었다. 대부분 새로운 데스크톱 어플리케이션을 설치하거나 전용 시스템에 새로운 계정을 생성해야 하거나 아니면 단순히 ChatGPT로 연결만 해주는 바로가기였다.

요구사항 정리

1. 별도의 프로그램 없이 메인 브라우저 내에서 작동할 것
2. 최대 2회의 유저 인풋으로 작동해야 할 것
3. ChatGPT와 동급의 결과가 있어야 할 것
4. ChatGPT Pro 구독료보다 저렴할 것
5. UI 성능이 좋아야 할 것

결국, 위의 불편함들을 해결해주는 프로그램을 찾지 못하였고 요구사항으로 정리하여 내 입맛에 맞는 프로그램을 작성하기에 이른다.

개발 히스토리

개발 착수

요구사항을 충족하기 위한 가장 좋은 방법은 크롬 확장프로그램이 있었다. 메인 브라우저에서 통합된 환경으로 사용할 수 있고 어디에서든지 크롬 동기화를 통해 동일한 환경으로 사용할 수 있다. 최선의 선택으로 보인다.

요금에 대해서는 사실 미리 답을 내놓고 정한 것이었다. ChatGPT를 사용하는 것이 아니라 OpenAI API를 활용하는 것이다. 한 달 무제한 사용도 아니고 결제한 만큼 최대 사용량이 정해지는 종량제 정책이지만 생각보다 많은 수의 토큰_{입력과 출력에 사용되는 단어수}을 사용할 수 있으며 내가 사용한 만큼만 지불한다라는 합리적인 요금 정책이다. 나와 같은 경우라면 아주 잘 어울리는 요금정책이라고 할 수 있겠다.

사용되는 모델은 4o, o1-preview, 4o-mini 등과 같이 ChatGPT와 동일한 모델을 사용할 수 있어 성능면에서도 뒤떨어지지 않는다. 모델에 따라서 책정되는 토큰당 가격이 다르지만 충분히 감당할 수 있고도 남는 가격이기 때문에 납득할 수 있었다. 이러한 점들을 모두 고려하여 확장 프로그램을 만들어 보기로 하였다.

언어는 최근 공부중이기도 한 Vite 번들러에 ts + react + shadcn 스택으로 결정하였다. 나중에 안 사실이지만 다행이도 이 개발 스택은 번들러를 통한 빌드 결과가 단순히 압축만 된 결과이기 때문에 스토어 검수 단계에서 문제가 없었다.

기능 구현

프로그램에 대한 자세한 소개는 CheapGPT Development Team 페이지에서 확인할 수 있다. 여기에서는 개발간 발생한 내용들을 소개를 하겠다.

User interface

사진: User interface

이 정도면 쓸만하겠지라는 생각은 항상 망상이다. 위 화면도 프로그램 초도 배포 이후 버전으로 많은 변경이 있었다. 사용에 혼선을 줄이기 위해서 ChatGPT를 사용하는 것과 동일한 방식으로 입력과 출력을 구성했다. 응답도 Open AI API에서 제공하는 스트림 옵션을 사용하여 글자가 하나씩 추가되는 방식을 사용해야 사용자가 긴 응답시간을 기다리도록 도와야 했다.

키보드 단축키 추가

브라우저를 사용하다가 마우스로 손을 옮기고 확장 프로그램에 정확히 포인팅하여 클릭하는 일련의 과정도 시간이 지나면 점점 피로도가 생기기 때문에 간단한 키보드 단축키를 지원해야 했다. 되도록이면 접근성이 용이하도록 왼손만으로 입력이 가능 해야하고 시스템이나 브라우저의 내장 단축키와 중복되면 안된다.

또한, 확장 프로그램이 팝업되면 자동으로 입력창에 포커스가 가도록하여 최대한 사용자의 피로도를 줄여야만 했다. 말 그대로 open and use를 유지해야 그나마 쓸만했다.

현재 페이지 요약 기능

사진: 현재 페이지 요약

웹에서 뉴스 기사를 보다가 현재 페이지를 요약해주는 기능이 있으면 좋겠다 싶어서 추가로 구현하였다. 키보드 단축키를 등록해 아주 쉽게 요청하고 요약을 볼 수 있어서 편리했다. 다만, 사용되는 토큰수가 생각한 것보다 많고 컨텐츠의 주요 언어로 출력하라고 프롬프트를 구성해 놓으니 어떤 언어로 답할지가 명확하지가 않아 언어 설정을 추가로 만들어야 했다.

일반적인 요청에 비해 토큰_비용을 많이 사용한다는 점이 큰 단점이다. 불필요한 문자열들을 제거하여 토큰수를 최대한 줄여보려 했으나 뾰족한 수를 찾을 수 없었다. sanitize 모듈을 사용해도 대부분은 XSS와 같은 공격에 대비하는 작업들이라 토큰 수에는 큰 영향을 주진 못했다. DOMPurify 패키지를 사용하여 XSS작업을 비롯해 메인 컨텐츠 외의 불필요한 태그를 모두 제거하도록 하여 최대한 textContent의 크기를 줄이도록 하였다.

그러나, 모든 웹 사이트가 정확한 태그를 사용할 경우에만 희망적이고 그렇지 않은 웹 사이트가 대부분이라 기준을 정할 수는 없었다. HTML5 스펙에 맞추어 main, section, article로 구성됐다고 치더라도 광고가 메인 컨텐츠에 붙어 있을지도 모르고 푸터가 정말 footer태그에 있는지, div의 footer 클래스로 있는지 알 방법은 없다. 난독화나 맹글링된 페이지라면 더 볼것도 없다. 그렇다고 모든 div를 제거한다면 메인 컨텐츠가 없어질 수도 있으니 어려운 문제다.

가장 이상적인 방법이라면 애드블록 확장 프로그램처럼 사용자의 마우스 포인터마다 요소의 가이드 라인을 제시하여 사용자의 판단하에 요약할 요소를 선택할 수 있는 UI를 제공하는 것이다. 이 기능은 생각보다 해야할 일이 많아 보여서 나중에 구현해보는 것으로 방향을 잡았다.

요약에 대해서는 처음 여섯가지 중점으로 3문장 내외로 요약하도록 프롬프트를 작성하였는데 꽤 많은 토큰을 소모하기도 하고 콘텐츠를 단순히 반복하는 문장이 많아 줄여나갔다. 5중점 2문장, 4중점 2문장까지 줄이면 괜찮은 출력을 보이지만 여전히 늘어지고 읽는데 피로감을 불렀다.

지금은 3중점 1문장을 설정하여 사용중인데 모바일 환경을 감안해도 적당한 길이의 문장이 구성되고 읽는데 큰 부담이 없다. 다만, 이 문장이라는 것도 쓰기 나름이라 어떤것은 너무 길어 다시 생성하기도 한다.

사진: 현재 페이지 요약 (다국어)

인상깊었던 작업은 다국어 처리이다. UI 전체에 대한 다국어 지원이라면 이야기는 다르겠지만 그렇게 어려운 프로그램도 아니고 사실상 세계공용어인 영어만 어느정도 지원해준다면 사용상 불편함은 없을 것이라고 생각했다.

중요한 것은 Open AI의 답변인 데이터의 다국어 지원인데 사용자가 설정한 언어를 질문 프롬프트에 삽입하여 해당하는 언어로 답변하도록 유도하는 방식으로 문제를 해결할 수 있었다. i18n모듈을 직접 다 설정하는 것과는 대비되는 아주 간단한 작업으로 한 일이라고는 문자열 합치기와 옵션의 나열¹이었다. 이 간단한 작업으로 전세계 모든 사용자들이 자신들의 모국어로 자연스러운 답변을 얻을 수 있다는 것은 참 인상적이었다.

"웹에서 검색" 기능 제외

ChatGPT에서 제공하는 웹에서 검색 기능은 OpenAI에서 별도의 옵션으로 제공되는 기능이 아니다. 추측이지만 ChatGPT의 별도 서버에서 각 웹 서비스로 검색결과를 얻어 집계한 후 다시 모델로 전달하여 결과를 얻는 것으로 보인다. 확장 프로그램에서 구현하기에는 필요한 사용자 설정이 점점 많아져서 피로도가 너무 높아지고 API가 아닌 크롤링 방식으로 접근하자니 너무 무식한 일 같아서 구현하지 않았다.

로그인 연동 기능 제외

프로그램을 최초에 설치한 이후에 사용자가 옵션으로 들어가 API_KEY를 등록하는 과정이 있다. 이 부분을 자동화 또는 연계하여 사용자 설정을 최소화 한다면 더 좋은 프로그램이 될 수 있겠지만 외부 연계를 비롯하여 권한 설정과 같은 부가적인 구현이 너무 많아질 것 같아서 사용자가 최초에 한 번만 직접 등록하는 형식으로 기획했다.

크롬 웹 스토어 배포

크롬 확장프로그램을 배포하기 위해서는 직접 설치 프로그램을 주고 받는 방법도 있겠지만 한 번 제대로 해보기 위해서 크롬 웹 스토어에 배포해보기로 했다. 쉽게 설치할 수 있고 크롬이 설치된 환경이라면 어디에서든지 설치가 가능하다는 장점이 있다.

이곳에 배포하기 위해서는 $5를 지불하고 개발자로 등록을 해야 한다는데 나는 언제 했었는지 이미 개발자로 등록이 되어 있었다. 몇 번 확장프로그램 개발을 하긴 했었는데 기억은 없지만 그 사이에 등록을 했었나 보다.

이곳에 프로그램을 등록하려면 필요한 정보들을 크롬 웹 스토어측에 제공해야 한다. 개인정보 사용 정책부터 프로그램의 목적이나 프로그램에서 요구하는 권한의 사용 이유와 같은 다양한 정보들을 웹 스토어 측에 제출해야한다. 프로그램 코드도 웹 스토어의 검수를 받고 허가가 내려져야 등록된다.

프로그램은 변수명을 줄이거나 빈 칸을 없에는 등의 압축_minify정도는 괜찮지만 검수를 힘겹게 만들고 성능에 영향을 줄 수 있는 난독화_obfuscation는 허용하지 않는다.

사진: 웹 스토어 프로그램 등록 현황

이번 프로그램을 작성하는데 보편적으로 사용되는 스택인 ts + react + shadcn 그리고 몇 가지 라이브러리와 vite를 통한 번들링을 사용하였다. 검수는 4일 걸렸고 성공적으로 통과 되었다.

검수를 기다리는 4일간 많은 업데이트를 거쳐 다시 새로운 버전을 올렸는데 이것도 4일정도 걸릴거라 예상할 수 있었다. 새로운 버전을 업로드할 때에도 추가된 권한이나 프로그램에 대해서 추가적인 정보를 제공해야 한다. 최장 2주까지 소요된다고 하니 그 이상은 고객센터로 문의 해보는 것이 좋겠다.

마치며

생각보다 검토 대기 중 기간이 길기 때문에 초도배포시에 똥줄이 타는 경험을 하게 될 것이다. 물론 전세계에 배포되는 스토어에 4일만에 피드백이 오는 것이라면 정말 빠른 것이라 생각하기도 하지만 첫 배포시의 기대속에서 4일을 기다리는 것은 상당히 고역이다.

이 프로그램도 1.0.0 으로 배포 검수를 요청하고 4일만에 1.2.5 까지 꽤나 많은 기능 개선이 있었다. 한 주 정도 후다닥 작성한 탓도 있겠지만 그렇지 않다고 해도 새로운 기능이나 예기치 못한 오류를 포함하고 있다면 4일은 오류 수정 업데이트까지 꽤나 긴 시간이다. 혹시 크롬 확장프로그램을 만들 생각이 있다면 한 두달정도는 탄탄하게 작성하고 나서 올리는 것을 추천한다. 물론 그렇다해도 업데이트가 계속 생기겠지만 말이다.

후속

사진: 사용량

약 보름간의 사용량이다. 거의 대부분이 개발용 요청인 것을 감안한다면 안정화된 이후에 실사용에서는 압도적으로 더 낮은 사용량이 나올것으로 보인다. 페이지 전체 요약과 같은 불필요한 토큰이 많은 요청을 더 세밀하게 조정한다면 더 줄어들 가능성도 있다.

영상: 이미지 생성

조금 더 사용해봐야 알겠지만 이미지 생성과 같은 큰 토큰을 사용하는 요청을 많이 사용하는 상황을 제외한다면 정말 좋은 개선사례로 남을 것이다.