<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>도움말 시스템</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<style>
body {
font-family: 'Noto Sans KR', sans-serif;
line-height: 1.6;
margin: 0;
padding: 20px;
background-color: #f5f5f5;
color: #333;
}
.container {
max-width: 1000px;
margin: 0 auto;
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
h1 {
text-align: center;
color: #2c3e50;
margin-bottom: 30px;
}
.search-box {
display: flex;
margin-bottom: 20px;
}
#search-input {
flex: 1;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px 0 0 4px;
font-size: 16px;
}
#search-btn {
padding: 10px 15px;
background-color: #3498db;
color: white;
border: none;
border-radius: 0 4px 4px 0;
cursor: pointer;
transition: background-color 0.3s;
}
#search-btn:hover {
background-color: #2980b9;
}
.help-nav {
display: flex;
margin-bottom: 20px;
}
.help-categories {
width: 250px;
border-right: 1px solid #ddd;
padding-right: 15px;
}
.category {
cursor: pointer;
padding: 8px 10px;
border-radius: 4px;
transition: background-color 0.3s;
}
.category:hover {
background-color: #f0f0f0;
}
.category.active {
background-color: #e6f2ff;
color: #3498db;
font-weight: bold;
}
.help-content {
flex: 1;
padding-left: 20px;
}
.topic {
display: none;
border-bottom: 1px solid #eee;
padding-bottom: 15px;
margin-bottom: 15px;
}
.topic h3 {
color: #2c3e50;
margin-bottom: 10px;
}
.topic.active {
display: block;
}
#search-results {
display: none;
}
.result-item {
cursor: pointer;
padding: 10px;
border-radius: 4px;
transition: background-color 0.3s;
margin-bottom: 10px;
}
.result-item:hover {
background-color: #f0f0f0;
}
.highlight {
background-color: #ffff99;
font-weight: bold;
}
.back-btn {
display: none;
padding: 8px 15px;
background-color: #3498db;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
margin-bottom: 15px;
}
.back-btn:hover {
background-color: #2980b9;
}
</style>
</head>
<body>
<div class="container">
<h1>도움말 시스템</h1>
<div class="search-box">
<input type="text" id="search-input" placeholder="도움말 검색...">
<button id="search-btn"><i class="fas fa-search"></i> 검색</button>
</div>
<button class="back-btn" id="back-to-help">도움말 목록으로 돌아가기</button>
<div id="search-results">
<h2>검색 결과</h2>
<div id="results-list"></div>
</div>
<div class="help-nav" id="help-content">
<div class="help-categories">
<h2>카테고리</h2>
<div class="category active" data-category="getting-started">시작하기</div>
<div class="category" data-category="account">계정 관리</div>
<div class="category" data-category="features">주요 기능</div>
<div class="category" data-category="troubleshooting">문제 해결</div>
</div>
<div class="help-content">
<!-- 시작하기 카테고리 -->
<div class="topic active" data-category="getting-started" id="intro">
<h3>프로그램 소개</h3>
<p>이 프로그램은 사용자가 쉽게 작업을 수행할 수 있도록 설계되었습니다. 주요 기능과 인터페이스에 대한 설명을 제공합니다.</p>
</div>
<div class="topic" data-category="getting-started" id="installation">
<h3>설치 방법</h3>
<p>프로그램을 설치하기 위한 단계별 지침을 제공합니다.</p>
<ol>
<li>웹사이트에서 설치 파일을 다운로드합니다.</li>
<li>다운로드한 파일을 실행합니다.</li>
<li>설치 마법사의 지시를 따릅니다.</li>
<li>설치가 완료되면 프로그램을 실행합니다.</li>
</ol>
</div>
<!-- 계정 관리 카테고리 -->
<div class="topic" data-category="account" id="create-account">
<h3>계정 생성</h3>
<p>새 계정을 만들기 위한 절차를 설명합니다.</p>
</div>
<div class="topic" data-category="account" id="login">
<h3>로그인</h3>
<p>프로그램에 로그인하는 방법을 설명합니다.</p>
</div>
<div class="topic" data-category="account" id="password">
<h3>비밀번호 재설정</h3>
<p>비밀번호를 잊어버렸을 때 재설정하는 방법을 안내합니다.</p>
</div>
<!-- 주요 기능 카테고리 -->
<div class="topic" data-category="features" id="feature1">
<h3>기능 1: 데이터 관리</h3>
<p>데이터를 효율적으로 관리하는 방법을 설명합니다.</p>
</div>
<div class="topic" data-category="features" id="feature2">
<h3>기능 2: 보고서 생성</h3>
<p>다양한 보고서를 생성하고 내보내는 방법을 안내합니다.</p>
</div>
<!-- 문제 해결 카테고리 -->
<div class="topic" data-category="troubleshooting" id="error-codes">
<h3>오류 코드 해석</h3>
<p>일반적인 오류 코드와 해결 방법을 제공합니다.</p>
</div>
<div class="topic" data-category="troubleshooting" id="connection">
<h3>연결 문제</h3>
<p>네트워크 연결 문제를 해결하는 방법을 안내합니다.</p>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
// 카테고리 클릭 이벤트
$('.category').click(function() {
// 활성화된 카테고리 변경
$('.category').removeClass('active');
$(this).addClass('active');
// 선택된 카테고리의 토픽만 보이게 설정
var category = $(this).data('category');
$('.topic').hide();
$('.topic[data-category="' + category + '"]').first().show();
});
// 검색 기능
$('#search-btn').click(performSearch);
$('#search-input').keypress(function(e) {
if(e.which == 13) { // Enter key
performSearch();
}
});
// 뒤로가기 버튼
$('#back-to-help').click(function() {
$('#search-results').hide();
$('#help-content').show();
$(this).hide();
});
function performSearch() {
var query = $('#search-input').val().toLowerCase();
if(query.trim() === '') return;
var results = [];
// 모든 토픽에서 검색
$('.topic').each(function() {
var topicTitle = $(this).find('h3').text();
var topicContent = $(this).text();
var topicId = $(this).attr('id');
if(topicTitle.toLowerCase().includes(query) ||
topicContent.toLowerCase().includes(query)) {
results.push({
id: topicId,
title: topicTitle,
content: $(this).find('p').first().text(),
category: $(this).data('category')
});
}
});
// 검색 결과 표시
displaySearchResults(results, query);
}
function displaySearchResults(results, query) {
var resultsList = $('#results-list');
resultsList.empty();
if(results.length === 0) {
resultsList.append('<p>검색 결과가 없습니다.</p>');
} else {
$.each(results, function(i, result) {
var resultItem = $('<div class="result-item" data-id="' + result.id + '" data-category="' + result.category + '">' +
'<h3>' + highlightText(result.title, query) + '</h3>' +
'<p>' + highlightText(result.content, query) + '</p>' +
'</div>');
resultsList.append(resultItem);
});
// 검색 결과 항목 클릭 이벤트
$('.result-item').click(function() {
var id = $(this).data('id');
var category = $(this).data('category');
// 해당 카테고리 활성화
$('.category').removeClass('active');
$('.category[data-category="' + category + '"]').addClass('active');
// 해당 토픽 보이기
$('.topic').hide();
$('#' + id).show();
// 검색 결과 숨기기, 도움말 내용 보이기
$('#search-results').hide();
$('#help-content').show();
});
}
// 도움말 내용 숨기고 검색 결과 표시
$('#help-content').hide();
$('#search-results').show();
$('#back-to-help').show();
}
function highlightText(text, query) {
if (!query) return text;
var regex = new RegExp('(' + query + ')', 'gi');
return text.replace(regex, '<span class="highlight">$1</span>');
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>도움말 시스템</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<style>
body {
font-family: 'Noto Sans KR', sans-serif;
line-height: 1.6;
margin: 0;
padding: 20px;
background-color: #f5f5f5;
color: #333;
}
.container {
max-width: 1000px;
margin: 0 auto;
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
h1 {
text-align: center;
color: #2c3e50;
margin-bottom: 30px;
}
.search-box {
display: flex;
margin-bottom: 20px;
position: relative;
}
#search-input {
flex: 1;
padding: 10px 40px 10px 15px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 16px;
}
#search-btn {
padding: 10px 15px;
background-color: #3498db;
color: white;
border: none;
border-radius: 0 4px 4px 0;
cursor: pointer;
transition: background-color 0.3s;
}
#search-btn:hover {
background-color: #2980b9;
}
.search-clear {
position: absolute;
right: 120px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: #999;
cursor: pointer;
font-size: 16px;
display: none;
}
.help-nav {
display: flex;
margin-bottom: 20px;
}
.help-categories {
width: 250px;
border-right: 1px solid #ddd;
padding-right: 15px;
}
.category {
cursor: pointer;
padding: 8px 10px;
border-radius: 4px;
transition: background-color 0.3s;
margin-bottom: 5px;
}
.category:hover {
background-color: #f0f0f0;
}
.category.active {
background-color: #e6f2ff;
color: #3498db;
font-weight: bold;
}
.help-content {
flex: 1;
padding-left: 20px;
}
.topic {
display: none;
border-bottom: 1px solid #eee;
padding-bottom: 15px;
margin-bottom: 15px;
}
.topic h3 {
color: #2c3e50;
margin-bottom: 10px;
}
.topic.active {
display: block;
}
#search-results {
display: none;
}
.result-item {
cursor: pointer;
padding: 10px;
border-radius: 4px;
transition: background-color 0.3s;
margin-bottom: 15px;
border-left: 3px solid #3498db;
background-color: #f9f9f9;
}
.result-item:hover {
background-color: #f0f0f0;
}
.highlight {
background-color: #ffff99;
font-weight: bold;
}
.back-btn {
display: none;
padding: 8px 15px;
background-color: #3498db;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
margin-bottom: 15px;
}
.back-btn:hover {
background-color: #2980b9;
}
.search-status {
margin-top: 10px;
font-style: italic;
color: #666;
}
.no-results {
text-align: center;
padding: 20px;
background-color: #f9f9f9;
border-radius: 4px;
margin-top: 20px;
}
.search-suggestion {
margin-top: 10px;
}
.search-suggestion span {
cursor: pointer;
color: #3498db;
margin-right: 10px;
text-decoration: underline;
}
.search-filters {
display: flex;
margin: 10px 0;
flex-wrap: wrap;
}
.search-filter {
background-color: #f0f0f0;
padding: 5px 10px;
border-radius: 15px;
margin-right: 10px;
margin-bottom: 5px;
font-size: 14px;
cursor: pointer;
transition: background-color 0.3s;
}
.search-filter:hover, .search-filter.active {
background-color: #3498db;
color: white;
}
.category-badge {
display: inline-block;
padding: 2px 8px;
background-color: #e6f2ff;
color: #3498db;
border-radius: 10px;
font-size: 12px;
margin-left: 10px;
}
.search-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}
.topic-content {
margin-top: 15px;
}
</style>
</head>
<body>
<div class="container">
<h1>도움말 시스템</h1>
<div class="search-box">
<input type="text" id="search-input" placeholder="도움말 검색...">
<button class="search-clear" id="clear-search"><i class="fas fa-times"></i></button>
<button id="search-btn"><i class="fas fa-search"></i> 검색</button>
</div>
<button class="back-btn" id="back-to-help">도움말 목록으로 돌아가기</button>
<div id="search-results">
<div class="search-info">
<h2>검색 결과</h2>
<div class="search-status" id="search-status"></div>
</div>
<div class="search-filters" id="search-filters">
<div class="search-filter active" data-filter="all">전체</div>
<div class="search-filter" data-filter="getting-started">시작하기</div>
<div class="search-filter" data-filter="account">계정 관리</div>
<div class="search-filter" data-filter="features">주요 기능</div>
<div class="search-filter" data-filter="troubleshooting">문제 해결</div>
</div>
<div id="results-list"></div>
<div class="search-suggestion" id="search-suggestion"></div>
</div>
<div class="help-nav" id="help-content">
<div class="help-categories">
<h2>카테고리</h2>
<div class="category active" data-category="getting-started">시작하기</div>
<div class="category" data-category="account">계정 관리</div>
<div class="category" data-category="features">주요 기능</div>
<div class="category" data-category="troubleshooting">문제 해결</div>
</div>
<div class="help-content">
<!-- 시작하기 카테고리 -->
<div class="topic active" data-category="getting-started" id="intro">
<h3>프로그램 소개</h3>
<div class="topic-content">
<p>이 프로그램은 사용자가 쉽게 작업을 수행할 수 있도록 설계되었습니다. 주요 기능과 인터페이스에 대한 설명을 제공합니다.</p>
<p>사용자 친화적인 인터페이스와 함께 다양한 기능을 탐색하고 활용할 수 있습니다. 이 도움말 시스템은 프로그램 사용 중에 발생할 수 있는 모든 질문에 대한 답변을 제공합니다.</p>
</div>
</div>
<div class="topic" data-category="getting-started" id="installation">
<h3>설치 방법</h3>
<div class="topic-content">
<p>프로그램을 설치하기 위한 단계별 지침을 제공합니다.</p>
<ol>
<li>웹사이트에서 설치 파일을 다운로드합니다.</li>
<li>다운로드한 파일을 실행합니다.</li>
<li>설치 마법사의 지시를 따릅니다.</li>
<li>설치가 완료되면 프로그램을 실행합니다.</li>
</ol>
<p>설치 중 문제가 발생하면 '문제 해결' 섹션을 참조하시기 바랍니다.</p>
</div>
</div>
<div class="topic" data-category="getting-started" id="system-requirements">
<h3>시스템 요구사항</h3>
<div class="topic-content">
<p>프로그램을 실행하기 위한 최소 시스템 요구사항입니다:</p>
<ul>
<li>운영체제: Windows 10 이상 / macOS 10.14 이상 / Linux (Ubuntu 18.04 이상)</li>
<li>프로세서: 2GHz 이상의 듀얼 코어 프로세서</li>
<li>메모리: 4GB RAM</li>
<li>저장공간: 500MB 이상의 여유 공간</li>
<li>인터넷 연결: 초기 설정 및 업데이트를 위한 인터넷 연결 필요</li>
</ul>
</div>
</div>
<!-- 계정 관리 카테고리 -->
<div class="topic" data-category="account" id="create-account">
<h3>계정 생성</h3>
<div class="topic-content">
<p>새 계정을 만들기 위한 절차를 설명합니다.</p>
<ol>
<li>프로그램 실행 후 '계정 생성' 버튼을 클릭합니다.</li>
<li>필요한 정보(이름, 이메일, 비밀번호)를 입력합니다.</li>
<li>이메일 인증을 완료합니다.</li>
<li>계정 설정을 확인하고 완료합니다.</li>
</ol>
<p>계정 생성 시 강력한 비밀번호를 사용하는 것을 권장합니다.</p>
</div>
</div>
<div class="topic" data-category="account" id="login">
<h3>로그인</h3>
<div class="topic-content">
<p>프로그램에 로그인하는 방법을 설명합니다.</p>
<ol>
<li>프로그램을 실행하면 로그인 화면이 표시됩니다.</li>
<li>등록된 이메일과 비밀번호를 입력합니다.</li>
<li>'로그인' 버튼을 클릭합니다.</li>
</ol>
<p>'자동 로그인' 옵션을 선택하면 다음 실행 시 자동으로 로그인됩니다. 공용 컴퓨터에서는 이 옵션을 사용하지 마세요.</p>
</div>
</div>
<div class="topic" data-category="account" id="password">
<h3>비밀번호 재설정</h3>
<div class="topic-content">
<p>비밀번호를 잊어버렸을 때 재설정하는 방법을 안내합니다.</p>
<ol>
<li>로그인 화면에서 '비밀번호 찾기' 링크를 클릭합니다.</li>
<li>등록된 이메일 주소를 입력합니다.</li>
<li>이메일로 전송된 링크를 통해 새 비밀번호를 설정합니다.</li>
</ol>
<p>비밀번호 재설정 이메일이 오지 않는 경우, 스팸 폴더를 확인하거나 지원팀에 문의하세요.</p>
</div>
</div>
<div class="topic" data-category="account" id="profile-settings">
<h3>프로필 설정</h3>
<div class="topic-content">
<p>사용자 프로필 정보를 업데이트하는 방법을 안내합니다.</p>
<ol>
<li>로그인 후 오른쪽 상단의 프로필 아이콘을 클릭합니다.</li>
<li>'설정' 또는 '프로필 관리'를 선택합니다.</li>
<li>개인 정보, 알림 설정, 테마 등을 변경할 수 있습니다.</li>
<li>'저장' 버튼을 클릭하여 변경사항을 적용합니다.</li>
</ol>
</div>
</div>
<!-- 주요 기능 카테고리 -->
<div class="topic" data-category="features" id="feature1">
<h3>기능 1: 데이터 관리</h3>
<div class="topic-content">
<p>데이터를 효율적으로 관리하는 방법을 설명합니다.</p>
<h4>데이터 추가</h4>
<ol>
<li>'데이터 관리' 메뉴에서 '새 데이터' 버튼을 클릭합니다.</li>
<li>필요한 정보를 입력하고 '저장' 버튼을 클릭합니다.</li>
</ol>
<h4>데이터 편집</h4>
<ol>
<li>목록에서 편집할 항목을 선택합니다.</li>
<li>'편집' 버튼을 클릭하거나 항목을 더블 클릭합니다.</li>
<li>정보를 수정하고 '저장' 버튼을 클릭합니다.</li>
</ol>
<h4>데이터 삭제</h4>
<ol>
<li>목록에서 삭제할 항목을 선택합니다.</li>
<li>'삭제' 버튼을 클릭합니다.</li>
<li>확인 대화 상자에서 '예'를 선택하여 삭제를 확인합니다.</li>
</ol>
<p>데이터는 자동으로 저장되지만, 중요한 변경 후에는 '백업' 기능을 사용하는 것이 좋습니다.</p>
</div>
</div>
<div class="topic" data-category="features" id="feature2">
<h3>기능 2: 보고서 생성</h3>
<div class="topic-content">
<p>다양한 보고서를 생성하고 내보내는 방법을 안내합니다.</p>
<h4>보고서 유형</h4>
<ul>
<li><strong>요약 보고서</strong>: 주요 데이터의 요약 정보를 보여줍니다.</li>
<li><strong>상세 보고서</strong>: 모든 데이터 항목에 대한 자세한 정보를 포함합니다.</li>
<li><strong>분석 보고서</strong>: 데이터 분석 결과와 그래프를 포함합니다.</li>
</ul>
<h4>보고서 생성 방법</h4>
<ol>
<li>'보고서' 메뉴를 선택합니다.</li>
<li>원하는 보고서 유형을 선택합니다.</li>
<li>필요한 매개변수(기간, 데이터 범위 등)를 설정합니다.</li>
<li>'생성' 버튼을 클릭합니다.</li>
</ol>
<h4>보고서 내보내기</h4>
<ol>
<li>생성된 보고서 화면에서 '내보내기' 버튼을 클릭합니다.</li>
<li>원하는 형식(PDF, Excel, CSV)을 선택합니다.</li>
<li>파일 이름과 저장 위치를 지정합니다.</li>
<li>'저장' 버튼을 클릭합니다.</li>
</ol>
</div>
</div>
<div class="topic" data-category="features" id="feature3">
<h3>기능 3: 자동화 기능</h3>
<div class="topic-content">
<p>반복적인 작업을 자동화하는 기능에 대해 설명합니다.</p>
<h4>자동화 설정</h4>
<ol>
<li>'설정' 메뉴에서 '자동화' 탭을 선택합니다.</li>
<li>'새 자동화' 버튼을 클릭합니다.</li>
<li>트리거(시간, 이벤트 등)와 수행할 작업을 설정합니다.</li>
<li>'저장' 버튼을 클릭하여 자동화를 활성화합니다.</li>
</ol>
<h4>자동화 템플릿</h4>
<p>자주 사용하는 자동화 설정을 템플릿으로 저장하고 재사용할 수 있습니다:</p>
<ol>
<li>자동화 설정 후 '템플릿으로 저장' 옵션을 선택합니다.</li>
<li>템플릿 이름을 지정하고 '저장'을 클릭합니다.</li>
<li>새 자동화 생성 시 '템플릿에서 불러오기'를 선택하여 사용합니다.</li>
</ol>
</div>
</div>
<!-- 문제 해결 카테고리 -->
<div class="topic" data-category="troubleshooting" id="error-codes">
<h3>오류 코드 해석</h3>
<div class="topic-content">
<p>일반적인 오류 코드와 해결 방법을 제공합니다.</p>
<table border="1" style="width: 100%; border-collapse: collapse;">
<tr style="background-color: #f2f2f2;">
<th style="padding: 8px; text-align: left;">오류 코드</th>
<th style="padding: 8px; text-align: left;">설명</th>
<th style="padding: 8px; text-align: left;">해결 방법</th>
</tr>
<tr>
<td style="padding: 8px;">ERR-001</td>
<td style="padding: 8px;">데이터베이스 연결 실패</td>
<td style="padding: 8px;">네트워크 연결을 확인하고 프로그램을 다시 시작하세요.</td>
</tr>
<tr>
<td style="padding: 8px;">ERR-002</td>
<td style="padding: 8px;">인증 오류</td>
<td style="padding: 8px;">로그아웃 후 다시 로그인하세요. 문제가 지속되면 비밀번호를 재설정하세요.</td>
</tr>
<tr>
<td style="padding: 8px;">ERR-003</td>
<td style="padding: 8px;">파일 접근 오류</td>
<td style="padding: 8px;">파일이 다른 프로그램에 의해 사용 중인지 확인하고, 권한 설정을 확인하세요.</td>
</tr>
<tr>
<td style="padding: 8px;">ERR-004</td>
<td style="padding: 8px;">메모리 부족</td>
<td style="padding: 8px;">다른 프로그램을 종료하고 다시 시도하세요.</td>
</tr>
</table>
</div>
</div>
<div class="topic" data-category="troubleshooting" id="connection">
<h3>연결 문제</h3>
<div class="topic-content">
<p>네트워크 연결 문제를 해결하는 방법을 안내합니다.</p>
<h4>기본 연결 문제 해결</h4>
<ol>
<li>인터넷 연결이 활성화되어 있는지 확인합니다.</li>
<li>방화벽 설정에서 프로그램이 차단되지 않았는지 확인합니다.</li>
<li>프로그램을 종료하고 다시 시작합니다.</li>
<li>컴퓨터를 재시작하고 문제가 해결되는지 확인합니다.</li>
</ol>
<h4>서버 연결 문제</h4>
<ol>
<li>'설정' 메뉴에서 '연결' 탭을 선택합니다.</li>
<li>'서버 테스트' 버튼을 클릭하여 서버 연결을 확인합니다.</li>
<li>서버 주소가 올바른지 확인합니다.</li>
<li>프록시 설정이 필요한 경우 올바르게 구성되어 있는지 확인합니다.</li>
</ol>
<p>지속적인 연결 문제가 발생하는 경우, 지원팀에 문의하세요.</p>
</div>
</div>
<div class="topic" data-category="troubleshooting" id="performance">
<h3>성능 최적화</h3>
<div class="topic-content">
<p>프로그램 성능을 향상시키기 위한 팁을 제공합니다.</p>
<h4>캐시 정리</h4>
<ol>
<li>'설정' 메뉴에서 '유지 관리' 탭을 선택합니다.</li>
<li>'캐시 정리' 버튼을 클릭합니다.</li>
<li>프로그램을 다시 시작합니다.</li>
</ol>
<h4>메모리 사용 최적화</h4>
<ol>
<li>사용하지 않는 기능을 비활성화합니다.</li>
<li>대용량 파일 작업 시 '메모리 최적화' 옵션을 활성화합니다.</li>
<li>정기적으로 프로그램을 다시 시작하여 메모리를 정리합니다.</li>
</ol>
<h4>하드웨어 요구사항 확인</h4>
<p>프로그램이 느리게 실행된다면 시스템 사양이 최소 요구사항을 충족하는지 확인하세요.</p>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
// 전역 변수
let helpTopics = {};
let categoryLabels = {
'getting-started': '시작하기',
'account': '계정 관리',
'features': '주요 기능',
'troubleshooting': '문제 해결'
};
let searchIndex = [];
let searchSuggestions = [
"설치", "로그인", "비밀번호", "계정", "오류",
"보고서", "데이터", "자동화", "성능", "연결"
];
// 초기화: 모든 도움말 토픽 정보 수집
function initHelpSystem() {
$('.topic').each(function() {
const id = $(this).attr('id');
const category = $(this).data('category');
const title = $(this).find('h3').text();
const content = $(this).text();
const keywords = extractKeywords(title + ' ' + content);
helpTopics[id] = {
id: id,
category: category,
title: title,
content: content,
keywords: keywords,
element: $(this)
};
// 검색 인덱스 구축
searchIndex.push({
id: id,
text: title + ' ' + content,
keywords: keywords,
category: category,
title: title
});
});
}
// 키워드 추출 (기본 구현)
function extractKeywords(text) {
// 텍스트에서 공통 단어 제외하고 단어 추출
const commonWords = ["그리고", "하지만", "또는", "그런", "이런", "저런", "이", "그", "저", "및", "등", "를", "을", "에", "의", "에서"];
let words = text.toLowerCase().split(/\s+/);
words = words.filter(word => word.length > 1 && !commonWords.includes(word));
return [...new Set(words)]; // 중복 제거
}
// 카테고리 클릭 이벤트
$('.category').click(function() {
// 활성화된 카테고리 변경
$('.category').removeClass('active');
$(this).addClass('active');
// 선택된 카테고리의 토픽만 보이게 설정
const category = $(this).data('category');
$('.topic').hide();
$(`.topic[data-category="${category}"]`).first().show().addClass('active');
});
// 검색 기능
$('#search-btn').click(performSearch);
$('#search-input').on('input', function() {
if ($(this).val().trim() !== '') {
$('.search-clear').show();
} else {
$('.search-clear').hide();
}
}).keypress(function(e) {
if(e.which == 13) { // Enter key
performSearch();
}
});
// 검색창 클리어 버튼
$('#clear-search').click(function() {
$('#search-input').val('').focus();
$(this).hide();
});
// 뒤로가기 버튼
$('#back-to-help').click(function() {
$('#search-results').hide();
$('#help-content').show();
$(this).hide();
// 검색 상태 초기화
$('.search-filter').removeClass('active');
$('.search-filter[data-filter="all"]').addClass('active');
});
// 검색 필터 클릭 이벤트
$('.search-filter').click(function() {
$('.search-filter').removeClass('active');
$(this).addClass('active');
filterSearchResults($(this).data('filter'));
});
// 검색 실행 함수
function performSearch() {
const query = $('#search-input').val().trim().toLowerCase();
if(query === '') return;
// 검색 결과 찾기
const results = searchTopics(query);
// 검색 결과 표시
displaySearchResults(results, query);
// 검색 기록 저장 (로컬 스토리지 이용)
saveSearchHistory(query);
// 추천 검색어 표시
showSearchSuggestions();
}
// 토픽 검색 함수
function searchTopics(query) {
if (!query) return [];
const results = [];
const queryWords = query.toLowerCase().split(/\s+/).filter(word => word.length > 1);
// 각 검색 인덱스 항목에 대해 점수 계산
searchIndex.forEach(item => {
let score = 0;
const text = item.text.toLowerCase();
// 제목에 정확히 일치하면 높은 점수
if (item.title.toLowerCase().includes(query)) {
score += 10;
}
// 전체 구문이 텍스트에 포함되어 있으면 점수 추가
if (text.includes(query)) {
score += 5;
}
// 각 단어별 매칭 점수 계산
queryWords.forEach(word => {
// 제목에 단어가 있으면 높은 점수
if (item.title.toLowerCase().includes(word)) {
score += 3;
}
// 키워드에 단어가 있으면 점수 추가
if (item.keywords.includes(word)) {
score += 2;
}
// 내용에 단어가 있으면 점수 추가
if (text.includes(word)) {
score += 1;
}
});
// 일정 점수 이상인 경우만 결과에 포함
if (score > 0) {
results.push({
id: item.id,
title: item.title,
category: item.category,
score: score,
matches: findMatches(text, query)
});
}
});
// 점수 기준 내림차순 정렬
return results.sort((a, b) => b.score - a.score);
}
// 텍스트에서 매칭되는 문맥 찾기
function findMatches(text, query) {
const matches = [];
const words = query.toLowerCase().split(/\s+/).filter(word => word.length > 1);
// 전체 쿼리 매칭
let index = text.toLowerCase().indexOf(query);
if (index !== -1) {
const start = Math.max(0, index - 30);
const end = Math.min(text.length, index + query.length + 30);
matches.push(text.substring(start, end).trim());
}
// 개별 단어 매칭
else if (words.length > 0) {
for (const word of words) {
index = text.toLowerCase().indexOf(word);
if (index !== -1) {
const start = Math.max(0, index - 20);
const end = Math.min(text.length, index + word.length + 20);
let snippet = text.substring(start, end).trim();
// 중복 방지
if (!matches.includes(snippet)) {
matches.push(snippet);
if (matches.length >= 2) break; // 최대 2개 매칭 문맥만 보여줌
}
}
}
}
return matches;
}
// 검색 결과 표시 함수
function displaySearchResults(results, query) {
const resultsList = $('#results-list');
resultsList.empty();
// 검색 상태 업데이트
$('#search-status').text(`${results.length}개의 결과가 있습니다.`);
if(results.length === 0) {
resultsList.append(`
<div class="no-results">
<p>"${query}"에 대한 검색 결과가 없습니다.</p>
<p>다른 검색어를 시도하거나 카테고리에서 직접 찾아보세요.</p>
</div>
`);
} else {
$.each(results, function(i, result) {
const topic = helpTopics[result.id];
const categoryLabel = categoryLabels[result.category];
let snippets = '';
if (result.matches && result.matches.length > 0) {
snippets = '<p class="result-context">' +
result.matches.map(match => '... ' + highlightText(match, query) + ' ...').join('<br>') +
'</p>';
}
const resultItem = $(`
<div class="result-item" data-id="${result.id}" data-category="${result.category}">
<h3>${highlightText(result.title, query)} <span class="category-badge">${categoryLabel}</span></h3>
${snippets}
</div>
`);
resultsList.append(resultItem);
});
// 검색 결과 항목 클릭 이벤트
$('.result-item').click(function() {
const id = $(this).data('id');
const category = $(this).data('category');
// 해당 카테고리 활성화
$('.category').removeClass('active');
$(`.category[data-category="${category}"]`).addClass('active');
// 모든 토픽 숨기기
$('.topic').removeClass('active').hide();
// 해당 토픽 보이기
$(`#${id}`).addClass('active').show();
// 검색 결과 숨기기, 도움말 내용 보이기
$('#search-results').hide();
$('#help-content').show();
});
}
// 도움말 내용 숨기고 검색 결과 표시
$('#help-content').hide();
$('#search-results').show();
$('#back-to-help').show();
}
// 검색 결과 필터링
function filterSearchResults(filter) {
if (filter === 'all') {
$('.result-item').show();
} else {
$('.result-item').hide();
$(`.result-item[data-category="${filter}"]`).show();
}
// 표시된 결과 개수 업데이트
const visibleCount = $('.result-item:visible').length;
$('#search-status').text(`${visibleCount}개의 결과가 표시되었습니다.`);
}
// 텍스트에서 검색어 하이라이트
function highlightText(text, query) {
if (!query) return text;
const words = query.toLowerCase().split(/\s+/).filter(word => word.length > 1);
let highlightedText = text;
// 전체 구문 하이라이트
const regex = new RegExp('(' + escapeRegExp(query) + ')', 'gi');
highlightedText = highlightedText.replace(regex, '<span class="highlight">$1</span>');
// 개별 단어 하이라이트 (전체 구문이 이미 하이라이트 되지 않은 경우)
words.forEach(word => {
const wordRegex = new RegExp('(' + escapeRegExp(word) + ')', 'gi');
highlightedText = highlightedText.replace(wordRegex, function(match) {
// 이미 하이라이트 태그 안에 있으면 변경하지 않음
if (match.indexOf('<span class="highlight">') !== -1) return match;
return '<span class="highlight">' + match + '</span>';
});
});
return highlightedText;
}
// 정규식 특수문자 이스케이프
function escapeRegExp(string) {
return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}
// 검색 기록 저장
function saveSearchHistory(query) {
let history = localStorage.getItem('searchHistory');
history = history ? JSON.parse(history) : [];
// 중복 방지 및 최근 검색어 앞으로
const index = history.indexOf(query);
if (index !== -1) {
history.splice(index, 1);
}
history.unshift(query);
// 최대 10개 저장
if (history.length > 10) {
history = history.slice(0, 10);
}
localStorage.setItem('searchHistory', JSON.stringify(history));
}
// 검색 추천어 표시
function showSearchSuggestions() {
const suggestionEl = $('#search-suggestion');
suggestionEl.empty();
// 최근 검색어 불러오기
let history = localStorage.getItem('searchHistory');
history = history ? JSON.parse(history) : [];
if (history.length > 0) {
suggestionEl.append('<p>최근 검색어: ');
for (let i = 0; i < Math.min(5, history.length); i++) {
suggestionEl.append(`<span class="suggestion-item">${history[i]}</span>`);
}
suggestionEl.append('</p>');
}
// 인기 검색어/추천 검색어
suggestionEl.append('<p>추천 검색어: ');
for (let i = 0; i < Math.min(5, searchSuggestions.length); i++) {
suggestionEl.append(`<span class="suggestion-item">${searchSuggestions[i]}</span>`);
}
suggestionEl.append('</p>');
// 추천 검색어 클릭 이벤트
$('.suggestion-item').click(function() {
$('#search-input').val($(this).text());
performSearch();
});
}
// 초기화
initHelpSystem();
});
</script>
</body>
</html>
