Chatgpt를 사용하여 파일업로드 사이트 구현하기

지난번 글에서는 인공지능 Ai서비스 ChatGPT를 사용하는 방법에 대해 소개했었습니다. 이번 글에서는 ChatGPT를 이용하여 파일 업로드 웹사이트를 구현하는 방법에 대해 설명하겠습니다.

 

 

파일 업로드에 필요한 코드 질문하기

 

먼저, ChatGPT에게 제가 원하는 기능인 파일 업로드와 서버에 저장하는 기능을 작성해 달라고 요청했습니다. 

 

 

ChatGPT는 몇 초 만에 HTML 코드를 제공해주었습니다. 이 코드는 간단히 파일 업로드와 저장 버튼을 포함하고 있으며, 서버 측에서 PHP 코드를 추가하면 파일 업로드 웹사이트를 구현할 수 있습니다.

 

 

 

PHP 코드도 ChatGPT가 제공해주었습니다. 친절하게 코드별 어떤 기능이 작동되는지 설명되어 있는 주석도 코드에 함께 포함되어 있었습니다.

위에 코드는 간단한 예시코드이므로 코드의 보안 측면을 고려해야 합니다. ChatGPT가 생성해 준 코드는 간단하고 쉽게 작동되는 것이 장점이지만, 이는 곧 보안에 취약한 코딩이 될 수 있습니다. 따라서, 보안적인 측면을 고려하여 코드를 작성하는 것이 중요합니다.

또한, 파일 업로드 사이트를 만들 때, 사용자가 업로드한 파일의 크기, 종류, 개수 등에 대한 제한을 설정해 주는 것도 중요합니다. 이러한 제한을 설정하지 않으면, 사용자가 악의적인 목적으로 대용량 파일을 업로드하여 서버에 부하를 주는 등의 문제가 발생할 수 있습니다.

 

하지만 이번에는 이를 고려하지 않고 간단히 파일업로드가 이루어지는지 AI가 제공해준 코드를 활용만 해보겠습니다

 

 

 

서버에서 작동 테스트하기

그러나 xampp를 사용하여 apache폴더에 코드를 작성 후 웹페이지를 실행해 보니, 한글이 깨져서 출력되는 문제가 발생했습니다.

 

 

한글 인코딩 코드수정

ChatGPT가 제공한 HTML 코드를 살펴보니, 인코딩 방식이 설정되어 있지 않았습니다. 그래서 UTF-8 인코딩 방식을 추가하여 한글도 출력될 수 있도록 코드를 수정했습니다. 이후 새로고침 하면 한글이 정상적으로 출력됩니다.

 

 

 

수정된 코드를 저장한 뒤에 페이지를 새로고침하니 한글이 정상적으로 출력되는 걸 확인하실 수 있습니다.

 

 

10mb 이하 파일 업로드 테스트

이제 실제 파일을 업로드해보겠습니다.

그전에 php부분 소스를 살펴보면 uploads 폴더 아래에 업로드된 파일이 저장되게 되어있습니다.

그래서 HTML 파일이 있는 폴더에서 'uploads'라는 폴더를 새로 생성해 주었습니다.

 

파일이 성공적으로 업로드되었다고 웹페이지에서 결괏값을 출력해 줍니다.

 

 

실제 uploads폴더에 들어가서 확인해 보니 제가 첨부한 이미지파일이 저장되어 있었습니다.

 

 

대용량 파일 오류 발생

이번에는 더 큰 용량의 파일을 업로드해 보겠습니다.

동영상 파일을 업로드해 보았는데 각종 엄청난 오류가 발생합니다.

일단 첫 번째 줄을 확인해 보니깐 php에서 처리할 수 있는 기본 용량의 제한을 초과해서 발생하는 문제입니다.

 

728x90

ChatGPT에게 오류내용 질문하기

Chatgpt에게 이번에는 xampp의 php upload용량을 늘리려면 어떻게 해야 하나 물어봤더니 파일경로와 수정해야 하는 내용을 친절히 알려주었습니다.

 

 

 

ChatGPT가 알려준 xampp/php 하위에 있는  php.ini파일을 열어 파일의 처리 용량을 늘렸습니다.

 

 

 

php부분의 파일크기를 체크하는 부분이 있는데 파일의 크기를 확인하는 부분도 php.ini에서 설정한 사이즈만큼 수정해 주었습니다.

이제 다시 한번 파일을 업로드해 보고 테스트를 할 건데 그전에 xampp의 Apache 서버를 종료 후에 다시 시작해 주어야 php.ini에서 수정한 변경사항이 저장됩니다.

 

 

대용량 파일 업로드 테스트

이번에는 10mb를 초과하는 동영상 파일을 업로드하였는데 아까 사진을 업로드하였을 때와 동일하게 파일이 성공적으로 업로드되었습니다

 

 

 

결론

ai의 도움을 받아 몇 번의 질문만으로 파일 업로드 사이트를 구현하는 것이 가능했습니다. 

파일을 업로드한 후 파일의 처리 결과를 확인할 수 있도록 파일 업로드 완료 페이지를 생성하거나, 업로드된 파일의 이름을 함께 제공해 주거나 파일을 한 번에 여러 개 첨부하여 전송하는 방법을 추가하여 보완하면 기본 샘플코드를 활용해서 더 좋은 웹사이트를 구현할 수 있습니다.

물론 기본적인 코딩 지식이 있다면 ai를 활용하여 더 많은 서비스를 만드는데 유용하겠지만 코딩 입문자나 코딩 경험이 부족한 사용자들도 ai를 활용하여 질문을 하고 예시 코드를 보며 학습할 수 있는 기회를 가지게 되었습니다