AI-D-D-TRPG-Game
GPT-API로만든텍스트RPG
만든 동기
인공지능(AI) 기술이 발전함에 따라 정형화된 챗봇을 넘어, 사용자의 상호작용에 동적으로 반응하는 인터랙티브 콘텐츠에 대한 관심이 높아졌습니다. 특히 테이블탑 RPG(TRPG)인 던전 앤 드래곤(D&D)은 플레이어의 자유도 높은 행동과 마스터(DM)의 즉흥적인 서사가 결합되는 장르로, LLM(대규모 언어 모델)의 능력을 실험하기에 가장 이상적인 도메인입니다. 기존의 텍스트 기반 게임들은 백엔드 서버(Python, Node.js 등)를 필수적으로 요구하여 일반 사용자가 배포하거나 체험하기에 진입 장벽이 높았습니다. 이에 따라 별도의 복잡한 서버 구축 없이, 순수 웹 기술(HTML, Tailwind CSS, JavaScript)만으로 브라우저에서 곧바로 실행할 수 있고, 사용자가 자신의 Gemini API 키를 입력해 안전하고 유연하게 즐길 수 있는 웹 기반 AI D&D 게임을 기획하게 되었습니다.
어려웠던 점
① LLM 대화 상태(Chat Session) 관리 및 멀티턴(Multi-turn) 오류 문제 상황: 초기 구현에서는 사용자의 입력과 AI의 응답을 단순 문자열 배열로만 주고받아, Gemini API의 멀티턴(Multi-turn) 대화 규격(contents 구조체 및 role: "model"과 role: "user"의 교차 배치)과 어긋나는 문제가 발생했습니다. 이로 인해 대화가 이어질수록 API 오류가 발생하거나 행동하기 버튼이 작동하지 않는 현상이 잦았습니다. 원인 분석: 최신 Gemini 모델은 대화의 맥락을 완벽히 유지하기 위해 이전 모델의 응답 구조(parts) 전체를 대화 기록에 누적해야 합니다. 단순 텍스트만 주고받을 경우 API 규격 위반(Invalid Argument)으로 인해 요청이 거부되었습니다. ② UI 가독성 및 시각적 피로도 문제 (마크다운 볼드체 및 텍스트 렌더링) 문제 상황: AI(던전 마스터)가 응답을 생성할 때 문장을 강조하기 위해 마크다운 볼드체(**) 태그를 과도하게 사용하거나, 나레이션·내면의 생각·등장인물 간의 대사가 한데 섞여 텍스트의 가독성이 떨어졌습니다. 원인 분석: 웹 화면에서 판타지 세계관의 몰입도를 높이기 위해서는 나레이션, 캐릭터의 대사, 내면 독백이 시각적으로 명확히 분리되어야 하는데, 일반적인 마크다운 파서는 이를 세밀하게 제어하기 어려웠습니다. ③ 반응형 레이아웃 및 모바일 UX 충돌 문제 상황: PC 화면에 최적화된 캐릭터 시트 사이드바가 모바일 화면이나 좁은 캔버스 영역에서 채팅창을 가리거나 레이아웃을 무너뜨리는 현상이 발생했습니다. 또한 첫 행동을 시작한 후에도 설정창이 계속 자리를 차지하여 게임 몰입을 방해했습니다.
해결한 방법
① 대화 기록(chatHistory) 구조화 및 백오프(Backoff) 재시도 로직 도입 해결책: 클라이언트 측에 chatHistory 배열을 두고, 사용자의 입력뿐만 아니라 AI가 반환한 candidate.content.parts 구조 전체를 세션 히스토리에 정확히 누적하도록 수정했습니다. 네트워크 불안정이나 일시적인 API 부하에 대응하기 위해 지수 백오프(Exponential Backoff) 알고리즘을 적용한 비동기 재시도 함수(callGeminiWithBackoff)를 구현하여 연결 안정성을 극대화했습니다. ② 정규식(RegEx) 기반 실시간 텍스트 필터링 및 커스텀 스타일링 해결책: AI 응답 텍스트 내의 마크다운 볼드체(**) 태그를 사전에 일괄 제거(replace(/\*\*/g, ''))하여 깔끔한 본문을 유지했습니다. JavaScript 정규식을 활용해 독백 패턴((...))과 대사 패턴(「...」, “...”, ”...”)을 실시간으로 감지하고, 각각 고유한 CSS 클래스(.dm-thought, .dm-dialogue)를 동적으로 매핑하여 시각적 구분을 명확히 하였습니다. ③ 반응형 사이드바 제어 및 자동 토글(Toggle) UX 구현 해결책: Tailwind CSS의 유연한 Flexbox 레이아웃을 적용하고, 모바일 및 좁은 화면 환경에서는 사이드바가 절대 위치(Absolute)로 오버레이되도록 설계했습니다. 사용자가 첫 번째 행동(Action)을 입력하거나 게임을 시작하는 순간 사이드바가 자동으로 접히면서 채팅 화면이 전체 화면으로 확장되도록 유도하여 플레이어의 몰입감을 크게 높였습니다.