ChatGPT를 둘러싼 과대광고의 가장 큰 주장 중 하나는 효과적인 프로그래밍 도구가 될 수 있다는 것입니다. 아이디어는 다음과 같습니다. 자연어로 원하는 것을 설명하면 챗봇이 바로 그렇게 하는 코드를 생성합니다. 하지만 ChatGPT는 실제로 이를 수행하는 데 얼마나 능숙할까요?
테스트하는 것보다 알아내는 더 좋은 방법이 있을까요? 우리는 ChatGPT에 간단한 웹 앱을 처음부터 빌드하도록 요청했습니다. 테스트 결과와 ChatGPT를 사용하여 처음부터 웹사이트를 빌드하는 데 사용할 수 있는 단계는 다음과 같습니다.
1단계: 웹 앱에 대한 청사진 생성
어떤 도구를 사용하여 웹앱을 만들 때와 마찬가지로, ChatGPT에 앱을 맡기기 전에 앱의 모습이 담긴 청사진과 앱을 만드는 데 필요한 단계를 정해야 합니다.
첫 번째 과제로, 우리는 ChatGPT에 간단한 채팅 앱의 청사진을 개발해 달라고 요청했습니다. 이를 위해 우리는 웹 앱의 요구 사항을 설명한 다음, 챗봇에 앱 개발 계획을 자세히 설명해 달라고 요청했습니다.
위의 프롬프트를 사용한 결과는 다음과 같습니다.
위의 플로우차트와 같은 플로우차트를 생성하려면 ChatGPT 계정에서 “Show Me” 플러그인을 활성화해야 합니다. 몇 단계만 거치면 ChatGPT 플러그인을 설치하고 사용할 수 있지만 프리미엄 구독이 필요합니다.
플러그인이 없으면 텍스트 기반 청사진이나 ASCII 아트 흐름도를 얻게 됩니다. 그래도 괜찮습니다. 플러그인이 없어도 ChatGPT는 아래 예와 같이 앱의 명확한 청사진을 제공해야 합니다.
2단계: 청사진을 더 작은 모듈로 분할
이제 큰 그림이 그려졌으므로 ChatGPT에 앱을 더 작은 구성 요소로 분할하여 별도로 개발하고 통합하여 완전한 웹 앱을 형성하는 데 도움을 요청했습니다. ChatGPT는 앱을 세 가지 구성 요소로 분할할 것을 제안했습니다.
- 등록 모듈
- 로그인 모듈
- 채팅 모듈
다른 아이디어도 있었지만, 여기서의 목표는 ChatGPT가 주도권을 잡는 것입니다.
1. 등록 구성 요소 빌드
우리는 등록 구성 요소를 빌드하는 데 바로 뛰어들었습니다. 우리는 ChatGPT에 적절한 알고리즘을 도출해 달라고 요청했습니다. 여기서 우리는 등록을 위해 사용자의 사용자 이름, 이메일, 아바타만 필요하다고 명시하여 개입했습니다. 프롬프트는 다음과 같습니다.
결과는 다음과 같습니다.
다음으로, ChatGPT를 사용하여 등록 구성 요소를 빌드했습니다.
등록 프로세스에 비밀번호 필드를 포함시키지 않았지만 ChatGPT는 생성된 HTML 코드에 비밀번호 필드를 포함시켜 올바른 결정을 내렸습니다. 우리는 아무런 수정 없이 코드를 복사했고, 브라우저에서 보이는 모습은 다음과 같습니다.
다음으로, ChatGPT에 PHP 등록 스크립트를 생성하도록 요청했습니다. 처음에는 “양식 제출을 처리하기 위한 서버 측 로직에 대한 PHP 코드를 작성하세요”라는 요청을 했습니다. 생성된 스크립트는 잘 작동했지만, 취약점이 많았습니다.
비밀번호 해싱도 없고, 오류 처리도 없고, SQL 주입에 취약했습니다. ChatGPT는 최소한만 했습니다. 이를 수정하는 것은 비교적 쉬웠습니다. 우리는 ChatGPT에 “방금 생성한 코드의 모든 잘못된 부분을 식별한 다음 식별된 지점을 사용하여 코드를 최적화”하라고 요청했습니다. 그러면 PHP 등록 스크립트가 실행될 준비가 되었습니다.
프롬프트의 문구가 중요합니다. ChatGPT에서 무엇을 해야 하는지 매우 명확하고 구체적으로 설명해야 합니다. 단순히 “이 코드의 문제를 해결해 주세요”라고 요청했을 때, 우리가 해결해 주길 바랐던 대부분의 문제는 해결되지 않았습니다. ChatGPT 프롬프트 작성에 대한 자세한 지침은 효과적인 프롬프트를 작성하는 방법을 배울 수 있는 몇 가지 장소를 소개합니다.
다음으로, 우리는 ChatGPT에 “PHP 스크립트에서 수집한 데이터에 대한 데이터베이스를 생성하는 SQL 코드를 작성하세요.” 다음은 결과 SQL 코드입니다.
SQL을 실행하여 생성된 테이블은 다음과 같습니다.
데이터베이스가 설정된 후 첫 번째 등록을 시도했고, 아무런 오류 없이 작동했습니다.
2. 로그인 구성 요소 빌드
등록 구성 요소를 제거한 후, 로그인 구성 요소를 맡았습니다. 놀랍게도 세션 관리의 추가 논리에도 불구하고 가장 쉽게 빌드할 수 있었습니다.
생성된 로그인 페이지입니다. 주요 하이라이트는 등록 페이지와 동일한 색상 옵션을 사용한다는 것입니다.
ChatGPT의 지시에 따라 “server.login.php” 파일을 만들고 생성된 PHP 스크립트를 추가한 후, 아무런 수정이나 디버깅 없이 첫 번째 로그인에 성공했습니다.
3. 채팅 컴포넌트 구축
채팅 구성 요소를 만드는 것은 우리의 작은 실험의 마지막이자 아마도 가장 힘든 부분이었습니다. 처음에는 ChatGPT에 채팅 구성 요소의 코드를 작성해 달라고 요청했습니다. 말할 것도 없이 엄청난 실패였습니다. 만들고 싶은 것의 더 복잡한 구성 요소의 경우 더 작은 구성 요소로 분할하여 하나씩 처리해야 합니다.
우리는 ChatGPT에 채팅 구성 요소를 분할하는 것에 대한 제안을 요청했고, ChatGPT는 세 개의 페이지를 만들 것을 제안했습니다.
- 채팅.php
- 보내기-메시지.php
- 페치-메시지.php
ChatGPT가 파일 이름을 제안할 때, 프로젝트에서 다른 이름을 사용하면 챗봇이 프로젝트 전체에서 생성하는 모든 코드에서 동일한 이름을 참조하게 되어 의도치 않게 문제가 발생할 수 있습니다. 우리는 힘든 방법으로 알아냈습니다. 같은 실수를 하지 마세요.
Chat.php 페이지 생성
우선, 우리는 ChatGPT에 채팅 인터페이스를 어떤 식으로 구성하고 싶은지에 대한 자세한 지침을 제공했습니다.
생성된 HTML 코드를 실행한 후, 메시지 입력 상자가 없는 채팅 인터페이스가 생겼습니다. 이를 수정하기 위해 ChatGPT에 “메시지 입력 상자와 보내기 버튼을 포함하도록 코드를 다시 작성하세요.” 생성된 코드가 두 번째 시도에서 브라우저에 어떻게 표시되는지 확인하세요.
생성된 코드가 원하는 결과를 제공하지 못하거나 중요한 구성 요소를 생략할 때마다 ChatGPT에 마지막 코드를 다시 쓰라고 요청하기만 하면 됩니다. 구성 요소를 포함하거나 초기 코드에서 수행되지 않은 작업을 수행하도록 지시합니다. 프로그래밍에 ChatGPT를 사용하는 방법에 대한 몇 가지 팁이 있습니다.
“send-messages.php” 및 “Fetch-messages” 페이지 생성
인터페이스에 만족한 우리는 채팅 로직을 처리하는 스크립트를 빌드했습니다. 데이터베이스에서 메시지를 보내고 가져오기 위해 ChatGPT는 “메시지” 테이블이 필요하다는 것을 올바르게 강조했습니다. 우리는 챗봇에게 메시지 테이블에 대한 SQL을 생성하도록 요청했습니다.
SQL 코드를 생성한 후, 챗봇에게 메시징 로직을 처리하는 PHP 스크립트를 생성하도록 요청했습니다.
ChatGPT는 “send-messages.php”와 “fetch-messages.php” 페이지 둘 다에 대한 스크립트를 생성했습니다. 두 스크립트를 실행한 결과, 마침내 첫 번째 오류가 발생했습니다(이상하게도 만족스러웠습니다). 코드 한 줄도 디버깅하지 않고 프로젝트를 여기까지 진행한 것은 비교적 간단함에도 불구하고 너무나 좋은 일인 듯했습니다.
오류는 ChatGPT가 선언되지 않은 세션 변수에 대한 검사를 도입하여 발생한 것으로 밝혀졌습니다.$_세션[‘user_id’])를 스크립트에 추가했습니다. 이는 프로젝트에서 꽤 오랜 휴식을 취한 결과이며, ChatGPT가 프로젝트에서 사용된 변수의 일부 컨텍스트와 이름을 잊어버린 것으로 추측합니다.
ChatGPT를 사용하여 앱을 빌드할 때는 동일한 채팅 스레드를 사용하고 가능한 한 빨리 관련 구성 요소를 완료하도록 하십시오. 새 채팅 스레드를 사용하거나 긴 휴식을 취하면 불일치가 발생할 수 있습니다. 코딩 세션 사이에 긴 휴식을 취하면 ChatGPT가 현재 프로젝트의 일부 세부 정보(예: 색 구성표)를 잊어버리는 경향이 있습니다.
그럼에도 불구하고, 우리는 버그를 수정하고 코드를 배포했습니다. 우리는 등록하고 로그인하고 채팅 기능을 시도했습니다. 한 등록된 사용자에서 다른 등록된 사용자로 메시지를 보낼 수 있었지만, 메시지 버블의 색상과 배열이 약간 어긋났습니다. 그러나 완료하는 데 1시간 23분이 걸린 앱에 대해서는 너무 가혹하게 판단하지 않겠습니다.
ChatGPT: 훌륭한 코딩 도우미
ChatGPT는 분명히 강력한 코딩 어시스턴트입니다. 챗봇이 간단하고 때로는 명확하지 않은 지침에서 인상적인 코드를 만들어낼 수 있다는 것은 코딩 능력에 대한 증거입니다.
물론, 여전히 많은 결함이 있습니다. 제한된 컨텍스트 창과 여러 독립적으로 구축된 구성 요소의 논리를 연결하는 능력은 큰 문제입니다. 그러나 챗봇은 길을 안다면 상당히 복잡한 웹 앱을 빠르게 구축하는 데 도움이 될 수 있습니다.
우리의 활동을 지원해주세요 ❤️
이 글이 마음에 드셨다면, 앞으로도 좋은 콘텐츠를 계속 발행할 수 있도록 팁을 남겨주세요.
