본문으로 바로가기
KIM JUNHA Playful Logo Symbol

TITO : LLM 기반 실시간 토론 보조 서비스

LLM으로 토론 주제를 만들고 논리 코칭을 제공하며, WebSocket으로 토론·투표·관전 흐름을 실시간 처리한 Flutter 앱입니다.

플랫폼 · 담당 역할 · 프론트엔드
작성자 김준하
작성일수정일
TITO 실시간 토론 보조 서비스 소개 화면

프로젝트 개요

TITO는 사용자가 토론 주제를 만들고 상대를 찾아 실시간으로 토론할 수 있도록 돕는 모바일 서비스입니다. LLM 기반 주제 생성과 논리 코칭, 실시간 채팅·투표를 하나의 토론 흐름으로 연결했습니다.

  • 기간: 2024.03 ~ 2024.12
  • 역할: 팀 프론트엔드 리드, 기획 참여
  • 기여도: 프론트엔드 개발 기여도 80%
  • 기술 스택: Flutter, Dart, Riverpod, Dio, Retrofit, WebSocket, Firebase Core·Cloud Messaging
  • 주요 성과:
    • 2024 한이음 ICT 멘토링 프로젝트 은상 (정보통신기획평가원장상) 수상
    • One StoreApp Store 양대 마켓 배포 및 운영

담당 기능

  • 인증·사용자 관리 Google·Kakao·Apple 로그인부터 회원가입, 온보딩, 프로필 수정·탈퇴까지 인증과 사용자 관리 흐름을 구현했습니다.
  • 토론 탐색·진행 토론 목록과 검색, 주제 생성, 참여자 관리, 실시간 채팅, 타이머, 투표까지 토론 진행에 필요한 전체 흐름을 담당했습니다.
  • AI 토론 보조 키워드 기반 토론 주제 생성과 주장 설명·문장 수정 결과를 코칭 패널로 제공해 토론 준비와 진행을 보조하도록 구성했습니다.

핵심 기술 기여

1. REST API와 WebSocket 역할 분리

  • 문제 상황: 초기에는 토론방 진입에 필요한 기존 채팅 내역·참가자 정보·토론 상태와 실시간 채팅·투표 이벤트를 모두 WebSocket으로 받도록 구현했습니다. 토론방에 들어올 때마다 기존 내역을 다시 가져왔고, 데이터가 순차적으로 도착할 때마다 UI가 갱신되면서 필요한 정보가 모두 준비되기 전에 토론 상태가 바뀌거나 화면이 중간 상태를 보여주는 문제가 발생했습니다.
  • 원인: 초기 조회 데이터와 실시간 이벤트를 하나의 WebSocket 메시지 흐름에서 처리해, 데이터 수신 순서가 곧 UI 변경 순서로 이어졌습니다. 조회가 끝나야 하는 데이터와 즉시 반영되어야 하는 이벤트의 생명주기도 달랐습니다.
  • 해결 과정: Dio·Retrofit으로 토론방 기본 정보와 기존 내역을 REST API에서 먼저 조회하고, 채팅·턴 상태·관전자 댓글·투표처럼 실시간 반영이 필요한 기능에는 WebSocket을 사용했습니다.
  • 결과: 토론방 진입 시 필요한 초기 데이터를 먼저 준비한 뒤 실시간 이벤트를 연결할 수 있게 되었고, 데이터 도착 순서에 따라 UI가 불안정하게 바뀌는 문제를 줄였습니다.

2. Retrofit 기반 API 클라이언트와 인증 처리

  • 문제 상황: 인증, 사용자, 토론, 검색 등 여러 REST API를 앱 화면에서 일관된 방식으로 호출하고 인증 토큰도 요청마다 전달해야 했습니다.
  • 해결 과정: Dio에 공통 Base URL·타임아웃·인증 헤더 처리를 구성하고, Retrofit 인터페이스로 인증·사용자·토론 API를 선언했습니다. 로그인 후 발급된 토큰은 DioClient가 이후 요청의 Authorization 헤더에 추가하도록 연결했습니다.
  • 결과: API 호출 규칙과 인증 처리를 한 곳에서 관리하고, 화면에서는 도메인별 API 메서드를 사용해 통신 코드를 단순화했습니다.

협업

  • Linear, Discord, Obsidian을 활용해 스프린트와 진행 상황을 관리
  • 주 2회 회의와 매일 오전 진행 상황 공유를 통해 기획·디자인·개발 이슈를 조율