1. 배경
디자인팀의 업무 중 "디자인 QA"는 UI의 각 요소가 디자인 가이드라인과 일치하는지 확인합니다. 이 과정 중 마우스를 올려놓아야만 나타나는 툴팁 같은 동적 요소들의 스타일 검토에 어려움이 있었습니다.
디자이너 분과 얘기해보니 툴팁과 같은 요소들이 화면에 나타날 때, 이를 캡처하여 폰트, 색상, 여백 등의 스타일을 검토하고 있습니다. 캡쳐된 이미지에서 스타일을 분석하는 것은 시간이 많이 소요되고, 정확하지 않을 수 있습니다.
툴팁:
2. 원인: 기존 개발자 도구의 한계
Pseudo classes on elements can be triggered to investigate how an element may react if it were to be hovered over for example.
- Chrome DevTools 공식문서: Triggering of pseudo classes
개발자도구 element탭에 "Force Element State" 기능이 있지만, CSS의 가상 클래스 상태 (:hover)를 변경할 뿐, JavaScript 이벤트 리스너가 트리거되지 않습니다.
개발자 도구 중 Force Element State:
저희 서비스의 툴팁은 Mui의 툴팁을 커스텀하여 개발하였습니다. 소스코드를 확인하니 마우스 이벤트 리스너 (예: mouseover, mouseenter)에 의존합니다.
3. 해결 아이디어
mouseover 이벤트를 트리거하여 이 문제를 해결하고자 사내 크롬 확장프로그램을 개발하기로 했습니다.
3.1. Chrome Extension?
크롬 확장 프로그램은 브라우저의 기능을 확장하기 위해 설계된 소프트웨어 응용 프로그램입니다. HTML, CSS, JavaScript와 같은 웹 표준 기술을 사용하여 개발됩니다.
Chrome 확장 프로그램 파일의 구조는 아래와 같습니다:
manifest.json
확장 프로그램의 이름, 버전, 권한, 사용할 스크립트 및 HTML 파일 등을 정의합니다.popup.html
사용자가 확장 프로그램 아이콘을 클릭했을 때 나타나는 인터페이스입니다.popup.js
popup.html에 정의된 UI의 상호작용을 제어합니다. 예를 들어, 버튼 클릭 이벤트를 처리하거나, 확장 프로그램의 다른 부분과의 통신을 관리합니다.content.js
실제 웹 페이지의 내용에 접근하고 조작할 수 있게 해줍니다. 이 스크립트는 특정 페이지나 페이지 그룹에 삽입되어, 페이지의 DOM을 읽거나 수정할 수 있습니다.background.js
확장 프로그램이 활성화되어 있는 동안 지속적으로 실행되며, 전역 상태 관리, 특정 이벤트에 대한 감지 및 반응, 다른 확장 프로그램 구성 요소 간의 메시징 등을 담당합니다.
프로젝트의 구조:
├── README.md
├── icons
├── manifest.json
├── popup
│ ├── popup.css
│ ├── popup.html
│ └── popup.js
└── scripts
└── content.js
...3.2. 이벤트 트리거
툴팁을 트리거하기 위한 mouseover 상태를 제어하는 아이디어는 단순합니다.
- 타겟
element선택 - 원하는 이벤트 객체를 생성
dispatchEvent로 이벤트 트리거
// content.js
function forceEvent(target, action) {
const mouseEvent = new MouseEvent(action, {
view: window,
bubbles: true,
cancelable: true,
});
target.dispatchEvent(mouseEvent);
}
// Usage
forceEvent(selectedElement, 'mouseover');3.3. storage API
팝업이 닫히고 다시 열릴 때 체크박스의 상태를 유지하려면, 크롬 확장 프로그램의 지속적인 상태를 저장할 수 있어야 합니다.
이를 위해 chrome.storage API를 사용했습니다. chrome.storage는 다양한 컴포넌트(팝업, 콘텐츠 스크립트, 백그라운드 스크립트 등) 간에 데이터를 저장하고 공유할 수 있습니다.
- 체크박스의 상태를 변경할 때마다
chrome.storage에 저장 - 팝업이 열릴 때
chrome.storage에서 이전 상태를 로드하여 체크박스의 상태를 설정
// popup.js
document.addEventListener("DOMContentLoaded", function () {
// ...
function updateStateAndSendMessage(checkbox, messageKey) {
var isChecked = checkbox.checked;
chrome.storage.local.set({ [messageKey]: isChecked });
// ...
}
chrome.storage.local.get(
["toggleSelectMode", "triggerArtificialHover"],
function (result) {
if (result.toggleSelectMode !== undefined) {
activateControllerCheckbox.checked = result.toggleSelectMode;
}
if (result.triggerArtificialHover !== undefined) {
artificialHoverCheckbox.checked = result.triggerArtificialHover;
}
}
);
activateControllerCheckbox.addEventListener("change", function () {
updateStateAndSendMessage(activateControllerCheckbox, "toggleSelectMode");
});
artificialHoverCheckbox.addEventListener("change", function () {
updateStateAndSendMessage(
artificialHoverCheckbox,
"triggerArtificialHover"
);
});
});
4. 결과물
결과물을 보면 팝업을 통해 DOM 요소를 선택하고 상태 제어가 가능합니다.
- 'Select 모드'를 통해 웹 페이지의 다양한 요소를 직접 선택할 수 있습니다.
- 선택된 요소에 대해 자바스크립트 이벤트(예: mouseover, mouseout)를 트리거합니다.
확장프로그램을 통해 비효율적이던 인터렉션 요소들의 QA 과정을 효율적으로 개선하였습니다. 디자인팀에서 잘 사용되는 모습과 좋아하시던 모습 덕분에 보람찼습니다!
