[Chrome Extenstion] ChatGPT를 활용한 크롬 확장 프로그램 만들기
이번학기에 교양 과목을 들으면서, E-Class의 과제방에 직접 글을 써야 하는 일이 많았다.
보통 이러한 과제는 400자 이상, 300자 이상, 등 글자 수에 제한을 두는 경우가 많은데, 내가 지금까지 작성한 글이 총 몇글자인지 알아보기 위해 구글에 '글자 수 세기' 라고 검색하여 사이트에 방문하여 글자수를 세고 제출하고는 했었다.
아래는 내가 사용한 사이트이다.
글자수세기
블로그 포스팅, 이력서, 자기소개서 작성을 잘 하기 위해서 필요한 글자수세기, 영어 단어수세기, 맞춤법검사기
lettercounter.net
그러다 문득 이러한 기능을 프로그램으로 만들어둔다면, 매번 사이트에 접근하지 않고 편하게 사용할 수 있겠다는 생각이 들었고, 최근 구글 크롬에서 제공하는 Chrome Extenstion에 관심에 생겨 한번 만들어보기로 하였다.
물론 웹 스토어를 찾아보면 이미 이러한 기능을 가진 확장 프로그램이 존재할 것 같으나, 시험기간에 딴 짓하고 싶기도 하고, 어차피 내가 쓸 프로그램 직접 만들어쓰는게 더 뿌듯하지 않겠는가
우선 나는 지금까지 배운 전공 공부중에 웹과 관련된 수업을 가장 소홀히 여겼기때문에 웹 프로그래밍에 대한 지식이 상대적으로 적었고, 크롬 확장 프로그램도 만들어본 경험이 없기 때문에 ChatGPT를 활용하여 기획부터 구현까지 모두 맡겨볼 생각이다.
먼저 프로그램의 이름부터 정해보자.
GPT가 추천해준 이름중에 "텍스트 트래커"가 그나마 마음에 들었기에 이름은 텍스트 트래커로 정하였다.
썩 마음에 드는 이름은 아니지만, 어차피 정식 출시할 생각은 없으니 이어서 프로그램의 아이콘을 정해보자.
저작권 무료 아이콘 제공 사이트 Flaticon에서 아이콘을 구할 것이기 때문에, 정형화된 형태가 찾기 쉬울것 같다. 따라서 돋보기 아이콘을 프로그램의 아이콘으로 선택하였다. 마침 Flaticon에 프로그램의 컨셉과 어울리는 적당한 모습의 아이콘을 금방 찾을 수 있었다.
아티스트가 디자인한 문서 종의 무료 아이콘
무료 벡터 아이콘. SVG, PSD, PNG, EPS 형식 또는 아이콘 폰트 형태로 네트워킹 수천 가지의 무료아이콘을 다운로드하세요 #flaticon #아이콘 #확대경 #문서 #검색
www.flaticon.com
자 이제 앱과 아이콘을 정했고, 구글 확장 프로그램을 만들기 위한 토대 마련은 끝났다. 다음으로 어떻게 해야하는지 GPT의 도움을 더 받아보자.
1번 요구사항 분석 및 명세화 부터, 3번 개발 환경 설정까지는 이미 어느정도 생각을 해두었으니 우리에게 필요한 것은 프로그램의 뼈대가 되는 코드이다. 코드를 요청해보자.
자 프로그램의 초안이 작성되었다. 글자수를 카운팅해주는 스크립트는 내가 작성할 생각이었는데 간단한 기능이라 그런지, 핵심기능에 대한 코드까지 만들어주었다. 정말 편리한 세상이다.
이제 만들어진 프로그램을 테스트하기 위해선 직접 크롬에 프로그램을 추가시켜야한다.
크롬에 프로그램을 추가시키는 방법은 간단하다.
먼저 크롬의 주소창에 chrome://extensions/ 를 입력하여 확장 프로그램 관리로 이동한다.
그후 오른쪽 상단의 개발자 모드 토글 스위치를 켜준다.
그럼 상단에 3개의 버튼이 추가되는데, '압축해제된 확장 프로그램을 로드합니다.' 를 누르면 내가 만든 확장 프로그램을 로드할 수 있다.
그럼 이렇게 프로그램이 추가된것을 확인 할 수 있는데, 빨간색으로 '오류'라고 적혀있는것을 보니 무언가 문제가 발생한것으로 보인다.
오류의 내용을 확인해보니, GPT가 제공한 코드가 현재는 업데이트되어 더이상 사용되지 않는 코드로 보인다.
GPT는 기본적으로 2022년 이전까지의 내용으로 학습하였기 때문에, 종종 이런 옛날 코드를 제공하는 문제가 있다.
이 문제를 해결하기 위해 GPT한테 해결을 요청해보자.
이제 수정된 코드를 읽어보고, 입맛에 맞게 조금 바꿔보자.
우선 name변수가 프로그램의 이름일것 같으니 있어보이게 영어로 변경하고,
description은 프로그램의 설명에 해당하는 것 같으니 프로그램의 성격에 맞는 설명으로 변경하였다.
마지막으로 아이콘을 지정하도록 하자.
{
"manifest_version": 3,
"name": "Text-Tracker",
"version": "1.0",
"description": "글자 수를 카운팅하는 프로그램입니다.",
"action": {
"default_popup": "popup.html",
"default_icon": "icons/text-tracker-16.png"
},
"permissions": ["activeTab"]
}
그럼 제작된 프로그램을 테스트 해보자.
테스트해본 결과, 공백을 포함한 글자를 카운팅해주는 것으로 보인다. 또한 '글자' 라는 글씨가 적힌 부분이 이상한 글자로 적혀있는 문자가 있었다. 이는 아마 인코딩 오류로 인해 한글이 깨지는 것으로 생각되며, 코드를 살펴보니 역시나 utf-8로 인코딩되었음을 html코드에 명시하지 않았었다.
이를 해결하기 위해 아래 코드를 원본 코드에 추가하였다.
<meta charset="utf-8">
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>글자수 카운트</title>
<style>
body {
width: 200px;
padding: 10px;
}
</style>
</head>
<body>
<textarea id="textInput" rows="5" cols="20"></textarea>
<div id="count">0 글자</div>
<script src="popup.js"></script>
</body>
</html>
결과를 확인해보니, 이제 한글이 깨지지않고 잘 출력되었다.
한가지 기능을 추가해보자. 현재 위 프로그램은 공백을 포함하여 글자 수를 알려준다. 하지만 어떤 과제는 공백 제외 글자수 제한을 두는 경우가 있다. 따라서 공백을 포함하였을때의 글자 수와, 공백이 없을때의 글자 수를 둘 다 확인하였으면 좋겠다.
역시나 내가 만들건 아니고, GPT가 만들어 줄 것이다.
새롭게 작성해준 코드를 읽어보니, 기존의 문자열에서 replace함수와 정규표현식을 사용하여 공백을 제외한 문자열을 만들고 카운팅하도록 하였다. replace는 문자열에 포함된 모든 첫번째 인자를 두번째 인자로 변경해주는 함수로, 공백을 정규표현식으로 찾아서 모두 제거하는것이 코드의 의도로 보인다.
위 코드의 결과를 'countNoSpaces'라는 id로 선언한 요소와, 'countTotal'이라는 id로 선언한 요소를 찾아서 보여주는것으로 보아,
기존 popup.html코드에도 이 요소를 추가해야 화면에서 확인할 수 있을 것이다.
수정된 js코드에 맞춰서 html코드를 아래와 같이 변경하였다.
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>글자수 카운트</title>
<style>
body {
width: 200px;
padding: 10px;
}
</style>
</head>
<body>
<textarea id="textInput" rows="5" cols="20"></textarea>
<div id="countTotal">0 글자</div>
<div id="countNoSpaces">0 글자</div>
<script src="popup.js"></script>
</body>
</html>
body에 countTotal, countNoSpaces라는 div를 추가한 것을 확인 할 수 있다.
그럼 수정된 프로그램을 테스트해보자.
공백을 제외한 문자와, 공백을 포함한 문자를 적절히 보여주는 것을 알 수 있다.
이제 좀더 완성도 있는 프로그램을 만들기 위해 UI를 조금 수정해보자.
먼저 아이콘의 해상도가 조금 깨지는 문제가 나는 것 같아서 오픈소스를 참고해보니, icons라는 속성을 manifest에 따로 작성하고, 크기별로 아이콘을 지정하면 되는것으로 보인다. 이에 맞춰서 아래와 같이 manifest.json파일을 수정하였다.
{
"manifest_version": 3,
"name": "Text-Tracker",
"version": "1.0",
"description": "글자 수를 카운팅하는 프로그램입니다.",
"action": {
"default_popup": "popup.html"
},
"permissions": ["activeTab"],
"icons": {
"16": "icons/text-tracker-16.png",
"32": "icons/text-tracker-32.png",
"48": "icons/text-tracker-48.png",
"128": "icons/text-tracker-128.png"
}
}
이렇게 수정하니 확장 프로그램에서도 앱의 아이콘이 추가되고 더 선명한 화질의 아이콘을 확인 할 수 있었다.
이제 html의 모습을 좀 수정해보자. 내가 원래 사용하던 사이트는 아래와 같은 UI를 갖고 있었다.
나는 단어 카운팅 기능과 줄 카운팅 기능은 필요하지 않으므로 추가하지 않기로 하였고,
현재 텍스트 영역이 너무 작은것 같아 크기를 조금 조정하고, 배경색을 수정하는 등 좀 더 프로그램의 완성도를 높여보겠다.
너무 간단한 작업이므로 여기서부터는 굳이 GPT의 힘을 빌리지 않고 직접 작성하겠다.
수정한 html코드와 js코드는 아래와 같다.
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>글자수 카운트</title>
<style>
body {
background-color: #BAD6EB;
width: 400px;
padding: 10px;
}
textarea{
padding: 10px;
margin-bottom: 10px;
}
#countTotal{
font-weight: bold;
font-size: large;
}
#countNoSpaces{
font-weight: bold;
color: red;
font-size: large;
}
</style>
</head>
<body>
<textarea
id="textInput"
rows="15"
cols="45"
placeholder="글자를 입력하거나, 문서를 복사해서 넣어주세요"></textarea><br>
<div id="countTotal">공백 포함 : </div><br>
<div id="countNoSpaces">공백 제외 : </div>
<script src="popup.js"></script>
</body>
</html>
document.addEventListener('DOMContentLoaded', function () {
var textInput = document.getElementById('textInput');
var countDisplayTotal = document.getElementById('countTotal');
var countDisplayNoSpaces = document.getElementById('countNoSpaces');
textInput.addEventListener('input', function () {
var text = textInput.value;
var textLengthTotal = text.length;
var textLengthNoSpaces = text.replace(/\s/g, '').length; // 공백 제거 후 글자 수 계산
countDisplayTotal.textContent = ' 공백 포함 : ' + textLengthTotal
countDisplayNoSpaces.textContent = ' 공백 제외 : ' + textLengthNoSpaces
});
});
이제 프로그램을 다시 켜보면 나만의 구글 익스텐션 프로그램 완성이다!
전체 프로그램 코드는 아래 깃허브 링크에서 참고할 수 있다.
https://github.com/y2hscmtk/Text-Tracker
GitHub - y2hscmtk/Text-Tracker: 글자수 세기 크롬 확장 프로그램
글자수 세기 크롬 확장 프로그램. Contribute to y2hscmtk/Text-Tracker development by creating an account on GitHub.
github.com