Read Original
#Frontend

플랫폼 행성에 떨어진 서비스 개발자

플랫폼 행성에 떨어진 서비스 개발자
01

Summary

서비스 개발자, 낯선 플랫폼 행성에서 데이터와 AI로 생존 기지를 구축하다

어드민 데이터 분석부터 AI 기반 QA 자동화까지, 제한된 자원으로 커버리지 82%를 달성한 프론트엔드 엔지니어의 적응기

서비스 프론트엔드 개발자가 플랫폼 조직으로 이동하여 겪은 직무 적응 과정과 업무 생산성 혁신 사례를 다룹니다. 어드민 사용자 행동을 수집하는 Tracker 모듈 구축으로 데이터 기반의 우선순위를 설정하고, AI Agent와 Playwright를 활용해 QA 검증 과정을 자동화함으로써 효율적인 플랫폼 개발 환경을 만들어낸 경험을 공유합니다.

  • 01어드민 사용자 행동 추적을 위한 공통 Tracker 모듈 설계 및 대시보드 구축
  • 02필터 탭 컴포넌트 개선으로 상세 페이지 진입 시간 20% 이상 단축
  • 03BigQuery MCP 및 LLM Wiki 기반의 AI 맥락 공유 및 분석 환경 마련
  • 04AI Agent와 Playwright를 결합한 96건의 QA 테스트 케이스 자동 수행 및 회귀 테스트 체계 구축
  • 05전시어드민 사용량 기준 전체 기능의 82% 커버리지 개선 달성

RECOMMENDATION

전담 PM이나 QA 리소스가 부족한 환경에서 어드민 시스템을 운영하는 엔지니어나, 데이터 및 AI 도구를 통해 개발 워크플로의 생산성을 극대화하고 싶은 프론트엔드/플랫폼 개발자에게 추천합니다.

The Problem

서비스 개발자에서 전시플랫폼 프론트엔드 담당자로 이동한 후, 50여 개의 어드민 메뉴에 대한 사용 패턴과 데이터 기반이 없어 효율적인 개선 지점을 찾기 어려웠습니다. 또한 디자이너, PM, QA 등의 전담 인력이 부족하여 정책 검토 및 배포 전 검증에 많은 시간과 비용이 소요되었습니다.

The Solution

사용자 행동 이벤트를 공통 기준으로 적재하는 Tracker 모듈과 분석 대시보드를 구축하여 데이터 기반으로 필터 탭 컴포넌트 등 레버리지가 높은 UI를 우선 개선했습니다. 아울러 BigQuery MCP, LLM Wiki, Playwright와 AI Agent를 연동하여 기획 검토부터 QA 테스트 케이스 작성 및 브라우저 기반 회귀 테스트 수행까지 자동화했습니다.

The Result

필터 조작 없이 상세 페이지로 직접 이동하는 비율이 5.8%에서 22.6%로 상승하고 접근 시간이 20% 이상 단축되었으며, 어드민 전체 기능의 82% 커버리지를 개선했습니다. 또한 AI 기반 자동화를 통해 96건의 QA 테스트 케이스를 자동 수행하여 배포 후 운영 이슈 발생 없이 안정성을 유지했습니다.

Trade-off

AI가 작성한 테스트 케이스와 실행 결과를 전적으로 신뢰할 수 없어 핵심 시나리오에 대한 인적 검토가 지속적으로 요구되며, 초기 이벤트 설계 및 LLM Wiki 구축을 위한 가동 비용이 발생했습니다.

03

Key Concepts

Concept · 01

Tracker 모듈

어드민 내에서 일어나는 사용자 행동 이벤트를 공통된 기준으로 수집하고 적재하기 위해 직접 설계한 로깅 모듈입니다. 사용자 행동 데이터가 부족한 환경에서 이용 패턴을 정량 지표로 시각화하는 기반이 됩니다.

  • 페이지 조회, 검색, 생성 및 수정 등 공통 행동을 정의하여 메뉴별 속성을 표준화함
  • 타 플랫폼 조직에서도 동일한 기준으로 수집 및 분석할 수 있도록 모듈화 처리함
Concept · 02

필터 탭 컴포넌트

어드민 조회 페이지에서 사용자가 자주 사용하는 검색 조건을 브라우저 저장소 및 탭 형태 UI로 저장하여 재사용할 수 있도록 한 공통 UI 컴포넌트입니다.

  • 조회 세션의 80% 이상에서 필터 조작이 일어나는 행동 패턴 분석을 토대로 개발함
  • 필터 미사용 상세 진입 비율을 3.9배 높이고 접근 시간을 20% 이상 줄임
Concept · 03

AI 기반 QA 자동화

코드 변경사항(diff), 기획서, LLM Wiki 등을 참조하여 AI가 테스트 케이스를 구성하고, Playwright를 이용해 브라우저에서 실제 검증 시나리오를 수행하는 자동화 체계입니다.

  • AI Agent가 96건의 테스트 케이스를 브라우저에서 직접 수행하고 수행 내역과 스크린샷을 생성함
  • 배포 전 회귀 테스트에 적용하여 리소스를 절감하면서 별도 운영 이슈 없는 배포 안정성을 확보함