Skip to content

USER_GUIDE.md

Latest commit

 

History

History
77 lines (55 loc) · 4.22 KB

USER_GUIDE.md

File metadata and controls

77 lines (55 loc) · 4.22 KB

ClearGuide AI 사용자 가이드 (User Guide)

ClearGuide AI를 사용하여 웹사이트 이용 경험을 혁신하는 방법을 안내합니다.

1. 가이드 시나리오 만들기 (픽업 모드)

  1. 메뉴 열기: 확장 프로그램 팝업창에서 "가이드 만들기 (Pickup)" 버튼을 클릭합니다.
  2. 요소 선택: 웹 화면에서 가이드를 적용할 버튼, 입력창 위로 마우스를 올립니다. 파란색 하이라이트가 나타납니다.
  3. 스텝 추가: 원하는 요소를 클릭하면 관리자 창에 속성이 표시됩니다.
    • 해당 단계에서 사용자에게 보여줄 **설명(Message)**을 입력합니다.
    • "+ 스텝 추가": 마우스로 선택한 요소를 강조하는 단계를 만듭니다.
    • "📝 텍스트 전용": 요소를 선택하지 않고 화면 중앙에 안내 문구만 띄우는 단계를 만듭니다. (예: 주의사항 설명)
  4. 드래그 이동: 관리자 창이 화면을 가린다면 상단 바(⣿)를 잡고 상하좌우로 옮길 수 있습니다.
  5. 저장: 모든 단계를 마친 후 **"전체 저장"**을 클릭하고 시나리오 이름을 입력합니다.

2. 가이트 실행하기 (플레이 모드)

  1. 시나리오 선택: 팝업창을 열면 현재 사이트와 일치하는 가이드 목록이 상단에 나타납니다.
  2. 실행: 실행하려는 가이드의 재생(▶) 버튼을 누릅니다.
  3. 단계 진행:
    • 다음: Enter 키를 누르거나 화면 하단의 '다음' 버튼을 클릭합니다.
    • 이전: '이전' 버튼을 클릭하여 이전 단계로 돌아갑니다.
    • 수동 트리거(⚡): 강조된 위치를 시스템이 자동으로 클릭하게 하려면 번개 아이콘을 누릅니다.
  4. 종료: Esc 키를 누르거나 '✕' 버튼을 클릭합니다.

3. 플로팅 퀵스타트 (Quick-Start Bar)

  • 저장된 가이드가 있는 웹페이지에 접속하면 화면 상단 중앙에 "ClearGuide 가이드" 바가 나타납니다.
  • 가이드 실행: 바에 표시된 ▶ 가이드 이름 버튼을 클릭하면 즉시 첫 번째 단계부터 가이드가 시작됩니다.
  • 상세 보기: 🔍 스텝 상세 버튼을 누르면 해당 가이드의 전체 단계와 설명을 미리 확인할 수 있습니다.
  • 바 닫기: 가이드 바가 필요하지 않을 경우 우측의 × 버튼을 클릭하여 숨길 수 있습니다.

4. 페이지 간 이동 가이드

  • 가이드 도중 다음 단계가 다른 웹페이지인 경우, 프로그램이 자동으로 확인 메시지를 띄우거나 이동합니다.
  • 이동한 페이지가 로드되면 가이드는 자동으로 다음 단계를 찾아 재개됩니다.

4. 데이터 관리 (가져오기/내보내기)

  • 내보내기: 개별 시나리오 옆의 내보내기(📤) 버튼을 눌러 JSON 파일로 저장합니다.
  • 가져오기: 팝업창 하단의 "불러오기" 버튼을 통해 저장된 파일을 불러옵니다.
  • 초기화: 모든 가이드를 삭제하려면 설정의 "초기화" 버튼을 사용하세요.

ClearGuide AI와 함께 더 쉽고 명확한 웹 서핑을 즐겨보세요!

5. 웹사이트 연동 방법 (SDK Embedding)

익스텐션 없이 일반 사용자에게 가이드를 제공하려면 clearguide-player.js SDK를 웹사이트에 추가해야 합니다.

단계별 적용 가이드

  1. SDK 스크립트 삽입: clearguide-player.js 파일을 웹 서버에 업로드하고 HTML에 추가합니다.
  2. 초기화 및 실행: 페이지 로딩 시 SDK를 초기화하고 JSON 시나리오를 로드합니다.
<!-- 1. SDK 로드 -->
<script src="/path/to/clearguide-player.js"></script>

<script>
  // 2. SDK 초기화 (테마 색상 설정)
  ClearGuide.init({ accentColor: '#3b82f6', showDashboard: true });

  // 3. 시나리오 데이터 (익스텐션에서 만든 JSON)
  const myWorkflow = {
    id: "guide_001",
    name: "회원가입 가이드",
    steps: [ ... ] 
  };

  // 4. 가이드 퀵바 표시
  ClearGuide.showQuickBar([myWorkflow]);
</script>

Tip: showQuickBar 함수는 여러 개의 워크플로우를 배열로 받을 수 있어, 한 페이지에서 다양한 가이드를 제공할 수 있습니다.