티스토리 뷰
동생이 유튜브에서 귀여운 영상을 공유해줬다.
너무 귀여워서 몇번 돌려보고나니 나도 이런 귀여운 걸 만들어보고 싶었다.
요즘 chat gpt API도 한번 써보고 싶었는데 마침 이 영상을 보고 나니 영상 맨 처음에 나오는 로봇 3개가 자기들끼리 최신 뉴스나 옛날 이야기를 주고 받는 컨셉을 가져와보면 어떨까 싶은 생각이 들었다.
대략적인 컨셉은 정했고, 그래도 이왕 토이 프로젝트로 만드는데 단순히 영상에 나온 로봇의 행동을 그대로 따라하기보단 조금 더 웹 서비스로서 의미를 추가해보자.
처음에는 일정 시간 간격으로 세 개의 로봇 중 랜덤한 하나의 로봇이 서로 최신 뉴스, 그 중에서도 좋은 뉴스를 한줄로 요약해서 이야기를 하면 나머지 두 로봇이 맞장구치는 동작을 생각했다. 귀여운 모션이랑 사운드도 추가해서 그냥 로봇들이 떠는것을 보면서 힐링도 하고 깨알지식도 생기는 서비스를 생각했는데 chat gpt의 경우 최신 뉴스를 가져오지는 못하니 최신 뉴스보다는 친구들끼리 좋은, 행복한 소식으로 수다떨듯이 이야기하는 컨셉으로 수정했다.
우선, 내가 원하는 문장을 chat gpt가 잘 생성해주는지 다양한 prompt를 적용해가며 테스트 해보았다. 내가 원하는 조건은 아래와 같다.
1) 귀여운 or 행복한 소식
2) 한 문장으로 표현
3) 친구에게 말하는 듯한 구어체
4) 한국어로 (이 부분은 필수는 아니고 영어로 받아서 번역하는 걸 추가해도 되고, 애초에 서비스를 영어로 만들어 되고?)
Complete모드와 Chat모드로 지시문을 여러번 수정해가며 원하는 결과가 잘 나오도록 테스트해보았는데 가끔은 조금 이상한 문장이 나오기도 하지만 두 모드 모두 대체적으로 내가 원하는 결과를 잘 보여줬다.
그럼 chat gpt API가 내가 원하는 결과값을 잘 준다는 것도 확인을 했으니 구체적으로 기능들에 대해 기획해보자.
1️⃣ 로봇들의 조잘조잘 기능
1) 로봇 3개 중 랜덤한 1개의 로봇이 그거알아? or 있잖아~ or 있지있지 라고 운을 떼면 나머지 2개의 로봇이 그 로봇을 쳐다본다.
2) 운을 뗀 로봇이 chat gpt가 생성한 귀여운 소식을 말한다. (타이핑 효과로 한글자씩 텍스트 입력 효과)
3) 소식을 전하는 로봇의 말이 끝나면 나머지 두 로봇이 우아아아~하고 맞장구를 친다. (로봇 형태에 따라 팔을 파닥거리거나 고개를 끄덕이거나 하는 동작 추가 / 우아아의 경우 '아'의 갯수를 3~6개까지 랜덤하게 나오도록 설정)
4) 40초 간격으로 위 동작 반복
2️⃣ 사용자 입력 기능
화면 상단 or 하단에 “있잖아” 버튼이 존재한다.
(버튼 옆에 작은 글씨로 오늘 당신에게 어떤 일이 있었나요?라고 입력 형식을 유도하는 텍스트 추가)
1) "있잖아" 버튼을 클릭하면 텍스트 입력창이 생성되고 3개의 로봇이 행동을 멈추고 사용자(정면)을 쳐다본다.
2-1) "있잖아" 버튼을 누른 후 10초 이상 입력이 없거나 입력창 옆에 “아니야” 버튼을 누르면 랜덤한 로봇 1개가 “생각나면 말해줘~”라고 말하고 그 후로 5초 뒤부터 다시 조잘조잘 기능을 실행한다.
2-2) "있잖아" 버튼을 누른 후 입력창에 텍스트를 입력하고 엔터를 치면 chat gpt를 통해 사용자가 입력한 문장이 부정적인지, 긍정적인지, 중립적인지 판단한다.
3) 사용자가 입력한 문장이 긍정적이라면 긍적적이면 로봇 3개 모두 "우와아아" 등의 긍적적인 모션을 취한다.
4) 사용자가 입력한 문장이 중립적이거나 부정적이면 로봇 3개 모두 "우리는 너를 응원해", 지금부터 너는 행복한 일만 가득할거야" 등의 격려의 말과 모션을 취한다.
5) 5초 후 다시 3개의 로봇 모두 정면을 보고 사용자 입력을 기다린다. 10초 이상 입력이 없을 경우 2-1)의 동작과 같다.
3️⃣ 배경 변경 기능
- 기본 배경은 밤으로 설정한다.
- 화면 우측 상단 토글 버튼을 통해 배경을 변경할 수 있다.
- 모닥불 소리, 새 소리등의 배경음으로 ASMR 효과를 넣는다.
- 로봇이 이야기할 때는 모동숲의 주민들의 목소리 같은 효과음을 넣는다.
- 배경음과 효과음은 끄고 켤 수 있도록 한다.
[밤 배경]
숲속 캠핑 느낌의 밤 배경
디자인 : 달, 구름(움직임), 별(반짝임), 모닥불(움직임)
소리 : 모닥불 소리 등
[낮 배경]
공원 피크닉 느낌의 낮 배경
배경 : 태양, 나무(살랑살랑), 구름(움직임), 풀(흔들림)
소리 : 새소리, 시냇물소리 등
4️⃣ 언어 선택 기능
- 기본은 한국어로 설정한다.
- 화면 우측 상단에 영어/한국어 토글 버튼을 통해 언어를 변경할 수 있다.
단순히 로봇들이 이야기하는 것 이외의 사용자 입력이나 배경, 언어 설정 등의 부가적인 기능을 추가하였다. 잘 구현할 수 있을까? ㅎ.ㅎ
1차적인 기능 설정은 여기까지 하고, 개발하면서 좋은 아이디어가 생각나면 그때그때 수정해가면서 진행하기로 하자.
서비스의 대략적인 느낌은 이런 느낌이다.
사용할 주요 기술은 Next.js, three.js, Chat gpt API이다.
이 프로젝트는 DB가 필요없고, 백엔드도 구현할 것이 없어서 React만 사용해도 되지만 이 서비스는 유저랑 인터렉션보다는 컨텐츠가 빨리 보여지는게 더 좋아서 SSR 방식인 Next.js를 선택했다...는 이유보다는 Next.js가 라우팅이 편하고 추후에 vercel로 배포하는 것도 간단해서 선택한 이유가 더 크다 ㅎ.ㅎ 그리고 혹시 개발하다가 추가기능 개발하고 싶은 게 생겨서 백엔드나 DB가 필요하게 될 수도 있으니까 안전하게 Next.js로 시작하는 걸로!
로봇은 바디토리에서 했던 것처럼 lottie로 구현할까 했는데 three.js는 한번 사용해보고 싶었던 라이브러리이기도 하고, 서로 쳐다보거나 사용자를 쳐다보는 로봇의 모션을 자연스럽게 만들고 싶어서 3d로 만들기로 결정하고 three.js를 활용하기로 선택했다.
본격적으로 개발을 시작하기 전까지는 어떤 기술을 사용하는게 좋을지 조금 더 생각해보고 변경될 가능성은 있다.
프론트엔드 개발자 삐롱히의 개발 & 공부 기록 블로그