튜토리얼 메이커

실제 작업을 캡처하고 검토하여 오프라인 HTML 교재로 만드는 로컬 우선 도구

튜토리얼 메이커는 내가 실제로 한 브라우저 작업을, 다른 사람이 따라 할 수 있는 한국어 HTML 교재로 정리하는 도구입니다. 수업 준비 방법, 새 선생님 온보딩, 반복 업무 안내처럼 같은 설명을 여러 번 해야 할 때 사용하세요. ■ 설치할 때 「주의하여 진행하세요」 안내가 보인다면 Chrome에서 「보호 기능 강화(세이프 브라우징)」를 켠 경우, 새로 등록된 확장 프로그램에는 「세이프 브라우징 보호 기능 강화에서 신뢰하지 않는 확장 프로그램」이라는 안내가 뜰 수 있습니다. Google이 새 확장 프로그램과 개발자에게 일정 기간(보통 몇 달) 붙이는 표시이며, 정책 위반이나 위험한 권한 때문이 아닙니다. 이 확장 프로그램은 설치 시 권한 경고가 없는 activeTab·scripting 권한만 쓰고, 데이터를 외부로 보내지 않습니다. 내용을 확인한 뒤 설치하려면 「계속 설치」를 누르세요. ■ 이렇게 사용합니다 1. 편집기에서 새 교재를 만들고 제목·대상·학습 목표를 적습니다. 2. 기록할 웹페이지에서 툴바의 튜토리얼 메이커를 열고 「이 탭에서 기록 시작」을 누릅니다. 3. 작업을 한 단계 하고 결과를 확인한 뒤 「영역 지정 캡처」를 눌러 필요한 부분을 드래그하거나, 「보이는 화면 전체 캡처」를 누릅니다. 4. 편집기에서 단계별로 무엇을 하는지, 왜 필요한지, 성공하면 무엇이 보이는지, 주의사항을 적습니다. 5. 화면에 개인정보가 있으면 해당 영역을 선택해 실제 픽셀로 가립니다. 6. 「HTML 교재 내보내기」로 목차·이미지 확대·학습 체크리스트가 있는 단일 HTML 파일을 저장합니다. 「프로젝트 백업」으로 나중에 다시 편집할 JSON도 저장할 수 있습니다. 처음이라면 편집기의 「연습 페이지」를 열고, 그 탭에서 툴바의 튜토리얼 메이커 아이콘을 한 번 눌러 캡처 권한을 준 뒤 5단계 연습부터 해보세요. (아이콘이 안 보이면 퍼즐 조각 메뉴에서 고정하세요.) ■ 주요 기능 • 영역 지정 캡처: 페이지 위에서 드래그한 부분만 저장 (Esc로 취소) • 보이는 화면 전체 캡처 • 이미 찍은 이미지 자르기 • 단계 제목·설명·이유·성공 기준·주의사항 편집, 순서 이동·삭제 • 검증 상태 표시(미확인 / 사용자가 결과 확인 / 근거로 확인) — 클릭이나 캡처만으로 성공을 표시하지 않습니다 • 개인정보 가리기: CSS 덮개가 아니라 이미지 픽셀을 교체합니다 • 오프라인 단일 HTML 교재 + 재편집용 JSON 내보내기·가져오기 ■ 개인정보와 권한 • 모든 데이터는 사용자의 브라우저에만 저장됩니다. 외부 서버·분석·광고·AI 서비스로 전송하지 않습니다. • activeTab 권한은 사용자가 직접 확장 프로그램을 실행한 탭을 캡처하는 데에만 사용합니다. • scripting 권한은 그 탭에 영역 선택 화면을 잠시 띄우는 데에만 사용합니다. 페이지 내용을 읽거나 전송하지 않습니다. • 입력창 값, 비밀번호, 클립보드, 방문 기록을 자동 수집하지 않습니다. • 캡처 이미지에는 화면의 정보가 담길 수 있으니 내보내기 전에 직접 확인해 주세요. ■ 현재 버전 안내 (v0.2.1) 화면 캡처와 설명 입력은 사용자가 직접 합니다. 클릭 자동 기록, AI 설명 작성, 영상·GIF 녹화, 팀 공유는 아직 지원하지 않습니다. 모든 기능은 무료입니다. 확장 프로그램을 제거하면 저장된 교재가 삭제될 수 있으니 「프로젝트 백업」을 권장합니다.