CheapGPT 개발 히스토리

컴퓨터/IT작업기록

lu

luasenvy (luasenvy)

ChatGPT

최근 ChatGPT와 Copilot을 병용하며 개발에 좋은 영향을 받다 보니 사용 빈도가 점점 늘어났다. Suno AI 사용 후기에서도 소개했지만 개인적인 견해로는 아직 출력결과를 온전히 믿고 맡기기에는 무리가 있다. 제시하는 코드를 전부 확인해야 한다는 생각이 강해서 새로운 해결 방안을 찾거나 테스트 데이터를 뽑아내는 수준으로 활용하고 있다.

이 정도로만 활용해도 생각보다 빈번하게 사용하게 되는데 브라우저 실행 -> 새 탭 -> GPT 접속 -> 채팅 선택 -> 메시지를 입력 -> 엔터의 긴 작업 순서는 매번 피로도를 급격하게 올려갔다. 항상 켜두고 필요할 때 바로 검색하면 되지 않느냐 하는 사람들도 있다만 나 같은 꼰대들은 똥고집이라는 신체적 결함이 있어서 몸이 적응하지 못한다. 듀얼 모니터조차 시선만 분산시키지 오히려 생산성이 떨어지는 몸이 되어버렸기 때문에 되도록이면 한 화면 내에서만 활용하는 방법을 찾는 편이다. 일정 기간이 지나고 나서는 Copilot과 구글 검색만을 전적으로 활용하게 되었고 점점 ChatGPT의 사용률이 줄어들었다.

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

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

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

요구사항 정리

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

개발 히스토리

개발 착수

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

요금에 대한 것은 사실 답을 정해놓은 사항이었다. ChatGPT를 구독하여 활용하는 것이 아니라 OpenAI API를 활용하는 것이다. 한 달 무제한 사용도 아니고 결제한 만큼 정해진 사용량을 소진하는 형태인데 생각보다 많은 수의 토큰_{(입·출력 단어 수)}을 사용할 수 있다. 종량제처럼 기간이 지나면 소멸되는 것도 아니라서 나 처럼 그렇게 많이 사용하지 않는 사람들에게는 아주 합리적인 가격정책이다.

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

프로그램 언어는 최근 공부중이기도 한 Vite 번들러에 ts + react + shadcn 스택으로 결정하였다. 나중에 안 사실이지만 다행이도 이 개발 스택은 번들러를 통한 빌드 결과가 단순히 압축만 된 결과이기 때문에 스토어 검수 단계에서 문제가 없었다. 프로그램에 대한 자세한 소개는 CheapGPT 페이지에서 확인할 수 있다. 여기에서는 개발간 발생한 내용들을 소개를 하겠다.

사용자 인터페이스

초기의 UI 사진이다. 이후로도 많은 변경이 있었는데 언제나 설계했던 것 보다도 실사용하며 추가되는 것들이 더 많다. 사용에 혼선을 줄이기 위하여 ChatGPT를 사용하는 것과 동일한 방식으로 입력과 출력을 구성해야했고 응답도 Open AI API에서 제공하는 '스트림' 옵션을 사용하여 글자가 하나씩 추가되는 방식을 지원해주어야 사용자가 긴 응답시간을 지루하지 않게 기다릴 수 있었다.

단축키

이렇게 만든 확장 프로그램도 많은 단계를 거쳐야 사용할 수 있었는데 브라우저 사용 중 -> 마우스로 손 이동 -> 크롬 우상단의 작은 확장 프로그램 아이콘을 정확히 포인팅 -> 클릭 -> 다시 손을 키보드로 이동 -> 타이핑 및 사용의 작업 순서를 가지게 되었다. OTP를 입력하고 로그인하는 등의 매우 귀찮은 작업들은 없앴지만 여전히 이런 일련의 과정도 시간이 지나면 점점 피로도가 생겼다. 이 사항을 극복하기 위해서는 역시 키보드 단축키를 지원해야만 했다. 되도록이면 접근성이 용이하도록 왼손만으로 입력이 가능한 단축키 조합이어야 하고 시스템이나 브라우저의 내장 단축키와 중복되어서는 안됐다.

또한, 확장 프로그램이 팝업되면 자동으로 입력창에 포커스가 가도록 지원하였는데 최대한 사용자의 피로도를 줄이려고 애썼다. 말 그대로 'open and use'를 유지할 수 있어야만 사용하기가 편리했다.

현재 페이지 요약 기능

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

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

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

가장 이상적인 방법이라면 애드블록 확장 프로그램처럼 사용자의 마우스 포인터마다 요소의 가이드 라인을 제시하여 사용자의 판단하에 요약할 요소를 선택할 수 있는 UI를 제공하는 것이다. 이 기능은 생각보다 해야할 일이 많아 보여서 채택하지는 않았다. 차라리 사용자가 해석할 메인 컨텐츠를 직접 드래그하여 선택한 후에 선택된 노드를 참조하는 방식이 훨씬 품이 조금 들어갈 것이라 판단했다.

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

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

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

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

웹에서 검색

개발 당시만 해도 ChatGPT에서 제공하는 '웹에서 검색' 기능은 OpenAI에서 별도의 옵션으로 제공되는 기능이 아니었다. 백엔드에서 어떤 추가적 처리가 있는 것 같아 직접 구현하지 않으려고 포기하고 있었다. 다행히도 이 기능을 기반으로 작동하는 API 모델이 제공되어 'search-preview'라는 이름의 모델을 선택하고 검색하면 동일한 기능을 지원할 수 있었다.

로그인 연동 제외

프로그램을 최초에 설치한 이후에 사용자가 옵션으로 들어가 자신이 발급받은 API Key를 직접 등록하는 과정이 있다. 이 부분을 자동화하면 사용자 설정을 더 최소화하고 최초 진입장벽을 더 낮출 수 있겠지만 외부 연계를 비롯한 권한 설정 등 부가적인 구현이 너무 많아 사용자가 수동으로 입력하는 형식으로 결정했다.

크롬 웹 스토어 배포

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

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

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

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

이번 프로그램을 작성하는데 보편적으로 사용되는 스택인 ts + react + shadcn 그리고 몇 가지 라이브러리와 vite를 통한 번들링을 사용하였다. 검수는 4일 걸렸고 성공적으로 통과되었다. 검수를 기다리는 4일간 많은 업데이트를 거쳐 다시 새로운 버전을 올렸는데 이것도 4일 정도 걸릴 거라 예상할 수 있었다. 새로운 버전을 업로드할 때에도 추가된 권한이나 프로그램에 대해서 추가적인 정보를 제공해야 한다. 최장 2주까지 소요된다고 하니 그 이상은 고객센터로 문의해보는 것이 좋겠다.

마치며

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

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

후속

약 보름간의 사용량이다. 거의 대부분이 '개발용 요청'인 것을 감안한다면 안정화된 이후에 실사용에서는 압도적으로 더 낮은 사용량이 나올 것으로 보인다. 페이지 전체 요약과 같은 불필요한 토큰이 많은 요청을 더 세밀하게 조정한다면 더 줄어들 가능성도 있다. 조금 더 사용해 봐야 알겠지만 이미지 생성과 같은 큰 토큰을 사용하는 요청을 많이 사용하는 상황을 제외한다면 정말 좋은 개선 사례로 남을 것이다.