맥스 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 태그를 커스텀한 컴포넌트를 구현하여 적용했고, 요구 사항에 맞는 디자인과 기능을 완벽하게 구현할 수 있었습니다.

더보기

기업부설연구소의 주임연구원으로, 사내 전기차 충전기 솔루션인 KEV의 WebApp을 Vue.js 2에서 Vue.js 3으로 마이그레이션하는 작업을 진행했습니다. 외부 전기차 충전기 업체의 WebApp 외주 개발 및 유지보수 작업도 병행했습니다.

더보기

플랫폼 서비스를 쉽게 만들 수 있는 솔루션인 플랫폼파이(https://platformfy.com)의 테마와 템플릿 빌더 작업에 참여하였고, 테마를 기반으로 하여 의뢰 고객의 맞춤 서비스 개발 작업에도 참여했습니다. 프론트엔드 작업은 Vue.js 2.x 버전과 3.x 버전을 활용하여 개발 작업을 진행했고, Python + django 베이스로 구축된 백엔드 코드의 기능 수정 및 추가 작업을 일부 진행했습니다.

더보기

특허분야의 선행기술조사를 돕는 AI서비스 브루넬(https://brunel.ai)의 프론트엔드 개발을 맡아 Vue.js를 활용하여 개발을 진행하였고, 구글 애널리틱스 연동 작업을 담당하여 사용자 페이지뷰 및 클릭 이벤트 등의 데이터를 수집하여 사용자의 서비스 이용 패턴을 분석하는 작업에도 참여했습니다.

더보기

프로그래밍에 처음 입문하는 사람들을 대상으로 8월 5일부터 16일까지 2주간 운영되었던 프로그래밍 스쿨 Level.0 과정에서 수강생들의 HTML, CSS, Javascript 기초 학습에 도움을 주면서 과제와 주간 test 문제 출제, 과제에 대한 피드백, 그리고 출석 관리를 맡았습니다.

더보기

백팩(thebackpack.io) 리뉴얼 과정에서 메인 대시보드 퍼블리싱 작업과 인사이드웹(insideweb.kr) 외주 웹 개발로 커리어플러스센터(https://careerpluscenter.com) 관리자 페이지 개발과 라임비뇨기과(https://lime-orange.com/)의 관리자 페이지 개발 및 클리닉 정보 페이지 퍼블리싱을 담당하였습니다. React 기반의 SSR 프레임워크인 Next.js를 활용하여 작업 진행했습니다.

더보기

취미 생활을 위한 DIY 키트 판매 사이트인 수수공간(https://soosooplace.com) 서비스와 관리자 페이지의 프론트엔드 및 백엔드 개발을 담당하였습니다. 프론트엔드는 React, 백엔드는 Node.js의 Express 프레임워크와 mongoDB를 활용하여 구축했습니다.

더보기