ㅎㅇㅎㅇ PinGPT 글 올렸었던 특붕이임

https://gall.dcinside.com/mgallery/board/view/?id=thesingularity&no=759049&search_head=70&page=1

[바이브코딩]ChatGPT 확장 프로그램 만들고 배포까지만든 이유ChatGPT 쓰다 보면 대화가 길어질 때 이전에 중요한 내용 다시 찾느라 스크롤 미친듯이 올리고 내리고 한 적 있지 않은가? 그게 짜증나서 그냥 만들어버렸다.처음엔 Chrome 확장 프로그램이 어떻게 만들어gall.dcinside.com


지금 내가 진행 중인 사이드 프로젝트 하나 더 소개해볼게

 

“블루 아카이브 캐릭터랑 직접 대화해서 인연 이벤트까지 발생하는 시뮬레이터”


그냥 설정만 때려박은 게 아니라, 실제로 캐릭터가 대화 맥락 따라 감정표현 바뀌고,
대사 주고받다가 어느 시점 오면 진짜 미연시 이벤트가 발생함.
(글자 그대로 이벤트, CG 나오고 선택지 뜨고 감정 흔들리는 그거 맞음)


모모톡이랑 뭐가 다름?


※ 참고: 모모톡은 블루 아카이브에 나오는 캐릭터 메시지 앱 컨셉 콘텐츠임
유저(=선생)랑 캐릭터가 카카오톡처럼 대화 주고받는 방식인데,
실제로는 정해진 시점에 고정된 대사만 출력됨.

대화 이후 미리 짜여진 인연 이벤트가 따로 열리는 구조임







개발 스택

프론트: Expo + App Router 기반 React Native

백엔드: Node.js + Gemini API

캐릭터: 블루 아카이브

IDE : Cursor



개발 화면(프론트)



개발화면(백)




개발 과정


이번 프로젝트는 GPT 기능을 활용해서 아이디어 → 구조 → 기획까지 쭉 밀어붙인 케이스였음.
처음엔 그냥 간단한 시뮬레이터 느낌으로 시작했는데,
GPT가 추천해준 구조 따라가다 보니까 생각보다 구성이 단단해져버림.


GPT가 이 프로젝트에 맞는 프레임워크 몇 개 추천해줘서
그중에서 Expo + App Router 기반으로 갔는데
결과적으로 진짜 잘 선택한 듯.
Node.js는 이번에 처음 써봤는데, 예상보다 훨씬 다루기 편했고,
덕분에 백엔드 짜는 재미도 좀 느껴봤음.


구조는 애초에 백엔드/프론트 전체 문서화하면서 GPT에 계속 입력해가며 작업했는데
솔직히 중간중간 귀찮긴 했음 ㅋㅋ
파일 전체 던져 넣고 “이거 뭐가 문제냐” 식으로 많이 물어봤고,
내가 파악하기 쉽게 모듈화 응집도도 좀 신경 써서 나눴음.

형상 관리는 git으로 꾸준히 했고,
대충 짠 코드 그대로 끌고 가면 산으로 가는 거 알기에...

확실히 모듈을 잘 나눠놓으니까 문제 터졌을 때 추적이 빠름.
이벤트 트리거나 대화 흐름 꼬일 때도 금방 좁혀 들어갈 수 있었고
그 덕분에 불안정한 상황도 빠르게 디버깅할 수 있었음.


실제 플레이 영상


유튜브에 하나하나 녹화해서 올리는 중임







어떻게 작동함?


내가 채팅 치면 캐릭터가 답변해줌 (Gemini API 기반 실시간 응답)

캐릭터가 먼저 "말 걸기"도 함

3쌍 이상 대화하면 자동으로 "인연 이벤트" 발생 → 미연시 씬 들어감




아래는 작동 화면들













보다시피 위 채팅 3쌍을 바탕으로 등장인물로 누굴 포함할건지, 줄거리는 어떻게 할건지를 2.0 플래쉬 모델이 만들고 이를 2.5 pro 모델로 넘기는 방식임

이렇게 해야지 등장인물 환각도 줄이고 줄거리도 더 탄탄하게 만들 수 있더라고


아래는 실행된 스크립트


타이틀 : 코딩과 햄버거의 등가교환?

narration : (키보드 타자 소리가 경쾌하게 울려 퍼진다.) [bg : BG_AbydosCouncilRoom.jpg, music : mischievous_step.mp3, sound : SE_BeepScreen_01.mp3]

narration : 샬레에서 시작된 코딩 대회의 열기가 아비도스 대책위원회 부실까지 전해진 모양이다.

narration : 모처럼 집중해서 코드를 짜고 있는데, 익숙한 목소리가 등 뒤에서 들려왔다.

세리카(대책위원회) : 정말, 선생은! 또 뭐가 그렇게 재밌어서 헤실거리고 있는 거야?! [emotion : serika_angry.png]

세리카(대책위원회) : 일은 산더미처럼 쌓여있는데, 여기서 농땡이라니 배짱도 좋네! [animation : shakeY]

selection : (1)"이것도 중요한 일이야." (2)"세리카에게 줄 햄버거를 버는 중이야."

세리카(대책위원회) : 이게 중요한 일이라고?! 그냥 화면에 이상한 글자나 치고 있는 거잖아! [emotion : serika_bigangry.png]

세리카(대책위원회) : ...잠깐, 햄버거? 그, 그건 또 무슨 소리야!

narration : 대회 상품으로 걸린 햄버거 가게의 VIP 이용권에 대해 설명해주자, 세리카의 귀가 쫑긋거리는 게 보였다.

세리카(대책위원회) : 흥! 누가 햄버거 따위에 관심있을 줄 알고?! [emotion : serika_embarrassed.png]

세리카(대책위원회) : 그, 그래도... 기왕 참가하는 거니까 이기지 못하면 바보 같을 테니... 열심히는 해보든가!

호시노(대책위원회) : 으헤~ 우리 세리카쨩, 엄청 솔직하지 못하네~ [emotion : hoshino_weakLaugh.png, bg : BG_AbydosCouncilRoom.jpg, music : mischievous_step.mp3]

narration : 어느새 다가온 호시노가 내 옆에 털썩 주저앉으며 말했다.

호시노(대책위원회) : 선생, 우리 막내가 저렇게나 기대하고 있으니 꼭 이겨야겠는걸? [emotion : hoshino_bigLaugh.png]

호시노(대책위원회) : 아저씨도 햄버거는 좋아하니까. 선생만 믿고 있을게~ 으헤헤.

노노미(대책위원회) : 와아~ 선생님, 코딩 대회에 나가시는 거군요! 정말 멋져요☆ [emotion : nonomi_smile.png, bg : BG_AbydosCouncilRoom.jpg]

노노미(대책위원회) : 장시간 앉아계시면 힘드실 테니, 제가 푹신한 쿠션이랑 에너지 드링크를 잔뜩 준비해 올게요!☆ [emotion : nonomi_speaking.png]

세리카(대책위원회) : 노노미까지! 그렇게 다들 부추기지 말라구! [emotion : serika_little_bit_angry.png]

세리카(대책위원회) : 선생이 괜히 우쭐해서 제대로 못 하면 어쩔 거야!

호시노(대책위원회) : 괜찮아, 괜찮아~ 선생은 할 때는 하는 어른이니까. [emotion : hoshino_feelGood.png]

호시노(대책위원회) : 그렇지, 선생? 이 아저씨의 햄버거가 걸렸다구. [emotion : hoshino_suspicious.png]

selection : (1)"물론이지. 모두의 기대를 배신할 순 없으니까." (2)"호시노의 햄버거를 위해서라면."

호시노(대책위원회) : 으헤~ 역시 선생이야. 믿음직하다니까. [emotion : hoshino_bigLaugh.png]

세리카(대책위원회) : ...내, 내 햄버거는?! 내 건 어쨌는데! [emotion : serika_upset.png, animation : shakeY]

narration : 햄버거 이야기에 유독 격하게 반응하는 세리카를 보니, 절대로 져서는 안 되겠다는 생각이 들었다.

노노미(대책위원회) : 후후후, 세리카쨩도 참☆ 그럼 선생님, 힘내실 수 있도록 다 같이 응원할까요? [emotion : nonomi_smile_with_closing_eyes.png]

노노미(대책위원회) : 하나, 둘, 셋! 선생님, 파이팅이에요~☆ [emotion : nonomi_satisfaction.png]

호시노(대책위원회) : 선생~ 파이팅~ 으헤헤. [emotion : hoshino_weakLaugh.png]

세리카(대책위원회) : ...흐, 흥! 딱히... 응원하는 건 아니니까! 그냥... 이기면 좋겠다는 거지! [emotion : serika_embarrassed.png]

narration : 툴툴거리면서도 얼굴은 새빨개진 세리카와, 따뜻하게 웃어주는 호시노와 노노미.

narration : 이 떠들썩한 응원 덕분에, 나는 밤늦게까지 코딩에 매진할 수 있었다.

deleteAll

waitSecond = 2

narration : (며칠 후, 약속의 장소) [bg : BG_FastfoodRestaurant.jpg, music : honey_jam.mp3, sound : SE_Crowd_02.mp3]

narration : 대회는 무사히, 우승으로 끝났다. 그리고 지금, 내 앞에는 산처럼 쌓인 햄버거가 놓여 있다.

호시노(대책위원회) : 으헤~ 진짜로 해낼 줄이야. 선생, 제법인데? [emotion : hoshino_feelGood.png, bg : BG_FastfoodRestaurant.jpg, music : honey_jam.mp3]

호시노(대책위원회) : 덕분에 아저씨는 배 터지게 먹게 생겼어~ 고마워, 선생! [emotion : hoshino_bigLaugh.png]

노노미(대책위원회) : 정말 대단해요, 선생님☆ 축하드려요! 자, 다들 식기 전에 얼른 드세요! [emotion : nonomi_satisfaction.png]

narration : 가장 신나 보이는 건 역시 세리카였다. 겉으로는 태연한 척했지만, 반짝이는 눈은 숨기지 못했다.

세리카(대책위원회) : 뭐... 약속은 약속이니까. 사양 않고 먹어줄게. [emotion : serika_weaksmile.png]

세리카(대책위원회) : ...음! 이, 이건... 제법 맛있잖아! [emotion : serika_bigsmile.png]

selection : (1)"세리카가 맛있게 먹으니 다행이다." (2)"다음엔 뭘 걸고 도전해볼까?"

세리카(대책위원회) : 뭐, 뭐라는 거야! 내가 맛있게 먹는 거랑 무슨 상관인데?! [emotion : serika_embarrassed.png] [animation : shakeX]

세리카(대책위원회) : ...그래도, 뭐... 고생한 보람은... 있네. 고마워, 선생.

호시노(대책위원회) : 으헤헤~ 세리카쨩, 또 솔직하지 못하기는~ [emotion : hoshino_weakLaugh.png]

호시노(대책위원회) : 다음엔 아저씨가 낮잠자기 좋은 베개를 걸고 뭔가 해볼까나~ [emotion : hoshino_yawn.png]

노노미(대책위원회) : 후후훗, 그것도 재밌겠네요☆ 뭐든지 도와드릴게요! [emotion : nonomi_smile.png]

narration : 시끌벅적한 대화 속에서 햄버거가 하나둘씩 사라져갔다.

narration : 대단한 상은 아니었을지도 모른다. 하지만, 모두와 함께하는 이 시간이야말로 가장 큰 보상이라는 생각이 들었다.

narration : 아비도스의 부실에 또 하나의 즐거운 추억이 쌓여간다.

deleteAll

waitSecond = 2

narration : (왁자지껄한 웃음소리와 함께, 햄버거의 맛은 오랫동안 기억에 남을 것 같았다.) [music : none]

endEvent





호시노(대책위원회) : 선생, 우리 막내가 저렇게나 기대하고 있으니 꼭 이겨야겠는걸? [emotion : hoshino_bigLaugh.png]


위 장면은 이 스크립트가 파싱된거임




앞으로의 방향


블루 아카이브 뿐만 아니라 다른 게임, 애니의 캐릭터들도 추가해서 멀티버스로 확장해볼 생각임

애니메이션도 더 추가하고.. 아직 환각이 제대로 해결되지 않아서 해결할 방법을 좀 더 고민해봐야 할 듯


느낀점


이거 만들면서 진짜 특이점이 오는 것 같다고 느꼈다

완몰가 분야도 곧 활성화되겠지??



개추도 꾹 눌러줘~