맥스 AI 유지보수 및 추가 개발
2024.08 ~ 2025.04
AI 기반의 영어 학습 서비스 맥스 AI의 유지보수 및 추가 개발을 담당하여, Vue.js 2.x 버전으로 작업된 앱 프론트엔드 작업을 진행했습니다.
실시간 아바타 영상 스트리밍 플랫폼(HeyGen), AI 기반 STT 서비스(ElevenLabs), LLM을 통해 생성된 학습 진행 과정 관련 구조화된 산출물(OpenAI, Azure) 등 다수의 외부 서비스를 연동하여 사용하는 관계로 인해 오류 발생이 잦았었는데, Sentry를 도입하여 에러 발생 시점과 내용에 대한 수집 자동화를 통해 더욱 빠른 에러 대응이 가능하도록 했습니다.
the LIVE 학습모드 베타 서비스 개발
2024.11 ~ 2025.02
OpenAI Realtime API와 Vue.js 2.x 버전을 활용하여 시나리오를 기반으로 실시간 대화 학습을 진행하는 더 라이브 서비스의 베타버전 개발 및 유지보수를 담당했습니다.
작업 초기에는 기획자 1명을 포함한 4인 규모로 진행했었고, QA 및 유지보수 시점 부터는 기획자 겸 AI 프롬프트 엔지니어 1명이 추가되어 총 5인 규모로 진행했습니다.
서비스 구현 당시, Realtime API가 출시된지 얼마 되지 않은 상황이어서 기술 문서의 내용도 빈약하고 실제로 넘어오는 Response와 문서 상의 데이터가 일치하지 않는 부분도 많았지만 함께 작업하는 동료와의 소통을 통하여 서비스 구현에 필요한 데이터를 정제하여 사용할 수 있었습니다.
AI 음성의 생성 시점과 자막 텍스트의 생성 시점이 맞지 않는 이슈로 인해 런칭 초기에는 많은 불만족 의견이 접수되었는데,
유지보수 작업 기간 중 음성 delta 생성 시작 event와 종료 event의 발생 시점을 기준으로 상대적인 음성 파일 재생 시간을 가져와서 자막 텍스트를 마치 노래방 가사 텍스트가 표시되는 방식처럼 음성 파일의 재생 시간 동안 순차적으로 렌더링되도록 개선 작업을 진행하여 좋은 고객 피드백을 받을 수 있었습니다.
레벨테스트 기능 개발
2025.01 ~ 2025.02
B2B 협력사의 요청으로, 맥스 AI 서비스의 B2B 회원을 위한 레벨테스트 기능을 구현하는 것을 목표로 진행했던 작업입니다.
기존에 설계되었던 비즈니스 로직의 전체적인 수정과 신규 기능의 추가가 동시에 진행되는 작업임에도, 프로젝트 전체에 할당된 기간이 적어서 일정을 맞추기 위해 많은 노력이 필요했습니다.
테스트 문항에 답안을 제출하는 방법으로 타이핑을 통한 입력과 실시간 스트리밍 기반의 STT 텍스트 렌더링이라는 2가지 방법을 구현했어야 했는데, 모바일 앱으로 제공되는 서비스이기 때문에 부득이하게 발생될 수 있는 화면 스크롤 이슈를 제어하는 것이 쉽지 않았고, 신입 백엔드 개발자가 프론트엔드에서 쉽게 사용할 수 있는 데이터 구조로 전달해주는 것에 약점이 많았던 것도 큰 어려움이었습니다.
맥스 AI 월드 개발
2025.03 ~ 2025.06
OpenAI의 Realtime API와 Audio Completion API를 기반으로, 스캔 진행된 교재 또는 사전 제작된 콘텐츠를 AI 튜터가 실시간으로 강의하는 교재 강사 서비스인 맥스 AI 월드의 개발을 담당했습니다.
Next.js 15 + React 19 버전으로 개발을 진행했고, tailwind를 사용한 CSS 관리와 React Query를 활용한 네트워크 요청 상태 관리를 진행했습니다.
강점이라고 생각되는 UI/UX 구현을 주로 맡아서 진행하였고, 서비스 내 80% 이상의 UI 작업을 담당했습니다.
학습 중 멀티미디어 요소로 동영상이나 Audio 파일의 재생이 발생되는 상황이 있는데, 해당 상황에 적용한 외부 플레이어 라이브러리에서 지원하는 설정 기능이 빈약하여 원하는 기능(파일 다운로드 방지, 재생 속도 변경, 특정 버튼 클릭 시 10초 이전/이후로 이동 등)을 구현할 수 없는 문제가 있었습니다.
문제 해결을 위해서 HTML5의 Audio 태그와 Video 태그를 커스텀한 컴포넌트를 구현하여 적용했고, 요구 사항에 맞는 디자인과 기능을 완벽하게 구현할 수 있었습니다.
और देखें
