본문 바로가기
Book & Lesson

[도서서평단] 챗GPT API를 활용한 수익형 웹서비스 만들기

by 카프리썬 2024. 2. 18.
728x90

 

<운세보는 챗도지> 아래와 같이 챗 GPT를 기반의 웹서비스를 만들어보고 싶다면! 이 책을 추천한다. 

https://fortunedoge.chat/ 

 

운세 보는 챗도지

인공지능 AI ChatGPT 기반으로 당신의 운세 보는 챗도지입니다.

fortunedoge.chat

 

 

이 책은 '운세보는 챗도지' 라는 서비스의 백엔드와 프론트엔드 개발과정을 담고 있다. 

챗GPT기반의 서비스이기 때문에 openAI와 연동하는 방법과 배포하기까지 과정까지 익힐수 있다.

 

안그래도 챗GPT를 가지고 뭔가 서비스를 만들어보고 싶은 계획은 있었는데,이 책 덕분에 기획 아이디어가 생겼다.

이런 생각을 하는 나를 비롯해서 '챗 GPT를 어떻게 써먹어볼까~?' 고민하는 독자들에게 도움이 될것같다. 

 

특히 챗GPT를 활용하기 위해 챗GPT 플레이그라운드에서 API메뉴를 살펴보고 적용할수 있는 팁도 친절하게 설명해준다. 

심지어 책의 내용은 실습위주 다보니 이론적인 글보단 간결한 설명과 그림이 더 많아서 개인적으로 부담도 없었다. 

 

각 목차별 요약한 내용은 아래와 같으며 가볍게 읽어보고 싶다면 추천한다! 

 

1. 서비스 구조와 기술 스택  

- FrontEnd :  Html, css, javascript

- BackEnd : OpenAI API,node.js, Express 

 

2.챗GPT란?

GPT란 초거대 언어모델로, 사전학습된 알고리즘에 따라 다음 단어를 생성하는 일을 수행한다. 

챗GPT는 단순히 단어를 생성하는것이 아닌 응답을 생성하는 채팅방식으로 구현되어 있다. 

 

3.챗GPT 플레이그라운드

OpenAI에서 제공하는 API 기능을 직접 체험해볼수 있는 웹기반 인터페이스 

https://platform.openai.com/playground

 

- complete모드 :  다음에 등장할 단어를 완성하는 기본적인 모드 

- chat 모드 : 챗 GPT같은 채팅형태

 

대신 openAPI 플레이그라운드는 무료크레딧 180USD가 주어지고,

이 크레딧을 모두 사용하거나 무료계정기한 3개월이 만료되면 유료로 계정 전환을 해야한다. 

 

그리고 챗GPT를 활용하기 위해 가장 도움이 되었던 부분은 <챗 GPT 프롬프트 실전팁> 부분같다. 

똑똑한 응답을 하는 챗 GPT로 만들기 위해 어떻게 학습을 시켜넣을것인가? 

- 사전학습된 데이터에 포함된 단어를 사용하도록 보편적인 단어를 사용해서 역할을 입력한다. 

- 답변이 불가능하다는걸 방지하기 위해 다양한 방식으로 주입식 교육을 한다. 

- SYSTEM에 적용한 챗 GPT의 역할을 USER에 중복적용해서 챗GPT에게 자신의 역할을 확실하게 인지시킨다.

- USER의 질문과 ASSISTANT의 답변을 수정해서 이전대화 학습시킨다.

 

4.개발환경 설정

- VSCode (비주얼 스튜디오) 환경설정

 - Node.js 환경셜정 

- 챗 GPT openAPI 패키지 설정

https://www.npmjs.com/package/openai 

 

openai

The official TypeScript library for the OpenAI API. Latest version: 4.28.0, last published: 5 days ago. Start using openai in your project by running `npm i openai`. There are 1547 other projects in the npm registry using openai.

www.npmjs.com

 

5.백엔드 구현

node.js와 express를 통해 챗GPT API 서버와 통신하고, 답변을 프론트로 보내는 서버를 구축한다. 

참고로 관련 코드들은 여기 깃허브에서 확인할수 있다.  https://github.com/indaegu/ChatDoge

 

GitHub - indaegu/ChatDoge: Open AI api를 활용한 운세보기 웹사이트 ~ing

Open AI api를 활용한 운세보기 웹사이트 ~ing. Contribute to indaegu/ChatDoge development by creating an account on GitHub.

github.com

 

6.프론트엔드 구현 

백엔드와 통신하는 UI 구현한다. 

채팅 UI를 만드는 팁이 있다면, 참고할만한 채팅UI툴(코드펜)을 이용하거나, 챗GPT한테 만들어달라고 하는 것이다. 

- 코드펜 : https://codepen.io/ 

 

CodePen

An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications.

codepen.io

 

 

7. 기능고도화

달리2에서 로고 이미지를 작성할수 있다. 

OpenAI에서 개발한 이미지 생성 AI로, 문장 또는 문구를 입력하면 거기에 맞는 이미지를 생성해준다.  

(그런데 아쉽게도 유료이다.)

https://openai.com/dall-e-2

 

DALL·E 2

DALL·E 2 is an AI system that can create realistic images and art from a description in natural language.

openai.com

 

그래서 무료 이미지 생성 툴인 PlayGroundAI에서 한번 테스트해봤다. 

https://playgroundai.com/

 

Free AI image generator: Art, Social Media, Marketing | Playground

Playground (official site) is a free-to-use online AI image creator. Use it to create art, social media posts, presentations, posters, videos, logos and more.

playgroundai.com

 

분명 책이랑 같은 프롬프트를 입력했는데 이렇게 무서운 로고 이미지가 나왔다.

 

추가로 다양한 무료 이미지 생성 툴은 아래를 참고했다.

https://learningspoons.com/website/blog/detail/free-ai-image-generate-site-best-5/

 

무료 AI 이미지 생성 사이트 BEST 5

무료 AI 이미지 생성 사이트 5곳(KREA AI, Playground AI, Canva AI, Ideogram, Bing Image Creator)을 소개해드리겠습니다.

learningspoons.com

 

8.실전 배포

Aws Lambda를 활용해 서버리스 방식으로 백엔드를 배포하고, CloudFlare Palge를 통해 프론트를 배포한다. 

CloudFlare는 미국의 배포 플랫폼으로, 무제한 대역폭을 제공하는 장점이 있다.

수많은 사용자가 접속해도 요금이 전혀 발생하지 않는다. 

https://www.cloudflare.com/ko-kr/

 

클라우드 연결성에 연결하고 이를 사용하여 보호하세요

복잡성과 비용을 줄이면서 직원, 애플리케이션, 네트워크를 어디에서든 더 빠르고 안전하게 만듭니다.

www.cloudflare.com

 

Aws Lambd는 서버리스 컴퓨팅서비스로, 별도의 서버자원을 관리할 필요가 없다. 

서버리스가 아닌 서버 리소스를 할당하여 배포하는 방식은 트래픽이 많아지면 리소스 부족으로 소위 '서버가 터지는 문제'가 발생한다. 

하지만 서버리스 배포방식은 서버를 구축할 필요가 없이 사용자 요청이 있을때만 동적으로 리소스를 할당하고 실행이 된다. 

그리고 단지 코드만 업로드하고, 코드를 사용한 시간만큼만 비용이 발생하기 때문에 트래픽이 굉장히 크지 않다면 효율적이다. 

 

9. 수익화

카카오 에드핏으로 광고를 노출시키거나, 토스 아이디를 이용하여 후원링크를 직접 삽입한다. 

 

서비스를 수익화 하는 가장 기본적인 방법은 광고로, 카카오 에드핏으로 서비스에 광고 노출시킬수 있다.

https://adfit.kakao.com

 

카카오계정

 

accounts.kakao.com

 

매체등록 URL에 배포한 서비스 주소를 등록하고, 카카오 애드핏 플랫폼의 심사과정을 대기한다. 

심사에 통과하면 광고를 노출시킬 수 있는 광고배너 html주소를 프론트 단에 추가로 작성한다.

 

 

또다른 방법은 후원링크를 넣는것이다.  지금 챗도지 서비스에서 보면 아래와 같이 복채보내기 링크가 연결이 된다. 

토스 아이디는 링크만 공유하면 누구나 실명과 계좌번호를 노출하지 않고 송금할수 있다. 

 

 

개인적으로 이 책을 읽고 사이드 프로젝트에 대한 욕심이 다시한번 꿈틀거리게 되었다. 

안그래도 해볼까 하던 참이였는데 아이디어만 참고해서 내가 해보고싶었던 기술스택을 활용해서 진행해봐야겠다! 

 

 

  "한빛미디어 서평단 <나는리뷰어다> 활동을 위해서 책을 제공 받아 작성된 서평입니다."
반응형

$(document).ready(function() { var $toc = $("#toc"); $toc.toc({content: ".tt_article_useless_p_margin", headings: "h2,h3,h4"}); });