<p><img src="/images/deprecated/0_doc/img.png" alt="로그 확인 페이지로 이동해 새로고침하던 4단계가 단축키 팝업으로 3단계로 줄어든 전후 비교"></p>
<h2 id="상황">상황</h2>
<ul>
<li>제품 사용 시 접근하는 모든 화면에서 API 호출 로그가 기록되도록 로그 기능이 고도화됨</li>
<li>E2E 테스트 과정에서 페이지 접근 → 로그 확인 페이지 이동 → 새로고침 → 로그 식별 과정을 반복해야 했음</li>
<li>로그 생성 여부를 확인하는 단순 반복 작업에 많은 시간이 소요되고, 시선 이동으로 피로도가 높았음</li>
</ul>
<h2 id="행동">행동</h2>
<ul>
<li>React 기반 기존 로그 확인 컴포넌트를 재활용하여 전역 로그 확인 컴포넌트를 신규 구현</li>
<li>단축키(Tab)를 통해 어느 화면에서든 Pop-Up 형태로 로그 확인 가능하도록 개선</li>
<li>Set 자료구조를 활용해 새로 생성된 로그를 Bold 처리하여 변경 사항을 즉시 식별 가능하도록 구현</li>
</ul>
<h2 id="결과">결과</h2>
<ul>
<li>로그 확인 소요 시간을 약 6초 → 1초(83%)로 단축</li>
<li>E2E 테스트에 참여한 팀원들에게 공유하여 테스트 진행 속도 전반을 개선</li>
<li>단일 모니터에서 테스트와 로그 확인이 가능해져 시선 이동 삭제 및 테스트 지속성 향상</li>
</ul>