brunch

라이킷 7 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 챗대리 Jun 26. 2024

비개발자의 크롬 익스텐션 개발후기(ft. 챗GPT)

개발 1도 모르는 비개발자가 크롬 익스텐션을 개발하기까지

안녕하세요 챗대리입니다.

얼마전 5월, 제가 직접 개발한 크롬 확장 프로그램 '모두의 이모지'를 런칭했습니다.

사실 저는 전혀 개발과 관련된 일을 해보지 않은 비개발 직군이지만, 나만의 앱을 만들어보고 싶다는 작은 소망(?)을 품고 있었는데요. 챗GPT-4가 오픈되면서 코딩을 몰라도 Ai로 개발을 할수도 있겠다는 생각에 꿈꾸던 개발에 도전해보게 되었습니다.

제가 만든 '모두의 이모지'는 이모티콘, 이모지, 특수문자, 인스타체를 모두 한 번에 사용할 수 있게 만든 크롬 확장 앱인데요. 처음으로 직접 앱을 만들어보면서 여러가지 느낀점이 많아, 이번 글로 남겨보고자 합니다.

1. 프로젝트 개요

크롬 확장프로그램 개발에 착수한 이유는 단순했습니다. 광고대행사에 다닐때 매번 이모티콘과 특수문자를 사용할때마다 외부 사이트에 접속해 복사하고 붙여넣기를 반복하느라 불편했던 기억이 생각났기 때문입니다. 이미 다른 이모지 확장프로그램이 있었지만, 기존 프로그램 중에 일본어 이모티콘과 인스타체, 특수문자까지 지원되는 프로그램은 없었기에 개발할 가치가 있다고 생각했습니다.

※크롬 확장 프로그램이란?

크롬을 사용하고 있는 사용자를 대상으로 제공하고 있는 기능으로, 크롬 웹스토어에서 다운받을 수 있습니다.

https://chromewebstore.google.com/?hl=ko

2. 결과물

구체적인 개발 과정을 이야기하기 전에 결과물부터 소개해보겠습니다.

'모두의 이모지' 화면 구성

<모두의 이모지> 시연 영상

[주요 기능]

- 마케터에게 필요한 모든 특수문자 지원 : 원하는 이모지/ 이모티콘 / 특수문자/ 인스타체를 빠르게 선택할 수 있습니다.

- 자동 복붙 기능 : 이모지를 클릭하면 바로 클립보드로 복사되며 (자동 Ctrl+C) 하단의 회색 입력창에 표시됩니다.

- 이모지 검색 : 검색창으로 원하는 이모지를 검색할 수 있습니다 (한글로 검색)

- 최근 이모지 보기 : 가장 최근에 사용한 이모지가 '최근' 섹션에 뜹니다.

- 즐겨찾기 : 맨 우측 하단의 '하트(♡)'를 누르면 입력창에 표시된 이모티콘 조합이 '즐겨찾기'에 저장됩니다.

- 빠른 이동 : 하단의 탭을 누르면 특정 이모지 그룹으로 이동합니다. (비행기 아이콘 클릭시 → 교통 그룹으로 이동)

- 인스타체 변환 : 인스타체 탭으로 이동 후, 인스타체로 바꾸고 싶은 텍스트를 입력, 변환을 누르면 인스타체가 생성됩니다.

크기 및 디자인 수정 등 몇가지 더 적용하고 싶은 기능들이 있었지만 우선 핵심기능만 넣어 런칭하는 것을 목표로 했습니다.

3. 개발과정

프로그램 초기버전은 걸스인텍과 함께한 노코드 챌린지 기간 중 거의 열흘 만에 완성되었습니다. (즐겨찾기 기능 없는 버전) 개발지식이 거의 전무한 수준이었지만 챗GPT-4의 도움을 받아 코딩 지식이 부족함에도 불구하고 프로젝트를 진행할 수 있었습니다. 기존의 비슷한 확장프로그램의 코드 구조를 참고하여 챗GPT4에게 필요한 기능을 수정요청하는 식으로 개발을 진행했습니다.

3-1. 크롬 익스텐션 개발에 관한 기본 정보 습득

개발을 시작하기 전에 구글 공식 개발자 문서(링크)를 통해 어떤 언어로 개발해야 하는지, 파일 구성은 어떻게 구성되어야 하는지 먼저 확인했습니다.

언어 : html,css, js로 제작
필요 파일 :
ㄴmanifest.json (크롬에 앱에대한 정보, 버전, 실행방법, 권한 정보를 알려주는 파일)
ㄴcontentScript.js / background.js
ㄴpopup.js / popup.html (팝업 창 구현을 위한 html 코드, 자바스크립트 등 포함)

3-2. 테스트/디버깅

"chrome://extensions"로 이동후 개발자 모드를 사용 설정 후, "압축해제된 확장프로그램을 로드"를 클릭, 코드가 들어있는 폴더를 찾아 열면 현재 개발중인 확장프로그램을 테스트할 수 있습니다.

3-3. 코드 구현과정

기본 코드 구조 작성

기본적인 코드 구조를 구현하는데는 챗GPT이 도움을 받았습니다. 구글 공식 개발 문서에서 확인한 필요 파일 구성을 바탕으로, 이미지와 같이 챗GPT에게 기본적인 파일 구성을 알려주며, 코드를 작성해달라고 했습니다.

챗GPT(뤼튼)가 짜준 기본 코드

대부분 정확한 코드가 나왔지만 manifest같은 경우는 outdated되어 더이상 구글에서 승인하지 않는 내용의 코드가 포함될 수 있어 수정이 필요했습니다.

이모지 DB를 popup.html로 표현하기

이모지를 popup.html로 보여주기

제 확장 프로그램은 몇백 몇천개의 이모지들을 표형태로 보여주어야 하는 프로그램이기 때문에, 이모지 DB를 바탕으로 HTML/CSS로 보여주는 코드가 필요한데요. 이 부분은 챗GPT에게 바로 짜달라고 하면 막히는 부분이 많았습니다. 조금 헤매다가 기존 출시된 이모지 확장 프로그램의 코드를 참고하면 되겠다 싶은 생각이 떠올랐습니다. 그래서 크롬 웹스토어에서 제가 만들 프로그램과 유사한 크롬 확장앱을 다운받아 코드를 확인했구요. 이 코드를 챗GPT에게 넣어주면서 제 아이디어에 맞게 특정 부분을 수정해달라고 하는 식으로 진행했습니다. 다행히 기존에 나와있는 확장앱들이 제가 구현하려고 하는 로직 대부분을 탑재하고 있어서 일부분만 바꿔주면 되었기 때문에, 챗GPT4의 도움을 받아, 문제없이 진행할 수 있었습니다.

인스타체 탭 추가

일반 영문체를 인스타체로 바꿔주는 기능

제 프로그램은 이모지를 선택할 수 있는 기능뿐만 아니라,

"hello" 글자를 넣으면 "ⱧɆⱠⱠØ" 와 같은 인스타체로 바꿔주는 기능도 포함하고 싶었습니다.

마케터들이 카톡 CRM 메세지를 보낼때나, 광고 메일을 보낼때 자주 쓰는 기능이거든요.

이모지/이모티콘/ 특수문자까지는 똑같은 로직으로 구현할 수 있기 때문에 문제가 없었는데, 인스타체는 화면 자체가 달라서 자바스크립트를 조금 공부해야 했습니다. 반복문과 함수 개념 등을 습득 후 유사한 기능을 제공하는 해외 사이트 코드를 뜯어보며 로직을 구현했고, 막히는 부분은 챗GPT 4의 도움을 받아 코드를 구현할 수 있었습니다.

즐겨찾기 기능 추가

이모지 조합을 즐겨찾기로 등록할 수 있는 기능

가장 마지막으로 구현한 부분이자, 제 확장앱의 핵심이라고 할 수 있는 부분인데요. 바로 내가 원하는 이모티콘 조합을 즐겨찾기로 등록해 빠르게 복붙해서 쓸 수 있는 기능입니다. 그런데 이부분에서 문제가 발생했습니다. 즐겨찾기 기능을 추가하려고 코드를 다시 뜯어보니 이제까지 코드를 전부 챗GPT에게 도움을 받아 작성을 해버려서, 코드가 어디서부터 엉켜있는지 확인이 거의 불가능한 수준이라 특정 기능을 수정하거나 추가하기가 너무 복잡해진것입니다. 결국 프론트엔드 개발자인 동생의 도움을 받아 즐겨찾기 기능을 추가하긴 했지만, 아무리 Ai가 코드를 짜준다고 해도 코드를 이해하는 것은 사람의 몫이라는 걸 깨달았던 부분이었습니다.

4. 검수 및 출시 과정

크롬 웹스토어에 내가 만든 앱을 올리려면 먼저 개발자 등록을 해야합니다.(등록 수수료 5달러 결제 필요)

이후 확장앱 코드를 올려 검수 요청을 하면, 구글 측에서 검토가 들어가고, 최종 승인 후 chrome웹 스토어에 출시되는데요. 제 프로그램의 경우는 검수는 거의 2~3시간만에도 통과되고 검수가 통과되자마자 바로 웹스토어에 자동 등록되었습니다. 아마도 사용자 개인정보를 요청하는 기능이 없기 때문에 검수 당일 바로 승인되었던것 같은데요. 이 부분은 코드 내에 권한 요청을 얼마나 많이 요청하느냐에 따라 검수가 달라지는 것 같습니다.

5. 느낀점

첫번째 프로그램 개발에 챗GPT를 활용해보면서 몇가지 중요한 점을 깨달았습니다.

챗GPT가 도와줘도, 결국 코드 이해는 나의 몫

챗GPT는 정말 생각보다 코드를 잘 짜줍니다. 특히 이미 존재하고 있는 형태의 코드는 정말 쉽게 짜줍니다. (벽돌 게임 같은 것들..) 그러나, 로직이 조금만 복잡해지면 말귀를 못알아 들을 때가 많고 논리적으로 결함이 있는 코드를 만들때도 있습니다.결국 뭔가 새로운 프로덕트를 만들고 싶은 사람이라면 코드를 이해할 줄 알아야 할 것같습니다. 전체 코드를 이해하고 있지 못하면 내가 원하는 기능을 추가하지도, 오류를 수정하지도 못하니까요.

챗GPT는 문법을 자주 틀린다.

챗GPT는 은근 코드 문법을 자주 틀립니다. 가장 잦은 실수는 이미 파기된 문법을 사용하거나, 특정 메서드의 용법을 잘못 알려주는 실수입니다. 그러나 너무 설득력있게 말해서 특히 코딩 지식이 없는 비전공자로써 속아 넘어갈때가 많았는데요. 실제로 문법적 오류가 섞여 있을 수 있음을 명심해야 할것 같습니다.

챗GPT가 짜준 코드는 이해하기 어렵고 비효율적일 수 있다.

챗GPT는 인간이라면 '절대' 사용하지 않을, 이상하게 꼬인 방식으로 코드를 짜버리기도 했습니다. (예를 들어 A에서 B로 가면 되는데, A에서 C로 갔다가 B로 가는 식) 이런 불필요한 코드로 코드 가독성이 떨어져서 협업하기 어려워 질수도 있으니 주의가 필요할 것 같습니다.

챗GPT가 못잡는 버그를 클로드가 잡기도 한다

정확히는 모르지만, 두 Ai모델의 작동방식이 미묘하게 다르기 때문인지, 챗GPT로는 해결이 안되는데 클로드로 디버깅에 성공한 경우가 꽤 있었습니다. 때문에 디버깅 목적이라면 챗GPT뿐만 아니라 클로드도 같이 활용해보는게 좋을 것 같습니다.

결론 : 챗GPT에게 다 맡길 수 없다

처음에 이 프로젝트를 시작할때는 Ai도 있고.. 그냥 어떻게든 하면 되겠지~ 라는 안일한 마음으로 시작했던 것 같습니다. 하지만 실제로 완성을 하고보니 생각하지 못했던 부분에서 막히는 경우가 많았습니다. 챗GPT가 잘 하는 부분도 있지만, 인간이 해야만 하는 부분도 있었기 때문인데요. 앞서 말했듯이 "이미 널리 알려진 코드 조각이나 로직"은 챗GPT로 굉장히 쉽게 구현할 수 있지만, 새로운 알고리즘이나 복잡한 구현이 필요한 부분은 챗GPT로 바로 짜낼 수 없었기 때문입니다. 상세한 프롬프팅을 통해 어느정도 해결할 수 있었지만, 그러한 "프롬프팅"을 하는 것도 결국 개발에 대한 이해가 선행되어야만 했습니다.

가볍게 시작했지만 챗GPT의 가능성과 한계, 그리고 제 개발 실력까지 늘릴 수 있었던 프로젝트였는데요. 혹시 이번 글을 읽고 얘가 만든 "모두의 이모지"가 도대체 뭐지? 싶으신 분들은 링크에서 다운로드 가능하니, 한번 사용해보시는 것도 좋을 것 같습니다.^^ (이모티콘 및 특수문자를 자주 사용하는 분들이 손쉽게 쓸 수 있도록 나름 다양한 기능을 탑재했니다.)