미리보기

프론트엔드 개발자, 백엔드 개발자, 데이터 엔지니어로 이루어진 팀에서 협력하며 게임 이상 탐지 프로덕트를 만들고 있습니다. 게임 내 이상 현상 탐지 데이터를 시각화하고, 데이터 분석을 위한 편의 기능을 제공하는 모니터링 대시보드 프로덕트를 담당하고 있습니다.

• 게임이상탐지 모니터링 대시보드 및 백오피스 개발 및 운영
• 대시보드 및 백오피스 전체 리뉴얼 작업 (UI/UX 기획 및 개발)
• 반응형 대시보드 구현 (화면 크기와 구성 요소에 반응하여 최적의 레이아웃 제공)
• 레거시 버전 마이그레이션 (개발 환경 생산성 개선 / Vue.js, 번들러, Node.js)
• 비즈니스 로직 분리 및 유닛 테스트 코드 작성
• 팀 회고 도입 및 운영 (팀원 간 교류 증진 및 업무 개선을 목표로 진행)

게임이상탐지 데이터를 탐색할 수 있는 대시보드를 리뉴얼하고 신규 기능을 개발한 프로젝트입니다. 게임마다 많게는 100개 이상의 탐지 모델이 있어서 사용자가 탐색에 어려움을 겪고 있었고, '검색 기능' 및 '탐지 모델 모아서 보기 기능'을 개발하여 탐지 생산성을 개선했습니다. 실 내에서 새로운 대시보드를 활용해서 게임 내 어뷰저를 잡아 수십억 가치를 확보하는 성과가 있었습니다.

• 새로운 도메인 설계에 맞는 대시보드 UI/UX 기획 및 개발
• 도메인에 최적화된 형태로 시계열 차트 및 랭킹 차트 제공 (Highcharts를 이용하여 커스텀 차트 구현)
• 사용자가 원하는 여러개의 탐지 모델 대시보드를 하나의 대시보드 뷰로 모아서 볼 수 있는 기능을 개발
• 사용자간 도메인 지식을 공유할 수 있도록 모델 메모 및 리포트 발행 기능 개발
• 비즈니스 로직을 컴포넌트에서 분리하여 vuex store에서 관리

사용자의 화면 크기나 탐지 모델의 구성 요소에 상관없이 UI가 최적의 레이아웃으로 나타나도록 반응형을 구현한 프로젝트입니다. 탐지 모델 지표에는 '시계열 차트, 랭킹 차트, 탐지 모델 상세 정보, 모델 상세 조건 변경 및 조회 기능' 등이 포함되어 있는데, 사용자 기기의 해상도가 낮은 경우 UI가 영역을 벗어나거나 겹치는 문제가 발생했고 시계열 차트가 충분한 높이를 확보하지 못해서 데이터 가독성이 떨어지는 문제가 있었습니다. 반응형 작업을 통해 낮은 해상도와 더불어서 사용자가 가로나 세로 창 크기를 줄여서 사용하는 경우에도 대응할 수 있도록 했습니다.

• 다양한 화면 크기에 맞게 재배치되는 유연한 레이아웃 제공 (사이드바-탐지 모델 지표 간, 지표 내부 UI 간에 Grid template 및 media query를 이용하여 반응형으로 동작하게 구현)
• 컨테이너 크기 변화를 감지하여 차트 리렌더링 (ResizeObserver 이용)
• vuetify 및 highcharts 커스텀시 css 명시도를 고려한 스타일 작성

오랫동안 운영된 프로젝트의 레거시 버전으로 인해 발생하는 프론트엔드 생산성 저하를 개선한 프로젝트입니다. 서버 구동 시간과 수많은 Hot Module Replacement 대기 시간, 배포 시간으로 인해 작은 작업에도 수십분 씩 낭비되는 문제가 있었고 마이그레이션을 통해 이를 해결했습니다.

• Vue.js를 2.7로 마이그레이션 (Vue3의 기능이 백포팅된 버전으로 점진적 마이그레이션 가능)
• 번들러를 Webpack -> Vite로 마이그레이션 (서버 구동 시간 85%, Hot Module Replacement 시간 100% 단축)
• 배포 환경의 Node.js 버전을 16 -> 20으로 업그레이드 (배포 시간 30% 단축)

게임이상탐지를 위한 탐지 모델을 관리하는 백오피스를 리뉴얼한 프로젝트입니다. 게임이상탐지 도메인이 진입장벽을 낮추기 위해 새로 설계되었고, 변경된 설계에 맞는 api만 교체하는 것이 주어진 업무였으나 새로운 설계에 맞는 UI를 직접 제안하여 전체적으로 개선하는데 기여했습니다.

• 핵심 기능인 '게임이상탐지 신규 모델 생성' 절차를 4단계에서 1단계로 개편 (작업 소요시간 70% 절감)
• 복잡한 모델 규칙을 쉽게 적용할 수 있도록 규칙 선택 자동화 및 유효성 검사 구현
• 불필요한 api 요청을 제거하여 메인 페이지 로딩 시간 50% 단축