Manuscript

DOM 인식 기반으로 깨지지 않는 웹 시연·매뉴얼을 저작·재생하는 브라우저 확장 프로그램

스크린샷은 금세 옛 화면이 되고, 녹화 영상은 한 군데만 바뀌어도 처음부터 다시 찍어야 하죠. Manuscript 로 만든 웹 시연은 페이지가 바뀌어도 안 깨집니다 — 클릭으로 짚고, 설명을 얹고, 재생만 누르세요. Manuscript 는 웹페이지 위에서 단계별 시연·매뉴얼·사용 안내를 만드는 브라우저 확장입니다 (Chrome, Microsoft Edge 등 Chromium 기반 브라우저). 페이지에서 강조하고 싶은 부분을 클릭으로 콕 집어 스포트라이트를 씌우고, 짧은 메모나 도형·손그림 화살표를 얹은 뒤, 재생만 누르면 됩니다. ■ 무엇이 다른가요 1. 페이지가 바뀌어도 안 깨져요 Manuscript 는 각 단계가 가리키는 페이지 요소를 세 가지 방법으로 기억해 둡니다 — 안정 속성(data-testid, id, aria-label), 그 다음 텍스트와 위치, 마지막으로 화면 좌표와 주변 글자. 클래스명이 바뀌거나, 버튼 글자가 수정되거나, 레이아웃이 조금 흔들려도 시연이 사라지지 않아요. 2. 결과물은 JSON 한 파일 만든 시연은 사용자가 직접 다운로드하는 JSON 파일이에요. git 에 commit 하고, PR diff 로 검토하고, 코드와 함께 버전 관리할 수 있습니다. 클라우드 lock-in 이 없어요. 3. 사이트 코드에 한 줄도 안 들어갑니다 Manuscript 는 브라우저 안에 살아요. 시연 대상이 되는 페이지의 코드는 전혀 손대지 않습니다. 내 제품, 고객사 시스템, 외부 SaaS — 어디서든 시연을 만들 수 있어요. 4. 보는 사람은 설치 없이 재생해요 완성한 시연을 페이지에 끼워 넣으면(임베드 플레이어), 방문자는 확장을 깔지 않아도 브라우저에서 그대로 단계별로 봅니다. 내 도큐먼트·랜딩 페이지·사내 대시보드 어디든 — 만든 사람만 확장이 있으면 됩니다. ■ 할 수 있는 일들 · 페이지 요소를 클릭으로 콕 집기 — 페이지 안에 끼워진 미니 페이지(iframe)의 요소도 · 강조 표시로 시선 모으기 — 테두리 색·두께·배경 어둡기까지 조절 · 텍스트 박스·도형 8 종·손그림 화살표·자유 드로잉으로 설명 얹기 · 단계별 재생 + 읽어주는 음성 안내 (브라우저 기본 음성 + Google 다국어) · 분리된 발표자 창 — 단계 목록과 키보드 컨트롤로 발표하듯 진행 · 4 가지 팔레트 + 다크 모드 — 사이트의 브랜드 색·글꼴을 자동으로 가져와 한 화면처럼 · 한국어 / 영어 인터페이스 — 브라우저 언어 설정을 그대로 따라감 ■ 최신 기능 · 임베드 플레이어 — 시연을 페이지에 끼워 넣으면 방문자가 확장 없이 바로 단계별 재생. 같은 출처 페이지는 직접 넘어가고, 다른 출처도 호스트 설정에 따라 이어집니다 · 썸네일 없이 내보내기 — 미리보기 이미지를 뺀 가벼운 -lite JSON 으로 저장해 메일·저장소 공유에 딱. 재생·불러오기는 똑같아요 · 되돌리기·다시 실행 & 서식 복사 — 작성 패널의 편집을 Ctrl+Z·Ctrl+Shift+Z 로 자유롭게 오가고, 주석 하나의 스타일을 같은 종류의 다른 주석에 한 번에 입혀요. 복사·붙여넣기로 복제도 빠르게 · 원격저장소 라이브러리 — GitHub 공개 리포에 시연을 모아두면 팀원이 팝업의 원격저장소 탭에서 골라 바로 재생합니다. 마음에 들면 한 번 클릭으로 내 라이브러리에 저장 · 별도 녹화 창에서 화면 녹화 — 여러 페이지를 오가는 시연도 끊김 없이 하나의 영상으로. 읽어주는 안내와 내 목소리를 한 트랙에 담고 "Created with Manuscript" 워터마크까지 ■ Runtime bridge 호스트 페이지에 manuscript-bridge.js 를 한 줄 넣어두면 postMessage 로 시연 재생을 제어할 수 있어요. 자체 도큐먼트, 마케팅 페이지, 사내 대시보드 어디든 임베드할 수 있습니다. ■ 어떤 분께 추천드려요 · DevRel · Developer Advocacy — API·SDK·CLI 사용법을 코드처럼 관리하고 싶을 때 · CS 매니저 · Solutions Engineer — 고객사별 온보딩 자료를 git 에 보관해두고 싶을 때 · 제품 매니저 — 신기능 출시 시 임원·세일즈팀에 보여줄 데모 · 사내 IT — ERP·내부 도구 매뉴얼을 사이트 업데이트와 함께 동기화 ■ 알아두면 좋은 점 · 현재 버전 v0.8.1. 핵심 기능은 안정적이며, 사용자 피드백을 받아 꾸준히 다듬어 갑니다 · chrome:// / edge:// 같은 브라우저 자체 페이지나 확장 마켓 페이지에서는 동작하지 않습니다 (브라우저 정책) · 같은 출처 (same-origin) 1 단계 iframe 은 정상 작동, 그 외 nested · cross-origin iframe 은 일부 제한이 있어요 · 모든 데이터는 사용자 컴퓨터 (chrome.storage.local) 에 남고, 직접 export 한 JSON 파일도 마찬가지 — 어디로도 업로드되지 않습니다 문의 : zendy00@gmail.com