개발자 없이 브라우저 녹화만으로 업무 매뉴얼 완성하기

https://chromewebstore.google.com/detail/fgkbklaijebjeadmgbmopmdndkfllaoa?utm_source=item-share-cb

코드 한 줄 없이 실무자가 직접 매뉴얼을 완성하고 배포할 수 있다. 브라우저에서 업무 화면을 녹화하면 — 클릭, 입력, 스크롤 모두 — 자동으로 단계별 문서로 변환된다. 이 글은 그 구조가 실제로 어떻게 동작하는지를 다룬다.

비개발 부서의 문서화 병목은 어디서 생기는가?

매뉴얼이 없거나 낡아 있는 이유는 대부분 하나다 — 작성 자체가 너무 번거롭다. 화면을 캡처하고, 화살표를 그리고, 단계를 텍스트로 풀어 쓰고, Word 파일로 정리하는 과정을 개발 부서에 요청하면 우선순위에서 밀린다. 직접 하려 해도 툴이 없다.

여기서 두 가지 경로가 나뉜다.

개발자에게 의뢰: 일정·비용 소요, 업무 현장 맥락 누락 위험
실무자가 직접 작성: 반복 노동, 일관성 유지 어려움, 포맷 분산

노코드 문서화 도구는 이 병목을 녹화→자동 변환 구조로 해결한다. 실무자가 평소대로 화면을 조작하면 — 그 행동 자체가 문서가 된다.

클릭 직전 캡처와 DOM 정보 기반 문서 변환 구조

녹화 중 매 클릭이 발생하기 직전 스크린샷이 찍힌다. 이것이 핵심이다. 클릭 이후를 캡처하면 "무엇을 눌렀는지"가 사라진다 — 버튼이 이미 눌린 상태로 바뀌기 때문이다. 직전 캡처는 독자가 "다음에 클릭해야 할 요소"를 정확히 볼 수 있도록 보장한다.

동시에 DOM(Document Object Model) — 브라우저가 웹 페이지를 구성하는 요소 트리 — 에서 버튼 레이블, 필드 이름, URL, 페이지 제목을 읽어낸다. 이 텍스트 맥락이 스크린샷과 함께 행동 로그에 쌓인다. 결과적으로 AI 모델이 문서를 생성할 때 이미지만 보는 게 아니라 — "이 클릭은 '저장' 버튼이었고, 현재 페이지는 '프로젝트 설정'이었다"는 정보를 함께 갖는다.

행동 로그의 구조는 단순하다:

필드	내용 예시
액션 타입	click / input / scroll
대상 요소 레이블	"저장하기" 버튼
페이지 URL	/settings/project
DOM 텍스트 맥락	프로젝트 설정 > 일반 탭
캡처 시점	클릭 직전 (pre-click)

이 구조 덕분에 생성된 문서의 단계 설명이 단순 스크린샷 나열과 다르다 — 레이블과 흐름이 사람이 쓴 것처럼 이어진다.

Upstage Document Parse 기술이 작동하는 구체적 메커니즘

행동 로그와 스크린샷이 모이면 AI 처리 단계가 시작된다. 여기서 Upstage Document Parse가 사용된다.

Document Parse는 이미지나 문서에서 텍스트·레이아웃 구조를 추출하는 API다. 단순 OCR(이미지에서 글자 인식)을 넘어서 — 표, 헤더, 리스트 등 문서의 구조적 의미까지 파악한다. 스크린샷 속 UI 요소들이 어떤 계층으로 배치되어 있는지, 어떤 텍스트가 버튼인지 레이블인지를 구분해낸다.

처리 흐름을 정리하면:

스크린샷 + DOM 맥락 → Document Parse 전달: 이미지 해석과 텍스트 맥락을 함께 처리
파싱 결과 → Solar Pro 3 입력: Upstage의 언어 모델이 단계별 설명 초안 생성
자기검증(self-critique) 루프: 생성된 초안을 에이전트가 재검토 — 단계 누락, 순서 오류, 레이블 불일치를 체크
약한 단계만 재작성: 전체를 다시 생성하지 않고 검증에서 실패한 단계만 수정

자기검증 구조가 중요한 이유는 하나다 — 스크린샷과 설명 텍스트가 어긋나는 흔한 오류를 AI가 스스로 잡아낸다. "3단계에서 '확인' 버튼을 누른다고 설명했지만, 스크린샷에는 '저장' 버튼만 보인다"는 식의 불일치가 자동으로 교정된다.

스크린샷은 이 과정에서 서버로 전송되지 않는다. Document Parse에 전달되는 건 행동 로그와 DOM 텍스트 맥락뿐이다.

마스킹과 로컬 데이터 처리를 통한 프라이버시 보호 방식

업무 화면에는 민감 정보가 섞인다. 비밀번호 필드, 주민등록번호 형식의 입력, 개인 식별 정보 — 이런 데이터가 로그에 기록되면 보안 문제가 된다.

Manual Maker의 처리 방식:

비밀번호 필드 자동 마스킹: type="password" 속성이 있는 입력값은 기록하지 않는다
주민번호·카드번호 형식 블러: 정규식 패턴으로 감지해 로그에서 제거
스크린샷 미전송: 이미지는 로컬 IndexedDB에만 저장되고 서버로 올라가지 않는다
행동 로그 전송 범위: 문서 생성 요청 시에만 — 평소 녹화 중에는 전송이 없다

IndexedDB는 브라우저 내장 저장소다. 별도 앱 설치 없이 크롬 확장 프로그램 안에서 데이터를 유지한다. 녹화 세션이 끝나도 로컬에 남아 있어 — 네트워크 없이도 수동 편집이 가능하다.

수동 수정 보호 기능도 있다. AI 초안을 편집기에서 직접 수정한 내용은 이후 재생성 요청이 들어와도 보호된 단계로 표시되어 덮어쓰기 되지 않는다. 내가 고친 문장이 다음 AI 재처리에서 사라지는 상황을 막는다. 수정한 단계 옆에 잠금 표시가 붙고, 재생성은 잠금이 없는 단계에만 적용된다.

완성된 매뉴얼을 Markdown, Word, PDF로 내보내는 방법

문서가 완성되면 세 가지 포맷으로 내보낼 수 있다.

포맷	용도	특징
Markdown (.md)	개발 문서, GitHub Wiki, Notion	스타일 제어 용이, 버전 관리 친화적
Word (.docx)	사내 배포, 인쇄, 팀 협업	MS Office에서 바로 편집 가능
PDF	외부 배포, 온보딩 패키지	레이아웃 고정, 누구나 열람 가능
ZIP	포맷 일괄 포함, 아카이빙	세 포맷 + 스크린샷을 묶어 보관

내보내기 전에 편집기에서 단계를 재정렬하거나, 특정 스크린샷을 교체하거나, 설명을 추가할 수 있다. Word와 PDF는 커버 페이지, 목차, 헤더·푸터가 자동 삽입된다 — 별도 템플릿 작업 없이.

Free 플랜은 매뉴얼 10페이지까지 내보내기를 지원한다. 그 이상은 Pro 플랜(일회성 평생 라이선스)이 필요하다. 10페이지면 일반적인 SOP 문서 한 편을 커버하기에 충분하다.

내보낸 파일을 사내 드라이브, 노션, Confluence, GitHub에 업로드하면 배포가 완료된다. Manual Maker 자체에 공유 링크 기능은 없다 — 파일을 받아서 각 팀의 기존 도구에 올리는 방식이다. 이게 오히려 더 실용적이다. 도구 하나를 더 배울 필요가 없다.

더 상세한 자동 생성 메커니즘이 궁금하다면 Manual Maker 자동 생성 기술 문서에서 내부 파이프라인을 확인할 수 있다.

자주 묻는 질문

녹화 중에 실수로 잘못 클릭하면 어떻게 되나?

녹화가 끝난 후 편집기에서 잘못된 단계를 삭제하거나 순서를 바꿀 수 있다. 특정 단계의 스크린샷만 교체하는 것도 가능하다. 처음부터 다시 녹화할 필요는 없다.

Solar Pro 3가 생성한 설명이 부정확하면 어떻게 수정하나?

편집기에서 직접 텍스트를 수정하면 된다. 수정한 단계는 보호 상태로 전환되어 이후 재생성 시 덮어쓰기 되지 않는다. AI 출력을 기준점으로 사용하되, 최종 내용은 실무자가 통제한다.

회사 내부 시스템 화면을 녹화해도 데이터가 외부로 나가지 않나?

스크린샷은 로컬 IndexedDB에만 저장되고 서버로 전송되지 않는다. 문서 생성 시 행동 로그와 DOM 텍스트 맥락만 전달된다. 비밀번호·주민번호 형식 데이터는 로그 기록 전 마스킹된다.

Markdown으로 내보낸 파일을 Notion이나 Confluence에 바로 올릴 수 있나?

Notion은 Markdown 가져오기를 지원하므로 직접 붙여 넣거나 파일 임포트로 올릴 수 있다. Confluence는 Markdown 렌더링 플러그인이 필요하거나 Word 파일로 올리는 편이 더 깔끔하다.

Free 플랜 10페이지는 어떻게 계산되나?

내보낸 문서의 페이지 수 기준이다. 녹화 세션 수나 단계 수가 아니다. 10페이지를 초과하는 문서는 Pro 플랜에서 처리된다 — Pro는 일회성 결제로 이후 제한이 없다.

코드나 개발 지식 없이 실무자가 브라우저 녹화만으로 매뉴얼을 완성하고 배포하는 과정은 이 구조 위에서 돌아간다 — 클릭 직전 캡처, DOM 맥락, Document Parse, Solar Pro 3 자기검증, 수동 수정 보호, 로컬 저장. 각 단계가 이어지면서 실무자가 직접 통제 가능한 문서 작업 흐름이 만들어진다. Manual Maker 크롬 확장 프로그램을 무료 설치하고 첫 문서를 내보내 보자.

더 보기: tabflight.vercel.app