실전! YOLO 기반 UI 버그 탐지 시스템 구축 및 데이터셋 구축 경험 공유

핵심 기술

이 글은 웹사이트의 UI 버그를 자동으로 탐지하기 위한 시스템을 구축하는 과정에서 겪었던 기술적 도전 과제와 해결 방안을 공유합니다. 특히 YOLO 객체 탐지 모델을 활용하고, 실제 서비스에 적용 가능한 데이터셋을 구축하는 데 집중했습니다.

기술적 세부사항

• 목표: 최소한의 수동 설정으로 웹사이트의 모든 UI 버그를 자동으로 탐지하는 엔드 투 엔드 테스트 시스템 개발.
• 초기 접근: UI 버그 탐지부터 시작, 라이트웨이트 모듈식 아키텍처 설계.
• 모델 선택: YOLO (YOLO NAS 활용) - 빠른 속도, 우수한 객체 탐지 성능으로 선정.
• 라이선싱 문제: YOLO NAS 프레임워크는 Apache 라이선스였으나, 사전 학습된 모델 가중치 라이선스가 상업적 제품 사용 시 자체 코드 오픈 소스화를 요구하여 사용 불가 판정.
• 해결 방안: 사전 학습된 가중치를 사용하지 않고, 자체 데이터셋으로 모델을 처음부터 재학습 (Retrain from scratch).
• 데이터셋 구축: 초기에는 웹 크롤러를 통한 실제 웹사이트 탐색 및 스크립트 주입, DOM 조작 후 스크린샷 생성 방식 사용. 그러나 속도가 느리고 불안정하며, 수동 필터링 필요.
• 합성 데이터 (Synthetic Data) 도입: 단순 UI 레이아웃을 직접 생성하고 의도적으로 버그를 주입 (이미지 겹침, 레이아웃 왜곡 등). 생성 속도와 제어 용이성 측면에서 장점 발견.
• 데이터셋 전략: 실제 웹사이트, 수정된 웹사이트, 합성 데이터를 혼합하여 사용함으로써 데이터 다양성과 정확도 향상.
• 버그 정의 확장: 초기 가시적인 버그(텍스트 겹침, 레이아웃 깨짐)에서 점차 미묘한 문제(글자 간격, 스크롤바, 폰트 크기 불일치) 및 팝업 관련 버그로 범위 확장.
• 탐지 시스템 이원화:
  • 객체 탐지: 국소적인 시각적 문제 (Overlapping content, Broken image 등)
  • 페이지 레벨 분류: 전역적인 레이아웃 또는 콘텐츠 문제 (Missing content, Broken layout 등)

개발 임팩트

• 라이선싱 문제: 오픈소스 모델 사용 시 프레임워크뿐만 아니라 가중치, 데이터셋 등 모든 의존성의 라이선스를 철저히 검토하는 중요성 강조.
• 데이터의 중요성: 모델 학습보다 고품질의 다양하고 방대한 데이터셋을 구축하는 것이 핵심 과제임을 입증.
• 합성 데이터와 실제 데이터의 시너지: 두 종류의 데이터를 효과적으로 결합하여 모델 성능 극대화.
• 시스템 접근 방식: 단순한 기능이 아닌, 올바른 데이터 없이는 무용지물인 시스템으로서 UI 버그 탐지에 접근.
• 성능 개선: 재학습을 통해 사전 학습된 모델보다 더 나은 결과 도출 가능성을 시사.

커뮤니티 반응

언급되지 않음.

톤앤매너

본문의 내용은 실제 개발 경험을 기반으로 한 실질적인 조언과 인사이트를 제공하는 전문적인 개발 커뮤니케이션 스타일을 유지합니다.