Flutter Frontend, QA Flutter Claude Code Figma MCP QA

BeaverTalk - 실시간 AI 한국어 회화·발음 코칭 앱

BeaverTalk은 외국인 학습자가 AI 캐릭터와 실시간 음성 통화를 하며 한국어 회화를 연습하고, 통화 후 자신의 발음과 표현을 분석·복습할 수 있는 모바일 학습 서비스입니다.

제품의 핵심 경험은 실시간 통화 → 대화 분석 → 문장·발음 복습 → 다시 통화로 이어지는 반복 학습 루프입니다.

저는 프로젝트에서 Flutter 기반 프론트엔드 개발과 앱 전반의 QA를 담당했으며, 기능 구현뿐 아니라 서비스의 과금 구조와 출시 리스크까지 점검했습니다.

Flutter 프론트엔드 개발

Flutter 기반 모바일 앱 프론트엔드를 담당했습니다.

디자인 구현 과정에서는 Claude Code와 Figma MCP를 연동해 Figma 시안을 코드 구현 과정과 직접 연결했습니다.

Figma의 화면 구조와 디자인 정보를 확인하면서 UI를 구현하고, 시안과 실제 앱 화면의 차이를 줄이기 위해 반복적으로 화면을 비교·수정했습니다.

단순 화면 구현보다 실제 사용자 플로우 전체에서 UI가 자연스럽게 이어지는지 확인하는 데 집중했습니다.

주요 제품 흐름:

BeaverTalk의 핵심 기능은 AI 캐릭터와의 실시간 음성 통화입니다.

서비스는 서버 단일 WebSocket을 통해 실시간 음성·제어 데이터를 주고받는 구조이며, Flutter 앱에서는 통화 상태에 따라 자막과 힌트를 표시하고 영상 아바타를 함께 제공하도록 구성되어 있습니다.

통화 종료 후에는 다음 정보를 확인하고 문장 단위 복습과 발음 챌린지로 이어질 수 있도록 사용자 흐름을 구성했습니다.

프론트엔드 구현에 그치지 않고 앱 전반의 QA를 담당했습니다.

코드·Figma·API를 대조하면서 ‘기획 문서에는 존재하지만 실제 구현되지 않은 기능’과 ‘구현됐지만 문서와 다른 기능’을 분리해 확인했습니다.

QA 과정에서는 특히 다음과 같은 출시 전 문제를 식별하고 구현 상태와 우선순위를 문서화했습니다.

실시간 AI 통화 1건의 API 원가가 약 490원으로, 기존 구독 모델로는 사용량이 늘어날수록 수익성을 확보하기 어려운 구조였습니다.

단순히 API 단가가 비싸다고 판단하지 않고 원가 계기판을 통해 통화 1건에서 어떤 요청이 비용을 발생시키는지 분석했습니다.

그 결과 이전 대화 Context 전체가 매 턴 다시 전달되면서 이미 처리된 내용까지 반복적으로 과금되는 구조가 주요 원인임을 확인했습니다.

원가 문제를 해결하기 위해 여러 대안을 비교했습니다.

검토한 대안:

단순히 가장 저렴한 모델을 사용하는 대신 비용·UX·구현 난이도의 세 가지 기준으로 비교했습니다.

모델 전체 교체는 실시간 회화 품질 저하 가능성이 있었고, 모든 통화를 Cascade 방식으로 바꾸는 것도 실전 회화의 자연스러움을 떨어뜨릴 수 있다고 판단했습니다.

최종적으로 Context 압축과 함께 사용 목적에 따라 AI 사용 구조를 분리하는 방식을 선택했습니다.

이를 통해 실시간 회화 UX는 유지하면서 비용이 중요한 반복 학습 영역의 원가를 낮출 수 있도록 구조를 변경했습니다.

원가 구조를 기준으로 계산한 서비스 경제성 개선 결과:

처음에는 API 비용 문제를 개발 최적화 문제로 봤지만, 분석을 진행하면서 본질은 “이 서비스가 사용자가 늘어나도 지속 가능한가?”라는 비즈니스 지속 가능성의 문제라고 판단했습니다.

모델 성능만 높이는 대신 어떤 기능에는 높은 품질의 모델이 필요하고, 어떤 기능에는 비용 효율적인 구조가 적합한지를 분리하면서 기술 선택을 서비스의 수익 구조와 연결했습니다.

Flutter 프론트엔드를 구현하면서 사용자 경험을 만들고, QA를 통해 코드·디자인·API 사이의 불일치를 찾고, 통화 원가를 분석하면서 서비스의 수익 구조까지 검토했습니다.

특히 건당 490원의 비용 문제를 원가 구조 분석 → 원인 정의 → 대안 비교 → 기술 구조 변경 → 서비스 경제성 개선으로 해결하면서 기술적 의사결정과 비즈니스 지속 가능성을 함께 판단할 수 있었습니다.