새로나온 챗GPT MBTI 테스트 서비스 제작하기! #MBTI 해석 #MBTI 궁합

챗GPT로 만든 MBTI 테스트 서비스 메인 화면

 챗GPT로 MBTI 테스트 서비스를 제작했다. 이 서비스는 4월 22일 유튜브 스트리밍을 하면서 오후 1시부터 저녁 11시까지 10시간 동안 진행된 프로젝트이다. 이 서비스의 핵심적인 부분과 코드 등 만드는 방법을 공유하려고 한다. 한 가지 주의사항은 각자 컴퓨터 환경과 코드 지식이 천차만별이고, 나 또한 이러한 서비스에 대한 코드 공유가 처음이라 제대로 동작하지 않을 수 있음을 미리 알린다.

 

< 스테이블디퓨전 연구소 오픈 채팅방 >

(같이 공부하고 싶다면 아래 링크 클릭!)

https://open.kakao.com/o/glPd6M8e

 

목차

1. 설치해야 할 프로그램과 코드 공유

 1) 비주얼 스튜디오 코드 설치

 2) '너와 나의 MBTI 테스트' 궁합 서비스 코드 공유

2.  '너와 나의 MBTI 테스트'  궁합 서비스 핵심 코드 설명

 1) index.html 코드 설명

 2) aws lambda 서비스를 활용해서 api 구축하기

 3) '너와 나의 MBTI 테스트' 궁합 서비스 배포하기

 4) AI 이미지로 사이트 꾸미기

 5) 겪을 수 있는 문제들

3. 마치며

 

1.  설치해야 할 프로그램과 코드 공유

1) 비주얼 스튜디오 코드 설치

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

비주얼 스튜디오 코드 사이트 화면 위 버튼을 누르면 설치가 가능하다.

 

 코드를 편집하기 위해서 코드 에디터가 필요하다. 이 부분을 안다면 넘어가도 좋다. 모른다면 대중적으로 많이 쓰는 비주얼 스튜디오 코드를 설치하자. 위 사이트 주소 링크를 통해서 위 이미지 붉은색 버튼을 클릭하고 기본 설정으로 쭉 진행하면 된다.

 

비주얼 스튜디오 코드 익스텐션에서 한국어 패키지를 설정하자.

 

 비주얼 스튜디오 코드 설치 후에 영어로 나오는데, 익숙하지 않다면 위 이미지를 따라 1번 익스텐션 클릭 후 검색창에 korean을 입력하고 2번 korean language pack을 클릭한 후에 3번 인스톨을 클릭하면 된다. 안되면 재실행하면 된다.

 

 

반응형

 

2) '너와 나의 MBTI 테스트' MBTI 궁합 서비스 코드 공유

images.zip

1.47MB

lambda.zip

0.99MB

 

 

 

 위 파일 두 개 중 첫 번째 images.zip은 '너와 나의 MBTI 테스트' HTML 코드이고 두 번째 lanbda.zip는 챗GPT API를 연계할 수 있는 아마존 AWS의 Lambda 서비스에 들어갈 코드이다. 두 파일 모두 다운을 받으면 된다.

 

좌측은 images.zip에서 index.html을 크롬으로 실행시키면 좌측 사이트가 로컬에서 실행이 된다.

 

 그리고 images.zip에서 다운로드한  다운로드한 파일 중에서 index.html를 위 사진처럼 크롬에서 실행시키면 우측과 같이 자신의 컴퓨터(로컬)에서 서비스가 실행된다. 이제 여러분의 스타일에 맞게 MBTI 서비스를 만들 수 있다.

 

2. '너와 나의 MBTI 테스트' MBTI 궁합 서비스 핵심 코드 설명

 1) index.html 파일 설명

1번 CTRL + F 누르고 검색창에 * 표시가 된 것들은 스스로 넣어야할 부분이다.

 

 이제 코드의 주요한 부분만 설명하겠다. 나머지 부분은 서비스의 틀을 깨는 부분으로 스스로 깨달으면서 진행해야 하는 부분이다. 건드는 순간 개발 지옥이 펼쳐진다.  1번 CTRL + F를 누르고 * 치고, enter를 눌러서 나오는 부분들이 여러분들의 서비스를 만들기 위해 직접 수정해야 할 부분이다.

 

open graph 설정에 따른 표현되는 이미지

 

  2번은 여러분의 서비스에 대해 설명하는 부분이다. title은 서비스의 이름, description은 서비스에 대한 설명 등이다. og 부분은 open graph라고 링크를 보낼 때 나오는 부분이다. 위 이미지에 해당하는 부분이 open graph다. 위와 같이 설정한다. 3번은 만약에 구글 애널리스틱스를 진행한다면 3번 자리에 코드를 붙여 넣으면 된다. 이 부분은 내용이 길어져서 추후 설명하겠다.

 

MBTI 테스트 설문지

 해당 부분은 MBTI 설문에 대한 부분이다. <div id ="q1"> 해당 부분 q1이 첫 번째 질문이라는 뜻이고 q12까지 있다. 즉, 12개의 질문이 있는 것이다. 설문의 내용은 삭제하려다가. 지우면 완전히 깡통이 될 것 같아서 남겨뒀다. 다만 배포하게 된다면 고유의 설문으로 변경하길 바란다.

 

MBTI 테스트 판단 로직

 위 코드는 MBTI 테스트 판단 로직이다. IE, SN, TF, JP 각 유형 별로 3문항으로 총 12문항이 있다. 그리고 각 유형별로 예를 들어 I 성향과 E 성향을 판단할 수 있는 설문을 넣었고, 그중에 해당 성향이 더 많이 나오는 성향으로 판단하도록 했다. 예를 들어 I 성향 답변 2개, E 성향 답변 1개이면, I형으로 판단하도록 했다.

 

AWS를 통해 API 주소를 받아야 한다.

 

 다음은 위 이미지 빨간색 칸에, AWS Lambda 서비스를 통해 API 주소를 받아서 넣어야 한다. 이 부분은 다소 어려울 수 있지만 한 번 하고 나면 쉽다. 아래 AWS 사이트에 들어가서 가입을 하자. 단, 주의사항이 있다. 아이디를 개설한 후에 해킹을 당하면 AWS 비용이 청구될 수 있으니, 2차 로그인을 꼭 설정하길 바란다.

 

MFA 코드 등 2차 로그인을 설정해야 한다.

 

2) aws lambda 서비스를 활용해서 api 구축하기

https://aws.amazon.com/ko/

클라우드 서비스 | 클라우드 컴퓨팅 솔루션| Amazon Web Services

AWS에서 Lambda 서비스 선택

 

AWS에서 Lambda 서비스를 선택해라

 

Lambda에서 함수를 생성해라

 

Lambda에서 함수를 생성해라

 

함수이름을 영어로 입력하고 우측 하단에 함수 생성을 누른다.

 

함수명을 영어로 입력하고 우측 하단에 함수 생성을 누른다.

 

Lambda 서비스 함수에 코드 업로드

 

 Lambda 서비스 함수에 코드를 업로드해야 한다. 위 이미지를 따라 하단 탭에 1번 코드 2번 업로드 3번. zip 파일을 눌러 상단에 Lambda.zip을 업로드한다. 그리고 4번 index.js를 클릭하면 코드를 볼 수 있다.

 

index.js 코드 1번에는 APIKEY를 입력하고 2번에는 배포하는 사이트 주소를 입력해야한다.

 

 위 이미지는 index.js 코드이다. 이미지의 1번에서는 OPENAI에서 발급받는 APIKEY를 입력해야 하고, 2번에는 배포하는 사이트 주소를 입력해야 한다. 아래 OPENAI 사이트에 가서 로그인하자.

 

https://platform.openai.com/account/api-keys

OpenAI API

OPENAI APIKEY 키 발급

 

 위 사이트에서 1번 API키 탭인지 확인하고 2번 새 비밀키 받기는 누른 뒤 3번 복사를 누른다. APIKEY에 대해서 모르는 분을 위해서 우리가 챗GPT 서비스를 외부에서 이용할 때 APIKEY를 통해서 주고받는데 이때 작은 비용이 발생한다. 하지만 누군가 당신의 APIKEY를 탈취 후에 막대하게 사용할 수 있으니 절대 외부 공개하면 안 된다. API키를 코드 이미지 1번에 복사 붙여 넣기 한다. 2 번은은 자기 사이트 주소를 넣는 곳이다. CORS 이슈를 해결하기 위해 필요하다. 추후 배포 후에 넣으면 된다. 뒤에 배포에 대해서 설명하겠다.

 

챗GPT 설정하기

 

 

 다음은 챗GPT에게 역할을 부여해야 한다. 시스템은 챗GPT의 설정이고, 어시스턴트는 챗GPT의 말, 유저는 사용자의 말이이다. 잘 모르겠다면 System에 "너는 MBTI 전문가이다. 사용자의 MBTI 유형에 맞게 설명해야 한다" 이 정도만 입력해도 정상적으로 동작한다. 그 외 설정도 있지만 차츰 설명하기가 복잡하고 서비스를 본격적으로 시작한다면 고민해야 할 부분이다.

 

 

 

함수 설정

기본 설정에서 메모리와 임시 스토리지, 제한 시간을 변경해야 한다.

 

다음은 함수 기본 설정을 바꿔야 한다. 서비스에 설정을 바꾸면 되지만, 잘 모르겠다면 메모리는 512, 임시스토리지는 2048, 제한시간은 15분으로 설정하자. 다음은 API Gateway를 설정하는데 이미지를 따라 빨간색 박스를 클릭 및 설정하면 된다. 잘 모르면 이미지에 나온 대로 하면 된다.

 

API Gateway 설정

API 생성

RESTAPI 구축

API 생성

리소스 생성

프록시 구성

API 배포

API 배포

API 배포 설정

URL 복사

코드에 붙여 넣기

 

위와 같이 설정하면 끝이다. 딱 핵심만 담았다.

 

3) '너와 나의 MBTI 테스트' 궁합 서비스 배포하기

 이제 클라우드 플레어에서 '너와 나의 MBTI 테스트' 궁합 서비스를 배포하려고 한다. 역시 아래 이미지를 따라가면 된다.

가입 후에 1번 Pages에 2번 프로젝트 만들기 3번 업로드를 클릭하자

 

가입 후에 1번 pages에 2번 프로젝트 만들기 3번 업로르를 클릭하자.

 

프로젝트 이름을 짓고, 프로젝트 만들기를 클릭하자

 

프로젝트 이름을 짓고, 프로젝트 만들기를 클릭하자

 

1번 압축 폴더를 2번에 드래그해서 3번 사이트 배포한다

 

1번 압축 폴더를 2번 드래그해서 3번 사이트 배포한다.

 

코드 구성 없이 사이트 주소를 클릭하면 위와 같은 이미지가 나온다.

 

코드 구성 없이 사이트 주소를 클릭하면 위와 같은 이미지가 나온다.

 

2번 오리진 안에 *에 배포한 주소를 넣는다

 

2번에 오리진 안 *에 배포한 주소를 넣는다.

 

4) AI 이미지로 사이트 꾸미기

*.png를 찾고 여러분들이 만든 이미지 경로를 넣으면 된다.

 

 코드에 들어갈 이미지가 두 개 있다. 위 코드에 CTRL + F를 누르고  *. png를 치면 두 개가 나온다. 위는 배경이미지고, 아래는 설문 상단 이미지다. 이미지를 스스로 만들어도 되지만 잘 모르겠다면 현재 무료인 라스코 AI에서 만들 수 있다.

 

https://www.lasco.ai/

Lasco.ai

챗 GPT에서 프롬프트를 맡길 수 있다.

 

챗GPT에서 1번 AIPRM를 설치한 후 2번 미드저니 프롬프트 제너레이트 클릭 후 3번에 원하는 디자인을 말한다.

 

1번 모델 설정 후 2번/gen 입력한 뒤에 프롬프트를 입력한다.

 

1번 모델 설정 후 2번 채팅창에 /gen 입력한 뒤에 프롬프트를 입력한다.

 

샘플 이미지

 

 

5) 겪을 수 있는 문제들

설문을 빨리 클릭하면 중첩되서 나온다. 코드는 문제 없다.

 

 10시간 동안 뚝딱뚝딱 만들다 보니까 몇 가지 문제가 있다. 첫 번째는 위 이미지처럼 빨리 클릭하면 중첩돼서 나온다. 코드는 문제없다. 계속 수정해 봤는데 잘 안되기도 하고, 코드상 문제는 없어서 그대로 공유한다. 추후 보완될 예정이다.

 

챗GPT API 통신 오류

 

 두 번째는 고질적인 문제인 챗GPT API 통신 오류다. 가끔 통신 오류가 나는데 이거는 장시간 문제해결을 해보려고 해도 어쩔 수 없는 문제이다. 다만 통신 오류가 날 때 재접속하는 코드를 넣을 수 있다. 

 

3. 마치며

MBTI 서비스 질문과 답변

 

 이 글의 취지는 '챗GPT로 MBTI 서비스를 만들 수 있다.'이며, 유튜브 스트리밍 하면서 만든 코드를 그대로 공유하고 있다. 배포를 해도 좋지만, 자기 개성에 맞게 디자인과 MBTI 설문은 변경하길 바란다.

 

앱 제작 중독자

 

또한, MBTI 서비스 외에 다양한 웹/앱 서비스를 만들고 있다. 이러한 컨텐츠에 관심이 많다면 아래 유튜브 채널을 구독하기 바란다.

 

https://www.youtube.com/channel/UCz2eKnbdrjIuALnG5jOA3Nw

배하나 유니버스