[SW개발] ChatGPT 기반 전생 스토리 서비스 소개

🙏 들어가며

본 포스팅에서는 직접 기획부터 개발까지 주도한 ChatGPT 기반 전생 스토리 서비스를 소개합니다.

📚 목차

1.  개요
2.  서비스 흐름도
3.  서비스 상세 소개
4.  기술 스택

---

📌 1.  개요

그림 1. 홈 화면

본 서비스는 최근 가장 핫한 인공지능(AI) 대화형 서비스 ChatGPT를 활용하여 사용자의 전생을 (재미로) 알려주는 스낵(snack) 콘텐츠입니다. 대화형식으로 제공되는 총 5가지 질문에 대해 타이핑하여 자유롭게 답변하면, 이를 ChatGPT가 고려하여 전생을 분석해 주는 서비스입니다. 프론트엔드는 React로, 백엔드 인프라는 ChatGPT 공식 API와 AWS를 활용하여 구축하였습니다.

 
🔗 본 서비스는 하기의 링크를 통해 회원가입 없이 무료로 이용하실 수 있습니다.
 
https://previouslife.click/

ChatGPT 전생스토리

📌 2.  서비스 흐름도

그림 2. 서비스 흐름도

서비스 흐름도는 위의 그림 2와 같습니다. 페이지는 크게 메인(home) 페이지, 질문/답변 페이지, 결과 페이지로 총 세 부분으로 나눌 수 있습니다. 메인 페이지에서 'Start' 버튼을 클릭하면 질문/답변 페이지로 이동합니다. 질문 5가지에 대해 자유롭게 채팅하듯 입력하시면, 답변 내용을 기반으로 결과 페이지에서 사용자의 전생 스토리를 제공합니다.

📌 3.  서비스 상세 소개

3.1. 메인 페이지

그림 3. 홈 화면

홈페이지는 위의 그림 3과 같습니다. 서비스 Identity를 보여주는 서비스 이름('ChatGPT가 알려주는 전생 이야기')과 문구를("나는 전생에 어떤 사람?") 기입하였습니다. Start 버튼을 클릭하시면 질문/답변 페이지로 이동합니다. 하단에 '공유하기' 버튼 그룹에는 좌측부터 차례대로 페이스북, 페이스북 메시지, URL복사, 카카오톡 링크 공유하기 버튼을 배치하였습니다. 공유 버튼 하단에는 현재까지 테스트한 누적 사용자 수를 환생한 수로 프레임을 씌워 개괄적인 수치로 제공합니다(i.e., 5만 명+). 마지막으로, '개발자에게 제안하기' 버튼 클릭 시 카카오 플러스 친구를 통해 소통할 수 있는 창구를 만들었습니다.

3.2. 질문/답변 페이지

그림 5. 질문/답변 페이지

질문/답변 페이지는 위의 그림 5와 같이 총 5개의 질문으로(웰컴 메시지 1개 제외) 구성하였습니다. 사용자가 정말 전생 스토리를 알려줄 에이전트와 대화하는 듯한 경험을 제공하고자 카톡방 UI를 벤치마킹하였습니다. 텍스트 입력창에 자유롭게 답변을 입력하고 '전송' 버튼을 클릭하면 다음 질문으로 넘어갑니다.

상단에는 Progress Bar를 활용하여 사용자가 전체 문항 중 얼마나 답변을 완료했는지, 현재 상태를 인지할 수 있도록 설계하였습니다. 사용자 관점에서 설문지나 심리 테스트와 같은 서비스를 설계할 때는 반드시 사용자가 현재 어느 상태에 있는지 알려줘야 합니다. 즉, 전체 질문지 중 얼마나 답변을 완료하였고, 얼마나 질문지가 남아있는지 알려주는 것이 중요합니다. 위와 같은 Progress Bar는 사용자 스스로 질문 task를 완수하는 데 필요한 시간을 대략적으로 계산할 수 있기 때문에, 부정경험은 줄이고 답변을 완수하는 데 도움을 줄 수 있습니다.

3.3. 결과 페이지

그림 6. 결과 페이지

위의 그림 6은 결과 페이지입니다. 중간에 사용자 답변 내용을 고려하여 ChatGPT가 분석한 전생 스토리를 제공합니다.

그림 7. 공유하기 버튼 및 다른 테스트 체험 링크 제공

위의 그림 7과 같이, 하단에 '공유하기' 버튼 그룹에는 좌측부터 차례대로 페이스북, 페이스북 메시지, URL복사, 카카오톡 링크 공유하기 버튼을 배치하였습니다. 공유하기 버튼 그룹 하단에는 다른 테스트도 체험해 볼 수 있도록 배너링크를 추가하였습니다. 해당 서비스 이름을 클릭하시면 회원가입 없이 무료로 체험할 수 있습니다. 마지막으로, '개발자에게 제안하기' 버튼 클릭 시 카카오 플러스 친구를 통해 소통할 수 있는 창구를 만들었습니다.

1) 재벌집 막내아들 테스트

첫 번째로는 2022년 화제의 드라마(수도권 최고 시청률 30%) <재벌집 막내아들> 소재를 중심으로 성격유형 테스트(MBTI)를 각색하여 개발한 웹 서비스입니다(링크). 등장인물과 줄거리 내용을 기반으로 재구성한 상황을 가정하여, 사용자 본인은 어떤 행동과 생각을 할지 이지선다형으로 답하는 테스트입니다.

2) 카톡분석 왕 테스트

 두 번째로는 카톡 대화 내용 속 키워드 분석을 통해 대화방 내 사용자들의 성격/취향/성향을 MBTI(성격 유형 테스트)와 유사하게 어떤 왕(king) 유형인지 분석해 주는 웹 서비스입니다(링크). 생각은 말로 나오고, 말이 행동하게 만들며, 행동이 습관을 형성하고, 습관이 인격이 된다는 말이 있듯이, 본 서비스는 사용자들이 빈번하게 사용하는 키워드 분석을 통해 사용자 성격/취향/성향 유형을 판단합니다.

3) 럭키토끼 테스트

2023년 검은 토끼의 해인 계묘년(癸卯年)을 맞이하여 신년 운세를 확인해 보는 웹 서비스입니다. 총 6가지 상황이 주어지는 문항에 각각 이지선다형으로 본인이라면 어떤 생각과 행동을 할지 답변하면 운세를 고려한 토끼 캐릭터와 함께 운세 풀이를 제공합니다(링크).

4) MZ오피스 테스트

장안의 화제였던 코미디 프로그램 SNL코리아 내 MZ오피스 코너의 소재를 각색하여 MZ오피스에 어떤 등장인물과 닮았는지  MZ력과 꼰대력을 확인해 보는 스낵(snack) 콘텐츠입니다. MZ오피스는 MZ세대와 기성세대가 공존하는 사무실에서 벌어지는 다양한 일화를 각 세대와 등장인물별 특징을 코믹하게 그려낸 콘텐츠입니다(링크).

📌 4.  기술 스택

프론트엔드는 React로, 백엔드 및 인프라는 AWS를 활용하여 개발하였습니다. 사용한 AWS 서비스는 하기와 같습니다.
 
1) Lambda (Python 3.10)
- ChatGPT API 활용

- 전체 로직 수행

 
2) DynamoDB
- 사용자/ChatGPT 답변, 요청일시 저장
 
3) API Gateway
- API 활용
 
4) S3
- 웹 호스팅
 
5) CloudFront
- 배포
 
6) Route53
- 도메인 활용
 
🔗 본 서비스는 아래 링크를 통해 회원가입 없이 무료로 체험 가능합니다.
https://mzofficetest.click/

MZ오피스 테스트

🔗 참고 블로그

끝으로, 본 서비스를 위해 협업한 개발자분들의 블로그 링크를 공유합니다.
https://dbstndi6316.tistory.com/

코딩뚠뚠

https://blog.naver.com/klm960

앵무의 조잘조잘 스토리 : 네이버 블로그

👨‍💻 참고할 만한 포스팅

1. [SW개발] 카톡 분석 기반 성향 테스트 '카톡분석 왕 테스트' 소개
2. [SW개발] 드라마 재벌집 막내아들 테스트: 나는 재벌집 어떤 막내?
3. [SW개발] 럭키 토끼 테스트: 계묘년 신년 운세 테스트 소개
4. [SW개발] MZ오피스 테스트: 나의 꼰대력/MZ력은?
5. [SW개발] ChatGPT 기반 전생 스토리 서비스 소개

---

포스팅 내용에 오류가 있다면 댓글 부탁드립니다.
그럼 오늘도 즐거운 하루 보내시길 바랍니다 :)
고맙습니다😊