ClickGuide Local 설치 및 사용법: 클릭만으로 만드는 PDF 업무 매뉴얼 가이드

ClickGuide Local 설치 및 사용 가이드

어떤 도구인가요?

ClickGuide Local은 일반 웹사이트나 업무용 포탈에서 내가 클릭한 위치와 동선들을 자동으로 인지하고, 마우스 클릭 시점의 화면 스크린샷이 담긴 고해상도 PDF 가이드를 알아서 빌드해 주는 아주 편리한 크롬 확장 프로그램입니다.

일일이 캡처 도구로 스크린샷을 떠서 PPT 파일에 옮겨 적는 단순 업무에 지쳤다면 꼭 써보시기를 권합니다. 프로그래밍이나 개발 관련 지식이 없어도 제공되는 파일 하나로 손쉽게 쓸 수 있습니다.

1. 설치 파일 내려받기

아래 링크를 통하여 필요한 배포 패키지 파일 하나만 간단히 내려받으시면 즉시 준비 완료됩니다.

ClickGuideLocal.zip 다운로드 최신 릴리스 페이지 확인하기

[필독 안내] 깃허브 페이지 내 초록색으로 표시된 'Code' 다운로드 버튼을 눌러 내려받는 압축 파일은 일반 사용을 목적으로 하는 릴리스 패키지가 아닌, 개발 수정이 동반되는 무겁고 복잡한 소스코드 형태입니다. 일반 사용자라면 반드시 위 목록에 링크된 완성형 ClickGuideLocal.zip 뼈대 파일을 다운로드해 주셔야 정상 작동합니다.

2. 누구나 따라 하는 간단 설치법

단계 1: ClickGuideLocal.zip 압축 풀기

내려받은 압축 파일을 원하는 로컬 폴더 경로에 해제합니다. 압축이 제대로 풀렸다면 폴더 내에 다음과 같은 파일 구성이 즉시 확인되어야 합니다.

• manifest.json (크롬 정보 메타 데이터)
• popup.html (녹화 제어용 미니 화면)
• guide-editor.html (최종 수정 편집기 창)
• assets (스타일 및 정적 요소 폴더)

[매우 중요] 이후 크롬 환경에 동기화할 폴더는 반드시 manifest.json 파일이 직접 들여다보이는 최상위 부모 디렉토리 형태여야 문제없이 정상 기동합니다.

단계 2: 크롬 확장 프로그램 제어판 열기

Chrome 브라우저를 열고 주소입력창에 다음 주소를 복사하여 붙여넣은 뒤 해당 페이지로 진입해 주세요.

chrome://extensions

화면 오른쪽 맨 위에 위치해 있는 '개발자 모드' 토글 스위치를 마우스로 클릭하여 활성화해 줍니다. 활성 시점 이후로 화면 왼쪽 상단에 '압축해제된 확장 프로그램 로드' 단추가 새롭게 나타납니다.

단계 3: 압축 해제한 폴더 지정하기

해당 로드 단추를 누르고 폴더 탐색 창이 등장하면, 조금 전 바탕화면이나 드라이브 내에 압축을 풀어 두었던 디렉토리를 통째로 클릭하여 선택합니다.

• 올바른 타겟 예시: manifest.json 파일이 내부 상단에 바로 배치된 폴더를 직접 타겟팅
• 주의해야 할 잘못된 예시: 압축 풀기를 거치지 않은 압축 ZIP 파일을 바로 밀어 넣거나, assets 하위 폴더만 지정하는 행위 등

정상적으로 등록이 되면 제어창 카드리스트 내에 ClickGuide Local이라는 전용 카드가 선명한 아이콘과 함께 등록된 모습을 볼 수 있습니다.

단계 4: 툴바에 고정하기

브라우저 오른쪽 상단의 퍼즐 모양(확장 프로그램 목록) 아이콘을 마우스 클릭으로 호출한 뒤, ClickGuide Local 항목 옆에 놓인 '고정(핀)' 심볼을 활성화 상태로 전환해 줍니다. 이제 브라우저 작업 표시줄에 도구가 고정되어 언제나 즉각적으로 실행할 수 있습니다.

3. 툴바를 이용한 업무 녹화 및 편집

1단계: 녹화 개시하기

가이드를 작성하고 싶은 웹 사이트 혹은 사내 포탈 화면으로 정상적으로 접근한 후, 고정해 두었던 아이콘을 가볍게 클릭해 '녹화 시작' 버튼을 클릭합니다.

2단계: 평소처럼 업무 진행하기

녹화가 켜지면 평상시처럼 인트라넷을 조작하거나 시스템 처리를 하시면 됩니다. 마우스를 누를 때마다 뒷단에서 해당 지점의 배경 화면이 수집되며, 클릭한 포인트 위에 정교한 빨간색 넘버 마커가 자동으로 그려집니다.

3단계: 녹화 마감하기

원하는 연속 단계를 모두 완료했다면 우측 위 확장 프로그램 팝업 메뉴를 다시 열어 '녹화 종료'를 눌러 세션을 중단해 줍니다.

4단계: 편집 가공 및 PDF 저장하기

녹화 종료가 감지되는 그 순간, 브라우저에 정밀한 웹 가이드 에디터 화면이 독립 창 형태로 생성됩니다. 편집 창 내부에서는 유용하고 정교한 조작 처리가 가능합니다.

• 가이드 전체 머리말 제목 및 하부 시퀀스들의 상세 설명 텍스트 보완
• 마커 번호의 세부적인 위치 조정 및 불필요한 시퀀스 단계만 솎아내어 제외하기
• 화면 내 중요한 컴포넌트 구역만 지정하여 PDF 결과물에 삽입할 이미지 영역 잘라내기
• AI 기능을 호출하여 각 가이드 단계별 설명 대안을 아주 명확한 문장으로 자동 추천받기
• 현재 에디터에 올라간 단독 세션 제거 혹은 로컬 브라우저 디비 전체 데이터 청소

오른쪽 화면에 배치된 레이아웃에서 PDF 내보내기 영역 커스텀 설정과 AI 문장 자동 생성 조력 기능을 편안히 사용하실 수 있습니다. 최신 빌드 패키지 우측 상단 메인 버튼의 라벨 문구는 직관적으로 'PDF 저장'으로 명기되어 나타납니다.

4. 새 버전으로의 업데이트 절차

추후 업그레이드 패키지 소식이 갱신되어 배포되면 다음 동작을 차례로 이행하시면 간편하게 변경 적용됩니다.

• 최신 릴리스 패키지에서 가동 파일인 ClickGuideLocal.zip 파일을 새로 다운로드합니다.
• 로컬 드라이브에 저장해 두었던 구형 가이드 폴더의 이름을 살짝 변경하거나 기존 자리를 말끔히 지워냅니다.
• 새롭게 가져온 최신 ZIP 압축파일을 해당 공간에 그대로 깨끗하게 해제합니다.
• Chrome 브라우저를 켜고 다시 chrome://extensions 주소로 진입해 줍니다.
• ClickGuide Local이 명시된 카드 구성에서 작은 동그라미 형태의 새로고침(화살표 회전) 아이콘을 가볍게 클릭해 줍니다.

5. 대폭 보강된 특화 기동 패치 사항 (2026.07.01)

사내 ERP 인트라넷 환경과의 완벽 연계

실제 기업 현장의 복잡한 ERP 시스템에서도 가이드가 매끄럽게 추출되도록 다양한 기능이 보강되었습니다.

• 프레임 전역 감지: iframe 구조 하위에 숨겨져 작동되는 소형 아이콘 모양의 특수한 조작 버튼 클릭을 유실 없이 그대로 정확히 인지합니다.
• 로딩 동적 추적: 내부 페이지가 수시로 전환되며 임시로 열리는 임시 공백(about:blank) 영역, 가상 보안 격리 공간(sandbox) 및 런타임에서 자라나는 비동기 iframe 환경 내부까지 캡처 엔진이 끊기지 않고 따라가도록 all_frames, match_about_blank 등 내부 메카니즘을 튜닝하였습니다.
• 도메인 유효성 검증: 높은 수준의 특수 보안 프레임 구조에서 반환되는 'null origin' 소스의 통신 패킷이라도 정상적인 내부의 종속 데이터 조각임이 확인되면 누락시키지 않고 전부 수집합니다.
• 새로고침 자동 대응: 작업을 완료하지 않은 상태로 화면이 급작스럽게 새로 고쳐져도 webNavigation 탐지 메커니즘을 토대로 본래의 녹화 상태 정보를 유연하게 유지 및 보존합니다.

AI 문장 추천 도우미 인프라

빌드 및 컴파일 과정을 진행할 때 인라인 환경 매개변수로 VITE_ALLOW_EXTERNAL_AI=true 설정을 주입해 배포한 배포본에 한해서 영리한 AI 조수 기능이 내장되어 실행됩니다.

해당 기능을 개시하는 경우 임의 사용으로 인한 정보 변조 방지를 목표로 하는 든든한 경고 메시지가 발생하며, 동의 과정을 마친 후에 사용자가 현재 소장하여 쓰고 있는 사설 OpenAI, Gemini, Claude 등의 개인 API 연계 키 값을 등록하여 스크린샷 상황에 완벽히 피팅되는 추천 가이드 라인 텍스트 문맥을 즉석에서 이식받을 수 있습니다. 직접 복사하여 입력한 보안 API 토큰 키는 로컬 저장 공간의 디스크 영역 어디에도 남기지 않고 오직 메모리 위에서만 휘발성으로 안전히 호출되고 영구 차단됩니다.

6. 트러블슈팅 및 자주 발생하는 문제

Q. '매니페스트 파일이 없거나 읽을 수 없습니다' 에러가 나옵니다.

크롬에서 확장 프로그램을 불러오기 위해 지정한 선택 폴더 디렉토리가 잘못 잡혀 있을 가능성이 지배적입니다. 압축이 해제된 디스크 디렉토리로 진입한 즉시 manifest.json 파일이 존재해야 합니다. 아래의 트리 다이어그램 정렬 구조를 갖추고 작동 중인지 꼭 확인 바랍니다.

선택한 폴더/
├─ manifest.json
├─ popup.html
├─ guide-editor.html
└─ assets/

Q. 메뉴바 오른쪽 위에서 프로그램 실행 로고를 찾을 수 없습니다.

크롬 우측 최상단의 퍼즐 무늬 기호 아이콘을 가볍게 누르신 다음에 하부 도구 목록에서 ClickGuide Local 항목 오른쪽에 활성화되는 '고정하기 단추'가 파랗게 체크되어 고정이 활성화되었는지 한 번 더 점검해 주세요.

Q. 브라우저의 내부 설정 화면(chrome://...)에서는 레코딩 기능이 전혀 안 움직입니다.

이것은 구글 크롬 브라우저가 제공하는 원천적인 보안 프레임워크 정책 때문입니다. 악성 도구의 조작을 원천 봉쇄하고자 주소창의 시스템 영역 및 브라우저 내부 속성 탭 공간 등은 일체 캡처나 모니터링이 불가능하게 봉쇄되어 있습니다. 일상의 웹 브라우징 구역이나 구글 문서도구, 그리고 사내 업무 인트라넷 포탈 등 사적/공적인 실제 인터넷 탭 공간에서는 아무런 지장 없이 완벽하게 잘 기능합니다.

Q. 로컬에 깔린 패키지 프로그램(예: 엑셀이나 아래한글, 설치형 ERP) 화면도 자동 캡처가 되나요?

ClickGuide Local은 브라우저 탭 공간 내에서 실행되는 웹 환경 맞춤용 확장 기능입니다. 그러므로 오직 크롬 브라우저가 열어두고 있는 탭 내부 화면과 컴포넌트 이벤트 구조만 인지할 수 있습니다. 엑셀 기본 패키지 프로그램, 일반적인 로컬 오피스 소프트웨어 등 웹을 통하지 않는 독립 구동 프로그램 화면까지 마커 추적 및 자동 캡처를 수행하려면, 브라우저용 확장 기능이 아닌 운영체제(OS) 환경에 직접 기동시키는 독립 실행 형태의 상용 매뉴얼 작성 툴을 별개로 탑재하셔야 합니다.

Q. 구동 중인 웹 인트라넷의 아이콘이나 버튼들의 이력이 감지되지 않고 누락됩니다.

새로 보강된 패키지 릴리스 버전에서는 복잡한 ERP 내 특이 아이콘형 요소, 동적인 iframe 버튼 감지 로직이 아주 정교하게 보강되었습니다. 만일 기존 구버전 사용 중 확장 프로그램 내 특정 리스너 권한 구성이 바뀌어 정상 반응하지 않는 상태라면, 이전의 확장 리스트를 아예 삭제하신 후 신규 ZIP 파일을 내려받아 새롭게 로드하시는 방향이 가장 매끄러운 오류 극복책이 될 수 있습니다.

7. 개인 정보의 수집 및 안전한 취급 범위

ClickGuide Local의 기록 수집 사이클은 브라우저 오른쪽 상단 툴바 메뉴에서 사용자가 직접 녹화 시작 버튼을 활성화하여 기동시킨 때부터 끝맺음 종료 버튼을 가차 없이 입력한 시간까지로 엄격하게 한정됩니다.

프로그램 사용 시 기록에 저장되는 요소 정보들은 다음과 같습니다.

• 마우스를 직접 누르고 조작한 버튼의 좌표 정보
• 이동한 당시 대상 페이지의 제목 정보
• 현재 구동 주소의 상세 경로(URL) 정보
• 상호작용한 컴포넌트의 클릭 텍스트 문자열
• 마커 핀 번호가 매겨진 클릭 시점의 화면 스냅샷 이미지

모아진 위 정보 조각들은 오로지 사용자 본인 브라우저 영역의 로컬 디스크 격리 저장 공간인 IndexedDB에만 고스란히 봉쇄 보관되며, 별도의 불순한 외부 공용 서버로 무단 유출하거나 불특정 대역으로 내보내지 않으니 사내 인트라넷 공간이나 회사 전용 장비에서도 완전히 신뢰하시고 무설치로 유용하게 쓰실 수 있습니다.

[주의] 다만 사용자가 직접 AI 도움 서비스를 수동 승인한 후 자신의 사설 API 연동 키 값을 지정하여 문맥 작성을 돕게 하는 구간의 경우에는, 가이드 단계의 해당 스냅샷, 구동 주소, 조작 텍스트 등이 선택한 외부 AI 처리 모델(OpenAI, Gemini, Claude 등)의 보안 API로 전달되어 소모될 수 있습니다. 또한 완성 빌드본 형태로 출력할 PDF 문서 내에 웹 페이지 주소와 실제 스크린 이미지가 담기는 특성상, 일시적으로 기밀 암호가 노출되는 주요 보안 화면은 사전에 녹화 대상 구간에서 제외하신 뒤 매뉴얼 제작을 이행하시길 적극 권유 드립니다.

8. 기업 내부 안전 배포용 필수 보안 지침

기업 내부 인트라넷 공간에서 매뉴얼 메이커 배포 작업을 지휘하는 전사 보안 담당자 및 IT 관리자분들을 위해, ClickGuide Local은 안전을 고려한 완벽한 차단 옵션을 친절하게 안내하고 있습니다.

• 정기적인 로컬 데이터 삭제: 브라우저 내부 스토리지의 보안 잔존 요소를 없애기 위해, 사용 완료된 편집 창에서 '현재 가이드 삭제'나 '모든 로컬 기록 지우기' 기능을 주도적으로 실행하여 보존 데이터를 상시 정리해 주는 문화를 정착시켜 주세요.
• AI 기능의 소스 차단 빌드: 기업 내 보안 데이터 유실의 가능성을 원치 않으시면, 사내용 일괄 프리빌딩 구성 시 AI 자동 변수 값을 비활성화 상태(VITE_ALLOW_EXTERNAL_AI=false)로 확정하여 완성된 고유 사내 빌드를 구성해 전달하실 것을 깊이 권장합니다. 만에 하나 수동으로 승인하여 쓸 때라도 보안 서약을 통해 소량의 개인정보라도 실린 페이지에서는 API 가동 및 기재를 삼가도록 유도해 주십시오.
• 프레임 주입 세션 보안: iframe 내부 상호 작용 보정을 위해 백그라운드 스크립트가 로딩될 때 기본으로 content_scripts 규격을 돌려 HTTP/HTTPS 영역에 사전 탑재될 수는 있으나, 실제 레코딩과 화면 스냅 이미지 저장은 유저가 클릭 버튼을 수동으로 조작해 직접 구동한 그 한정적 시퀀스 내에서만 충실하게 활성화됩니다. 사내 도메인 락(Lock)을 보다 강하게 묶고 싶으시다면, 배포 사양이 설정된 manifest 파일의 host_permissions 설정 공간과 matches 배열 규격에 우리 회사가 쓰는 전용 ERP 주소들만 엄중히 하드코딩해 주십시오.
• 외부 노출 통제: 로컬 로딩 가동 시 개발 환경을 불특정 망에 전역 개방(예: 0.0.0.0 강제 바인딩)하는 행위를 금하고, 오로지 완성된 컴파일 정적 데이터인 dist 결과 빌드본만 사내 컴퓨터에 정상 교부하여 연동하십시오.
• 정적 민감정보 보호 식별자 수동 지정: 사내 고유 웹 솔루션을 디자인하거나 템플릿 마크업을 건드릴 시, 다음과 같이 민감 영역 제외 전용 수동 attribute 코드 태그를 HTML에 탑재해 주시면 더더욱 견고한 보안 매뉴얼이 수립됩니다.

<!-- 해당 요소 클릭 무시 --> <button data-clickguide-ignore>기록 제외 버튼</button> <!-- 텍스트 수집 제외 및 캡처 시 자동 블러(흐림) 처리 --> <div data-clickguide-redact>고객 비밀번호 및 마스킹 영역</div>

위 속성이 지정된 공간이나 하위 컨트롤 요소는 클릭 이력이 완전히 남지 않으며, 비밀번호 형태의 기재 창도 텍스트 확보 없이 즉각적으로 모자이크식 마스킹 처리가 알아서 매끄럽게 개입됩니다.

9. ClickGuide Local 전체 기능 리스트

• 클릭 액션 시퀀스의 빈틈없는 연속 수집 매뉴얼 빌드
• 사용자 클릭 지점의 정확한 순간 스냅샷 추출
• 편집기를 통한 단계별 문구 커스텀 보완 및 타이틀 수정
• 매뉴얼 세부 순서의 정밀 제어 및 필요 없는 카드 삭제 기능
• 가이드용 핵심 구역을 위한 크롭 자르기 캔버스 연계
• 기업 환경 맞춤형 ERP iframe 대응 수집 패치 기능 탑재
• 비밀번호 수집 차단 및 핵심 구역의 마스킹 방어 적용
• 외부 AI 텍스트 생성 전 안전 서약 확인 스텝 지원

10. 직접 빌드하고 배포하는 개발자 가이드

개발자 소스 환경을 활용해 로컬 장비에서 직접 변환 컴파일을 실행하려는 경우, 기본 환경 요구 사항으로 Node.js 버전 20 이상 및 npm 패키지 매니저 10 이상이 필수 구비되어 있어야 합니다.

# 패키지 의존성 설치 및 기업 빌드 npm install npm run build

보안 규범 준수를 위해 AI 전용 인터페이스 설정을 확실히 막고 깨끗하게 사내 패키지 빌드를 완료하고 싶을 때 쓰는 CLI 구동 예시는 아래와 같습니다.

# Windows Powershell 환경 AI 원천 차단 전용 빌드 명령 $env:VITE_ALLOW_EXTERNAL_AI="false" npm.cmd run build # macOS 및 리눅스(Ubuntu) 쉘 환경 AI 차단 빌드 명령 VITE_ALLOW_EXTERNAL_AI=false npm run build

빌드가 수월하게 마감되면 결과물로 떨어진 dist 디렉토리 파일을 확보하여 크롬 제어창의 폴더 선택지로 불러와 결합해 주시면 안전한 빌딩 패키징 사용이 완료됩니다.

11. 프로젝트 저장소 아키텍처 및 라이선스

프로젝트 내부의 핵심 구성 요소들을 설명한 상세 리소스 아키텍처 구조도입니다.

public/manifest.json - 확장 프로그램 설정 메타 파일 src/background/service-worker.ts - 백그라운드 런타임 및 스크린샷 렌더러 src/content/recorder.ts - 이벤트 기록 유저 스크립트 src/popup/main.tsx - 컨트롤 팝업 UI 화면 컴포넌트 src/editor/main.tsx - 가이드 데이터 최종 정리 에디터 뷰 src/shared/db.ts - 로컬 브라우저 IndexedDB 모듈 src/shared/exportPdf.ts - 가이드 전용 PDF 도큐먼트 출력 엔진 src/shared/markerCanvas.ts - 화면 캡처 내에 빨간 마커 렌더링 라이브러리 src/shared/stepText.ts - 단계 설명 초기 구조 생성 유틸리티

* 본 소스코드 및 서비스는 MIT License 오픈 라이선스 규격을 충실히 적용하여 운영됩니다.

출처 및 참고 저장소 주소: https://github.com/koul777/clickguide-local-private