728 ／ 733
JooShow: 웹 사용법 가이드 제작과 캡처를 한 번에
웹사이트 사용법을 안내하려면 화면을 하나하나 캡처하고 설명을 붙여야 한다. JooShow는 이 일을 줄여 주는 브라우저 확장 프로그램이다. 웹사이트에서 평소처럼 클릭하며 시연하면 스크린샷과 번호 마커, 한국어 설명이 붙은 단계별 가이드 초안이 만들어진다. 주식회사 오늘배움이 만들었고, 캡처·OCR·화면 녹화 도구도 함께 들어 있다.
JooShow, 무엇인가
JooShow는 크롬, 네이버 웨일, 엣지에서 쓸 수 있다. 세 브라우저 모두 크롬 웹스토어 확장을 지원하므로 웹스토어에서 ‘확장 프로그램 추가’를 누르면 설치가 끝난다. 주소창 오른쪽 퍼즐 조각 아이콘에서 JooShow를 고정해 두면 툴바에 늘 보이고, 아이콘을 누르면 스텝 레코더와 캡처 도구가 모인 팝업이 열린다.
회원가입이나 로그인은 필요 없다. 스크린샷과 가이드 데이터는 모두 사용자 브라우저의 로컬 저장소에만 남는다. 서버로 무언가 올라가는 경우는 공유 링크를 만들 때뿐이며, 이때도 해당 가이드의 이미지와 설명만 전송된다. 이미지에서 글자를 뽑아내는 OCR도 기기 안에서 처리한다.
스텝 레코더로 첫 가이드 만들기
JooShow의 핵심 기능은 스텝 레코더다. 사용자가 웹사이트에서 클릭하고 입력하는 과정을 기록해 가이드 초안을 자동으로 만든다.
- 녹화 시작: JooShow 팝업에서 ‘스텝 레코더 시작’을 누르거나 Alt+Shift+R(Mac은 ⌥⇧R)을 누른다. 확장 아이콘의 배지가 REC로 바뀐다.
- 사용법 시연: 메뉴를 열고, 버튼을 누르고, 글자를 입력하는 등 가이드로 만들 과정을 평소처럼 진행한다. 페이지를 이동해도 기록은 이어진다.
- 자동 기록: 클릭할 때마다 세 가지가 자동으로 일어난다.
- 그 화면의 스크린샷이 찍힌다.
- 클릭한 위치에 번호 마커가 붙는다.
- 클릭한 요소의 텍스트와 역할(버튼, 링크, 입력란)을 읽어 “‘저장’ 버튼을 클릭합니다” 같은 한국어 설명을 만든다.
- 중간 조절: 녹화 중에 팝업을 다시 열면 ‘일시정지’와 ‘마지막 스텝 삭제’가 있다. 잘못 누른 클릭은 그 자리에서 지운다.
- 녹화 정지와 편집: Alt+Shift+R을 다시 누르거나 팝업의 정지 버튼을 누르면 녹화가 끝나고 편집 화면이 자동으로 열린다.
브라우저 내부 페이지(chrome:// 설정 등)와 웹스토어에서는 확장이 동작하지 않아 클릭이 기록되지 않는다. 시연은 일반 웹사이트에서 해야 한다. 자동으로 붙은 설명이 어색하면 편집 화면에서 바로 고친다.
다양한 캡처 도구
캡처 도구는 가이드를 만들 때가 아니어도 일상 캡처용으로 쓸 만하다. 캡처 결과는 클립보드에 바로 복사되고 미리보기 카드가 뜬다.
| 기능 | 설명 | 단축키(Windows / Mac) |
|---|---|---|
| 탭 캡처 | 지금 보이는 화면 전체를 한 장으로 캡처한다. 미리보기 카드에서 저장·편집으로 이어진다. | Alt+Shift+S / ⌥⇧S |
| 영역 캡처 | 드래그로 지정한 부분만 캡처한다. ESC로 취소한다. | Alt+Shift+A / ⌥⇧A |
| 스크롤 캡처 | 영역을 지정한 뒤 직접 스크롤하거나 ‘자동’을 누르면 끝까지 캡처한다. 화면 오른쪽 미니맵에 캡처된 구간이 초록색으로 실시간 표시된다. | 팝업 버튼(단축키 직접 지정 가능) |
| 텍스트 추출(OCR) | 지정한 영역의 이미지 속 한국어·영어 글자를 텍스트로 뽑아 클립보드에 복사한다. 처리는 모두 사용자 컴퓨터 안에서 이뤄진다. | Alt+Shift+O / ⌥⇧O |
| 데스크톱 캡처 | 브라우저 밖 다른 앱 화면도 캡처한다. 화면 공유 선택창에서 창이나 전체 화면을 고른다. | 팝업 버튼 |
| 화면 녹화 | 화면을 MP4로 녹화한다(미지원 환경은 WebM). 녹화 후 컷 편집과 배속 내보내기를 할 수 있다. | 팝업 버튼 |
팝업 하단의 ‘캡처 시 파일로도 저장’을 켜면 클립보드 복사와 함께 다운로드 폴더의 JooShow 폴더에 PNG 파일이 저장된다.
편집 화면에서 가이드 다듬기
팝업의 ‘내 가이드 편집’을 누르면 언제든 편집 화면으로 돌아올 수 있다. 수정한 내용은 모두 자동 저장된다.
스텝 카드 다루기
- 설명 수정: 카드의 설명을 클릭해 바로 고친다.
- 순서 바꾸기: 카드의 ☰ 손잡이를 끌어 원하는 위치로 옮긴다.
- 복사: ‘이미지만’ 또는 ‘이미지+설명’(번호와 설명을 이미지 하단에 합성)을 클립보드로 복사한다.
- 텍스트 스텝 추가: 이미지 없이 안내 문장만 있는 스텝을 중간에 끼워 넣는다.
- 삭제: 필요 없는 스텝을 지운다. 실수로 지워도 Ctrl+Z(Mac은 ⌘Z)로 되돌린다.
이미지 편집 모달
스텝의 썸네일을 클릭하면 원본 크기 편집 모달이 열린다. 여기서 이미지에 주석을 달거나 민감한 부분을 가린다.
- 선택/이동: 그려 둔 주석을 클릭해 선택하고, 드래그로 옮기거나 Delete로 지운다.
- 마커: 클릭 위치를 표시한 번호 마커를 정확한 지점으로 옮긴다.
- 주석 도구: 화살표, 직선, 사각형, 타원, 자유 곡선을 그린다. 색상과 굵기를 고를 수 있다.
- 텍스트: 이미지 위에 글자를 얹는다.
- 블러: 이름, 연락처 같은 민감한 부분을 드래그 한 번으로 모자이크 처리한다.
- 확대: 클릭 지점을 자동으로 확대(줌 인셋)해 작은 버튼도 또렷하게 보여 준다.
- 복사: 지금 보이는 편집 결과를 저장하지 않고 바로 클립보드로 복사한다.
모달을 닫지 않고 ←, → 키로 이전·다음 스텝을 이어서 편집할 수 있다. 스텝을 옮길 때 변경 사항은 자동 저장된다.
편집 화면 상단의 ‘세션 목록’에서는 지금까지 만든 가이드 전체를 본다. ‘선택’으로 여러 가이드를 한 번에 지우고, ‘공유 관리’에서 내가 만든 공유 링크를 관리한다.
내보내기와 공유 링크
한 번 기록한 가이드는 여러 형식으로 내보낼 수 있다. 편집 화면 상단의 내보내기 그룹에서 원하는 형식을 고른다.
| 형식 | 결과물 | 쓰임 |
|---|---|---|
| 공유 링크 | 링크 하나. 받는 사람은 로그인 없이 브라우저로 바로 본다 | 단톡방이나 메일로 빠르게 전달 |
| PPT | 스텝당 슬라이드 1장(.pptx) | 구글 슬라이드로 가져오기, Canva에 업로드, 수업 자료 |
| 웹 문서 | 단일 HTML 파일. 받은 사람도 브라우저에서 편집하고 인쇄(PDF)할 수 있다 | 매뉴얼 파일로 보관·배포 |
| ZIP | 순번이 매겨진 이미지 + guide.md(마크다운) | 노션, 깃허브, 블로그에서 다시 조립 |
| GIF | 마우스가 클릭 지점으로 움직이는 애니메이션 데모 | 짧은 데모, 커뮤니티 공유 |
| 카드뉴스 | 표지, 단계, 엔딩 카드 세트(인스타 4:5 / 1:1) | SNS 홍보와 안내 |
| 전체 복사 | 이미지와 설명을 문서용으로 클립보드에 복사 | 한글(HWP)이나 워드에 그대로 붙여넣기 |
공유 링크를 만들 때는 만료 기간(7일, 30일, 90일, 180일)과 선택 사항인 비밀번호를 정한다. 이름이나 연락처가 화면에 없는지 확인했다는 항목에 체크해야 링크가 만들어지므로, 그런 정보가 있으면 먼저 블러로 가린다. 받는 사람은 설치나 로그인 없이 브라우저에서 바로 보고, 비밀번호를 걸었다면 열 때 비밀번호를 묻는다.
링크를 아는 사람은 누구나 가이드를 볼 수 있다. 민감한 내용이라면 비밀번호를 함께 걸고, 다 쓴 링크는 세션 목록의 ‘공유 관리’에서 지우는 편이 안전하다. 만료일이 지난 링크는 서버에서 자동으로 삭제된다.
AI 도우미 연결
클로드나 챗GPT에 주소 하나를 등록하면 AI가 JooShow 공개 갤러리의 가이드를 찾아 단계별로 안내한다. 확장 프로그램을 업데이트하거나 따로 로그인할 필요는 없다.
- 연결 주소 등록: 클로드 채팅 입력창에서
+→커넥터→커넥터 추가→커스텀 커넥터 추가를 고른 뒤 다음처럼 입력한다.- 이름:
JooShow - 주소:
https://joo.show/mcp - 인증:
로그인 없음
- 이름:
- 질문하기: “JooShow에서 ○○ 방법 찾아 줘”처럼 질문에 JooShow를 붙이면 AI가 갤러리에서 맞는 가이드를 찾아 단계를 요약하고 링크를 준다. 처음 한 번은 도구를 써도 되는지 묻는데, ‘항상 허용’을 누르면 된다.
- 내 가이드 검색: 내가 만든 가이드도 공유 링크를 만든 뒤 ‘갤러리에 공개 신청’을 하고, 승인되면 AI 검색에 나타난다. 비공개 링크나 비밀번호를 건 가이드는 검색되지 않는다.
ChatGPT, Claude Code, Cursor와 연결하는 방법은 JooShow의 ‘AI 연결 안내’ 페이지에 따로 정리돼 있다.
편의 기능과 자주 묻는 질문
- 단축키: 탭 캡처(Alt+Shift+S), 스텝 레코더 시작/정지(Alt+Shift+R), 영역 캡처(Alt+Shift+A), 텍스트 추출(Alt+Shift+O) 네 가지가 기본 단축키다. 팝업 하단의 ‘단축키 변경’을 누르거나 주소창에
chrome://extensions/shortcuts를 입력해 JooShow 항목에서 원하는 키 조합을 지정한다. 기본 키가 없는 스크롤 캡처, 데스크톱 캡처, 화면 녹화에도 직접 키를 붙일 수 있다. - 개인정보 처리: 스크린샷, 가이드, 설정은 모두 브라우저 로컬 저장소(IndexedDB)에만 저장된다. 서버 전송은 사용자가 공유 링크를 직접 만들 때뿐이고, 이때도 그 가이드의 이미지와 설명만 올라간다. OCR은 내장 엔진으로 기기 안에서 처리한다. 사용자 분석이나 광고 SDK는 들어 있지 않다.
- 스텝이 기록되지 않을 때: 브라우저 내부 페이지(
chrome://설정, 웹스토어, 새 탭)에서는 확장이 동작하지 않는다. 일반 웹사이트에서 시연한다. 방금 설치했다면 이미 열려 있던 탭은 한 번 새로고침해야 한다. - 자동 설명이 어색할 때: 클릭한 요소에서 읽을 텍스트가 없으면 ‘표시된 위치를 클릭합니다’ 같은 기본 문장이 들어간다. 편집 화면에서 설명을 클릭해 바로 고친다. 어차피 다듬는 단계를 거치는 편이 좋다.
- 화면 녹화 편집: 녹화가 끝나면 컷 편집기가 열린다. 타임라인에서 구간을 잘라내고 배속(1배~30배)을 골라 내보낸다. 4배속 이상은 소리가 빠진다.
- 저장 공간 관리: 세션 목록 상단에 현재 사용량이 나온다. 완성한 가이드는 ‘원본 정리’로 원본 스크린샷을 지워 용량을 줄일 수 있지만, 그 뒤에는 마커와 주석을 다시 편집할 수 없다. 필요 없는 세션은 골라서 한꺼번에 지운다. 확장을 삭제하면 모든 데이터가 함께 지워진다.
- Canva 연동: 원클릭 직접 연동은 준비 중이다. 지금은 PPT로 내보낸 뒤 Canva에 pptx 파일을 올리는 방법이 가장 빠르고, Canva에서 페이지별로 자동 배치된다.
출처
- https://joo.show/guide