649 lines
20 KiB
HTML
649 lines
20 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ko">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>내차는언제타냐 통합확장기 매뉴얼</title>
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
min-height: 100vh;
|
||
color: #333;
|
||
}
|
||
|
||
.container {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding: 20px;
|
||
}
|
||
|
||
.header {
|
||
text-align: center;
|
||
color: white;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.header h1 {
|
||
font-size: 2.5rem;
|
||
margin-bottom: 10px;
|
||
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
|
||
}
|
||
|
||
.header p {
|
||
font-size: 1.2rem;
|
||
opacity: 0.9;
|
||
}
|
||
|
||
.tabs-container {
|
||
background: white;
|
||
border-radius: 15px;
|
||
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.tabs {
|
||
display: flex;
|
||
background: #f8f9fa;
|
||
border-bottom: 1px solid #dee2e6;
|
||
overflow-x: auto;
|
||
}
|
||
|
||
.tab {
|
||
padding: 15px 25px;
|
||
cursor: pointer;
|
||
border: none;
|
||
background: none;
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
color: #6c757d;
|
||
transition: all 0.3s ease;
|
||
white-space: nowrap;
|
||
min-width: 150px;
|
||
}
|
||
|
||
.tab:hover {
|
||
background: #e9ecef;
|
||
color: #495057;
|
||
}
|
||
|
||
.tab.active {
|
||
background: #007bff;
|
||
color: white;
|
||
position: relative;
|
||
}
|
||
|
||
.tab.active::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 3px;
|
||
background: #0056b3;
|
||
}
|
||
|
||
.tab-content {
|
||
display: none;
|
||
padding: 30px;
|
||
min-height: 500px;
|
||
}
|
||
|
||
.tab-content.active {
|
||
display: block;
|
||
animation: fadeIn 0.3s ease;
|
||
}
|
||
|
||
@keyframes fadeIn {
|
||
from { opacity: 0; transform: translateY(10px); }
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
|
||
.feature-card {
|
||
background: #f8f9fa;
|
||
border-radius: 10px;
|
||
padding: 25px;
|
||
margin-bottom: 20px;
|
||
border-left: 5px solid #007bff;
|
||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||
}
|
||
|
||
.feature-card:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.feature-card h3 {
|
||
color: #007bff;
|
||
margin-bottom: 15px;
|
||
font-size: 1.4rem;
|
||
}
|
||
|
||
.feature-card p {
|
||
line-height: 1.6;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.feature-list {
|
||
list-style: none;
|
||
padding-left: 0;
|
||
}
|
||
|
||
.feature-list li {
|
||
padding: 8px 0;
|
||
border-bottom: 1px solid #e9ecef;
|
||
position: relative;
|
||
padding-left: 25px;
|
||
}
|
||
|
||
.feature-list li:before {
|
||
content: '✓';
|
||
position: absolute;
|
||
left: 0;
|
||
color: #28a745;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.feature-list li:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.screenshot {
|
||
max-width: 100%;
|
||
border-radius: 8px;
|
||
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
|
||
margin: 15px 0;
|
||
}
|
||
|
||
.btn-group {
|
||
display: flex;
|
||
gap: 10px;
|
||
margin-top: 20px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.btn {
|
||
padding: 10px 20px;
|
||
border: none;
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
transition: all 0.2s ease;
|
||
text-decoration: none;
|
||
display: inline-block;
|
||
text-align: center;
|
||
}
|
||
|
||
.btn-primary {
|
||
background: #007bff;
|
||
color: white;
|
||
}
|
||
|
||
.btn-primary:hover {
|
||
background: #0056b3;
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
.btn-secondary {
|
||
background: #6c757d;
|
||
color: white;
|
||
}
|
||
|
||
.btn-secondary:hover {
|
||
background: #545b62;
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
.alert {
|
||
padding: 15px;
|
||
border-radius: 6px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.alert-info {
|
||
background: #d1ecf1;
|
||
border: 1px solid #bee5eb;
|
||
color: #0c5460;
|
||
}
|
||
|
||
.alert-warning {
|
||
background: #fff3cd;
|
||
border: 1px solid #ffeaa7;
|
||
color: #856404;
|
||
}
|
||
|
||
.grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||
gap: 20px;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.version-info {
|
||
background: #e9ecef;
|
||
padding: 15px;
|
||
border-radius: 8px;
|
||
margin-top: 20px;
|
||
text-align: center;
|
||
}
|
||
|
||
.keyboard-shortcut {
|
||
background: #f8f9fa;
|
||
border: 1px solid #dee2e6;
|
||
border-radius: 4px;
|
||
padding: 5px 10px;
|
||
font-family: monospace;
|
||
font-size: 0.9rem;
|
||
margin: 0 5px;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.container {
|
||
padding: 10px;
|
||
}
|
||
|
||
.header h1 {
|
||
font-size: 2rem;
|
||
}
|
||
|
||
.tab {
|
||
padding: 12px 15px;
|
||
font-size: 14px;
|
||
min-width: 120px;
|
||
}
|
||
|
||
.tab-content {
|
||
padding: 20px;
|
||
}
|
||
|
||
.feature-card {
|
||
padding: 20px;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<div class="header">
|
||
<h1>📚 내차는언제타냐 통합확장기</h1>
|
||
<p>매뉴얼 및 기능 가이드</p>
|
||
</div>
|
||
|
||
<div class="tabs-container">
|
||
<div class="tabs">
|
||
<button class="tab active" data-tab="overview">🏠 개요</button>
|
||
<button class="tab" data-tab="trademark">🔍 지재권검색</button>
|
||
<button class="tab" data-tab="translation">🌐 멀티번역</button>
|
||
<button class="tab" data-tab="timer">⏰ 시간관리</button>
|
||
<button class="tab" data-tab="banned-words">🚫 금지어</button>
|
||
<button class="tab" data-tab="sayings">💬 타냐대장경</button>
|
||
<button class="tab" data-tab="settings">⚙️ 설정</button>
|
||
</div>
|
||
|
||
<div class="tab-content active" id="overview">
|
||
<h2>🏠 확장 프로그램 개요</h2>
|
||
|
||
<div class="alert alert-info">
|
||
<strong>환영합니다!</strong> 내차는언제타냐 통합확장기는 지재권검색, 멀티번역, 시간관리 등 다양한 기능을 제공하는 올인원 도구입니다.
|
||
</div>
|
||
|
||
<div class="alert alert-warning">
|
||
<strong>주의사항:</strong> 지재권검색 및 멀티번역은 API 호출량을 소모합니다. 회원등급에 따라 일일 사용량이 제한됩니다.
|
||
</div>
|
||
|
||
<div class="grid">
|
||
<div class="feature-card">
|
||
<h3>🔍 지재권검색 기능</h3>
|
||
<p>키프리스(KIPRIS) 지재권검색을 자동화하여 빠르고 정확한 상표조사를 지원합니다.</p>
|
||
<ul class="feature-list">
|
||
<li>검색할 단어를 드래그 후 단축키(컨트롤+쉬프트+S) 입력</li>
|
||
<li>또는 우클릭으로 해당 지재권을 Search하고 결과 수집</li>
|
||
<li>현재 활성된 상태의 결과만 필터링</li>
|
||
<li>해당하는 상품군을 바로 확인할 수 있음</li>
|
||
<li>내 금지어목록에 바로 적용 및 편집알바생과 연동</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<h3>🌐 멀티번역 기능</h3>
|
||
<p>여러 언어로 동시 번역하여 애매한 중국어를 이해할수 있도록 지원합니다.</p>
|
||
<ul class="feature-list">
|
||
<li><strong>멀티번역:</strong> Ctrl+Shift+E</li>
|
||
<li>또는 우클릭으로 해당 문장을 Translate하고 결과 수집</li>
|
||
<li>무료로 구글번역과 메모리 번역지원</li>
|
||
<li>일정등급 이상은 딥러닝 번역 DeepL 사용가능</li>
|
||
<li>챗GPT로 의역 지원가능 (Gemini는 현재 점검 중)</li>
|
||
<li>원클릭으로 많은 엔진의 결과를 확인할수 있음</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<h3>🌐 원키번역 기능</h3>
|
||
<p>구글 기계번역으로 매우 빠르게 번역할수 있습니다.</p>
|
||
<ul class="feature-list">
|
||
<li>번역할 문장이나 단어를 드래그 후 단축키(컨트롤+쉬프트+Z) 입력</li>
|
||
<li>웹페이지에서 바로 한글과 중국어를 빠르게 번역</li>
|
||
<li>위챗등의 대화에서 한글 입력 후 선택 및 단축키로 바로 번역</li>
|
||
<li>웹페이지에서 중국어를 드래그 후 단축키로 바로 번역 결과 확인</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<h3>⏰ 시간관리 기능</h3>
|
||
<p>포모도로 기법 기반의 시간관리로 생산성을 극대화합니다.</p>
|
||
<ul class="feature-list">
|
||
<li>자동 작업/휴식 타이머</li>
|
||
<li>휴식시간 추천 활동</li>
|
||
<li>실시간 타이머 알림</li>
|
||
<li>개인화된 시간 설정</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<h3>🚫 금지어 관리</h3>
|
||
<p>지재권검색 시 제외할 키워드를 효율적으로 관리합니다.</p>
|
||
<ul class="feature-list">
|
||
<li>개인별 금지어 목록</li>
|
||
<li>실시간 금지어 추가/삭제</li>
|
||
<li>금지어 등급관리 및 검색결과 확인</li>
|
||
<li>수동금지어 등록 및 파생금지어 등록가능</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="version-info">
|
||
<strong>현재 버전:</strong> v1.0.0 | <strong>최종 업데이트:</strong> 2025년 6월
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tab-content" id="trademark">
|
||
<h2>🔍 지재권검색 사용법</h2>
|
||
|
||
<div class="alert alert-info">
|
||
키프리스(KIPRIS)에서 자동으로 지재권검색을 수행하고 결과를 정리해주는 기능입니다.
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<h3>1️⃣ 지재권검색 시작하기</h3>
|
||
<ul class="feature-list">
|
||
<li>검색하고 싶은 단어를 드래그 후 우클릭 - 지재권 검색 선택</li>
|
||
<li>검색하고 싶은 단어를 드래그 후 단축키(Search) - Ctrl + Shift + S</li>
|
||
<li>로그인 후 지재권검색 기능 활성화</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<h3>2️⃣ 검색 과정</h3>
|
||
<ul class="feature-list">
|
||
<li>해당단어를 키프리스에서 검색실행</li>
|
||
<li>검색 결과 유효한 권리상태만 필터링</li>
|
||
<li>지재권 해당하는 상품군 정리</li>
|
||
<li>실시간 진행상황 팝업 표시</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<h3>3️⃣ 결과 확인 및 추가</h3>
|
||
<ul class="feature-list">
|
||
<li>검색 완료 후 결과 요약 표시</li>
|
||
<li>검색결과를 내 금지어에 원클릭 등록가능</li>
|
||
<li>상표 이미지 및 상세정보 포함</li>
|
||
</ul>
|
||
</div>
|
||
<!--
|
||
<div class="alert alert-warning">
|
||
<strong>주의사항:</strong> 지재권검색은 API 호출량을 소모합니다. 회원등급에 따라 일일 사용량이 제한됩니다.
|
||
</div> -->
|
||
|
||
</div>
|
||
|
||
<div class="tab-content" id="translation">
|
||
<h2>🌐 멀티번역 사용법</h2>
|
||
|
||
<div class="alert alert-info">
|
||
하나의 텍스트나 문장을 여러 번역엔진으로 동시에 번역하여 번역기 마다 다른 애매한 내용들을 정리해줍니다.
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<h3>1️⃣ 번역 시작하기</h3>
|
||
<ul class="feature-list">
|
||
<li>번역할 텍스트를 드래그 후 우클릭 - 멀티번역 선택</li>
|
||
<li>번역할 텍스트를 드래그 후 단축키(Translate) - Ctrl + Shift + T</li>
|
||
<li>설정에서 선택한 엔진들로 번역</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<h3>2️⃣ 지원 엔진</h3>
|
||
<div class="grid">
|
||
<div>
|
||
<strong>무료 엔진:</strong>
|
||
<ul class="feature-list">
|
||
<li>구글 기계번역</li>
|
||
<li>myMemory 메모리 번역</li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<strong>프리미엄등급 엔진:</strong>
|
||
<ul class="feature-list">
|
||
<li>무료엔진</li>
|
||
<li>DeepL 딥러닝 번역</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<strong>VIP등급 엔진 - 의역 지원:</strong>
|
||
<ul class="feature-list">
|
||
<li>챗GPT 의역 번역</li>
|
||
<li>구글 제미나이 의역 번역</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<h3>3️⃣ 번역 결과 활용</h3>
|
||
<ul class="feature-list">
|
||
<li>실시간 번역 결과 확인</li>
|
||
<li>자연스러운 딥러닝 엔진인 Deepl 사용</li>
|
||
<li>맥락을 이해하고 현재 단어나 문장이 어떤의미인지 어떨때 쓰이는지 파악</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tab-content" id="timer">
|
||
<h2>⏰ 시간관리 기능</h2>
|
||
|
||
<div class="alert alert-info">
|
||
포모도로 기법을 활용한 자동 시간관리로 생산성을 향상시킵니다.
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<h3>1️⃣ 시간관리 설정</h3>
|
||
<ul class="feature-list">
|
||
<li>설정 페이지에서 "시간 알림" 활성화</li>
|
||
<li>작업 시간 설정 (기본: 60분)</li>
|
||
<li>휴식 시간 설정 (기본: 5분)</li>
|
||
<li>알림 방식 선택</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<h3>2️⃣ 자동 타이머 작동</h3>
|
||
<ul class="feature-list">
|
||
<li>로그인 시 자동으로 작업 타이머 시작</li>
|
||
<li>작업 시간 완료 시 휴식 모달 표시</li>
|
||
<li>휴식 시간 동안 추천 활동 제공</li>
|
||
<li>휴식 시간 동안 타냐대장경 제공</li>
|
||
<li>휴식 완료 후 자동으로 다음 작업 시작</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<h3>3️⃣ 휴식 시간 추천 활동</h3>
|
||
<div class="grid">
|
||
<div>
|
||
<strong>신체 활동:</strong>
|
||
<ul class="feature-list">
|
||
<li>가벼운 스트레칭</li>
|
||
<li>목과 어깨 마사지</li>
|
||
<li>잠깐 산책하기</li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<strong>정신 건강:</strong>
|
||
<ul class="feature-list">
|
||
<li>깊은 호흡 연습</li>
|
||
<li>간단한 명상</li>
|
||
<li>긍정적 생각하기</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<h3>4️⃣ 타이머 상태 확인</h3>
|
||
<ul class="feature-list">
|
||
<li>팝업에서 다음 휴식까지 남은 시간 확인</li>
|
||
<li>작업/휴식 사이클 진행상황 표시</li>
|
||
<li>일일 작업 시간 통계</li>
|
||
<li>생산성 향상 팁 제공</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tab-content" id="banned-words">
|
||
<h2>🚫 금지어 관리</h2>
|
||
|
||
<div class="alert alert-info">
|
||
상품편집시 지식재산권을 피하기 위해금지 키워드를 관리합니다.
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<h3>1️⃣ 금지어 추가하기</h3>
|
||
<ul class="feature-list">
|
||
<li>설정 페이지에서 "금지어 관리" 선택</li>
|
||
<li>새로운 금지어 입력</li>
|
||
<li>"추가" 버튼 클릭하여 저장</li>
|
||
<li>실시간으로 금지어 목록 업데이트</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<h3>2️⃣ 금지어 관리</h3>
|
||
<ul class="feature-list">
|
||
<li>기존 금지어 목록 확인</li>
|
||
<li>불필요한 금지어 삭제</li>
|
||
<li>금지어 등급변경</li>
|
||
<li>금지어 검색 및 필터링</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<h3>3️⃣ 금지어 적용</h3>
|
||
<ul class="feature-list">
|
||
<li>편집알바생과 연동된 금지어 목록</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="alert alert-warning">
|
||
<strong>팁:</strong> 자주 나타나는 불필요한 키워드들을 금지어로 등록하면 편집알바생의 효율성이 크게 향상됩니다.
|
||
</div>
|
||
|
||
<div class="btn-group">
|
||
<button class="btn btn-primary" onclick="openBannedWords()">🚫 금지어 관리</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tab-content" id="sayings">
|
||
<h2>💬 타냐대장경</h2>
|
||
|
||
<div class="alert alert-info">
|
||
업무에 도움이 되는 타냐센세의 대장경과 조언을 모아놓은 특별한 기능입니다.
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<h3>1️⃣ 타냐대장경이란?</h3>
|
||
<ul class="feature-list">
|
||
<li>업무 효율성을 높이는 대장경 모음</li>
|
||
<li>동기부여와 영감을 주는 메시지</li>
|
||
<li>관리자가 승인한 검증된 조언</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<h3>2️⃣ 사용 방법</h3>
|
||
<ul class="feature-list">
|
||
<li>팝업에서 "타냐대장경" 버튼 클릭</li>
|
||
<li>오늘의 대장경 확인</li>
|
||
<li>대장경 카테고리별 탐색</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<h3>3️⃣ 대장경 카테고리</h3>
|
||
<div class="grid">
|
||
<div>
|
||
<strong>업무 효율성:</strong>
|
||
<ul class="feature-list">
|
||
<li>시간 관리 조언</li>
|
||
<li>생산성 향상 팁</li>
|
||
<li>마켓의 로직변화관리</li>
|
||
<li>타냐센세의 계절별 조언</li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<strong>동기부여:</strong>
|
||
<ul class="feature-list">
|
||
<li>성공 마인드셋</li>
|
||
<li>도전 정신 격려</li>
|
||
<li>긍정적 사고방식</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tab-content" id="settings">
|
||
<h2>⚙️ 설정 가이드</h2>
|
||
|
||
<div class="alert alert-info">
|
||
확장 프로그램의 모든 기능을 개인 취향에 맞게 설정할 수 있습니다.
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<h3>1️⃣ 번역 설정</h3>
|
||
<ul class="feature-list">
|
||
<li>번역엔진 활성화</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<h3>2️⃣ 시간관리 설정</h3>
|
||
<ul class="feature-list">
|
||
<li>시간 알림 ON/OFF</li>
|
||
<li>작업 시간 설정 (분 단위)</li>
|
||
<li>휴식 시간 설정 (분 단위)</li>
|
||
<li>알림 방식 선택</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<h3>3️⃣ 찜 관리 설정</h3>
|
||
<ul class="feature-list">
|
||
<li>추후 업데이트</li>
|
||
<li>찜 품앗이</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="manual.js"></script>
|
||
</body>
|
||
</html> |