안녕하세요! 오늘은 Chat GPT API를 활용해 웹서비스를 개발한 과정과 후기를 공유해보겠습니다. 😊 최근 구매한 '조코딩의 챗GPT API를 활용한 수익형 웹 서비스 만들기' 책을 참고하여 운세를 제공하는 웹서비스를 만들어보았습니다. 참고로 저는 개발자가 아니라 QA업무를 수행하고 있습니다! 과연 챗GPT를 사용해 웹서비스를 만들 수 있을지 궁금해서 직접 도전해보았습니다.
📌인트로
이왕 만드는 거 Chat GPT API도 활용해보고 공부가 될 수 있도록 정리해보았습니다. 웹 서비스를 만드는 과정에서 어떤 이슈가 발생했고, 어떻게 해결하였으며, 배울 수 있었던 부분은 무엇이었는지 단계별로 정리해보도록 하겠습니다. 참고로 제가 만든 웹서비스 이름은 운세보는 춘냥이🐱🔮 입니다.
1. 요구사항 정의 📋
✔요구사항 분석
어떤 기능이 필요한지 요구사항을 정의하는 것은 중요합니다. 분석 단계의 요구사항 정의를 통해 프로젝트의 목표를 명확하게 할 수 있고 설계 범위를 확정할 수 있습니다. 아래와 같은 구체적인 질문을 통해 요구사항을 세분화할 수 있습니다.
- 사용자가 입력해야 할 정보는 무엇인가? (예: 생년월일, 태어난 시간)
- 운세는 어떤 형식으로 제공할 것인가? (예: 텍스트, 이미지, 채팅)
- 보안은 어떻게 구현할 것인가? (예: JWT 인증 사용)
✔요구사항 도출
- 기능: 사용자의 생년월일과 태어난 시간을 입력 받아 오늘의 운세 제공 🔮
2. 설계 🖥️
✔프론트엔드와 백엔드 설계 개요
- 프론트엔드: HTML, CSS, JavaScript (jQuery)
- 백엔드: Node.js, Express, serverless-http, AWS Lambda
✔기술 스택
- HTML/CSS: 간단한 사용자 인터페이스 제작
- JavaScript: 동적인 기능 구현
- Node.js & Express: 서버 구축 및 API 엔드포인트 제공
- serverless-http & AWS Lambda: 서버리스 환경에서 비용을 효율적으로 운영
✔포인트
- 시스템 아키텍처: 프론트엔드와 백엔드의 역할을 구분하고, 각 부분이 어떻게 상호작용하는지 이해할 수 있다.
- 기술 스택 선택: 프로젝트에 적합한 기술 스택을 선택하고, 각 기술의 장단점을 비교할 수 있다.
- 데이터 흐름 설계: 사용자 입력이 서버로 전송되고, 서버에서 응답을 처리하여 사용자에게 다시 반환하는 전체 흐름을 설계할 수 있다.
3. 구현 💻
✔프론트엔드와 백엔드 구현 과정
- 프론트엔드: 사용자 입력 폼과 결과 표시 영역
- 백엔드: ChatGPT API 호출
✔주요 문제와 해결 방법
- CORS 문제: 클라이언트와 서버 간의 통신에서 발생
- 해결: 백엔드에 CORS 설정 추가
✔포인트
- 프론트엔드 개발: HTML, CSS, JavaScript를 사용하여 사용자 인터페이스를 구현할 수 있다.
- 백엔드 개발: Node.js와 Express를 사용하여 서버를 구축하고 API 엔드포인트를 구현 할 수 있다.
- CORS 설정: 클라이언트와 서버 간의 통신에서 발생하는 CORS 문제를 해결하는 방법을 배울 수 있다.
- POST 요청 활용: POST 요청을 사용하여 사용자 입력 데이터를 안전하게 전송하고, 다양한 요청 본문을 처리하는 방법을 배울 수 있다.
✔DALL·E 이미지 생성 기술 사용 🌈
춘냥이 이미지를 디자인하는 과정에서 DALL·E 이미지 생성 기술을 사용했습니다.
프롬프트 예시:운세 보는 고양이 초상화를 그릴꺼야. 고양이는 짱구는 못말려에 나오는 흰둥이 캐릭터처럼 단순하게 그려져야하고, 전체적인 초상화 구조는 진주 귀걸이를 한 소녀같은 구도이되, 운세를 봐주는 동작을 취해야해. 이 초상화는 수채화로 그려야하고 색상은 파스텔 톤으로 그려줘
다양한 프롬프트를 작성하여 여러가지 이미지를 생성한 후, 그 중에서 가장 적합한 이미지를 선택하여 웹 사이트 이미지로 사용했습니다.
4. 시험 🧪
✔테스트 방법과 시나리오
- 다양한 입력값을 테스트하여 올바르게 응답이 반환되는지 확인
- 네트워크 탭에서 요청 및 응답 헤더 확인
✔포인트
- 테스트 케이스 작성: GPT를 활용해 기능 테스트를 위한 체크리스트를 만들 수 있다.
- 로그 분석: 서버 로그를 분석하여 문제를 찾고 직접 해결 할 수 있다.
5. 배포 🚀
✔배포 과정
- 프론트엔드: Cloudflare Pages에 배포 🌍
- 백엔드: AWS Lambda에 배포 ☁️
✔배포 후 발생한 문제와 해결 방법
- ES6 Module과 CommonJS Module 혼용 문제: 배포 후 코드가 제대로 작동하지 않음 🚨
- 해결: ES6와 CommonJS 모듈 사용을 통일하여 require를 import로 변경하는 대신, 모든 모듈을 CommonJS 모듈로 통일하여 사용
✔문제 해결 과정
- 문제 발견:
- 배포 후 API 요청이 제대로 작동하지 않고, 모듈 관련 오류가 발생했습니다. 이는 ES6 모듈(import)과 CommonJS 모듈(require)을 혼용하여 사용했기 때문입니다.
- 해결 방법:
- 모든 모듈을 CommonJS 모듈로 통일하여 사용했습니다. 이를 위해 파일 확장자를 .js에서 .cjs로 변경하고, package.json 파일에서 type을 "module"에서 "commonjs"로 변경했습니다.
✔배울 점
- 프론트엔드 배포: Cloudflare Pages를 사용하여 정적 웹사이트를 배포하는 방법을 배울 수 있다.
- 백엔드 배포: AWS Lambda와 API Gateway를 사용하여 서버리스 백엔드를 배포하는 방법을 배울 수 있다.
- CDN 활용: Cloudflare와 같은 CDN을 활용하여 웹사이트의 성능을 최적화하는 방법을 배울 수 있다.
✍️끝으로
이번 시간을 통해 ChatGPT API를 활용해 운세보는 춘냥이🐱🔮 웹서비스를 만들어보았습니다. 요구사항 정의부터 설계, 구현, 시험, 배포까지 각 단계마다 프롬프트를 활용해 문제를 해결하고, 질문을 추가하면서 서비스 개발에 직접 적용 할 수 있었습니다. 이 과정을 통해 챗GPT를 사용한 웹서비스 개발의 전반적인 흐름을 경험하며, 프롬프트 엔지니어링의 중요성을 실감했습니다.
용어 정리 📚
- 서버리스 환경: 서버를 직접 관리하지 않고, 클라우드 서비스 제공자가 서버를 관리해주는 환경입니다. 개발자는 코드 작성에만 집중하고, 서버의 유지보수나 확장성 관리는 클라우드 서비스 제공자가 담당합니다.
- API 엔드포인트: 클라이언트가 서버에 요청을 보낼 수 있는 URL입니다. 서버는 이 엔드포인트를 통해 클라이언트의 요청을 받아 처리하고 응답을 보냅니다.
- CORS: Cross-Origin Resource Sharing의 약자로, 웹 페이지가 다른 도메인에 있는 리소스에 접근할 수 있도록 하는 보안 정책입니다. 이를 통해 클라이언트와 서버 간의 데이터 교환이 가능하게 합니다.
- ES6 Module: ES6(ECMAScript 2015)에서 도입된 모듈 시스템으로, import와 export를 사용하여 모듈을 불러오고 내보낼 수 있습니다.
- CommonJS Module: Node.js에서 주로 사용되는 모듈 시스템으로, require와 module.exports를 사용하여 모듈을 불러오고 내보낼 수 있습니다.
- CDN: Content Delivery Network의 약자로, 전 세계에 분산된 서버 네트워크를 통해 사용자에게 콘텐츠를 빠르게 전달하는 시스템입니다. CDN을 사용하면 웹사이트의 로딩 속도를 향상시키고, 서버 부하를 분산시키며, 보안을 강화할 수 있습니다.