개요
SaaS 제품의 사용 메뉴얼이나 온보딩 가이드를 제작할 때, 가장 먼저 부딪히는 문제는 "어떻게 원하는 UI 요소만 정확하게 캡처하느냐"입니다. 기존 방식은 전체 화면을 캡처한 뒤 이미지 편집 프로그램에서 빨간 박스를 그리고, 불필요한 영역을 잘라내는 수작업에 의존해 왔습니다.
Quitboarding은 이 문제를 근본적으로 해결합니다. 확장 프로그램이 웹페이지의 HTML DOM(Document Object Model) 구조를 실시간으로 파싱하여, 사용자가 마우스를 올리는 순간 그 요소의 정확한 Bounding Rect(경계 사각형)를 계산하고 시각화합니다. 이 기술이 바로 Auto-Sensing입니다.
💡 이 문서에서 다루는 내용
Ctrl+Shift— Auto-Sensing 활성화 및 실시간 요소 탐지Ctrl+Shift+S— 단일 요소 스텝 저장Ctrl+Alt+S— 다중 요소 일괄 배치(Batch) 저장
1Auto-Sensing — 타겟 록온(Lock-on)
1.1 활성화 방법
Quitboarding 확장 프로그램이 설치된 상태에서, 캡처하고자 하는 페이지 위에서Ctrl + Shift 키를 동시에 누르면 Auto-Sensing 모드가 활성화됩니다. 이 상태는 두 키를 누른 채 유지해야 하며, 키를 놓으면 즉시 비활성화됩니다. 평소 웹서핑 중에는 전혀 반응하지 않으므로, 일반 탐색을 방해하지 않습니다.
1.2 앰버(Amber) 테두리의 의미
Auto-Sensing 모드에서 마우스를 요소 위에 올리면, 확장 프로그램은 해당 요소의getBoundingClientRect()를 호출해 정확한 위치와 크기를 계산합니다. 그 결과, 해당 요소의 테두리를 따라 주황색(Amber) 하이라이트 박스가 실시간으로 그려집니다. 이것이 바로 "내가 지금 이 버튼을 정확히 조준하고 있다"는 시각적 피드백입니다.
▲ Auto-Sensing 모드에서 마우스 이동에 따라 요소가 실시간으로 록인되는 시뮬레이션
⚠️ 주의 사항
React, Vue 등 모던 SPA 프레임워크로 구성된 페이지에서는 같은 영역에 여러 DOM 레이어가 중첩될 수 있습니다. 이 경우 Ctrl + Shift를 누른 채 마우스 휠을 스크롤하면 부모/자식 요소 사이를 탐색할 수 있습니다. 이 기능은 시리즈 2편에서 상세히 다룹니다.
2단일 요소 캡처 — Ctrl + Shift + S
2.1 캡처 실행
원하는 버튼이나 입력창에 앰버 테두리(Lock-on)가 정확히 맞춰졌을 때,Ctrl + Shift를 유지한 상태에서 S키를 추가로 누릅니다. Quitboarding은 해당 요소의 HTML 구조, 텍스트 레이블, 위치 정보를 즉시 메모리에 기록하고, 우측 사이드바 패널에 새로운 스텝 카드(Step Card)를 생성합니다.
2.2 스텝 카드란?
스텝 카드는 캡처된 요소의 미니어처 썸네일과 함께, 해당 스텝의 설명 텍스트를 포함하는 데이터 단위입니다. 이 카드들이 순서대로 쌓이면 완성된 SOP 가이드가 됩니다. 썸네일은 이미지 파일이 아닌 순수 CSS 절대 위치 레이아웃으로 렌더링되기 때문에, 용량 부담 없이 부드럽게 표시됩니다.
▲ 단일 요소 캡처 후 우측 패널에 스텝 카드가 생성되는 시뮬레이션
💡 실무 팁
로그인 버튼, 제출(Submit) 버튼처럼 하나의 핵심 동작을 문서화할 때 단일 캡처가 가장 적합합니다. 생성된 스텝 카드의 설명 텍스트는 에디터 창에서 언제든지 수정할 수 있습니다.
3다중 배치 캡처 — Ctrl + Alt + S
3.1 Batch 모드의 필요성
회원가입 양식(Form), 설정 페이지(Settings), 체크아웃 페이지처럼 여러 입력 필드와 버튼을 순서대로 연속 캡처해야 하는 상황이 있습니다. 매번 Ctrl + Shift + S를 반복하면 작업 흐름이 끊기고, 마우스 포커스가 다음 요소로 이동하는 타이밍을 놓칠 수 있습니다.
Batch 캡처 모드(Ctrl + Alt + S)는 이 문제를 해결합니다. Alt키로 전환하는 순간, Quitboarding은 현재 요소를 캡처 대기열(Queue)에 등록하고 다음 요소로 즉시 이동할 수 있는 상태를 유지합니다. 작업 완료 후 일괄 저장(Flush)하여 한 번에 여러 스텝 카드를 생성합니다.
3.2 순서와 실행
Ctrl + Alt를 동시에 누릅니다. 평소와 달리 앰버 테두리가 더 두꺼운 스타일로 표시되어 Batch 모드임을 표시합니다.S를 눌러 대기열에 추가합니다. 사이드바 패널에 "대기 중" 표시가 나타납니다.S를 누릅니다. 흐름을 끊지 않고 연속으로 진행합니다.Ctrl + Alt를 놓으면 대기열이 자동으로 Flush되고, 순서대로 정렬된 스텝 카드들이 한 번에 생성됩니다.▲ 회원가입 폼에서 여러 요소를 연속 캡처하는 Batch 모드 시뮬레이션
기술적 배경: DOM 기반 인식의 원리
Quitboarding의 Auto-Sensing은 전통적인 픽셀 기반 OCR(광학 문자 인식)이나 화면 캡처와 근본적으로 다릅니다. 확장 프로그램은 브라우저 내부의 Rendering Engine이 이미 파싱 완료한 DOM 트리(Tree)에 직접 접근합니다.
사용자가 마우스를 특정 요소 위로 이동하면,mouseover 이벤트가 확장 프로그램의 콘텐츠 스크립트(Content Script)에 의해 가로채집니다. 이 스크립트는 해당 요소의 tagName,id,classList, 내부 텍스트, ARIA 레이블 등 의미론적(Semantic) 메타데이터를 추출하고, 이를 캡처 레코드에 함께 저장합니다.
🔬 V8 Fidelity 캡처 방식
단순 스크린샷과 달리, DOM 구조와 CSS 속성을 원본 그대로 레코딩하기 때문에 캡처된 결과물을 나중에 어떤 해상도로 열어도 화질 저하나 픽셀 깨짐이 발생하지 않습니다.레티나 디스플레이(HiDPI)에서도 선명하게 표시됩니다.
기존 방식과의 비교
| 항목 | 기존 스크린샷 방식 | Quitboarding |
|---|---|---|
| 요소 선택 정밀도 | 수동 마우스 드래그 | DOM 자동 Bounding Rect |
| 작업 시간 | 스텝당 2~5분 | 스텝당 3~5초 |
| 이미지 품질 | 픽셀 기반 (확대 시 깨짐) | 벡터 수준 (해상도 무관) |
| 편집 유연성 | 전체 재촬영 필요 | 텍스트/순서 실시간 수정 |
| 팀 협업 | 파일 공유 (버전 충돌) | 링크 기반 실시간 공유 |
| 배포 형태 | PDF / PPT | 독립 실행 HTML 스토리보드 |
단축키 요약
Ctrl+ShiftCtrl+Shift+SCtrl+Alt+SWheel ↑↓다음 편 예고
시리즈 2편 「심화기: 숨은 영역과 팝업까지 잡아내는 범위 선택과 휠 탐색」에서는 React나 Vue로 구축된 복잡한 SPA 환경에서 마우스 오버만으로는 절대 선택하기 어려운 중첩 컴포넌트를 정밀하게 타겟팅하는 고급 테크닉을 다룹니다.