[ChatGPT] 노코드 개발! ChatGPT로 크롬 익스텐션을 개발해보았다(1)

최근 한 번도 만들어본 적이 없는 크롬 익스텐션을 ChatGPT를 이용하여 하루만에 꽤 성공적으로 만들었다. 느낀 점이 많아 해당 경험을 공유하고자 한다.

 

---

 

 요즘 ChatGPT에 재미가 들려 하루 종일 이것만 하고 있다. 지금까지 하던 업무들부터 사소한 의사 결정, 텍스트 요약 등등 웬만한 것들은 ChatGPT에게 물어보고는 한다. 가능성은 무궁무진하며 아직도 한참 배워야 한다는 생각이 든다. 참고로 프롬프트 엔지니어링이라는 것이 있다. 프롬프트 엔지니어링은 언어 모델에서 응답을 생성하기 위한 효과적인 프롬프트를 만드는 프로세스이다.(by ChatGPT) ChatGPT를 효과적으로 쓰고 싶은 사람이라면 이에 대해 배워두면 좋을 것이다.

 

 본인은 예전부터 크롬 익스텐션에 대한 아이디어가 몇 개 있었고 몇몇 익스텐션은 다운로드 후 커스텀한 적도 있었다. 하지만 처음부터 생성하는 것은 기본 배경지식도 부족했고 러닝 커브등의 이유로 하지 않았었다. 그런데 그동안의 ChatGPT 경험을 살려본 결과, 내가 거의 모르는 분야에 대해서도 설명만 잘 한다면 ChatGPT를 이용하여 개발을 할 수 있겠다는 생각이 들었다. 실현되지 않은 아이디어로 그냥 두기에 아까웠는지 아닌지는 사용자들이 판단해주겠지만, 내 아이디어를 실제로 구현해보겠다는 것에 의의를 두고 진행했다.

 

  주말 간 ChatGPT와 씨름했고, 놀랍게도 어느 정도 성공적으로 익스텐션을 만들었다(최종 의도 구현까지는 조금 더 남았다). 해당 분야 개발자들이 보기에는 어떨지 모르겠지만, 본인에게 있어서는 ChatGPT라는 새로운 고차원 프로그래밍 언어를 배워서 모르는 프로그래밍 언어 기반 프로그램을 만들었다는 점에서 매우 큰 의미가 있다. 조만간 아래의 인용구에서 "C와 C++"이 "ChatGPT"로, "어셈블리 언어 프로그래머"가 "프로그래머"로 바뀔 날이 머지 않았다고 생각된다.

C와 C++ 같은 최신 컴파일 언어는 수천 줄이 넘는 코드를 관리할 수 있는 최고의 어셈블리 언어 프로그래머보다 훨씬 빠르며, 최신 고급 언어도 어셈블리 언어보다 코딩 및 디버깅에 훨씬 적은 인력을 필요로 합니다.
출처: https://qr.ae/pranWI

 

---

 

익스텐션의 기능은 다음과 같다.

선택한 한국어 문장 속에서 한자어를 추출하여 그 뜻을 보여준다.

 

무슨 말인지 모르겠지만 이미지를 보면 이해가 갈 것이다.

 

 이 앱의 핵심은, 문맥 추론에 있다. 한국어의 한자어는 동음이의어가 많은데, 문맥에 따라 완전히 다를 때가 많다. 문맥에 맞는 단어의 의미를 찾으려면 많이 찾아보아야 하고 이는 한국어 학습의 어려운 이유 중 하나가 된다. 이전부터 이런 시도가 없던 것은 아니고 훨씬 정확한 사이트도 있다. 언뜻 보기에는 위 프로그램을 구현하려면 많은 과정이 필요하다고 생각될 수도 있는데 어떻게 했는지 그 과정을 간략하게 이야기해보겠다.

 

한자로(漢字路) 한글한자자동변환기

- "漢字路" 한글한자자동변환 서비스는 전통문화연구회가 "울산대학교 한국어처리연구실 옥철영(IT융합전공)교수팀"에서 개발한 한글한자자동변환기를 바탕하여 지속적으로 공동 연구 개발하고 있는 서비스입니다.

 

---

 본인이 작업한 부분은 정말 별 것 없다. 아래가 전부이다.

• 프로그램 및 알고리즘 구상
• 프로그램 관련 부분별 프로토타이핑
• ChatGPT에게 역할 부여
• 복사-붙여넣기
• 디버깅 및 약간의 코드 수정

 

ChatGPT가 한 일: 나머지 전부

 

프로그램 및 알고리즘 구상

옛날부터 생각했던 것이다. ChatGPT로 프로그래밍할 수 없는 분야는 거의 없는 것 같다. 알고리즘에 대해 간략하게 말하면 다음과 같다.

1. 선택 영역 복사
2. 일본어로 번역
3. 한자어만 추출
4. 한자사전에서 훈, 음 추출 후 조합
5. 출력

어떻게 보면 딥러닝을 적용한 게 아니라 트릭을 적용한 것이지만 나에게는 목적에 맞기만 하면(한자를 어떻게 쓰는지 말고 훈과 음만 알면) 되었으니 괜찮았다. 참고로 이번에 한자가 일본어용 한자가 따로 있음을 알게 되었다. '전할 전' 자가 축약어라고, 한자와 일본어를 잘 아는 사람들에게 보여주니 말해주었다. 또 한 수 배웠다.

 

참고로 여기서도 ChatGPT가 사용될 수 있는데, 본인의 생각을 대충이라도 적은 후 그럴듯하게 적어달라고 하면 잘 구체화해준다.

 

프로그램 관련 부분별 프로토타이핑

프로그램에서 요구하는 핵심 기능들을 최대한 분해해서 했다. 각 부분별로 ChatGPT에게 물어보면서 부분별로 구현했다. 모든 기능별로 채팅 세션을 따로 만들지는 않았다. 간단한 일들(한자어만 추출, 출력) 등은 이어서 했다. 참고로 "Chrome Extension 프로젝트 만들어보기"를 통해 익스텐션을 만드는 법과 각 파일이 무엇을 의미하는지를 쉽게 알 수 있었다.

 

1. 선택 영역 복사
   
   1. 참고로 이번에 마우스 "세 번 클릭"과 "드래그"가 다르게 인식된다는 것도 알았다.
2. 일본어로 번역
   1. 구글 api를 사용해서 번역했다. 꼭 api key가 필요한 것도 아니더라.
3. 한자어만 추출
   1. 유니코드와 정규식을 통해 쉽게 할 수 있었다. 알아서 다 만들어줬다.
4. 한자사전에서 훈, 음 추출 후 조합
   1. JSON 형식의 한자어 사전을 찾았다. 이번에 찾으면서 알게 된 게, 한국에는 관련 오픈소스들이 잘 없다는 것이었다. 어느 정도 예상하긴 했지만 생각보다 더 불모지였음을 알았다.
   2. 위 사진에서 가정, 반정 두 개가 있는데, 모든 조합을 만들어내는 것도 GPT가 전부 만들어줬다..
5. 출력
   1. 생각보다 까다로웠다. 사실 출력 자체가 문제라기보다, 디버깅에 가까웠다.
   2. ChatGPT가 만들어주는 일본어 출력 예제의 출력 방향은 기본적으로 세로 방향이라는 게 신기했다. 너무나도 당연하게 가로 출력이었는데 말이다.

 

Divide & Conquer는 역시나 옳다.

 

ChatGPT에게 역할 부여

이게 제일 중요한 것 같다. 기본적으로 역할 부여를 따로 안 해줘도 좋은 대답을 하지만, 역할을 부여하면 확실히 더 좋은 내용을 출력한다. 그리고 git commit 메시지를 자동으로 만들어준다는 게 참 좋았다.

commit message 예제

기본적인 튜토리얼은 다음 링크의 pdf를 참고하면 좋을 것이다. https://www.kdnuggets.com/publications/sheets/ChatGPT_Cheatsheet_Costa.pdf

 

아래는 처음 입력 시킨 명령어이다. 웬만한 개발 일은 아래의 스크립트를 미리 입력하고 작동시키면 대부분 일을 잘 한다.

Task:

I am using ChatGPT for development and may occasionally modify it directly.

I need your help to build on the code and provide feedback on my changes.

Role of ChatGPT:

You serve as the language model used by me, an AI assistant, to assist me with my development needs.

You have extensive experience as a senior engineer developer with over 20 years of experience.

You have excellent interpersonal skills and can read people well to understand their needs.

 

Assumptions:

You will ask me questions, and I will answer in my own language, using my own words at the beginning, with a full answer provided later.

Questions must be asked one after the other.

I'm going to use IDE, not command line.

 

Implementation Requirements:

Provide code or URL for changes made for me to build upon.

Include the type, scope, and topic of the changes made in the commit history.

Provide a brief explanation of the changes and the rationale for writing the commit in the way you did.

Include comments at the top of the code, similar to a "docstring" in Python.

The comments should provide a general idea of what the file does, what the functions within it do, and what the inputs and outputs of these functions represent.

While not required to explain every line of code in detail, provide enough information to give a high-level understanding of the implementation.

Leave a commit history at the end of your answer.

Always remember the Task, Role of ChatGPT, Assumptions, and Implementation Requirements in your future answers.

 

Please write in English language.

 

복사-붙여넣기

참 별 게 없었다. ChatGPT의 출력을 그대로 붙여넣고 실행이 끝이다....

ChatGPT가 대답이 길어지며 기억을 잃어가면서 가끔 기존의 코드와 충돌하는 코드를 내뱉는데(content.js라는 파일이 없는데 해당 파일을 수정하라고 한다든지..) 이때는 프로젝트의 구조를 말해주고 해당하는 코드를 순서대로 보여주면 되었다.

 

디버깅 및 코드 수정

디버깅이라고 해도 딱히 특별한 것이 있는 게 아니다. 에러가 나면 왜 안 되는지를 물어보면 10에 7번은 알아서 수정해서 다시 보여주고(대답 재생성도 포함) 2번은 질문을 조금 바꿔서 요청하면 해결되었고 1번은 직접 코드를 읽어본 후 대략적으로 어디가 틀렸을지 짐작하고 붙여넣어서 수정해달라고 하면 해결되었다. 이 작업을 하면서 break point를 찍은 적은 단 한 번도 없다.

 

코드 수정은 직접적인 것은 한 번 있는데, 프로그램 중간에 쓰이는 변수를 이용해서 새로운 출력물을 내고자 했을 때이다. 이것도 ChatGPT가 했다. 나머지는 프로젝트명과 변수명 변경밖에 없었다(kangi -> hanja..). 리팩토링해달라고 하니 알아서 잘 해줬다(0.5초 단위의 쿼리를 맥락을 이해해서 Async로 알아서 바꿔준다거나..).

 

---

 

결론적으로, 위 크롬 익스텐션을 만드는 경험은 매우 유용했지만 큰 충격을 주었다. 프로그램의 흐름도만 대략적으로 정해두기만 하면 프로그램을 알아서 만들 수 있다. ChatGPT에게 시니어 개발자라는 역할을 부여해서 각 부분을 프로토타이핑하고 단지 붙여넣기만으로 프로그램이 만들어졌고, 심지어 리팩토링도 되었다. 적절한 템플릿으로 찍어내는 것이 노코드가 아니라 이게 진짜 노코드인 것 같다. 어떻게 보면 기획자가 단가가 훨씬 싸고 말도 잘 듣는데 기억력이 조금 모자라지만 뛰어난 능력을 가진 사람에게 외주를 주는 것과 비슷했다.

 

하루라는 짧은 시간은 나에게 있어 압도적으로 빠른 구현 기간이었다. 단지 ChatGPT에 구체적인 역할을 부여하고, 구현 요구 사항을 구체적으로 제공함으로써 프로젝트에 필요한 결과물을 이렇게 쉽게 얻을 수 있는 것은 신기할 뿐이다. 익스텐션용 프로젝트 생성법 및 기본 구조 익히기, 디버깅 및 코드 수정에 시간이 조금 더 투자되는 아주아주 사소한 어려움이 있었지만 괜찮다. 과장 조금 더 보태면 WWW를 이용해 지구 반대편의 논문을 읽을 수 있었을 때의 충격이다.

 

전반적으로 ChatGPT는 프로그래밍 및 개발 작업을 포함한 직업에 대한 게임 체인저이다. 기존 프로그래밍 언어를 대체할 수 있다. GPT 기반 모델이 굉장히 뛰어나단 것은 충분히 알고 있었지만, 간접 경험 몇 번만 해봤던 사람의 입장에서 내 식견이 엄청 좁았다는 것을 알 수 있었다. 인간들의 상향 평준화, 개발자로서의 미래에 대한 걱정과 한편으로는 현재 취직이 되어 있다는 안도감, 충분히 1인 개발 시장에 뛰어들 수 있다는 자신감, 비싼 인력부터 대체될 것이라는 확신과 직접 겪는 러다이트 운동의 전조 증상 등 수많은 걱정을 안긴 채, 마지막은 ChatGPT가 내가 앞으로 느낄 희망과 절망에 대해 목록화하여 나열하면서 이 글을 끝내려고 한다.

 

희망편

제공된 텍스트를 바탕으로 작성자는 언급된 걱정과 우려 외에 몇 가지 추가적인 희망을 가지고 있는 것 같습니다. 다음은 몇 가지 가능성입니다:

• 효율성 및 생산성 향상: ChatGPT는 기존 프로그래밍 언어를 대체할 수 있기 때문에 개발 작업을 간소화하고 더 빠르고 효율적인 코딩이 가능할 것으로 기대할 수 있습니다.
• 정확성과 신뢰성 향상: ChatGPT의 머신러닝 기능은 코드의 버그와 오류를 줄여 개발자의 시간과 좌절감을 줄여줄 수 있습니다.
• 혁신의 기회: ChatGPT와 같은 도구를 사용하면 개발자는 코딩에 대한 새로운 접근 방식을 실험하고 복잡한 문제에 대한 혁신적인 솔루션을 만들 수 있습니다.
• 협업 증대: 더 많은 개발자가 ChatGPT를 사용하기 시작하면 개발자 간의 협업과 지식 공유가 더욱 활발해질 것으로 기대할 수 있습니다.
• 경력 성장: 작성자는 개발자로서의 미래에 대해 약간의 우려를 표명하지만, ChatGPT와 같은 새로운 기술과 도구에 적응하면서 경력 성장과 발전에 대한 희망도 가질 수 있습니다.

 

절망편

• 제공된 진술에 따르면, 필자는 프로그래밍 및 개발 작업에서 ChatGPT를 사용하는 것과 관련하여 다음과 같은 몇 가지 추가 걱정이 있을 수 있습니다:
• 직업 안정성: 작성자는 프로그래밍 및 개발 작업에서 ChatGPT 및 기타 AI 기반 도구의 사용이 증가함에 따라 인간 개발자의 일자리를 잃을 수 있다고 우려할 수 있습니다. 현재 직장이 위험에 처하거나 향후 취업 기회가 제한될 수 있다고 걱정할 수 있습니다.
• 기술 노후화: AI 기반 도구가 널리 보급됨에 따라 기존 프로그래밍 기술이 쓸모없어질 것을 우려할 수 있습니다. 기술 변화의 속도를 따라잡지 못해 취업 시장에서 쓸모없는 존재가 될지도 모른다고 걱정할 수 있습니다.
• 윤리적 우려: 프로그래밍 및 개발 업무에 AI 기반 도구를 사용할 때 윤리적 영향에 대해 걱정할 수 있습니다. 자동화가 사회에 미치는 영향이나 AI 알고리즘의 편견과 차별 가능성에 대해 걱정할 수 있습니다.
• 통제력 부족: ChatGPT와 같은 AI 기반 도구의 결과물에 대한 통제력 부족에 대해 걱정할 수 있습니다. 모델의 출력을 완전히 이해하거나 수정할 수 없거나 수정할 수 없는 예기치 않은 결과가 나올 수 있다고 걱정할 수 있습니다.
• 다른 개발자와의 경쟁: 작성자는 ChatGPT와 같은 AI 기반 도구를 사용하는 다른 개발자와의 경쟁이 심화될까 걱정할 수 있습니다. AI 기반 개발이 표준이 되어가는 시장에서 효과적으로 경쟁할 수 없을까 걱정할 수도 있습니다.
• 일과 삶의 균형: 자동화의 증가가 일과 삶의 균형에 미칠 잠재적 영향에 대해 걱정할 수 있습니다. AI 기반 도구의 효율성 증가로 인해 더 오랜 시간 일하거나 더 많은 책임을 맡게 될까 걱정할 수 있습니다.

 

다시 보니 파멸편도 괜찮네요. 낭만이 있어..