DEV Community

Cover image for 화면 녹화에서 마크다운 업무 설명서 자동 생성까지: 변환 메커니즘 해설
이종현
이종현

Posted on

화면 녹화에서 마크다운 업무 설명서 자동 생성까지: 변환 메커니즘 해설

화면 녹화 데이터를 행동 로그와 DOM 컨텍스트로 분해하고, Solar Pro 3 모델이 그 데이터를 마크다운 포맷의 업무 설명서 초안으로 변환한다. 녹화를 끝내는 즉시 .md 파일을 다운로드할 수 있다.

TL;DR — 브라우저 확장이 클릭·입력 직전의 스크린샷과 DOM 메타데이터를 수집한다. Upstage Document Parse가 이미지를 구조화 텍스트로 변환하고, Solar Pro 3가 그 텍스트를 마크다운 절차서로 재구성한다. 에이전트가 초안을 자기검증한 뒤 약한 단계를 재작성한다. 결과물은 MD · Word · PDF · ZIP 중 선택해 즉시 내려받는다.


마크다운 포맷이 협업과 문서화에 최적인 이유

마크다운은 렌더링 환경을 가리지 않는다. GitHub, Notion, Confluence, VS Code 모두 .md 파일을 그대로 받아 표시한다. 별도 변환 없이 Word 또는 PDF로 내보내는 파이프라인도 표준화돼 있다. 문서 포맷 자체가 평문(plain text)이라 Git으로 버전 관리할 수 있고, diff를 줄 단위로 추적한다.

업무 설명서 관점에서는 구조가 강제된다는 점이 핵심이다. # 헤더 계층이 절차 단계를 자연스럽게 구획하고, 숫자 목록은 순서를 고정한다. 작성자가 의식적으로 구조를 설계하지 않아도, 마크다운 문법을 지키는 것만으로 가독성 있는 SOP가 나온다.

자동화 도구 입장에서도 마크다운은 파싱 비용이 낮다. LLM이 출력 포맷으로 마크다운을 생성할 때 hallucination을 줄이는 구조적 앵커 역할을 한다는 점도 실용적이다 — 모델이 ## 3단계: 저장 버튼 클릭 같은 헤더 패턴을 따라가는 동안 내용이 흐트러질 여지가 줄어든다.


브라우저 녹화에서 행동 로그와 DOM 데이터를 어떻게 추출할까?

녹화 시작은 사용자가 직접 트리거한다. 확장 아이콘을 클릭하거나 단축키를 눌러 녹화를 켜고, 같은 방식으로 끈다. 그 사이에 일어난 행동만 기록된다.

수집 레이어는 두 가지다.

  • 행동 로그 — 클릭, 키 입력, 스크롤, 폼 제출 등의 이벤트를 타임스탬프와 함께 순서대로 쌓는다. 비밀번호 필드(type="password")와 주민번호 형식의 입력값은 마스킹 처리되어 로그에 남지 않는다.
  • 클릭 직전 캡처 — 각 클릭 이벤트가 발생하기 직전 시점의 스크린샷을 찍는다. "버튼을 눌렀다"는 로그만 있을 때 버튼이 실제로 어디에 있었는지, 주변 UI가 어떤 상태였는지를 이미지로 남기기 위해서다.

DOM 메타데이터는 행동 로그를 보완한다. 클릭된 요소의 aria-label, data-testid, 텍스트 콘텐츠 같은 속성을 함께 수집해 "저장 버튼"인지 "삭제 버튼"인지 모델이 식별할 수 있게 한다. 스크린샷 자체는 생성 파이프라인에서만 쓰이고, 외부 서버로 전송되지 않는다. 행동 로그는 문서 생성 요청 시점에만 전달된다.

모든 중간 데이터는 IndexedDB에 먼저 저장된다. 생성이 끝나거나 사용자가 삭제하면 로컬에서 지워진다.


Solar Pro 3 모델을 통한 마크다운 문법 자동 변환의 기술적 메커니즘

행동 로그와 DOM 메타데이터가 준비되면, Upstage Document Parse가 먼저 개입한다. 클릭 직전 캡처 이미지들을 받아 화면 내 텍스트·버튼 레이블·입력 필드명을 구조화된 텍스트 블록으로 변환한다. 이미지에서 직접 글자를 읽어내는 OCR 레이어라고 보면 되지만, 레이아웃 컨텍스트(어느 섹션에 속하는 요소인지)를 함께 보존한다는 점이 단순 OCR과 다르다.

Solar Pro 3는 그 구조화 텍스트와 행동 로그를 입력으로 받아 마크다운 초안을 생성한다. 모델에 전달되는 프롬프트는 크게 세 부분이다.

  • 행동 시퀀스(이벤트 타임라인)
  • Document Parse가 추출한 UI 텍스트와 레이아웃 정보
  • 출력 포맷 지시 — 헤더 계층(#, ##, ###), 번호 목록, 스크린샷 자리 표시자, 주의 사항 블록(> ⚠️) 등을 명시한 마크다운 스키마

모델은 이 입력을 바탕으로 "1단계 → 2단계 →…" 형태의 절차서를 마크다운으로 출력한다. 각 단계에는 해당 클릭 직전 캡처 이미지의 참조가 삽입되어, 최종 문서에서 스크린샷과 설명이 나란히 놓인다.

한국어·영어 혼용 UI도 처리한다. Solar Pro 3는 Document Parse가 넘긴 UI 레이블을 그대로 쓰거나, 문맥상 자연스러운 한국어 표현으로 정리한다. 번역이 필요하면 번역하고, 고유 명사나 버튼 레이블처럼 원문을 유지해야 할 때는 원문을 남긴다.


에이전트 자기검증 루프를 통한 오류 보정과 정교한 결과물 생성

초안이 나오면 파이프라인이 멈추지 않는다. 자기검증 에이전트가 초안을 받아 다음 기준으로 각 단계를 채점한다.

  • 행동 로그에 기록된 이벤트 수와 초안에 서술된 단계 수가 일치하는가
  • 각 단계 설명이 DOM 메타데이터(버튼 레이블, 입력 필드명)와 충돌하지 않는가
  • 스크린샷 참조가 해당 단계에 올바르게 연결되어 있는가
  • 절차 흐름에 논리적 단절(예: 저장 전에 완료 확인이 나오는 경우)이 있는가

채점에서 기준 미달로 표시된 단계만 재작성 요청을 받는다. 전체를 다시 생성하지 않기 때문에 이미 적절하게 서술된 단계는 그대로 유지된다. 재작성 후 동일 기준으로 다시 채점하고, 통과하면 최종 초안으로 확정한다.

이 루프는 한 번 더 작동하지는 않는다. 두 번째 채점에서도 미달인 단계가 있으면 해당 단계에 검토 플래그를 남기고 편집기로 넘긴다. 과도하게 반복해 생성 시간을 늘리는 대신, 사용자가 직접 수정할 수 있게 판단 근거를 함께 표시한다.

수동으로 편집한 내용은 다음 재생성 시 덮어쓰지 않는다. 편집 보호 플래그가 해당 단계에 설정되어, 자동 파이프라인이 그 구간을 건드리지 않는다.


변환된 MD 파일을 즉시 다운로드하여 문서 시스템에 배포하는 법

자기검증이 끝나면 편집기 화면에 초안이 열린다. 여기서 추가 수정을 하거나 그대로 내보낼 수 있다. 출력 형식은 네 가지다.

  • MD — 마크다운 원본. Git 기반 문서 시스템, Notion, Obsidian에 바로 붙여넣거나 커밋한다.
  • Word(.docx) — 사내 템플릿을 쓰는 팀이나 Word 기반 SOP 시스템에 맞다.
  • PDF — 인쇄나 배포용 고정 포맷.
  • ZIP — MD 파일과 스크린샷 이미지를 묶어 내려받는다. 이미지가 포함된 문서를 다른 시스템으로 통째로 옮길 때 쓴다.

MD 파일 내부에는 스크린샷이 상대 경로로 참조되어 있다(![3단계](./screenshots/step_03.png)). ZIP으로 받으면 경로 구조가 그대로 유지되기 때문에 압축 해제 후 바로 렌더링된다.

Notion이나 Confluence에 붙여넣을 때는 MD를 직접 임포트하거나 클립보드 붙여넣기로 처리한다. 두 플랫폼 모두 마크다운 임포트를 지원하므로 헤더 계층과 목록 구조가 그대로 이어진다.

문서 버전 관리를 Git으로 하는 팀이라면 .md 파일을 저장소에 커밋하면 된다. 자기검증 단계를 지나 완성된 초안이므로, 커밋 메시지에 녹화 날짜와 대상 워크플로 이름을 적는 것으로 버전 이력이 남는다.

Manual Maker를 쓴다면 이 파이프라인 전체 — 녹화 → 행동 로그 + 스크린샷 → Document Parse → Solar Pro 3 → 자기검증 → 출력 — 가 브라우저 확장 하나로 묶여 있다. 업무 매뉴얼 자동 생성에 대한 전체 가이드에서 각 단계의 설정 방법을 더 자세히 볼 수 있다.


자주 묻는 질문

스크린샷이 서버에 저장되지 않는다면 이미지가 어떻게 문서에 포함되나?

스크린샷은 IndexedDB에 로컬 저장된다. Document Parse 처리 시 이미지 데이터를 API로 전달해 텍스트 추출에 쓰지만, 추출 후 서버에 보관되지 않는다. 최종 MD 파일과 ZIP에 포함되는 이미지는 로컬에서 직접 패키징된다.

Solar Pro 3가 생성한 초안을 수동으로 수정하면 다음 재실행 시 덮어써지나?

수동 편집 구간에는 편집 보호 플래그가 자동 설정된다. 재실행이나 자기검증 루프가 해당 단계를 건드리지 않는다. 보호를 해제하려면 편집기에서 직접 플래그를 제거하면 된다.

비밀번호 입력이나 민감한 정보가 포함된 화면도 녹화할 수 있나?

녹화는 가능하지만, type="password" 필드의 입력값은 행동 로그에 기록되지 않고 마스킹된다. 주민번호 형식의 숫자 패턴이 감지된 입력 필드도 같은 방식으로 처리된다. 클릭 직전 캡처에서 해당 영역은 블러 처리된다.

마크다운 외에 다른 포맷으로 처음부터 생성할 수 있나?

파이프라인은 마크다운을 중간 포맷으로 생성한 뒤 Word·PDF로 변환하는 구조다. 마크다운을 거치지 않고 바로 Word나 PDF를 생성하는 경로는 없다. 마크다운이 구조적 앵커 역할을 하기 때문에 자기검증 루프도 MD 기준으로 동작한다.

무료 버전과 Pro의 차이는 무엇인가?

무료 플랜은 매뉴얼 10페이지까지 생성할 수 있다. 10페이지를 초과하면 Pro 라이선스가 필요하다. Pro는 일회성 결제 영구 라이선스로, 구독 없이 페이지 수 제한 없이 사용한다.


화면 녹화 데이터를 마크다운 매뉴얼로 바꾸는 파이프라인의 핵심은 세 개의 레이어다 — 행동 로그 + DOM 컨텍스트로 이벤트를 정밀하게 잡고, Document Parse + Solar Pro 3로 마크다운 구조로 재구성하고, 자기검증 루프가 논리적 단절과 레이블 오류를 걸러낸다. 무료로 10페이지까지 파이프라인 전체를 써보고, 제약 없이 쓰려면 Pro 영구 라이선스로 전환하면 된다.


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

Top comments (0)