마켓디자이너스 튜터링

마켓디자이너스 | 튜터링

Frontend Developer | 2024.04 – 2024.09

프로젝트 개요

실시간 영어회화 교육 플랫폼 '튜터링'에서 프론트엔드 개발과 서비스 품질 개선 업무를 수행했습니다.

수업 연결 안정성 향상을 위한 품질 개선 TF에 참여하여 실시간 통신 과정에서 발생하는 문제를 분석하고 개선했습니다.

또한 다국어 지원 기능과 프론트엔드 개발 환경을 개선하여 서비스의 사용성과 개발 편의성을 높이는 작업을 수행했습니다.

주요 업무

1. 실시간 수업 연결 안정성 개선

수업 중 발생하는 연결 종료 문제를 해결하기 위한 품질 개선 TF에 참여했습니다.

직접 서비스를 사용하면서 앱이 백그라운드로 전환될 때 통화가 종료되는 문제를 발견했고, 관련 로그와 데이터를 분석하여 원인을 추적했습니다.

문제 상황

• 앱이 백그라운드로 전환되는 과정에서 수업이 비정상적으로 종료되는 현상 발생
• 소켓 연결 및 재연결 과정에서 수업 상태가 정상적으로 유지되지 않는 문제
• 반복되는 수업 중단으로 사용자 경험과 서비스 안정성 저하

담당 업무

• Datadog을 활용한 수업 오류 및 장애 로그 분석
• 소켓 서버 로그, 데이터베이스 기록, Agora 로그를 비교하여 문제 발생 원인 추적
• 관련 부서와 협업하여 프론트엔드 및 서버 측 문제 원인 분석
• 백그라운드 전환 시 통화 연결을 유지하기 위한 관련 로직 개선
• 실제 서비스 이용을 통한 문제 재현 및 수정 사항 검증

성과

• 품질 개선 TF의 일원으로 수업 성공률 85% → 96% 개선에 기여
• 수업 중 비정상적인 통화 종료 문제 개선
• 로그와 데이터를 활용한 장애 분석 및 부서 간 협업 경험 확보

2. 다국어 서비스 지원

글로벌 사용자를 위한 다국어 처리 시스템을 개발하고 개선했습니다.

• vue-i18n을 활용한 5개 언어 다국어 지원 기능 구현
• 언어별 번역 리소스 관리 및 자동 로딩 처리
• 다국어 리소스 캐싱 최적화
• 언어별 콘텐츠를 일관되게 관리할 수 있도록 다국어 처리 구조 개선

3. 프론트엔드 개발 환경 개선

개발 과정에서 반복적으로 발생하는 실행 및 배포 관련 문제를 해결하고 개발 환경을 개선했습니다.

• 프론트엔드 로컬 개발 환경의 실행 문제 분석 및 해결
• 빌드 및 배포 과정에서 발생하는 오류 개선
• 개발 과정의 불편 사항을 파악하고 작업 환경 안정화

기술 스택

Vue.js, JavaScript, vue-i18n, Datadog, WebSocket, Agora

주요 경험

사용자 관점에서 문제를 발견하고 데이터로 원인을 추적한 경험

단순히 전달받은 이슈를 수정하는 것에서 벗어나, 직접 서비스를 이용하면서 사용자가 겪는 불편을 발견하고 개선하는 경험을 했습니다.

특히 실시간 수업 연결 문제는 프론트엔드 코드만으로 원인을 파악하기 어려웠습니다. Datadog, 소켓 서버 로그, 데이터베이스 기록, 통화 로그를 함께 분석하고 관련 부서와 협업하면서 문제의 원인을 좁혀 나갔습니다.

이 과정에서 프론트엔드 개발자라도 화면 구현에만 집중하기보다 서비스 전반의 데이터 흐름과 통신 구조를 이해하는 것이 중요하다는 점을 배웠습니다.

또한 실제 운영 지표를 기반으로 개선 결과를 확인하면서, 사용자 경험과 서비스 안정성에 직접적인 영향을 주는 개발의 중요성을 체감했습니다.